/* static/css/dashboard.css */

/* --- Top bar -------------------------------------------------------------- */
:root { --topbar-h: 48px; }

.dash-topbar{
  background:#0078D4;color:#fff;border-radius:10px;
  padding:8px 14px;display:flex;align-items:center;justify-content:space-between;
  position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--topbar-h);
}
.dash-topbar .logo{height:26px;margin-right:10px;}
.dash-topbar .btn{background:#005BB5;color:#fff;padding:5px 10px;font-size:.85rem;border:0;}
.dash-topbar .btn:hover{background:#004d99;}
.dash-topbar .btn-outline{background:transparent;border:1px solid rgba(255,255,255,.5);}

/* --- Layout --------------------------------------------------------------- */
.dash-wrap{
  display:grid;grid-template-columns:220px 1fr;min-height:100vh;margin-top:var(--topbar-h);
}
.dash-sidebar{
  background:#f6f7fb;height:calc(100vh - var(--topbar-h));overflow-y:auto;
  border-right:1px solid #e6e8ef;padding:12px 8px;position:sticky;top:var(--topbar-h);
}
.dash-main{padding:14px;overflow:auto;min-width:0;}

/* --- Sidebar -------------------------------------------------------------- */
.side-section{margin-bottom:12px;}
.side-title{font-weight:600;font-size:.8rem;color:#6c757d;padding:4px 6px;text-transform:uppercase;}
.side-list{list-style:none;margin:0;padding:0;}
.side-item>a,.side-item button{
  width:100%;display:flex;gap:6px;align-items:center;text-align:left;
  padding:6px 8px;border-radius:6px;color:#1f2a44;background:transparent;border:0;font-size:.85rem;
}
.side-item>a:hover,.side-item button:hover{background:#e9eefc;text-decoration:none;}
.side-sub{list-style:none;margin:4px 0 0 6px;padding-left:6px;border-left:2px solid #e6e8ef;}
.side-sub a{display:block;padding:4px 8px;border-radius:4px;color:#334155;font-size:.8rem;}
.side-sub a:hover{background:#eef3ff;text-decoration:none;}

/* --- Filters -------------------------------------------------------------- */
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px;font-size:.85rem;}

/* --- Grid (CSS-Grid emulation of GridStack) ------------------------------ */
.grid-board{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;width:100%;
}
.grid-item{position:static !important;min-width:0;}
/* Width spans */
.grid-item[gs-w="12"]{grid-column:span 12;}
.grid-item[gs-w="9"]{grid-column:span 9;}
.grid-item[gs-w="8"]{grid-column:span 8;}
.grid-item[gs-w="6"]{grid-column:span 6;}
.grid-item[gs-w="4"]{grid-column:span 4;}
.grid-item[gs-w="3"]{grid-column:span 3;}
/* Height spans */
.grid-item[gs-h="1"]{grid-row:span 1;}
.grid-item[gs-h="2"]{grid-row:span 2;}
.grid-item[gs-h="3"]{grid-row:span 3;}
.grid-item[gs-h="4"]{grid-row:span 4;}
.grid-item[gs-h="5"]{grid-row:span 5;}
.grid-item[gs-h="7"]{grid-row:span 7;}

/* Responsive collapse */
@media (max-width: 1200px){
  .grid-board{grid-template-columns:repeat(8,1fr);}
  .grid-item[gs-w="6"]{grid-column:span 8;}
  .grid-item[gs-w="4"]{grid-column:span 8;}
  .grid-item[gs-w="3"]{grid-column:span 4;}
}
@media (max-width: 768px){
  .grid-board{grid-template-columns:repeat(1,1fr);}
  .grid-item{grid-column:1/-1 !important; grid-row:span 1 !important;}
}

/* --- Cards / Tables ------------------------------------------------------- */
.metric-card{
  background:linear-gradient(180deg,#ffffff 0%,#f9fafb 100%);
  border:1px solid #e6e8ef;border-radius:12px;padding:18px 20px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);min-height:100%;position:relative;
}
.metric-card h6{font-size:1.1rem;margin-bottom:12px;font-weight:600;}
.metric-card .row>div{padding:10px;}
.metric-card .small{font-size:.9rem;color:#6b7280;}
.metric-card .h6{font-size:1.1rem;font-weight:700;margin:0;}

.table-wrap{overflow-x:auto;}
.table{font-size:.95rem;margin-bottom:0;}
.table th,.table td{padding:.5rem .65rem;vertical-align:middle;}
.table-hover tbody tr:hover{background-color:#f1f3f9;}
.table-hover tbody tr{transition:background-color .15s ease-in-out;}

.btn-group .btn.active{background:#005BB5;color:#fff;}