/* Agency Pro components: tables, KPIs, employees, finance. Built on app.css tokens. */

/* Footer + credit */
.app-footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:14px 26px 22px;font-size:11px;color:var(--muted)}
.app-footer a,.login-credit a{color:var(--primary);font-weight:700;text-decoration:none}
.app-footer a:hover,.login-credit a:hover{text-decoration:underline}
.login-credit{margin-top:14px;text-align:center;font-size:11px;color:var(--muted)}
.nav-count{margin-left:auto;background:#f97316;color:#fff;border-radius:999px;font-size:10px;font-weight:800;padding:2px 7px;line-height:1.4}

/* Table tools */
.tt-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--border);background:#fbfcfe}
.tt-search{position:relative;flex:1 1 220px;max-width:340px}
.tt-search i{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#98a2b3;font-size:12px}
.tt-search input{padding-left:30px;border-radius:9px}
.tt-count{font-size:11px;color:var(--muted);margin-left:auto}
.tt-export{border-radius:9px;font-size:12px}
table.tt-enhanced th.tt-sortable{cursor:pointer;user-select:none;white-space:nowrap;position:relative;padding-right:20px}
table.tt-enhanced th.tt-sortable::after{content:"\2195";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:10px;color:#c0c7d2}
table.tt-enhanced th.tt-sortable:hover{color:var(--primary)}
table.tt-enhanced th.sorted-asc::after{content:"\2191";color:var(--primary)}
table.tt-enhanced th.sorted-desc::after{content:"\2193";color:var(--primary)}
table.tt-enhanced th.tt-sortable:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.table tfoot td,.table .table-total-row td{font-weight:800;background:#f8fafc}

/* KPI row that adapts to any count */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.kpi-row .kpi-card{min-height:auto}
.kpi-card.kpi-accent{border-color:#99f6e4;background:linear-gradient(180deg,#f0fdfa,#fff)}
.kpi-card.kpi-danger{border-color:#fecdca;background:linear-gradient(180deg,#fff6f5,#fff)}
.kpi-sub{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:#98a2b3;margin-top:8px}
.delta{display:inline-flex;align-items:center;gap:3px;border-radius:999px;padding:2px 7px;font-size:10px;font-weight:800;margin-left:6px;vertical-align:middle}
.delta.up{background:#ecfdf3;color:#027a48}
.delta.down{background:#fef3f2;color:#b42318}
.delta.flat{background:#f2f4f7;color:#475467}
.text-profit{color:var(--success)!important}
.text-loss{color:var(--danger)!important}

/* Charts */
.chart-card{padding:16px}
.chart-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
.chart-box{position:relative;height:280px}
.chart-box.sm{height:220px}
.legend-dot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:middle}

/* Waterfall-style profit breakdown */
.pl-list{list-style:none;margin:0;padding:0}
.pl-list li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px dashed var(--border);font-size:12px}
.pl-list li:last-child{border-bottom:0}
.pl-list li.pl-total{font-weight:850;font-size:14px;border-top:2px solid var(--text);border-bottom:0;margin-top:4px;padding-top:11px}
.pl-list li .pl-label small{display:block;color:#98a2b3;font-size:10px;font-weight:500}
.share-bar{height:6px;border-radius:99px;background:#eef2f6;overflow:hidden;margin-top:5px}
.share-bar span{display:block;height:100%;background:var(--accent);border-radius:99px}

/* Alerts list */
.alert-list{display:grid;gap:8px}
.alert-item{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#fff;font-size:12px}
.alert-item i{font-size:15px;margin-top:1px}
.alert-item.warn{border-color:#fedf89;background:#fffcf2}
.alert-item.warn i{color:#b54708}
.alert-item.bad{border-color:#fecdca;background:#fff8f7}
.alert-item.bad i{color:#b42318}
.alert-item.good i{color:#067647}
.alert-item a{font-weight:700;color:var(--primary);text-decoration:none}

/* Employee profile */
.profile-hero{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:18px;border-radius:16px;background:linear-gradient(135deg,#0b1220,#13314a);color:#e5e7eb;margin-bottom:16px}
.profile-hero .avatar-lg{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;font-size:22px;font-weight:850;background:linear-gradient(135deg,#0f766e,#2dd4bf);color:#fff}
.profile-hero h2{font-size:20px;font-weight:850;margin:0;color:#fff}
.profile-hero .meta{font-size:11px;color:#9fb0c6;margin-top:3px}
.profile-hero .hero-stats{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}
.profile-hero .hero-stats div{min-width:110px}
.profile-hero .hero-stats small{display:block;font-size:10px;color:#9fb0c6;text-transform:uppercase;letter-spacing:.08em}
.profile-hero .hero-stats strong{font-size:18px;color:#fff;font-variant-numeric:tabular-nums}
.kv-list{display:grid;grid-template-columns:140px 1fr;gap:6px 10px;font-size:12px}
.kv-list dt{color:var(--muted);font-weight:600}
.kv-list dd{margin:0;font-weight:650}
.ledger-credit{color:var(--success);font-weight:800}
.ledger-debit{color:var(--danger);font-weight:800}
.nav-tabs.pro-tabs{border-bottom:1px solid var(--border);gap:4px}
.nav-tabs.pro-tabs .nav-link{border:0;border-bottom:2px solid transparent;color:var(--muted);font-weight:700;font-size:12px;padding:10px 12px}
.nav-tabs.pro-tabs .nav-link.active{color:var(--primary);border-bottom-color:var(--primary);background:transparent}
.form-section-title{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:800;margin:4px 0 10px}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:#98a2b3}
.status-dot.on{background:#12b76a}
.status-dot.off{background:#f04438}

/* Print statement */
@media print{
  .app-footer,.tt-toolbar{display:none!important}
  .profile-hero{background:#fff!important;color:#000!important;border:1px solid #ccc}
  .profile-hero h2,.profile-hero .hero-stats strong{color:#000!important}
}

@media (max-width:992px){
  .profile-hero .hero-stats{margin-left:0}
  .kv-list{grid-template-columns:110px 1fr}
}
@media (max-width:576px){
  .app-footer{padding:12px 14px 18px}
  .chart-box{height:230px}
  .tt-count{margin-left:0}
}

/* Sidebar: collapsible groups */
.nav-group{margin-top:6px}
.nav-group-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;background:transparent;font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#59677e;font-weight:800;padding:9px 12px;margin-top:6px;border-radius:8px;cursor:pointer;text-align:left}
.nav-group-toggle:hover{color:#cbd5e1;background:rgba(255,255,255,.035)}
.nav-group-toggle:focus-visible{outline:2px solid #2dd4bf;outline-offset:-2px}
.nav-group-toggle i{font-size:11px;transition:transform .18s ease}
.nav-group.open>.nav-group-toggle i{transform:rotate(180deg)}
.nav-group.has-active>.nav-group-toggle{color:#7dd3c8}
.nav-group-body{display:none;padding-bottom:4px}
.nav-group.open>.nav-group-body{display:block}

/* Table grid: reorder, pin, resize */
th.grid-th{position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:18px!important;padding-right:24px!important}
th.grid-th.tt-sortable{padding-right:38px!important}
table.tt-enhanced th.tt-sortable.grid-th::after{right:22px}
th.grid-th .grid-label{display:inline}
th.grid-th .grid-label .entity-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.grid-table td{overflow:hidden;overflow-wrap:break-word}
table.grid-table td .entity-title{min-width:0!important}
.grid-ctl{position:absolute;color:#98a2b3}
.grid-grip{left:3px;top:50%;transform:translateY(-50%);cursor:grab;font-size:12px;opacity:.35;line-height:1;padding:2px 0}
.grid-grip:active{cursor:grabbing}
th.grid-th:hover .grid-grip{opacity:1}
.grid-menu-btn{right:3px;top:50%;transform:translateY(-50%);border:0;background:transparent;width:18px;height:22px;padding:0;border-radius:5px;font-size:12px;line-height:1;opacity:.4;display:grid;place-items:center}
th.grid-th:hover .grid-menu-btn,.grid-menu-btn:focus-visible{opacity:1}
.grid-menu-btn:hover{background:#eef2f6;color:#344054}
.grid-resizer{top:0;right:0;bottom:0;width:6px;cursor:col-resize;z-index:1;touch-action:none}
.grid-resizer::after{content:"";position:absolute;top:22%;bottom:22%;right:2px;width:2px;border-radius:2px;background:transparent}
th.grid-th:hover .grid-resizer::after{background:#d0d5dd}
.grid-resizer:hover::after,th.grid-resizing .grid-resizer::after{background:var(--primary)!important;top:0;bottom:0}
th.grid-dragging{opacity:.45}
th.grid-drop-before{box-shadow:inset 3px 0 0 var(--primary)}
th.grid-drop-after{box-shadow:inset -3px 0 0 var(--primary)}
table.grid-table thead th{z-index:3}
table.grid-table .grid-pinned{background-color:#fff}
table.grid-table thead .grid-pinned{background-color:#f3f7fb}
table.grid-table tbody tr:hover>.grid-pinned{background-color:#f6fbfa}
table.grid-table tfoot .grid-pinned,table.grid-table .table-total-row>.grid-pinned{background-color:#f8fafc}
table.grid-table .grid-pin-edge-left{box-shadow:6px 0 8px -6px rgba(16,24,40,.22);border-right:1px solid #e4e7ec}
table.grid-table .grid-pin-edge-right{box-shadow:-6px 0 8px -6px rgba(16,24,40,.22);border-left:1px solid #e4e7ec}
th.grid-is-pinned .grid-label::before{content:"";display:inline-block;width:3px;height:10px;border-radius:2px;background:var(--primary);margin-right:5px;vertical-align:-1px}
.grid-menu{position:fixed;z-index:2000;min-width:210px;max-width:320px;max-height:70vh;overflow:auto;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 40px rgba(16,24,40,.16);padding:6px}
.grid-menu-wide{min-width:260px}
.grid-menu-title{font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:#98a2b3;padding:6px 9px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid-menu button{display:flex;align-items:center;gap:9px;width:100%;border:0;background:transparent;text-align:left;padding:7px 9px;border-radius:8px;font-size:12px;font-weight:600;color:#344054}
.grid-menu button:hover{background:#f2f4f7;color:#101828}
.grid-menu button i{width:14px;color:#667085}
.grid-menu-sep{height:1px;background:var(--border);margin:5px 2px}
.grid-menu-check{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:8px;font-size:12px;font-weight:600;color:#344054;cursor:pointer;margin:0}
.grid-menu-check:hover{background:#f2f4f7}
.grid-menu-check span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grid-menu-check small{font-size:10px;color:var(--primary);font-weight:700;white-space:nowrap}
.grid-hint{font-size:11px;color:#98a2b3;margin-left:auto}
.tt-toolbar .tt-count+.grid-hint{margin-left:0}
.grid-layout-btn{border-radius:9px;font-size:12px;white-space:nowrap}
@media (max-width:991.98px){.grid-hint{display:none}}
@media print{.grid-ctl,.grid-hint,.grid-layout-btn{display:none!important}table.grid-table .grid-pinned{position:static!important}}

/* Compare */
.compare-picker{border-top:1px solid var(--border);padding-top:12px}
.compare-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;max-height:280px;overflow:auto;padding:2px}
.compare-option{display:flex;align-items:flex-start;gap:9px;border:1px solid var(--border);border-radius:10px;padding:9px 10px;background:#fff;cursor:pointer;margin:0;min-width:0}
.compare-option:hover{border-color:#99ddd7}
.compare-option:has(input:checked){border-color:var(--primary);background:#f0fdfa}
.compare-option input{margin-top:2px;flex:0 0 auto}
.compare-option span{min-width:0}
.compare-option strong{display:block;font-size:12px;color:#172033;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.compare-option small{display:block;font-size:10px;color:#98a2b3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.compare-table td.compare-best{background-color:#ecfdf3!important}
.compare-table td.compare-best::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#12b76a;margin-right:6px;vertical-align:middle}
.compare-best-key{display:inline-block;background:#ecfdf3;color:#027a48;border-radius:999px;padding:1px 8px;font-weight:700}
.text-none{text-transform:none;letter-spacing:0;font-weight:600}