/* App Theme inspired by modern admin templates */
:root{
  --sidebar-width: 240px;
  --topbar-height: 56px;
  --brand-color: #4c6ef5; /* indigo */
  --bg-soft: #f7f9fc;
  --text-soft: #6b7280;
  --border-soft: #e5e7eb;
  --link-hover: #eef2ff;
}

html,body{height:100%;}
body{background:var(--bg-soft);} 
.container-fluid{width:100%; padding-left:16px; padding-right:16px; margin-left:auto; margin-right:auto;}

/* Layout */
.app{min-height:100vh;}
.app-sidebar{
  position:fixed; inset:0 auto 0 0; width:var(--sidebar-width);
  background:#fff; border-right:1px solid var(--border-soft);
  box-shadow:0 0 24px rgba(0,0,0,0.04);
  display:flex; flex-direction:column; z-index:1010;
}
.app-topbar{
  position:sticky; top:0; left:0; right:0; height:var(--topbar-height);
  background:#fff; border-bottom:1px solid var(--border-soft);
  margin-left:var(--sidebar-width); z-index:1020;
}
.app-main{padding-left:var(--sidebar-width);}

.app-collapsed .app-sidebar{transform:translateX(-100%);} 
.app-collapsed .app-topbar{margin-left:0;} 
.app-collapsed .app-main{padding-left:0;}

/* Sidebar content */
.brand{font-weight:600; font-size:18px; padding:16px 16px; color:#111827; border-bottom:1px solid var(--border-soft);} 
.side-nav{padding:8px 6px; overflow-y:auto;}
.side-link{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; color:#374151; text-decoration:none;}
.side-link:hover{background:var(--link-hover);} 
.side-link.active{background:#eef2ff; color:#1f2937; font-weight:600; box-shadow:inset 2px 0 0 var(--brand-color);} 
.side-icon{width:20px; text-align:center;}
.side-text{flex:1;}

/* Topbar inner */
.topbar-inner{height:100%; display:flex; align-items:center; gap:12px; padding:0 16px;}
.top-title{font-weight:600; color:#111827;}

/* Content container */
.app-main > .container-fluid{padding-top:16px; padding-bottom:24px;}

/* Cards */
.card{border:1px solid var(--border-soft); box-shadow:0 2px 10px rgba(0,0,0,0.03);} 
.card-header{background:#fafafa; border-bottom:1px solid var(--border-soft);} 

/* Tables */
.table{margin-bottom:0;}
.table thead th{position:sticky; top:0; background:#fafafa; z-index:1;}
.table-responsive{max-height:60vh; border:1px solid var(--border-soft); border-radius:8px; overflow:auto;}

/* Forms */
.form-control, .form-select{border-color:var(--border-soft);} 
.form-control:focus, .form-select:focus{border-color:var(--brand-color); box-shadow:0 0 0 .2rem rgba(76,110,245,.15);} 

/* Badges & pills */
.badge{border:1px solid var(--border-soft);} 

/*/* Utility spacing adjustments */
.text-truncate{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block;}
.text-nowrap{white-space:nowrap;}

/* Responsive grid supplements for charts and stats */
@media (min-width: 768px){
  .col-md-6{flex:0 0 50%; max-width:50%;}
}
@media (min-width: 992px){
  .col-lg-6{flex:0 0 50%; max-width:50%;}
  .col-lg-3{flex:0 0 25%; max-width:25%;}
}
@media (min-width: 1200px){
  .col-xl-3{flex:0 0 25%; max-width:25%;}
}


/* Charts spacing */
.canvas-wrap{background:#fff; border:1px solid var(--border-soft); border-radius:8px; padding:12px;}

/* Responsive */
@media (max-width: 992px){
  .app-sidebar{transform:translateX(-100%);} /* hide by default on mobile */
  .app.app-collapsed .app-sidebar{transform:translateX(0);} /* show when toggled */
  .app-topbar{margin-left:0;}
  .app-main{padding-left:0;}
}