/* Bodek Ledger — app-specific rules only. Everything shared comes from /shared/bodek.css.
   Per the shared README: a rule belongs here unless more than one site needs it. */

/* ---- navbar project breadcrumb ---- */
.lg-projbar { min-width: 0; }
.lg-projname {
    font-weight: 600; color: var(--bd-text); text-decoration: none;
    max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lg-projname:hover { color: var(--bd-link); }

/* ---- status chips ---- */
.lg-chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .72rem; font-weight: 600; letter-spacing: .02em;
    padding: 3px 10px; border-radius: var(--bd-radius-pill);
    background: var(--bd-surface-sunken); color: var(--bd-muted);
    border: 1px solid var(--bd-border-soft); white-space: nowrap;
}
.lg-chip-active,   .lg-chip-paid     { background: rgba(25,135,84,.12);  color: #4ade80; border-color: rgba(25,135,84,.3); }
.lg-chip-on_hold,  .lg-chip-partial  { background: rgba(255,193,7,.12);  color: #fbbf24; border-color: rgba(255,193,7,.3); }
.lg-chip-overdue,  .lg-chip-void     { background: rgba(220,53,69,.12);  color: #fca5a5; border-color: rgba(220,53,69,.3); }
.lg-chip-complete, .lg-chip-open     { background: rgba(87,167,255,.12); color: var(--bd-brand); border-color: rgba(87,167,255,.3); }
[data-bs-theme="light"] .lg-chip-active,  [data-bs-theme="light"] .lg-chip-paid    { color: #157347; }
[data-bs-theme="light"] .lg-chip-on_hold, [data-bs-theme="light"] .lg-chip-partial { color: #a06800; }
[data-bs-theme="light"] .lg-chip-overdue, [data-bs-theme="light"] .lg-chip-void    { color: #bb2d3b; }

/* ---- money ---- */
.lg-money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-money-neg { color: #fca5a5; }
[data-bs-theme="light"] .lg-money-neg { color: #bb2d3b; }
.lg-money-lg { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }

/* ---- project cards ---- */
.lg-proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--bd-space-4); }
.lg-proj {
    display: flex; flex-direction: column; gap: 10px;
    background: var(--bd-surface); border: 1px solid var(--bd-border);
    border-radius: var(--bd-radius-md); padding: 18px 20px;
    text-decoration: none; color: inherit;
    transition: transform var(--bd-ease), border-color var(--bd-ease), box-shadow var(--bd-ease);
}
.lg-proj:hover { transform: translateY(-2px); border-color: rgba(87,167,255,.7); box-shadow: var(--bd-shadow); color: inherit; }
.lg-proj-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.lg-proj-icon {
    width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--bd-radius-sm);
    display: grid; place-items: center; font-size: 1.15rem;
    background: rgba(87,167,255,.12); color: var(--bd-brand);
}
.lg-proj-name { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; }
.lg-proj-meta { font-size: .85rem; color: var(--bd-muted); }
.lg-proj-stats { display: flex; gap: 18px; margin-top: 2px; }
.lg-proj-stat-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bd-muted); }

/* ---- template picker ---- */
.lg-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.lg-tpl { position: relative; }
.lg-tpl input { position: absolute; opacity: 0; pointer-events: none; }
.lg-tpl label {
    display: flex; flex-direction: column; gap: 5px; height: 100%; cursor: pointer;
    padding: 13px 15px; border-radius: var(--bd-radius-sm);
    border: 1px solid var(--bd-border); background: var(--bd-surface-sunken);
    transition: border-color var(--bd-ease), background var(--bd-ease);
}
.lg-tpl label:hover { border-color: rgba(87,167,255,.55); }
.lg-tpl input:checked + label { border-color: var(--bd-accent); background: rgba(13,110,253,.10); }
.lg-tpl input:focus-visible + label { outline: 2px solid var(--bd-accent); outline-offset: 2px; }
.lg-tpl-name { font-weight: 600; font-size: .92rem; }
.lg-tpl-desc { font-size: .78rem; color: var(--bd-muted); line-height: 1.45; }
.lg-tpl-count { font-size: .7rem; color: var(--bd-brand); font-weight: 600; }

/* ---- the slide-in action panel ---------------------------------------------
   Same feel as the admin email composer: an offcanvas pinned to the right with a
   drag-to-resize grip on its left edge. Ledger adds panel stacking and a drag-to-move
   header, which admin does not have. ------------------------------------------ */
.lg-panel { width: 620px; max-width: 96vw; display: flex; flex-direction: column; }
.lg-panel .offcanvas-body { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.lg-panel .offcanvas-header { flex: 0 0 auto; cursor: grab; user-select: none; }
.lg-panel.is-dragging .offcanvas-header { cursor: grabbing; }
.lg-panel-footer {
    flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
    padding: 12px 18px; border-top: 1px solid var(--bd-border);
}
@media (min-width: 992px) {
    .lg-panel .offcanvas-header, .lg-panel .offcanvas-body, .lg-panel-footer { padding-left: 24px; }
}
@media (max-width: 991px) {
    .lg-panel { width: 100% !important; max-width: 100% !important; height: 100dvh; }
    .lg-panel .offcanvas-header { cursor: default; }
    .lg-panel-footer { padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); }
}
.lg-resizer {
    position: absolute; left: 0; top: 0; bottom: 0; width: 12px; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    padding: 0; border: 0; background: transparent;
    cursor: ew-resize; touch-action: none; user-select: none;
}
.lg-resizer[hidden] { display: none !important; }
.lg-resizer::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--bd-border); transition: background-color var(--bd-ease);
}
.lg-resizer-grip {
    position: relative; width: 4px; height: 38px; border-radius: 3px;
    background: var(--bd-muted); opacity: .45;
    transition: opacity var(--bd-ease), background-color var(--bd-ease);
}
.lg-resizer:hover::before, .lg-resizer:focus-visible::before,
.lg-panel.is-resizing .lg-resizer::before { background: var(--bd-accent); }
.lg-resizer:hover .lg-resizer-grip, .lg-resizer:focus-visible .lg-resizer-grip,
.lg-panel.is-resizing .lg-resizer-grip { opacity: 1; background: var(--bd-accent); }
.lg-resizer:focus-visible { outline: 2px solid var(--bd-accent); outline-offset: -2px; }
body.lg-resizing { cursor: ew-resize !important; }
body.lg-resizing * { user-select: none !important; }

/* stacked panels step inward and deepen */
.lg-panel[data-depth="1"] { z-index: 1046; }
.lg-panel[data-depth="2"] { z-index: 1047; }
.lg-panel[data-depth="3"] { z-index: 1048; }

/* ---- forms inside panels ---- */
.lg-field { display: flex; flex-direction: column; gap: 5px; }
.lg-field > label { font-size: .85rem; font-weight: 500; color: var(--bd-muted); }
.lg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 575px) { .lg-row { grid-template-columns: 1fr; } }
.lg-panel .form-control, .lg-panel .form-select {
    border-radius: var(--bd-radius); padding: 11px 14px;
    background: rgba(125,140,160,.08); border: 1px solid var(--bd-input-border); color: var(--bd-input-color);
}
.lg-panel .form-control:focus, .lg-panel .form-select:focus {
    box-shadow: 0 0 0 3px rgba(13,110,253,.18); border-color: var(--bd-accent);
}

/* ---- misc ---- */
.lg-empty { text-align: center; padding: 56px 20px; }
.lg-empty .bi { font-size: 2.6rem; color: var(--bd-muted); display: block; margin-bottom: 12px; }
.lg-hero { background: radial-gradient(1200px 320px at 50% 0, rgba(87,167,255,.16), transparent); }