:root{
    --fives-navy:#0b1f3a;
    --fives-navy2:#102b4c;
    --fives-line:#cfd8e3;
    --fives-soft:#eef3f8;
    --fives-bg:#e9eef5;
    --fives-panel:#ffffff;
    --fives-text:#102033;
    --fives-muted:#526174;
    --fives-orange:#e86f18;
    --fives-green:#087a4a;
    --fives-blue:#155fa0;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    background:var(--fives-bg);
    color:var(--fives-text);
    font-size:14px;
}

.fives-classic-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:250px 1fr;
}

.fives-sidebar{
    background:#f7f9fc;
    border-right:1px solid var(--fives-line);
    min-height:100vh;
}

.fives-sidebar-head{
    background:var(--fives-navy);
    color:white;
    padding:18px 18px;
    border-bottom:1px solid #061528;
}

.fives-sidebar-head .title{
    font-size:18px;
    font-weight:900;
    line-height:1.2;
}

.fives-sidebar-head .sub{
    font-size:12px;
    color:#c7d5e8;
    margin-top:5px;
}

.fives-menu-title{
    padding:13px 16px 7px;
    color:#637085;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.fives-menu a{
    display:flex;
    align-items:center;
    gap:9px;
    padding:11px 16px;
    color:#17263a;
    text-decoration:none;
    border-top:1px solid #eef2f7;
    font-weight:800;
    font-size:13px;
}

.fives-menu a:hover{
    background:#e8f0fb;
    color:#0b5fa5;
}

.fives-main{
    min-width:0;
}

.fives-topbar{
    background:#ffffff;
    border-bottom:1px solid var(--fives-line);
    height:58px;
    padding:0 24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.fives-brand{
    font-size:18px;
    font-weight:900;
    color:#0b1f3a;
}

.fives-nav a{
    color:#25364d;
    text-decoration:none;
    margin-left:18px;
    font-size:13px;
    font-weight:800;
}

.fives-wrap{
    padding:22px 24px;
}

.fives-title{
    margin:0;
    font-size:28px;
    font-weight:900;
    color:#111c2e;
}

.fives-muted{
    color:var(--fives-muted);
    margin-top:6px;
}

.fives-toolbar{
    background:#f8fafc;
    border:1px solid var(--fives-line);
    padding:10px 12px;
    margin:16px 0;
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
}

.fives-panel{
    background:var(--fives-panel);
    border:1px solid var(--fives-line);
    border-radius:4px;
    box-shadow:none;
    padding:0;
    overflow:hidden;
}

.fives-card{
    background:#ffffff;
    border:1px solid var(--fives-line);
    border-radius:4px;
    padding:14px;
    box-shadow:none;
}

.fives-panel h2,
.fives-card h2{
    margin:0;
    padding:13px 16px;
    background:#f4f7fb;
    border-bottom:1px solid var(--fives-line);
    font-size:18px;
}

.fives-btn{
    background:var(--fives-orange);
    color:white;
    border:1px solid #cf5e10;
    text-decoration:none;
    border-radius:3px;
    padding:9px 13px;
    font-weight:900;
    display:inline-block;
    cursor:pointer;
    line-height:1;
}

.fives-btn-navy{
    background:var(--fives-navy2);
    border-color:#071b3a;
}

.fives-line{
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid #e4e9f0;
    padding:10px 14px;
    color:#34445a;
    gap:20px;
    background:white;
}

.fives-line strong{
    color:var(--fives-text);
    text-align:right;
}

.fives-badge{
    display:inline-block;
    padding:5px 8px;
    border-radius:3px;
    font-size:11px;
    font-weight:900;
    border:1px solid transparent;
    margin-right:4px;
}

.fives-badge-paid{
    background:#e8f7ef;
    color:var(--fives-green);
    border-color:#bfe8d1;
}

.fives-badge-pending{
    background:#fff1e7;
    color:#b64707;
    border-color:#ffd2b5;
}

.fives-badge-confirmed{
    background:#e7f1fb;
    color:var(--fives-blue);
    border-color:#bfd7ef;
}

table.fives-table,
.fives-panel table{
    width:100%;
    border-collapse:collapse;
    background:white;
}

table.fives-table th,
.fives-panel table th{
    text-align:left;
    padding:10px 12px;
    border-bottom:1px solid var(--fives-line);
    border-right:1px solid #edf1f6;
    background:#eef3f8;
    color:#35465c;
    font-size:11px;
    text-transform:uppercase;
    font-weight:900;
}

table.fives-table td,
.fives-panel table td{
    padding:10px 12px;
    border-bottom:1px solid #e8edf3;
    border-right:1px solid #f0f3f7;
    font-weight:800;
    vertical-align:middle;
}

table.fives-table tr:hover,
.fives-panel table tr:hover{
    background:#f8fbff;
}

@media(max-width:900px){
    .fives-classic-shell{grid-template-columns:1fr}
    .fives-sidebar{display:none}
    .fives-topbar,.fives-wrap{padding-left:16px;padding-right:16px}
    .fives-nav{display:none}
    .fives-title{font-size:24px}
}


/* Batch9C UI polish: sidebar + stat cards */
.fives-sidebar a,
.fives-sidebar nav a,
.fives-menu a {
    display: block !important;
    color: #0d1b2f !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid #e5edf6 !important;
    line-height: 1.25 !important;
    background: transparent !important;
}

.fives-sidebar a:hover,
.fives-sidebar nav a:hover,
.fives-menu a:hover {
    background: #eef4fb !important;
    color: #0b2d52 !important;
}

.fives-menu-title {
    font-size: 12px !important;
    font-weight: 900 !important;
    color: #66758a !important;
    text-transform: uppercase !important;
    padding: 16px 14px 7px !important;
    letter-spacing: .04em !important;
}

.fives-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
    gap: 12px !important;
    margin: 14px 0 18px !important;
}

.fives-stat {
    background: #fff !important;
    border: 1px solid #cfd8e3 !important;
    padding: 14px !important;
}

.fives-stat b {
    display: block !important;
    font-size: 12px !important;
    color: #526276 !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
}

.fives-stat strong {
    display: block !important;
    font-size: 26px !important;
    color: #0b1f36 !important;
    line-height: 1 !important;
}

@media(max-width: 1000px) {
    .fives-stats {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media(max-width: 600px) {
    .fives-stats {
        grid-template-columns: 1fr !important;
    }
}