/* ========== CusX Theme (shared) ========== */
:root{
  --bg-app:#f4f7fb;
  --card:#ffffff;
  --border:#e7ecf3;
  --text:#1f2937;
  --muted:#667085;
  --radius:22px;

  --grad-blue: linear-gradient(135deg,#9ad2ff,#6fa8ff 60%, #6cc3ff);
  --grad-green:linear-gradient(135deg,#97f0d6,#61e3b2 60%, #5dd8c1);
  --grad-purple:linear-gradient(135deg,#c1a0ff,#8f78ff 60%, #9d7bff);
}
body{ background:var(--bg-app); }

/* Sidebar */
.sidebar{
  width:68px; background:var(--card);
  border-right:1px solid var(--border);
  position:fixed; top:0; bottom:0; left:0; z-index:1030;
  display:flex; flex-direction:column; align-items:center; padding:14px 10px; gap:10px;
}
.sidebar .nav-icon{
  width:42px; height:42px; border-radius:14px;
  display:grid; place-items:center; color:#5b6b7a; border:1px solid var(--border);
  background:#fff; transition:.2s ease;
}
.sidebar .nav-icon:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(32,96,255,.08); }
.sidebar .nav-icon.active{ color:#0d6efd; border-color:#cfe2ff; background:#eef5ff; }

/* Top nav */
.topnav{
  position:sticky; top:0; z-index:1020; background:rgba(255,255,255,.8);
  backdrop-filter: saturate(120%) blur(8px);
  border-bottom:1px solid var(--border);
  height:64px; display:flex; align-items:center;
}
.searchbar{
  border:1px solid var(--border); border-radius:16px; background:#fff; padding:.25rem .6rem;
  display:flex; align-items:center; gap:.5rem; min-width:280px;
}
.searchbar input{ border:none; outline:none; width:100%; font-size:.85rem; }

/* Top search: keep wrapper border, remove input border */
.topnav .searchbar #quickSearch{
  border: 0 !important;
  background: transparent;
  box-shadow: none;
  height: 28px;
  padding: .1rem 0;
}
.topnav .searchbar #quickSearch::placeholder{ color:#98a2b3; }

/* Avatar images (button + menu header) */
.avatar, .profile-menu .avatar-xs{
  overflow: hidden;
  background:#eef5ff;
  border-radius:12px;
}
.avatar-img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  border-radius:inherit;
}
.profile-menu .avatar-xs{ width:36px; height:36px; }

/* ===== Profile dropdown ===== */
.profile-menu{
  min-width: 260px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px;
}

.profile-menu .menu-head{
  margin: -8px -8px 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  background: #f8fafc;
}

.profile-menu .avatar-xs{
  width: 36px; height: 36px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: #eef5ff; color: #0d6efd;
}

.profile-menu .dropdown-item{
  border-radius: 10px;
  padding: .45rem .6rem;
  font-size: .9rem;
}
.profile-menu .dropdown-item:hover{ background: #f2f5ff; }

.profile-menu .logout-btn{
  --bs-btn-padding-y: .45rem;
  --bs-btn-padding-x: .75rem;
  --bs-btn-font-size: .9rem;
  border-radius: 10px;
}

/* Push content to the right of sidebar */
.container-xxl{ padding-left: calc(68px + 22px); }

.page-title{ font-weight:700; font-size:1.1rem; color:var(--text); }
.subtle{ color:var(--muted); font-size:.92rem; }

/* Cards */
.tile{
  border-radius:var(--radius); color:#fff; position:relative; overflow:hidden; min-height:120px;
  display:flex; flex-direction:column; justify-content:center; padding:18px 18px;
  box-shadow:0 6px 24px rgba(36,52,94,.08);
}
.tile .value{ font-weight:800; font-size:1.6rem; line-height:1; }
.tile .label{ opacity:.95; font-size:.9rem; font-weight:600; }
.tile .trend{ position:absolute; right:14px; bottom:12px; font-size:.75rem; opacity:.9; }

.section-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 10px 24px rgba(20,25,41,.06);
}
.section-card .card-header{
  background:transparent; border-bottom:1px solid var(--border);
  padding:14px 18px; border-top-left-radius:var(--radius); border-top-right-radius:var(--radius);
}
.section-card .card-body{ padding:16px 18px; }

.info-box{
  border:1px solid var(--border); background:#fff;
}

/* Compact controls globally */
.form-label{ font-size:.75rem; margin-bottom:.25rem; color:#495057; }
.form-control{ padding:.5rem; font-size:.75rem; line-height:1.35; }
.form-select { padding:.5rem 2rem .5rem .5rem; font-size:.75rem; line-height:1.35; }
.btn{ --bs-btn-padding-y:.32rem; --bs-btn-padding-x:.7rem; --bs-btn-font-size:.8rem; border-radius:12px; }
.avatar{ width:34px; height:34px; border-radius:12px; background:#f2f4f7; display:grid; place-items:center; }
.truncate{ max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline-block; }

.modal-soft{ border-radius:18px; }

/* DataTables compact polish */
.table{ font-size:.85rem; }
.dt-container .dataTables_length label,
.dt-container .dataTables_filter label,
.dt-container .dataTables_info{ font-size:.8rem; }
.dt-container .dataTables_length select,
.dt-container .dataTables_filter input { height:32px; padding:.2rem .5rem; font-size:.8rem; }
.dataTables_paginate .page-link{ padding:.25rem .5rem; font-size:.8rem; border-radius:.6rem; }

/* Even smaller labels + thin borders (your request) */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate .paginate_button { font-size:.72rem !important; }

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input,
#quickSearch{
  height:26px; padding:.15rem .45rem; font-size:.74rem;
  border-radius:10px; border:.8px solid #d8dde6; background:#fff;
}
.form-control, .form-select{ border:.8px solid #d8dde6; border-radius:12px; }

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus,
.form-control:focus, .form-select:focus, #quickSearch:focus{
  border-color:#a5c9ff; box-shadow:none; outline:0;
}

.table>:not(caption)>*>*{ padding-top:.55rem; padding-bottom:.55rem; }

/* Ensure it isn't squished by the filters */
.card-header .btn-new-entry{ min-width: 50px; }
@media (min-width: 760px){
  .card-header .btn-new-entry{ min-width: 100px; }
}

/* ============== MOBILE TWEAKS ============== */

/* Hide the fixed sidebar on phones; use edge padding instead */
@media (max-width: 576px){
    .sidebar{ display:none; }
  
    /* Content padding when sidebar is hidden */
    .container-xxl{
      padding-left: 12px;
      padding-right: 12px;
    }
  
    /* Top bar: shorter, tighter, hide subtitle */
    .topnav{ height: 56px; }
    .page-title{ font-size: 1rem; }
    .subtle{ display:none; }
  
    /* Search: single border only (wrapper keeps border) */
    .topnav .searchbar{
      min-width: 180px;
      max-width: 58vw;
      padding: .2rem .55rem;
    }
    .topnav .searchbar #quickSearch{
      border: 0 !important;
      background: transparent;
      box-shadow: none !important;
      height: 28px;
      padding: .1rem 0;
      font-size: .85rem;
    }
    .topnav .searchbar #quickSearch::placeholder{ color:#98a2b3; }
  
    /* Dashboard tiles: smaller, tighter text */
    .tile{
      min-height: 92px;
      padding: 12px 14px;
      border-radius: 16px;
    }
    .tile .value{ font-size: 1.35rem; }
    .tile .label{ font-size: .85rem; }
    .tile .trend{ font-size: .7rem; right:10px; bottom:10px; }
  
    /* Cards/sections more compact */
    .section-card{ border-radius: 16px; }
    .section-card .card-header{ padding: 10px 12px; }
    .section-card .card-body{ padding: 12px; }
    .info-box{ padding: 12px !important; }
  
    /* Buttons smaller by default; New Entry still stands out */
    .btn{
      --bs-btn-padding-y:.38rem;
      --bs-btn-padding-x:.7rem;
      --bs-btn-font-size:.85rem;
    }
  
    /* Allow wrapping in the header and keep the CTA first */
    .card-header .d-flex{
      display: grid !important;
      grid-template-columns: 1fr 1fr 1fr;
      max-width: 85%;
      margin-left: auto; 
      gap: 0.25rem !important;
      align-items: center;
    }
    .card-header .btn-new-entry,
    .card-header select.form-select{ width: 100%; min-width: 0 !important; }
    .card-header .btn-new-entry{
      order: 0;
      padding:0.175rem 2rem 0.175rem 0.5rem !important;
      font-size:.75rem !important;
      border-radius:14px !important;
      min-width: 0 !important;
      white-space:nowrap;
    }
  
    /* Table/DataTables */
    .table{ font-size:.8rem; }
    .table-responsive{ -webkit-overflow-scrolling: touch; }
    .dt-container .dataTables_length,
    .dt-container .dataTables_filter{ width:100%; margin:6px 0; }
    .dt-container .dataTables_info{ font-size:.75rem; }
  
    /* Tighten grid gaps */
    .row.g-3{ --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
  }
  
  /* Even smaller devices */
  @media (max-width: 380px){
    .topnav .searchbar{ max-width: 52vw; }
    .btn.btn-new-entry{
      padding:.5rem .75rem !important;
      font-size:.85rem !important;
    }
  }
  
  /* Chart height via CSS (Chart.js will resize if maintainAspectRatio=false) */
  #statChart{ max-height: 280px; }
  @media (max-width:576px){ #statChart{ max-height: 160px; } }
  
  /* Avatar images (if not already in your CSS) */
  .avatar, .profile-menu .avatar-xs{
    overflow: hidden;
    background:#eef5ff;
    border-radius:12px;
  }
  .avatar-img{
    width:100%; height:100%;
    object-fit:cover; display:block; border-radius:inherit;
  }
  .profile-menu .avatar-xs{ width:36px; height:36px; }