:root{
  --ui-bg: #0b1020;
  --ui-surface: rgba(255,255,255,0.86);
  --ui-surface-2: rgba(255,255,255,0.72);
  --ui-border: rgba(15, 23, 42, 0.10);
  --ui-text: #0b1324;
  --ui-muted: rgba(2, 6, 23, 0.55);
  --ui-primary: #2563eb;
  --ui-primary-2: #0ea5e9;
  --ui-focus: rgba(37, 99, 235, 0.22);
  --ui-radius: 14px;
  --ui-radius-sm: 10px;
  --ui-shadow: 0 20px 45px rgba(2, 6, 23, 0.12);
  --ui-shadow-sm: 0 10px 24px rgba(2, 6, 23, 0.10);
}

/* Base */
body.ui-modern{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ui-text);
  background:
    radial-gradient(1100px 700px at 20% 0%, rgba(37,99,235,.18), transparent 60%),
    radial-gradient(900px 600px at 80% 10%, rgba(14,165,233,.14), transparent 55%),
    radial-gradient(1000px 650px at 60% 90%, rgba(99,102,241,.10), transparent 60%),
    #f5f7fb;
}

a{color: var(--ui-primary);} 
a:hover{color: #1d4ed8;}

/* Cards */
.card{
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow-sm);
  background: var(--ui-surface);
  backdrop-filter: blur(10px);
}
.card-header{
  background: transparent;
  border-bottom: 1px solid var(--ui-border);
}

/* Buttons */
.btn{
  border-radius: 12px;
  padding: .55rem .95rem;
  font-weight: 600;
}
.btn-primary{
  border: none;
  background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-2));
  box-shadow: 0 10px 20px rgba(37,99,235,.18);
}
.btn-primary:hover{
  filter: brightness(0.98);
}
.btn-outline-primary{
  border-color: rgba(37,99,235,.35);
}

/* Inputs */
.form-control, .form-select{
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(255,255,255,0.92);
}
.form-control:focus, .form-select:focus{
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 .25rem var(--ui-focus);
}
.form-label{
  font-weight: 600;
  color: rgba(2, 6, 23, 0.72);
}

/* Alerts */
.alert{
  border-radius: 14px;
  border: 1px solid var(--ui-border);
}

/* Layout polish */
.main-content .content{
  background: transparent;
}

/* Sidebar */
#sidebar.sidebar{
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(37,99,235,.20), transparent 55%),
    radial-gradient(900px 600px at 100% 10%, rgba(14,165,233,.14), transparent 55%),
    #0b1020 !important;
  border-right: 1px solid rgba(255,255,255,0.08);
}
#sidebar .sidebar-header{
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}
#sidebar .nav-link{
  border-radius: 12px !important;
  padding: .75rem .9rem !important;
  color: rgba(255,255,255,0.82) !important;
}
#sidebar .nav-link:hover{
  background: rgba(255,255,255,0.08) !important;
}
#sidebar .nav-link.bg-secondary{
  background: rgba(37,99,235,0.22) !important;
  color: #fff !important;
}

/* Topbar */
.topbar{
  background: rgba(255,255,255,0.78) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ui-border) !important;
}
.topbar .avatar{
  background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-2)) !important;
}

/* Tables */
.table{
  --bs-table-bg: transparent;
}
.table thead th{
  color: rgba(2,6,23,0.55);
  font-weight: 700;
  border-bottom-color: var(--ui-border);
}

/* Guest auth page */
body.ui-modern.auth-page .card{
  box-shadow: var(--ui-shadow);
}
body.ui-modern.auth-page .card-body{
  padding: 1.65rem !important;
}

/* Stronger, cross-color gradient background for login/forgot pages */
body.ui-modern.auth-page{
  background:
    radial-gradient(1200px 800px at 15% 5%, rgba(37,99,235,.72), transparent 60%),
    radial-gradient(1100px 750px at 85% 10%, rgba(14,165,233,.66), transparent 58%),
    radial-gradient(900px 650px at 70% 92%, rgba(99,102,241,.50), transparent 60%),
    radial-gradient(800px 520px at 30% 85%, rgba(16,185,129,.10), transparent 55%),
    linear-gradient(135deg, rgba(246,250,255,0.84), rgba(228,240,252,0.82));
}

body.ui-modern.auth-page::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(37,99,235,0.22), rgba(14,165,233,0.16), rgba(99,102,241,0.16));
  mix-blend-mode: multiply;
}

body.ui-modern.auth-page .container{
  position: relative;
  z-index: 1;
}

@media (max-width: 576px){
  body.ui-modern .kpi-grid .kpi-card .card-body{
    padding: .85rem;
  }

  body.ui-modern .kpi-grid .kpi-card .card-subtitle{
    font-size: .78rem;
    line-height: 1.1;
  }

  body.ui-modern .kpi-grid .kpi-card .card-title{
    font-size: 1.05rem;
    margin-bottom: 0;
  }

  body.ui-modern .kpi-grid .kpi-card .card-title .badge{
    font-size: .9rem;
  }

  body.ui-modern .kpi-grid .low-stock-list{
    max-height: 120px;
    overflow: auto;
  }

  body.ui-modern .kpi-grid .low-stock-list .table{
    font-size: .82rem;
  }
}

body.ui-modern .kpi-grid .kpi-card .card-title{
  font-size: 1.25rem;
  line-height: 1.15;
}

@media (max-width: 992px){
  body.ui-modern .kpi-grid .kpi-card .card-title{
    font-size: 1.15rem;
  }
}

/* Mobile responsiveness */
@media (max-width: 768px){
  .topbar{
    padding: .75rem !important;
  }
  .topbar .d-flex{
    flex-wrap: wrap;
    gap: .5rem;
  }
  .topbar .dropdown > .btn{
    padding: .35rem .5rem;
  }
  .topbar #userDropdown span.text-dark{
    display: none;
  }
  .topbar select.form-select-sm{
    max-width: 170px;
  }

  .main-content .content{
    padding: 1rem !important;
  }

  /* Page titles scale better on phones */
  h1, .h1{ font-size: 1.35rem; }
  h2, .h2, .h4{ font-size: 1.15rem; }

  /* Prevent button toolbars from overflowing */
  .card-header .d-flex{
    flex-wrap: wrap;
    gap: .5rem;
  }

  /* Generic page header: title + action button(s) */
  .content > .d-flex.justify-content-between.align-items-center{
    flex-wrap: wrap;
    align-items: flex-start !important;
    gap: .75rem;
  }
  .content > .d-flex.justify-content-between.align-items-center > h1,
  .content > .d-flex.justify-content-between.align-items-center > h2,
  .content > .d-flex.justify-content-between.align-items-center > h3,
  .content > .d-flex.justify-content-between.align-items-center > h4,
  .content > .d-flex.justify-content-between.align-items-center > h5{
    width: 100%;
    margin-bottom: 0;
  }
  .content > .d-flex.justify-content-between.align-items-center > a.btn,
  .content > .d-flex.justify-content-between.align-items-center > .btn,
  .content > .d-flex.justify-content-between.align-items-center > div{
    width: 100%;
  }
  .content > .d-flex.justify-content-between.align-items-center > a.btn,
  .content > .d-flex.justify-content-between.align-items-center > .btn{
    display: inline-flex;
    justify-content: center;
  }

  /* Card header with multiple actions on the right */
  .card-header.d-flex.justify-content-between.align-items-center{
    flex-wrap: wrap;
    align-items: flex-start !important;
    gap: .75rem;
  }
  .card-header.d-flex.justify-content-between.align-items-center > :first-child{
    width: 100%;
  }
  .card-header.d-flex.justify-content-between.align-items-center > :last-child{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
  }
  .card-header.d-flex.justify-content-between.align-items-center > :last-child > .btn{
    flex: 1 1 calc(50% - .5rem);
    white-space: nowrap;
  }

  /* Tables: allow horizontal scroll even if view forgot a .table-responsive wrapper */
  table.table{
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table.table thead, table.table tbody, table.table tr{
    width: max-content;
  }

  .card{
    border-radius: 12px;
  }
}