/**
 * Pivio app shell — sidebar layout, topbar, command palette, dashboard
 * and list components. Implements the approved Claude Design mockup
 * (Pivio CRM.dc.html). Loaded after theme.css.
 */

:root {
    --sh-sidebar: #1c2352;
    --sh-page: #f5f6f8;
    --sh-ink: #191b22;
    --sh-ink-2: #3a3d49;
    --sh-ink-3: #5b5e6b;
    --sh-mut: #7c7f8b;
    --sh-mut-2: #9a9da8;
    --sh-mut-3: #a3a6b0;
    --sh-line: #ededf1;
    --sh-line-2: #f0f0f3;
    --sh-line-3: #f4f4f6;
    --sh-border: #e2e3e8;
    --sh-navy: #232B6A;
    --sh-navy-h: #1b2153;
    --sh-orange: #FF8C3F;
    --sh-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}

body.pv-shell {
    background: var(--sh-page);
    color: var(--sh-ink);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    letter-spacing: normal;
}

body.pv-shell .pv-mono { font-family: 'JetBrains Mono', monospace; }

/* layout frame */
.pv-frame { display: flex; min-height: 100vh; }

/* ------------------------------------------------------------- sidebar */
.pv-sidebar {
    width: 256px;
    flex-shrink: 0;
    background: var(--sh-sidebar);
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 20px 14px;
    gap: 4px;
    z-index: 100;
}

.pv-sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 18px; }
.pv-sidebar-brand .pv-logo-chip {
    display: flex; align-items: center; background: #fff;
    border-radius: 9px; padding: 6px 12px;
}
.pv-sidebar-brand .pv-logo-chip img { display: block; }

.pv-collapse-btn {
    margin-left: auto; width: 30px; height: 30px; flex-shrink: 0;
    background: transparent; border: none; border-radius: 8px;
    color: rgba(255,255,255,.5); font-size: 15px;
    display: flex; align-items: center; justify-content: center;
}
.pv-collapse-btn:hover { background: rgba(255,255,255,.09); color: #fff; }
.pv-sidebar-brand .pv-logo-tag {
    margin-left: auto; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.45);
    border: 1px solid rgba(255,255,255,.18); border-radius: 6px; padding: 2px 6px;
}

.pv-sidebar-search {
    display: flex; align-items: center; gap: 9px; width: 100%;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10);
    border-radius: 10px; padding: 9px 11px; color: rgba(255,255,255,.62);
    font-size: 13.5px; font-weight: 500; margin-bottom: 12px; cursor: pointer;
}
.pv-sidebar-search:hover { background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); }
.pv-sidebar-search .pv-kbd {
    margin-left: auto; font-size: 11px; background: rgba(255,255,255,.1);
    border-radius: 5px; padding: 1px 6px; font-family: 'JetBrains Mono', monospace;
}

.pv-sidebar-label {
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255,255,255,.34); padding: 6px 12px 4px;
}

.pv-nav-item {
    position: relative; display: flex; align-items: center; gap: 11px; width: 100%;
    border: none; border-radius: 10px; padding: 9px 12px;
    font-size: 14px; font-weight: 600; text-align: left;
    background: transparent; color: rgba(255,255,255,.66);
}
.pv-nav-item:hover { background: rgba(255,255,255,.09); color: #fff; }
.pv-nav-item.active { background: rgba(255,255,255,.11); color: #fff; }
.pv-nav-item .pv-nav-bar {
    position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 20px; border-radius: 3px; background: var(--sh-orange); opacity: 0;
}
.pv-nav-item.active .pv-nav-bar { opacity: 1; }
.pv-nav-item i { font-size: 16px; width: 18px; }
.pv-nav-item .pv-nav-count {
    margin-left: auto; font-size: 11.5px; font-weight: 700;
    background: rgba(255,255,255,.1); color: rgba(255,255,255,.6);
    border-radius: 999px; padding: 1px 8px; min-width: 22px; text-align: center;
}
.pv-nav-item.active .pv-nav-count { background: var(--sh-orange); color: var(--sh-sidebar); }

.pv-sidebar-user {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: transparent; border: none; border-radius: 10px; padding: 8px 10px; text-align: left;
}
.pv-sidebar-user:hover { background: rgba(255,255,255,.07); }
.pv-sidebar-user .pv-user-avatar {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; background: var(--sh-navy);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px; border: 1px solid rgba(255,255,255,.15);
    overflow: hidden;
}
.pv-sidebar-user .pv-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pv-sidebar-user .pv-user-name {
    display: block; font-size: 13.5px; font-weight: 700; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv-sidebar-user .pv-user-sub {
    display: block; font-size: 11.5px; color: rgba(255,255,255,.5);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* -------------------------------------------------------------- topbar */
.pv-main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.pv-topbar {
    position: sticky; top: 0; z-index: 90;
    background: rgba(245, 246, 248, .82);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #e7e8ec;
    padding: 14px 30px;
    display: flex; align-items: center; gap: 18px;
}

.pv-crumb {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 600; color: #8a8d99; margin-bottom: 2px;
}
.pv-crumb i { font-size: 9px; }
.pv-crumb .pv-crumb-leaf { color: var(--sh-ink); }
.pv-page-title {
    margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.025em;
    color: var(--sh-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pv-topbar-search {
    margin-left: auto; display: flex; align-items: center; gap: 9px; min-width: 300px;
    background: #fff; border: 1px solid var(--sh-border); border-radius: 11px;
    padding: 9px 13px; color: #9a9da8; font-size: 13.5px; font-weight: 500;
    box-shadow: var(--sh-shadow); cursor: pointer;
}
.pv-topbar-search:hover { border-color: #c9cbd3; }
.pv-topbar-search .pv-kbd {
    margin-left: auto; font-size: 11px; background: #f1f2f5; color: #8a8d99;
    border-radius: 5px; padding: 1px 6px; font-family: 'JetBrains Mono', monospace;
}

.pv-btn-primary {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--sh-navy); color: #fff; border: none; border-radius: 11px;
    padding: 9px 15px; font-size: 13.5px; font-weight: 700;
    box-shadow: 0 1px 2px rgba(16,24,40,.08); cursor: pointer;
}
.pv-btn-primary:hover { background: var(--sh-navy-h); color: #fff; }

.pv-btn-quiet {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid var(--sh-border); border-radius: 10px;
    padding: 8px 13px; font-size: 13px; font-weight: 600; color: var(--sh-ink-2); cursor: pointer;
}
.pv-btn-quiet:hover { background: #fafafb; color: var(--sh-ink); }

.pv-main { flex: 1; padding: 26px 30px 60px; }

/* --------------------------------------------------------------- cards */
.pv-card {
    background: #fff; border: 1px solid var(--sh-line); border-radius: 15px;
    box-shadow: var(--sh-shadow); overflow: hidden;
}
.pv-card-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--sh-line-2);
    font-size: 14.5px; font-weight: 700; color: var(--sh-ink);
}
.pv-card-head .pv-head-link {
    background: transparent; border: none; font-size: 12.5px; font-weight: 600; color: #8a8d99;
}
.pv-card-head .pv-head-link:hover { color: var(--sh-ink); }

.pv-row {
    display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
    padding: 13px 20px; background: transparent; border: none;
    border-bottom: 1px solid var(--sh-line-3); color: var(--sh-ink);
}
a.pv-row:hover, button.pv-row:hover, div.pv-row:hover { background: #fafafb; color: var(--sh-ink); }
.pv-row .pv-row-title.stretched-link { color: var(--sh-ink); }
.pv-row:last-child { border-bottom: 0; }

.pv-row-title {
    display: block; font-size: 14px; font-weight: 600; color: var(--sh-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv-row-sub {
    display: block; font-size: 12px; color: var(--sh-mut-2); font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* pills / chips / avatars */
.pv-pill {
    display: inline-block; font-size: 11px; font-weight: 700;
    padding: 3px 9px; border-radius: 999px; line-height: 1.4; white-space: nowrap;
}
.pv-chip {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; border-radius: 8px;
}
.pv-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; border-radius: 7px; color: #fff; font-weight: 700;
}

/* --------------------------------------------------------------- toast */
#pv-toast-host {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.pv-toast {
    background: var(--pv-foreground);
    color: #fff;
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 8px 28px rgba(16, 24, 40, .24);
    animation: pvToastIn .2s cubic-bezier(.16, 1, .3, 1);
}

.pv-toast.is-error { background: #dc2626; }
.pv-toast.out { opacity: 0; transition: opacity .4s ease; }

@keyframes pvToastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------ customizable widget grid */
.pv-widgets {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    align-items: start;
}

.pv-widget { min-width: 0; }
.pv-widget.is-hidden { display: none; }
.pv-widget-bar { display: none; }

.pv-dash-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.pv-dash-actions .pv-dash-editing-actions { display: flex; gap: 8px; }

.pv-editing-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    border-radius: var(--pv-radius);
    padding: 11px 16px;
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 16px;
}

body.pv-dash-editing .pv-widget {
    border: 1px dashed #c2c7d4;
    border-radius: calc(var(--pv-radius) + 4px);
    padding: 10px;
    background: #fbfbfc;
}

body.pv-dash-editing .pv-widget.is-hidden { display: block; opacity: .45; }
body.pv-dash-editing .pv-widget.is-hidden .pv-widget-body { filter: grayscale(1); }

body.pv-dash-editing .pv-widget-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 4px 10px;
}

.pv-widget-handle { cursor: grab; color: var(--pv-muted-foreground); font-size: 16px; line-height: 1; }
.pv-widget-handle:active { cursor: grabbing; }

.pv-widget-name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--pv-subtle-foreground);
    display: flex;
    align-items: center;
    gap: 6px;
}

.pv-widget-toggle {
    margin-left: auto;
    background: #fff;
    border: 1px solid var(--pv-border);
    color: var(--pv-subtle-foreground);
    border-radius: var(--pv-radius-sm);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.pv-widget-toggle:hover { background: var(--pv-muted); color: var(--pv-foreground); }
.pv-widget-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pv-ring); }

body.pv-dash-editing .pv-widget-body { pointer-events: none; }

.pv-widget-ghost { opacity: .35; }
.pv-widget-drag { box-shadow: 0 12px 32px rgba(16, 24, 40, .16); }

@media (max-width: 991px) {
    .pv-widgets .pv-widget { grid-column: span 12 !important; }
}

/* ----------------------------------------------------------- dashboard */
.pv-greeting h2 { margin: 0 0 3px; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.pv-greeting p { margin: 0; font-size: 14px; color: var(--sh-mut); font-weight: 500; }

.pv-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 22px 0 20px; }
.pv-stat-card { background: #fff; border: 1px solid var(--sh-line); border-radius: 15px; padding: 17px 18px; box-shadow: var(--sh-shadow); }
.pv-stat-card .pv-stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pv-stat-card .pv-stat-label { font-size: 13px; font-weight: 600; color: var(--sh-mut); }
.pv-stat-card .pv-stat-ico {
    width: 32px; height: 32px; border-radius: 9px; display: flex;
    align-items: center; justify-content: center; font-size: 15px;
}
.pv-stat-card .pv-stat-val { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--sh-ink); }
.pv-stat-card .pv-stat-sub { font-size: 12px; font-weight: 600; color: var(--sh-mut-2); margin-top: 8px; }

.pv-grid-2 { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; margin-bottom: 16px; }

.pv-focus-check {
    width: 22px; height: 22px; flex-shrink: 0; border-radius: 7px;
    border: 1.5px solid #d6d7de; background: transparent;
    display: flex; align-items: center; justify-content: center; color: #c2c4cd;
    padding: 0; cursor: pointer;
}
.pv-focus-check:hover { border-color: #16a34a; color: #16a34a; }

.pv-progress-track { display: block; height: 7px; border-radius: 999px; background: var(--sh-line-2); overflow: hidden; }
.pv-progress-fill { display: block; height: 100%; border-radius: 999px; }

.pv-due { font-size: 12.5px; font-weight: 700; white-space: nowrap; }

/* ------------------------------------------------------- clients table */
.pv-table-grid { border-bottom: 1px solid var(--sh-line-3); }
.pv-table-grid:last-child { border-bottom: 0; }
.pv-thead {
    display: grid; gap: 14px; padding: 12px 22px; border-bottom: 1px solid var(--sh-line-2);
    font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sh-mut-2);
}
.pv-trow {
    display: grid; gap: 14px; align-items: center; width: 100%; text-align: left;
    padding: 14px 22px; background: transparent; border: none;
    border-bottom: 1px solid var(--sh-line-3); color: var(--sh-ink);
}
a.pv-trow:hover { background: #fafafb; color: var(--sh-ink); }
.pv-trow:last-child { border-bottom: 0; }

.pv-seg {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid var(--sh-border); border-radius: 10px; padding: 3px;
}
.pv-seg a, .pv-seg span.pv-seg-item { font-size: 13px; font-weight: 600; color: var(--sh-mut); padding: 5px 12px; border-radius: 7px; }
.pv-seg .active { font-weight: 700; color: #fff; background: var(--sh-navy); }

/* --------------------------------------------------------------- board */
.pv-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
.pv-board-col { background: #eff0f3; border-radius: 14px; padding: 10px; }
.pv-board-col-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 10px; }
.pv-board-col-head .pv-dot { width: 9px; height: 9px; border-radius: 999px; }
.pv-board-col-head .pv-col-label { font-size: 13.5px; font-weight: 700; color: var(--sh-ink-2); }
.pv-board-col-head .pv-col-count {
    margin-left: auto; font-size: 12px; font-weight: 700; color: var(--sh-mut-2);
    background: #fff; border-radius: 999px; padding: 1px 9px;
}
.pv-board-cards { display: flex; flex-direction: column; gap: 9px; min-height: 12px; }
.pv-board-card {
    display: block; width: 100%; text-align: left; background: #fff;
    border: 1px solid var(--sh-line); border-radius: 11px; padding: 12px 13px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04); color: var(--sh-ink); cursor: grab;
}
.pv-board-card:hover { box-shadow: 0 4px 12px rgba(16,24,40,.09); border-color: #e0e1e6; color: var(--sh-ink); }
.pv-board-card .pv-bc-title { display: block; font-size: 13.5px; font-weight: 600; color: var(--sh-ink); line-height: 1.35; margin-bottom: 9px; }
.pv-board-card .pv-bc-client { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--sh-mut-2); font-weight: 500; margin-bottom: 10px; }
.pv-board-card.sortable-ghost { opacity: .4; }

/* Confirms a card actually reached "Completed" on the server: a soft green
   wash that settles back to the card's normal colours. */
@keyframes pvCompleteFlash {
    0% {
        background: #fff;
        border-color: var(--sh-line);
        box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    }
    18% {
        background: #dcfce7;
        border-color: #86efac;
        box-shadow: 0 2px 12px rgba(34, 197, 94, .22);
    }
    45% {
        background: #dcfce7;
        border-color: #86efac;
        box-shadow: 0 2px 12px rgba(34, 197, 94, .22);
    }
    100% {
        background: #fff;
        border-color: var(--sh-line);
        box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    }
}
.pv-board-card.is-complete-flash {
    animation: pvCompleteFlash 1.3s cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
    .pv-board-card.is-complete-flash { animation-duration: .01ms; }
}

/* ------------------------------------------------------ command palette */
.pv-cmd-overlay {
    position: fixed; inset: 0; z-index: 1000; background: rgba(20,22,40,.42);
    backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center;
    padding-top: 12vh; animation: pvOvIn .15s ease;
}
.pv-cmd {
    width: min(600px, 92vw); background: #fff; border-radius: 16px;
    box-shadow: 0 24px 60px rgba(16,24,40,.35); overflow: hidden;
    animation: pvCmdIn .18s cubic-bezier(.2,.8,.2,1);
}
.pv-cmd-input-row { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--sh-line-2); }
.pv-cmd-input-row i { font-size: 16px; color: var(--sh-mut-2); }
.pv-cmd-input-row input {
    flex: 1; border: none; outline: none; font-family: inherit;
    font-size: 15.5px; font-weight: 500; color: var(--sh-ink); background: transparent;
}
.pv-cmd-results { max-height: 52vh; overflow-y: auto; padding: 8px; }
.pv-cmd-group-label {
    padding: 10px 12px 4px; font-size: 11px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--sh-mut-3);
}
.pv-cmd-item {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    background: transparent; border: none; border-radius: 10px; padding: 10px 12px;
    color: var(--sh-ink); cursor: pointer;
}
.pv-cmd-item:hover, .pv-cmd-item.focused { background: var(--sh-page); color: var(--sh-ink); }
.pv-cmd-item .pv-cmd-ico {
    width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.pv-cmd-empty { padding: 34px 20px; text-align: center; color: var(--sh-mut-2); }
.pv-cmd-foot {
    display: flex; align-items: center; gap: 16px; padding: 11px 18px;
    border-top: 1px solid var(--sh-line-2); background: #fafafb;
    font-size: 11.5px; color: var(--sh-mut-2); font-weight: 500;
}
.pv-cmd-foot .pv-kbd { font-family: 'JetBrains Mono', monospace; background: #eceef1; border-radius: 4px; padding: 1px 5px; }

@keyframes pvCmdIn { from { opacity: 0; transform: translateY(-10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes pvOvIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pvViewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pv-view { animation: pvViewIn .28s ease; }

/* ---------------------------------------------------- generic content */
body.pv-shell .breadcrumb { display: none; }
/*
 * The topbar owns the page title (its <h1> renders $this->title), so the
 * legacy per-view <h1> headings would duplicate it and are hidden here.
 * If you add a NEW view, don't render an <h1> at all — set $this->title
 * and let the topbar show it. This rule exists only for legacy views.
 */
body.pv-shell .pv-main h1 { display: none; }

body.pv-shell .card { border-color: var(--sh-line); border-radius: 15px; }
body.pv-shell .table-responsive { border-color: var(--sh-line); border-radius: 15px; }
body.pv-shell .btn-primary {
    --bs-btn-bg: var(--sh-navy);
    --bs-btn-border-color: var(--sh-navy);
    --bs-btn-hover-bg: var(--sh-navy-h);
    --bs-btn-hover-border-color: var(--sh-navy-h);
    border-radius: 10px;
}

/* create/update forms render as a centered card */
body.pv-shell .pv-main form.needs-validation {
    background: #fff;
    border: 1px solid var(--sh-line);
    border-radius: 15px;
    box-shadow: var(--sh-shadow);
    padding: 24px;
    max-width: 760px;
}

/* …except forms nested inside an existing card (e.g. task comments) */
body.pv-shell .pv-card form.needs-validation {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    max-width: none;
}

/* ----------------------------------------------------- collapsed rail */
@media (min-width: 992px) {
    .pv-sidebar { transition: width .18s ease, padding .18s ease; }

    body.pv-collapsed .pv-sidebar { width: 74px; padding: 20px 10px; }
    body.pv-collapsed .pv-hide-collapsed { display: none !important; }
    body.pv-collapsed .pv-sidebar-brand { justify-content: center; padding: 6px 0 14px; }
    body.pv-collapsed .pv-sidebar-brand .pv-logo-chip { display: none; }
    body.pv-collapsed .pv-collapse-btn { margin-left: 0; }
    body.pv-collapsed .pv-sidebar-search { justify-content: center; padding: 9px 0; }
    body.pv-collapsed .pv-sidebar-label { display: none; }
    body.pv-collapsed .pv-nav-item { justify-content: center; padding: 10px 0; }
    body.pv-collapsed .pv-nav-item .pv-nav-bar { left: -10px; }
    body.pv-collapsed .pv-nav-item i { width: auto; }
    body.pv-collapsed .pv-sidebar-user { justify-content: center; padding: 8px 0; }
}

/* ----------------------------------------------------------- pagination */
body.pv-shell .pagination { --bs-pagination-active-bg: var(--sh-navy); --bs-pagination-active-border-color: var(--sh-navy); }
body.pv-shell .pagination .page-link { color: var(--sh-ink-3); border-color: var(--sh-border); font-size: 13.5px; font-weight: 600; }
body.pv-shell .pagination .page-item.active .page-link { color: #fff; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 991px) {
    .pv-sidebar { position: fixed; left: -280px; transition: left .2s ease; }
    .pv-sidebar.open { left: 0; }
    .pv-topbar { padding: 12px 16px; }
    .pv-topbar-search { min-width: 0; flex: 1; }
    .pv-topbar-search span:not(.pv-kbd) { display: none; }
    .pv-main { padding: 18px 16px 50px; }
    .pv-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .pv-grid-2 { grid-template-columns: 1fr; }
    .pv-board { grid-template-columns: 1fr; }
    .pv-menu-toggle { display: inline-flex !important; }
}
.pv-menu-toggle { display: none; }

/* Drawer backdrop. The open sidebar covers the topbar toggle, so the scrim
   is the primary way back out — tapping anywhere beside the drawer closes it. */
.pv-scrim {
    position: fixed;
    inset: 0;
    z-index: 95;
    background: rgba(16, 18, 27, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.pv-scrim.show { opacity: 1; pointer-events: auto; }
body.pv-nav-open { overflow: hidden; }

@media (min-width: 992px) {
    .pv-scrim { display: none; }
}

/* ------------------------------------------------------------- phones */
@media (max-width: 767px) {
    /* Topbar: the breadcrumb duplicates the page title and pushed the search
       and New button into each other, so it steps aside on small screens. */
    .pv-topbar { gap: 10px; padding: 10px 14px; }
    .pv-crumb { display: none; }
    .pv-page-title { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pv-topbar-search {
        flex: 0 0 auto;
        margin-left: auto;
        width: 40px; height: 40px;
        justify-content: center;
        padding: 0;
    }
    /* Keyboard hints mean nothing on a touch device. */
    .pv-kbd { display: none !important; }
    .pv-cmd-foot span:not(:last-child) { display: none; }
    .pv-btn-primary.dropdown-toggle span { display: none; }
    .pv-btn-primary.dropdown-toggle { padding: 9px 12px; }
    .pv-btn-primary.dropdown-toggle::after { display: none; }

    .pv-main { padding: 16px 14px 44px; }

    /* Column headers are meaningless once rows stack. */
    .pv-thead { display: none !important; }

    /* Grid rows become stacked cards: identity on its own line, the remaining
       cells wrap beneath as meta, chevron pinned to the right. Overrides the
       per-view inline grid-template-columns, which would otherwise squeeze
       six columns into a phone and overlap the text. */
    .pv-trow {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 7px 14px;
        padding: 14px 40px 14px 15px;
        position: relative;
    }
    .pv-trow > * { min-width: 0; }
    .pv-trow > :first-child { flex: 1 1 100%; }
    /* Contact details share line two, counts always start line three, so rows
       line up instead of wrapping differently per record length. */
    .pv-trow > :nth-child(4) { flex-basis: 100%; }
    .pv-trow > :last-child {
        position: absolute;
        right: 13px;
        top: 50%;
        transform: translateY(-50%);
    }

    /* Detail pages set inline grid-template-columns, which beats the tablet
       rule above — force a single column so panels don't get 40px wide. */
    .pv-grid-2 { grid-template-columns: 1fr !important; }

    /* GridView tables keep readable column widths and scroll sideways rather
       than compressing seven columns into 390px and clipping the last ones. */
    .pv-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .pv-table-scroll > table { min-width: 860px; }
    .pv-table-scroll td, .pv-table-scroll th { white-space: nowrap; }
    /* the title cell carries a second line, so it may wrap */
    .pv-table-scroll td:first-child { white-space: normal; }

    /* The Gantt is left alone: frappe-gantt's own .gantt-container already
       scrolls horizontally, so it works on touch as-is. */

    /* Hiding the header row leaves bare numbers with no meaning, so the
       columns that need one carry their label inline on mobile. */
    .pv-trow [data-m-label]::before {
        content: attr(data-m-label) ": ";
        color: #9a9da8;
        font-weight: 600;
    }

    /* Three fixed columns on a phone truncated every value to "Dem…"; two
       columns with wrapping keeps the detail readable. */
    .pv-meta-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .pv-meta-grid a,
    .pv-meta-grid span {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .pv-stat-grid { gap: 10px; }
    .pv-stat-label { font-size: 12px; }

    /* Create-in-modal dialogs: full-bleed sheet rather than a desktop-sized
       card cropped by the viewport. */
    #pv-create-modal .modal-dialog {
        margin: 8px;
        max-width: none;
    }
    #pv-create-modal .modal-content { border-radius: 16px; }
    #pv-create-modal .modal-body { padding: 16px; }
    #pv-create-modal .modal-header { padding: 14px 16px; }

    /* Short fields pair up rather than each taking a full line — stacking all
       nine task fields made the form twice as tall as the screen. Only the
       wide ones (title, textareas) keep the full width. */
    #pv-create-modal .row > [class*="col-md-"] { flex: 0 0 50%; max-width: 50%; }
    #pv-create-modal .row > .col-md-8,
    #pv-create-modal .row > .col-md-12 { flex: 0 0 100%; max-width: 100%; }

    /* Tighter vertical rhythm so more of the form fits above the fold. */
    #pv-create-modal .mb-3 { margin-bottom: .6rem !important; }
    #pv-create-modal .form-label { margin-bottom: 3px; font-size: 13px; }
    #pv-create-modal .form-control,
    #pv-create-modal .form-select { padding: 7px 10px; font-size: 14px; }
    /* long option labels ran under the dropdown arrow in a half-width select */
    #pv-create-modal .form-select { padding-right: 28px; text-overflow: ellipsis; }
    #pv-create-modal textarea.form-control { height: 74px; }
    #pv-create-modal .form-text { font-size: 11.5px; }
}

/* Save/Cancel stay pinned to the bottom of the scrolling dialog, so the
   action is reachable without scrolling to the end of the form. */
#pv-create-modal form > .form-group:last-child {
    position: sticky;
    bottom: -16px;
    z-index: 2;
    display: flex;
    gap: 8px;
    margin: 10px -16px -16px;
    padding: 12px 16px;
    background: #fff;
    border-top: 1px solid var(--sh-border);
}

@media (max-width: 767px) {
    #pv-create-modal form > .form-group:last-child .btn { flex: 1; margin: 0 !important; }
}

/* --------------------------------------------------------- date picker */
/* TempusDominus ships Bootstrap defaults — 38%-opacity black days, #0d6efd
   selection and 4px corners — which read as tacky against the app's white
   cards. Repainted in the design-system palette. */
.tempus-dominus-widget {
    border: 1px solid var(--sh-line);
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(16, 18, 27, .12);
    padding: 6px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: var(--sh-ink);
    background: #fff;
}

/* The widget's theme is pinned to light in the field config, but its dark
   stylesheet still ships and would repaint the picker black for anyone whose
   OS is in dark mode. The app has no dark theme, so neutralise it here too. */
.tempus-dominus-widget.dark,
.tempus-dominus-widget.dark .date-container,
.tempus-dominus-widget.dark .time-container,
.tempus-dominus-widget.dark .toolbar {
    background: #fff;
    color: var(--sh-ink);
}
.tempus-dominus-widget.dark .day,
.tempus-dominus-widget.dark .calendar-header,
.tempus-dominus-widget.dark .picker-switch,
.tempus-dominus-widget.dark .time-container-clock,
.tempus-dominus-widget.dark [class*="time-container-"] { color: var(--sh-ink-2); }
.tempus-dominus-widget.dark .dow { color: var(--sh-mut-2); }
.tempus-dominus-widget.dark .day.old,
.tempus-dominus-widget.dark .day.new { color: var(--sh-mut-3); }

.tempus-dominus-widget .calendar-header {
    color: var(--sh-ink);
    font-weight: 700;
    font-size: 14px;
    padding: 6px 2px 10px;
}
.tempus-dominus-widget .calendar-header .picker-switch { color: var(--sh-ink); letter-spacing: -.01em; }
.tempus-dominus-widget .calendar-header .previous,
.tempus-dominus-widget .calendar-header .next {
    color: var(--sh-mut);
    border-radius: 8px;
}
.tempus-dominus-widget .calendar-header .previous:hover,
.tempus-dominus-widget .calendar-header .next:hover { background: var(--sh-line-3); color: var(--sh-ink); }

.tempus-dominus-widget .dow {
    color: var(--sh-mut-2);
    font-weight: 700;
}

/* the muddy translucent black is the main offender */
.tempus-dominus-widget .day,
.tempus-dominus-widget .date-container-months > div,
.tempus-dominus-widget .date-container-years > div,
.tempus-dominus-widget .date-container-decades > div {
    color: var(--sh-ink-2);
    font-weight: 600;
    border-radius: 9px;
}
.tempus-dominus-widget .day:hover,
.tempus-dominus-widget .date-container-months > div:hover,
.tempus-dominus-widget .date-container-years > div:hover { background: var(--sh-line-3); }

.tempus-dominus-widget .day.old,
.tempus-dominus-widget .day.new { color: var(--sh-mut-3); font-weight: 500; }
.tempus-dominus-widget .day.weekend { color: var(--sh-ink-2); }
.tempus-dominus-widget .day.old.weekend,
.tempus-dominus-widget .day.new.weekend { color: var(--sh-mut-3); }

.tempus-dominus-widget .day.today { box-shadow: inset 0 0 0 1.5px var(--sh-orange); color: var(--sh-ink); }
.tempus-dominus-widget .day.today::before { display: none; }

.tempus-dominus-widget .active,
.tempus-dominus-widget .day.active:hover {
    background: var(--sh-navy) !important;
    color: #fff !important;
    box-shadow: none;
}

.tempus-dominus-widget .time-container-clock { color: var(--sh-ink); }
.tempus-dominus-widget .time-container-hour,
.tempus-dominus-widget .time-container-minute,
.tempus-dominus-widget .time-container-second {
    color: var(--sh-ink);
    font-weight: 700;
    border-radius: 9px;
}
.tempus-dominus-widget .time-container-hour:hover,
.tempus-dominus-widget .time-container-minute:hover,
.tempus-dominus-widget .time-container-second:hover { background: var(--sh-line-3); }
.tempus-dominus-widget .time-container .separator { color: var(--sh-mut-2); }
.tempus-dominus-widget .time-container [class*="bi-arrow"] { color: var(--sh-mut); border-radius: 8px; }
.tempus-dominus-widget .time-container [class*="bi-arrow"]:hover { background: var(--sh-line-3); color: var(--sh-ink); }

/* Toolbar actions ship as bare icons with no way to dismiss the picker; this
   turns them into a labelled button row (labels injected by the view so they
   stay translatable). */
.tempus-dominus-widget .toolbar {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    margin-top: 4px;
    border-top: 1px solid var(--sh-border);
    list-style: none;
}
.tempus-dominus-widget .toolbar > div {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 8px;
    border-radius: 9px;
    border: 1px solid var(--sh-border);
    background: #fff;
    color: var(--sh-ink-3);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.tempus-dominus-widget .toolbar > div:hover { background: #f5f6f8; }
.tempus-dominus-widget .toolbar [data-action="close"] {
    background: var(--sh-navy);
    border-color: var(--sh-navy);
    color: #fff;
}
.tempus-dominus-widget .toolbar [data-action="close"]:hover { background: #1b2258; }


/* Latvian day abbreviations ("Ceturtd.") overflow their column at any width
   with the side-by-side layout, running into the neighbouring label. */
.tempus-dominus-widget .date-container-days .dow {
    font-size: 10.5px;
    letter-spacing: -.02em;
    overflow: hidden;
}

/* ------------------------------------------------- date picker on phones */
/* The picker is configured side-by-side, which left the calendar 148px wide:
   seven 21px columns, so "Sun Mon Tue" overlapped into an unreadable smear.
   Stacking the calendar above the clock gives each the full width. */
@media (max-width: 767px) {
    /* Anchored to the field it dropped below the fold and was clipped by the
       modal's own scroll box, so the days were unreachable. Centring it as a
       fixed sheet keeps the whole picker on screen wherever the field sits. */
    .tempus-dominus-widget {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        z-index: 1080;
        width: min(330px, calc(100vw - 28px)) !important;
        max-width: calc(100vw - 28px);
        max-height: calc(100vh - 40px);
        overflow-y: auto;
        box-shadow: 0 18px 48px rgba(16, 18, 27, .28);
    }
    .tempus-dominus-widget.timepicker-sbs .td-row { flex-direction: column; }
    .tempus-dominus-widget.timepicker-sbs .td-half {
        width: 100% !important;
        flex: 0 0 auto !important;
    }
    .tempus-dominus-widget .date-container-days > div,
    .tempus-dominus-widget .date-container-months > div,
    .tempus-dominus-widget .date-container-years > div {
        min-height: 36px;
        line-height: 36px;
        font-size: 13px;
    }
    /* the clock sits below the calendar, so give it breathing room */
    .tempus-dominus-widget .time-container { border-top: 1px solid var(--sh-border); padding-top: 6px; }
}

/* ------------------------------------------------------ language switch */
.pv-lang {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin: 4px 0 2px;
    background: rgba(255, 255, 255, .06);
    border-radius: 9px;
}
.pv-lang-opt {
    flex: 1;
    padding: 5px 0;
    border-radius: 7px;
    text-align: center;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .55);
}
.pv-lang-opt:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.pv-lang-opt.is-active { background: rgba(255, 255, 255, .16); color: #fff; }