/* Shared visual polish applied after page-specific styles. This file is presentation-only. */
:root {
    --canvas: #f6faf8;
    --border-soft: #dce9e2;
    --text-soft: #6d8178;
    --focus-ring: rgba(45, 139, 99, .24);
}

html { min-width: 320px; scroll-behavior: smooth; }

body {
    background:
        radial-gradient(circle at 92% -8%, rgba(54, 150, 108, .045), transparent 25rem),
        var(--canvas);
}

.main-content, .page-heading, .page-heading h1, .panel { min-width: 0; }

.content {
    min-height: calc(100vh - 78px);
    padding-top: clamp(24px, 3vw, 36px);
}

.page-actions, .section-head { min-width: 0; }
.page-actions > *, .section-head > * { min-width: 0; }
.page-heading h1, .panel h2, .section-head h2 { overflow-wrap: anywhere; }

.btn {
    gap: 7px;
    font-weight: 650;
    box-shadow: 0 2px 0 rgba(19, 61, 45, .025);
    transition: border-color .16s ease, background-color .16s ease, color .16s ease,
        box-shadow .16s ease, transform .16s ease;
}

.btn:hover {
    border-color: #bfd6c9;
    background: #f8fcfa;
    box-shadow: 0 6px 16px rgba(13, 67, 48, .08);
    transform: translateY(-1px);
}

.btn.primary:hover {
    border-color: #145a41;
    background: #145a41;
    box-shadow: 0 7px 18px rgba(23, 107, 77, .19);
}

.btn:active { transform: translateY(0); }

.btn:focus-visible,
.link:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

input, select, textarea {
    min-width: 0;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

input:hover, select:hover, textarea:hover { border-color: #b9d2c5; }

input:focus, select:focus, textarea:focus {
    border-color: #4b9a78;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(75, 154, 120, .11);
    outline: 0;
}

label small { line-height: 1.4; }

.sidebar { box-shadow: 9px 0 26px rgba(3, 35, 25, .09); }

.sidebar nav a, .sidebar-dropdown summary {
    min-height: 44px;
    transition: background-color .16s ease, color .16s ease, padding-left .16s ease;
}

.sidebar nav a:hover, .sidebar-dropdown summary:hover,
.sidebar-dropdown[open] > summary { padding-left: 16px; }

.sidebar nav a.active {
    box-shadow: inset 3px 0 #bce7cc, 0 5px 15px rgba(0, 0, 0, .08);
}

.sidebar .logout {
    min-height: 44px;
    transition: background-color .16s ease, color .16s ease;
}

/* Desktop navigation treatment: a framed panel with grouped, finance-friendly
   navigation. The mobile drawer keeps its existing full-height behavior below. */
@media (min-width: 901px) {
    .shell {
        grid-template-columns: 272px minmax(0, 1fr);
    }

    .sidebar {
        position: sticky;
        top: 16px;
        display: flex;
        height: calc(100vh - 32px);
        margin: 16px 8px 16px 16px;
        padding: 22px 12px 16px;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid rgba(188, 231, 204, .13);
        border-radius: 26px;
        background:
            radial-gradient(circle at 88% 5%, rgba(65, 157, 115, .14), transparent 14rem),
            linear-gradient(180deg, #062f25 0%, #082f24 55%, #062a20 100%);
        box-shadow: 0 20px 52px rgba(4, 38, 27, .22), inset 0 1px rgba(255, 255, 255, .045);
    }

    .sidebar-head {
        position: relative;
        min-height: 45px;
        padding: 0 8px;
    }

    .sidebar .logo {
        gap: 11px;
        margin: 0;
        padding: 4px 2px 0;
    }

    .sidebar .logo span {
        width: 40px;
        height: 40px;
        border-radius: 13px;
        box-shadow: 0 8px 19px rgba(0, 0, 0, .16);
    }

    .sidebar .logo strong {
        color: #f0fbf5;
        font-size: 15px;
        letter-spacing: -.01em;
    }

    .sidebar nav {
        display: block;
        margin-top: 30px;
        min-height: 0;
        flex: 1;
        overflow-y: auto;
        padding: 0 4px 10px;
        scrollbar-width: thin;
    }

    .sidebar-group {
        position: relative;
    }

    .sidebar-group + .sidebar-group {
        margin-top: 22px;
        padding-top: 21px;
        border-top: 1px solid rgba(188, 231, 204, .12);
    }

    .sidebar-group .nav-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 8px 11px;
        padding: 0;
        color: #8fb9aa;
        font-size: 10px;
        font-weight: 750;
        letter-spacing: .14em;
    }

    .sidebar-group .nav-label::after {
        content: "⌄";
        color: #7ca695;
        font-size: 17px;
        font-weight: 400;
        line-height: 1;
    }

    .sidebar-group > a,
    .sidebar-group > .sidebar-dropdown > summary {
        position: relative;
        min-height: 45px;
        margin: 0 0 3px;
        padding: 11px 12px;
        border: 1px solid transparent;
        border-radius: 12px;
        color: #b3d0c4;
        font-size: 14px;
    }

    .sidebar-group > a:hover,
    .sidebar-group > .sidebar-dropdown > summary:hover,
    .sidebar-group > .sidebar-dropdown[open] > summary {
        padding-left: 16px;
        background: rgba(41, 122, 91, .2);
        color: #f3fff7;
    }

    .sidebar-group > a.active {
        border-color: rgba(117, 214, 164, .2);
        background: linear-gradient(105deg, rgba(31, 121, 91, .72), rgba(15, 73, 57, .75));
        box-shadow: inset 0 1px rgba(190, 241, 211, .09), 0 8px 22px rgba(1, 17, 11, .2);
        color: #f5fff8;
    }

    .sidebar-group > a.active::after {
        content: "";
        position: absolute;
        top: 8px;
        right: 8px;
        bottom: 8px;
        width: 3px;
        border-radius: 5px;
        background: #bce7cc;
        box-shadow: 0 0 12px rgba(188, 231, 204, .55);
    }

    .sidebar-group > a i,
    .sidebar-group > .sidebar-dropdown > summary i {
        width: 23px;
        color: #9dc4b4;
        font-size: 17px;
    }

    .sidebar-group > a.active i {
        color: #d7f4e1;
    }

    .sidebar-group > .sidebar-dropdown {
        margin: 0;
    }

    .sidebar-group > .sidebar-dropdown > summary {
        list-style: none;
    }

    .sidebar-group > .sidebar-dropdown > summary::-webkit-details-marker {
        display: none;
    }

    .sidebar-group .sidebar-dropdown-arrow {
        color: #8ebaaa;
        font-size: 20px;
    }

    .sidebar nav .sidebar-dropdown a {
        margin: 2px 0 2px 25px;
        padding: 9px 12px 9px 20px;
        border-left: 1px solid rgba(168, 215, 191, .3);
        border-radius: 0 9px 9px 0;
        color: #91b7a9;
        font-size: 12px;
    }

    .sidebar nav .sidebar-dropdown a:hover,
    .sidebar nav .sidebar-dropdown a.active {
        border-left-color: #9fdbb8;
        background: rgba(42, 126, 94, .26);
        color: #effff5;
    }

    .sidebar > form {
        flex: 0 0 auto;
        margin-top: auto;
        padding: 8px 4px 0;
    }

    .sidebar .logout {
        margin: 0;
        border: 1px solid rgba(188, 231, 204, .12);
        background: rgba(255, 255, 255, .035);
        color: #a9cdbd;
    }

    .sidebar .logout:hover {
        background: rgba(60, 148, 108, .22);
    }

}

.topbar { min-height: 78px; }
.user { flex: 0 0 auto; }

.panel:focus-within { border-color: #c4ddd0; }

.notice {
    border: 1px solid #dcebe2;
    box-shadow: 0 5px 16px rgba(18, 71, 50, .035);
}

.filters { box-shadow: 0 7px 22px rgba(18, 71, 50, .045); }
.filters > * { min-width: 0; }

.table-wrap {
    scrollbar-color: #b9d2c5 transparent;
    scrollbar-width: thin;
}

.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #b9d2c5;
    background-clip: padding-box;
}

table tbody tr { transition: background-color .14s ease; }
table tbody tr:hover { background: #f8fcfa; }
table td a:not(.btn) { text-underline-offset: 3px; }

table caption {
    padding: 0 0 12px;
    color: var(--text-soft);
    text-align: left;
    font-size: 12px;
}

.empty-table-state {
    padding: 42px 18px !important;
    color: var(--text-soft);
    text-align: center;
    white-space: normal;
}

.empty-table-state strong, .empty-table-state span { display: block; }
.empty-table-state strong { margin-bottom: 4px; color: #365a4b; }
.empty-table-state span { font-size: 12px; }

.pagination { flex-wrap: wrap; align-items: center; }

.pagination a {
    color: var(--green);
    font-weight: 650;
    transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.pagination a:hover {
    border-color: #bfd6c9;
    background: #f1f8f4;
    transform: translateY(-1px);
}

.orphan-search { flex: 1 1 260px; min-width: 0; }
.orphan-search input { min-width: 0; }

.guest .login-panel {
    background:
        radial-gradient(circle at 100% 0, rgba(41, 135, 94, .06), transparent 24rem),
        #fbfdfc;
}

.login-card .btn { min-height: 44px; }

@media (max-width: 900px) {
    .content { padding: 24px clamp(18px, 3.5vw, 30px) 32px; }
    .page-actions, .section-head { align-items: flex-start; flex-wrap: wrap; }
    .record-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .orphan-search { flex-basis: 220px; }
    .sidebar { box-shadow: 22px 0 60px rgba(2, 22, 16, .28); }
    .sidebar-group + .sidebar-group {
        margin-top: 13px;
        padding-top: 13px;
        border-top: 1px solid rgba(188, 231, 204, .12);
    }

    .sidebar-group .nav-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 19px 13px 7px;
    }

    .sidebar-group .nav-label::after {
        content: "⌄";
        color: #7ca695;
        font-size: 17px;
    }
}

@media (max-width: 640px) {
    .content { padding: 17px 13px 28px; }
    .topbar { min-height: 68px; }
    .page-actions, .section-head { gap: 8px; margin-bottom: 16px; }
    .page-actions > .btn, .page-action-buttons > .btn { flex: 1 1 140px; }
    .record-filters { grid-template-columns: 1fr; padding: 13px; }
    .filters { padding: 12px; }
    .filters .btn { min-height: 44px; }
    .panel { border-radius: 14px; padding: 17px; }
    .pagination { gap: 8px; justify-content: space-between; }
    .pagination a, .pagination span { flex: 1 1 0; justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}