/* Admin panel custom styles */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
  --sidebar-width:260px;
  --sidebar-collapsed-width:72px;
  --header-height:72px;
  --brand-1: #0072FF;
  /* --brand-2: #00C6FF; */
  --bg: #f6f8fb;
  --muted: #6c757d;
  --gradient-1: linear-gradient(90deg, #215bd6 0%, #19429b 100%);
}
html,body,.admin-app{height:100%;}
/* Prevent horizontal scroll during sidebar animations */
html, body {overflow-x: hidden;}

body{margin:0; font-size:16px;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;background:var(--bg);color:#222}
.admin-app{min-height:100vh;align-items:stretch}
/* Ensure the flex container is used even if Bootstrap classes change */
.admin-app{display:flex}
.admin-app{overflow-x:hidden}
.sidebar{
  width:var(--sidebar-width);
  min-width:var(--sidebar-width);
  max-width:var(--sidebar-width);
  transition:width .22s ease,transform .28s cubic-bezier(.2,.9,.2,1);
  display:flex;flex-direction:column;
  background:#08225f;
  color:#fff;
  /* fixed sidebar with its own scroll */
  position:fixed;left:0;top:0;bottom:0;height:100vh;z-index:1030;overflow-y:auto;
}
/* Allow sidebar to grow with content height when not fixed */
.sidebar{height:auto;align-self:stretch;}
/* Make sure sidebar at least fills the flex container height */
.sidebar{min-height:90%}
.sidebar .logo{width:44px;height:44px}
.sidebar .sidebar-header{background:#fff}
.sidebar .nav-link{color:rgba(255,255,255,.95);    padding: 8px; display:flex;align-items:center; margin-bottom: 5px; font-weight: 600;}
.sidebar .nav-link i{width:28px;text-align:center;font-size:18px}
.sidebar .nav-link .nav-text{margin-left:8px}
.nav{
  display:block;
}
.nav-link{
  font-size:14px;
}
.sidebar .nav-item{
  width:100%;
}
.sidebar .nav-link.active, .sidebar .nav-link:hover{    background-image: var(--gradient-1); border-radius:3px 20px 20px 3px;; font-weight: 600;}
.content{flex:1;display:flex;flex-direction:column;min-height:100vh;min-width:0;width:auto}
/* content offset to account for fixed header and fixed sidebar on desktop */
@media (min-width: 992px){
  .content{margin-left:var(--sidebar-width)}
  .content > header{position:fixed;left:var(--sidebar-width);right:0;top:0;height:var(--header-height);line-height:var(--header-height);z-index:1031;width:calc(100% - var(--sidebar-width));
    background:#fff;color:var(--muted);display:flex;align-items:center;padding:0 1rem;border-bottom:1px solid rgba(0,0,0,0.06);box-shadow:0 2px 6px rgba(0,0,0,0.06);
  }
  /* header inner container - centers header content and keeps consistent spacing */
  .content > header .header-inner{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1200px;margin:0 auto;padding:0 .75rem}
  .content > header .header-inner .page-title{display:flex;align-items:center;gap:.75rem;font-size:1.125rem;font-weight:600}
  /* increase gap between header bottom and main content */
  .content main{padding-top:calc(var(--header-height) + 1.75rem) !important}
  /* extra breathing room for sections and cards */
  .content main .page-section{margin-top:1rem;margin-bottom:1rem}
  .content main .card{margin-top:1rem}
}

/* when sidebar hidden the content/header should span full width */
.admin-app.sidebar-hidden .content{margin-left:0}
.admin-app.sidebar-hidden .content > header{left:0;width:100%}

/* When sidebar is collapsed keep header aligned to collapsed width */
.admin-app.collapsed .content{margin-left:var(--sidebar-collapsed-width)}
.admin-app.collapsed .content > header{left:var(--sidebar-collapsed-width);width:calc(100% - var(--sidebar-collapsed-width))}

/* Ensure header sits above content and sidebar when needed */
.content > header{z-index:1040}

/* mobile: header and content full width */
@media (max-width: 991.98px){
  .content{margin-left:0}
  .content > header{position:fixed;left:0;right:0;top:0;height:56px;line-height:56px;z-index:1031;width:100%;
    background:#fff;color:var(--muted);display:flex;align-items:center;padding:0 0.75rem;border-bottom:1px solid rgba(0,0,0,0.06);box-shadow:0 1px 4px rgba(0,0,0,0.06);
  }
  .content > header .header-inner{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:960px;margin:0 auto;padding:0 .5rem}
  .content main{padding-top:calc(56px + 1.75rem) !important}
  /* sidebar off-canvas remains fixed but above header when open */
  .sidebar{top:0;height:100vh}
  .admin-app.sidebar-open .sidebar{z-index:1040}
}
/* Override Bootstrap's w-100 when used on .content so it can shrink/grow correctly */
.content.w-100{width:auto !important}
.avatar{width:44px;height:44px}

/* Collapsed: show icons only */
.admin-app.collapsed .sidebar{
  width:var(--sidebar-collapsed-width);
}
.admin-app.collapsed .sidebar .nav-link{justify-content:center}
.admin-app.collapsed .sidebar .nav-link .nav-text{display:none}
.admin-app.collapsed .sidebar .sidebar-header div{display:none}
.admin-app.collapsed .sidebar .sidebar-footer{display:none}
.admin-app.collapsed .sidebar .logo{margin:8px auto}

/* Make the content shift when sidebar collapsed */
.admin-app .content{transition:margin-left .2s ease}

/* Responsive: collapse to offcanvas-like behavior on small screens */
@media (max-width: 991.98px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:1030;transform:translateX(-100%);}
  .admin-app.sidebar-open .sidebar{transform:translateX(0);}
  .content{padding-left:0}
  body.admin-overlay::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:1029}
}

/* Hide sidebar completely when toggled on desktop.
   Make the sidebar fixed and translated off-screen so it is removed from
   the document flow and the `.content` can fill the full width. */
.admin-app.sidebar-hidden .sidebar{
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  width:var(--sidebar-width);
  min-width:0;
  max-width:var(--sidebar-width);
  transform: translateX(-100%) !important;
  z-index:1030;
}
.admin-app.sidebar-hidden .content{margin-left:0;width:100%}

/* Floating open button shown when sidebar is hidden */
.content{transition:margin-left .28s cubic-bezier(.2,.9,.2,1),width .28s cubic-bezier(.2,.9,.2,1)}

/* Card / UI polish */
.card{border-radius:.75rem;box-shadow:0 6px 18px rgba(30,41,59,0.06)}
.card .card-header{background:transparent;border-bottom:none}
.placeholder{border-radius:.5rem}
.table-responsive{overflow:auto}

/* Templates grid */
.template-card{border-radius:.75rem;overflow:hidden;background:#fff}
.template-thumb{height:140px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(13,110,253,.08),rgba(111,66,193,.06))}
.template-thumb img{max-width:100%;max-height:120px}

/* Table visual polish */
.card .table thead th{background:linear-gradient(90deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02));border-bottom:1px solid rgba(0,0,0,0.06)}
.table thead th{font-weight:600}
.table thead th, .table tbody td{vertical-align:middle}
.table.table-hover tbody tr:hover{background:rgba(13,110,253,0.03)}
.table thead th:first-child{border-top-left-radius:.75rem}
.table thead th:last-child{border-top-right-radius:.75rem}
.table-responsive{border-radius:.75rem;}
.dataTable-dropdown, .dataTable-search{margin-bottom:.5rem}

/* Datatable: elegant header matching sidebar gradient, white text */
.table thead th{
  background: linear-gradient(180deg,var(--brand-1),var(--brand-2));
  color: #fff !important;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Table body styling */
.table tbody td{background:#fff}
.table tbody tr:nth-child(odd) td{background: #fbfcfe}
.table tbody tr td{padding:.85rem .9rem}
.table thead th{padding:.9rem .9rem}

/* Datatable controls (Simple-DataTables) styling */
.dataTable-wrapper{background:transparent}
.dataTable-top{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:space-between;padding:.5rem 0}
.dataTable-search input{border-radius:.4rem;border:1px solid rgba(0,0,0,0.08);padding:.4rem .6rem}
.dataTable-dropdown select{border-radius:.4rem;border:1px solid rgba(0,0,0,0.08);padding:.25rem .5rem}
.dataTable-info{color:var(--muted);font-size:.9rem}
.dataTable-pagination .button{border-radius:.35rem;border:1px solid rgba(0,0,0,0.06);padding:.25rem .6rem;margin-left:.25rem}

/* subtle card around table */
.card .table-responsive{padding:.6rem}
.card .table{margin-bottom:0}

/* small helpers */
.muted{color:var(--muted)}

/* Compact dropdown: reduce spacing between items in the user menu */
.dropdown-menu{padding:0.25rem 0}
.dropdown-menu .dropdown-header{padding:.5rem 1rem;margin-bottom:0}
.dropdown-menu .dropdown-item{padding:.45rem 1rem}
.dropdown-menu .dropdown-divider{margin:.25rem 0}
.dropdown-menu .dropdown-header .fw-bold{font-size:0.95rem}
.datatable-sorter::before
{
    
    display:none !important
}
.datatable-sorter::after
{
    
    display:none !important
}
.table>thead {
    vertical-align: bottom;
    background: #08225f;
}

.status-active{
  background:#e6f9f0;
  color:#0f5132;
  padding:4px 10px;
  border-radius:20px;
  font-size:13px;
  }
  .status-block{
  background:#fdecea;
  color:#842029;
  padding:4px 10px;
  border-radius:20px;
  font-size:13px;
  }
  .avatar{
  width:35px;
  height:35px;
  border-radius:50%;
  background:#0d6efd;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  }
  .btn-primary{
    background:#235bda !important;
    border-color:#235bda !important;
  }

  .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    color: #000;
}
.stat-box{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:30px;
    border-radius:5px;
    color:white;
    box-shadow:0 5px 15px rgba(0,0,0,0.15);
}

.stat-box h6{
    opacity:0.9;
    margin-bottom:4px;
}

.stat-box h3{
    margin:0;
    font-weight:700;
}

.icon-box{
   width: 55px;
    height: 55px;
    background:#235bda;
    border-radius: 20%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.bg-warning {
    --bs-bg-opacity: 1;
    background-color: rgb(223 167 2) !important;
}

.provider-img{width:40px;height:40px;border-radius:50%;}
.card-bluee {
    /* background-color: #6dd9cf !important; */
    background-image: linear-gradient(to bottom, #dfecff70, #00b5ad96);
    border: 1px solid #d0d9ed;
}

/* Status Badges */
.status-todo{background:#fff3cd;color:#856404;}
.status-progress{background:#cfe2ff;color:#084298;}
.status-done{background:#d1e7dd;color:#0f5132;}

/* Priority */
.priority-high{color:#dc3545;font-weight:600;}
.priority-medium{color:#fd7e14;font-weight:600;}
.priority-low{color:#198754;font-weight:600;}


.box{background:white;padding:20px;border-radius:15px;box-shadow:0 10px 25px rgba(0,0,0,0.1);}
.yellow{background:#ffc107!important}
.orange{background:#fd7e14!important;color:white}
.red{background:#dc3545!important;color:white}
.green{background:#198754!important;color:white}
.gray{background:#6c757d!important;color:white}
.overdue{font-size:10px;background:black;padding:2px 6px;border-radius:4px;margin-left:5px;}

.task-box{
  max-width:700px;
  margin:auto;
  background:white;
  padding:20px;
  border-radius:10px;
  box-shadow:0 5px 15px rgba(0,0,0,0.1);
  }

  .task-box h3{
  margin-bottom:15px;
  }

  .task-list{
  list-style:none;
  padding:0;
  margin:0;
  }

  .task-list li{
  padding:15px;
  border-bottom:1px solid #eee;
  }

  .task-list li:last-child{
  border:none;
  }

 
  .badge{
  padding:4px 8px;
  border-radius:5px;
  font-size:12px;
  color:white;
  }


  table .active{background:#0d6efd;}
  .intake{background:#ffc107;color:black;}
  .closed{background:#6c757d;}
  .pending{background:#fd7e14;}
  .onhold{background:#dc3545;}

  .kanban-column{
   background:#fff;
   border-radius:10px;
   padding:10px;
   box-shadow:0 4px 10px rgba(0,0,0,0.1);
   margin-bottom:20px;
  }

  .kanban-header{
   font-weight:600;
   margin-bottom:10px;
  }

  .kanban-card{
   background:#f8f9fa;
   border-radius:8px;
   padding:10px;
   margin-bottom:10px;
   font-size:14px;
   cursor:pointer;
  }

  .badge-status{ font-size:11px; cursor:default; }