@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap");

/* ===== CSS VARIABLES ===== */
:root {
  --primary: #4f6ef7;
  --primary-dark: #3a56d4;
  --primary-light: #e8ecff;
  --success: #10b981;
  --success-dark: #059669;
  --info: #06b6d4;
  --warning: #f59e0b;
  --danger: #ef4444;
  --danger-dark: #dc2626;
  --purple: #8b5cf6;
  --pink: #ec4899;
  --dark: #1e293b;
  --sidebar-bg: #0f172a;
  --sidebar-hover: #1e293b;
  --sidebar-active: #4f6ef7;
  --header-bg: #ffffff;
  --header-height: 56px;
  --sidebar-width: 255px;
  --body-bg: #f1f5f9;
  --card-bg: #ffffff;
  --card-border: rgba(0,0,0,0.06);
  --text-main: #1e293b;
  --text-muted: #94a3b8;
  --text-light: #64748b;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.12);
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== RESET & BASE ===== */
html {
  position: relative;
  min-height: 100%;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.875rem;
  background-color: var(--body-bg);
  color: var(--text-main);
  padding-bottom: 60px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--primary);
  text-decoration: none !important;
  outline: none !important;
  transition: var(--transition);
}

a:hover { color: var(--primary-dark); }

img {
  vertical-align: middle;
  border: 0;
}

label {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-light);
  letter-spacing: 0.01em;
}

canvas, svg { max-width: 100%; }

button:focus { outline: none !important; }
a.btn:focus { color: #ffffff !important; }

input[type=text] { font-size: 14px !important; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.04); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.3); }

/* ===== UTILITY CLASSES ===== */
/* ===== FOOTER ===== */

.footer{
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width);
    right: 0;
    height: 52px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border-top: 1px solid rgba(0,0,0,0.06);

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 22px;
    z-index: 98;

    transition: var(--transition);
    box-shadow: 0 -2px 16px rgba(0,0,0,0.04);
}

.footer-left,
.footer-right{
    display: flex;
    align-items: center;
    gap: 6px;

    font-size: 0.82rem;
    color: var(--text-light);
}

.footer-brand{
    color: var(--primary);
    font-weight: 700;
    letter-spacing: .02em;
}

.footer-company{
    color: var(--dark);
    font-weight: 600;
}

.footer-powered{
    color: var(--text-muted);
}

.footer a{
    text-decoration: none !important;
    transition: var(--transition);
}

.footer a:hover{
    opacity: .85;
    transform: translateY(-1px);
}

/* COLLAPSED SIDEBAR SUPPORT */
#main.enlarged .footer{
    left: 70px;
}

/* MOBILE */
@media(max-width:768px){

    .footer{
        left: 0 !important;
        padding: 10px 14px;
        height: auto;

        flex-direction: column;
        gap: 4px;

        text-align: center;
    }

    .footer-left,
    .footer-right{
        justify-content: center;
        font-size: 0.76rem;
    }
}

.ff {
  font-size: 20px;
  border-radius: var(--radius);
  box-shadow: 0 4px 24px rgba(79, 110, 247, 0.25);
}

.limg {
  border: 3px solid #e2e8f0;
  width: 150px;
  border-radius: var(--radius-sm);
}

.selected { background-color: #fde68a; }

.red { background-color: var(--success) !important; }

.my-custom-scrollbar {
  position: relative;
  height: 300px;
  overflow: auto;
}

.table-wrapper-scroll-y { display: block; }

.small { font-size: 0.72rem; }
.noradius { border-radius: 0; }
.noborder { border: 0 !important; }
.radius-circle { border-radius: 50px; }
.pull-right { float: right; }
.pull-left { float: left; }
.display-block { display: block; }
.text-overflow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-shadow { text-shadow: 0 2px 8px rgba(0,0,0,0.18); }
.border-left { border-left: 3px solid #e2e8f0; }

/* ===== ANIMATED USER NOTE ===== */
.userNote {
  padding: 0;
  text-align: right;
}
.userNote span {
  font-weight: 700 !important;
  padding: 5px 10px;
  cursor: pointer !important;
  border-radius: 6px;
  animation: mymove 2s infinite;
  animation-delay: 2s;
}
@keyframes mymove {
  from {
    color: #ffc107;
    text-shadow: 0 0 16px #10b981;
    background-color: #10b981;
    box-shadow: 0 0 16px rgba(16,185,129,0.4);
  }
  to {
    color: #10b981;
    text-shadow: 0 0 16px #ffc107;
    background-color: #ffc107;
    box-shadow: 0 0 16px rgba(255,193,7,0.4);
  }
}

/* ===== FULLSCREEN LOADER ===== */
body.loading #content {
  filter: blur(5px);
  pointer-events: none;
  user-select: none;
}
body.loading #loader { display: flex; }

#loader {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(4px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.spinner {
  border: 4px solid #e2e8f0;
  border-top: 4px solid var(--primary);
  border-radius: 50%;
  width: 52px; height: 52px;
  animation: spin 0.8s linear infinite;
  box-shadow: 0 0 24px rgba(79,110,247,0.15);
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== CUSTOM LOADER ===== */
.loader {
  width: 48px; height: 48px;
  background: transparent;
  border: 4px solid #dcfce7;
  border-top: 4px solid var(--success);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 20px rgba(16,185,129,0.2);
}
.loader.active {
  animation: loading 3s ease-in-out;
  animation-fill-mode: forwards;
}
@keyframes loading {
  30% { opacity: 1; }
  85% { opacity: 1; transform: rotate(1080deg); border-color: #fde047; }
  100% { opacity: 1; transform: rotate(1080deg); border-color: var(--success); }
}

.check {
  align-items: center;
  transform: translate3d(-4px, 50px, 0);
  opacity: 0;
}
.check span:nth-child(1) {
  display: block; width: 13px; height: 3px;
  background-color: #fff; border-radius: 2px;
  transform: rotate(45deg) translate3d(22px, 6px, 0);
}
.check span:nth-child(2) {
  display: block; width: 22px; height: 3px;
  background-color: #fff; border-radius: 2px;
  transform: rotate(-45deg) translate3d(6px, 15px, 0);
  transform-origin: 100%;
}
.check.active {
  opacity: 1;
  transform: translate3d(-4px, 4px, 0);
  transition: all 0.5s cubic-bezier(0.49, 1.74, 0.38, 1.74);
  transition-delay: 0.2s;
}

.ldimg { filter: drop-shadow(2px 8px 12px rgba(0,0,0,0.15)); }

.m-none { display: block; }

/* ===== BACKGROUND COLORS ===== */
.bg-coffee { background-color: #78350f; }
.bg-user { background-color: #0f5152; }
.bg-primary { background-color: var(--primary) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-info { background-color: var(--info) !important; }
.bg-warning { background-color: var(--warning) !important; }
.bg-danger { background-color: var(--danger) !important; }
.bg-purple { background-color: var(--purple) !important; }
.bg-pink { background-color: var(--pink) !important; }
.bg-dark { background-color: var(--dark) !important; }
.bg-default { background-color: #93c5fd !important; }

/* ===== TEXT COLORS ===== */
.text-custom { color: #93c5fd; }
.text-primary { color: var(--primary) !important; }
.text-success { color: var(--success) !important; }
.text-info { color: var(--info) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }
.text-purple { color: var(--purple); }
.text-pink { color: var(--pink); }
.text-dark { color: var(--dark); }
.text-white { color: #ffffff; }
.text-muted { color: var(--text-muted); }

/* ===== LABEL / BADGE ===== */
.label {
  display: inline-block;
  padding: 0.25em 0.65em;
  font-size: 0.72rem;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 6px;
  letter-spacing: 0.02em;
}
.label:empty { display: none; }
.label-info { background-color: var(--info); }

/* ===== GRID ===== */
.row { margin-right: -10px; margin-left: -10px; }
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12,
.col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8,
.col-lg-9, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2,
.col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9,
.col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3,
.col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xl,
.col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4,
.col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9 {
  padding-right: 10px;
  padding-left: 10px;
}

/* ═══════════════════════════════════════════════════════
   HEADERBAR  — full-width fixed top bar
   Left zone  = logo panel (matches sidebar width)
   Right zone = navbar (fills remaining width)
   ═══════════════════════════════════════════════════════ */
:root {
  --header-height: 60px;
}

.headerbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  height: var(--header-height);
  display: flex;
  align-items: stretch;
}

/* ── Logo panel ── */
.headerbar .headerbar-left {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--sidebar-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
  transition: width 0.25s cubic-bezier(0.4,0,0.2,1),
              min-width 0.25s cubic-bezier(0.4,0,0.2,1);
}

.headerbar .headerbar-left .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f8fafc !important;
  text-decoration: none !important;
  overflow: hidden;
}

.headerbar .headerbar-left .logo img {
  max-height: 36px;
  width: auto;
  flex-shrink: 0;
  border-radius: 8px;
  object-fit: contain;
}

.logo {
  color: #f8fafc !important;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.logo span span { color: var(--primary); }

/* ── Navbar panel ── */
.navbar-custom {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  margin-left: 0;           /* no margin — flex handles spacing */
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
  transition: margin-left 0.25s cubic-bezier(0.4,0,0.2,1);
  min-height: var(--header-height);
}

/* ── Toggle button ── */
.button-menu-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #64748b;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition);
}
.button-menu-mobile:hover {
  background: #f1f5f9;
  color: var(--primary);
}

/* ── Clock zone ── */
.navbar-clock {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: #f8fafc;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 8px;
  color: var(--text-light);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.navbar-clock i {
  color: var(--primary);
  font-size: 14px;
}
#clock { color: var(--text-main); }

/* ── Right actions ── */
.navbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 6px;
}

/* user email chip */
.navbar-user-email {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--primary-light);
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.navbar-user-email i { font-size: 13px; flex-shrink: 0; }

/* profile dropdown trigger */
.navbar-profile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  background: #f1f5f9;
  border: 2px solid #e2e8f0;
  border-radius: 50%;
  color: var(--text-light);
  font-size: 16px;
  cursor: pointer;
  text-decoration: none !important;
  transition: var(--transition);
  flex-shrink: 0;
}
.navbar-profile-btn:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

/* dropdown overrides */
.navbar-custom .dropdown-toggle::after { display: none; }
.navbar-custom .nav-link {
  padding: 0;
  line-height: 1;
  color: var(--text-light);
  font-size: 16px;
  transition: var(--transition);
}
.navbar-custom .nav-link:hover { color: var(--primary); }
.navbar-custom .menu-left { overflow: hidden; }

/* profile dropdown panel */
.profile-dropdown {
  width: 200px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  margin-top: 8px !important;
}
.profile-dropdown .noti-title {
  padding: 10px 12px 8px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 4px;
}
.profile-dropdown .noti-title h5 {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
}
.profile-dropdown .noti-title h5 small { color: var(--text-main); font-weight: 600; font-size: 0.82rem; }
.profile-dropdown .notify-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--text-main);
  font-size: 0.85rem;
  font-weight: 500;
  transition: var(--transition);
}
.profile-dropdown .notify-item:hover {
  background: #fef2f2;
  color: var(--danger);
}
.profile-dropdown .notify-item i { font-size: 14px; width: 16px; text-align: center; }

/* ── Collapsed header-left ── */
#main.enlarged .headerbar .headerbar-left {
  width: 70px !important;
  min-width: 70px !important;
  padding: 0 10px;
}
#main.enlarged .headerbar .headerbar-left .logo-text { display: none; }

/* ===== SIDEBAR ===== */
/* ═══════════════════════════════════════════════════════
   SIDEBAR  — two states:
     DEFAULT  → full width 255px, labels visible
     COLLAPSED → #main.enlarged → 70px icon-only, fly-out on hover
   ═══════════════════════════════════════════════════════ */

.main-sidebar {
  position: fixed;
  top: var(--header-height);
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);   /* 255px — OPEN by default */
  z-index: 100;
  background: var(--sidebar-bg);
  overflow-y: auto;
  overflow-x: visible;           /* must be visible for fly-outs */
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* hide scrollbar track but keep scroll */
.main-sidebar::-webkit-scrollbar { width: 4px; }
.main-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius:4px; }

.sidebar-inner { height: 100%; min-height: 100%; }

/* ── menu reset ── */
#sidebar-menu,
#sidebar-menu ul,
#sidebar-menu li,
#sidebar-menu a {
  border: 0;
  font-weight: normal;
  line-height: 1;
  list-style: none;
  margin: 0; padding: 0;
  position: relative;
  text-decoration: none;
}

#sidebar-menu { padding: 12px 0 80px 0; width: 100%; }
#sidebar-menu a { line-height: 1.3; }

/* ── sub-menu arrow ── */
#sidebar-menu ul li .menu-arrow {
  transition: transform 0.2s ease;
  position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  font-family: 'FontAwesome';
  font-size: 13px; line-height: 1;
}
#sidebar-menu ul li .menu-arrow:before { content: "105"; }
#sidebar-menu ul li a.subdrop .menu-arrow { transform: translateY(-50%) rotate(90deg); }

/* ── second-level items ── */
#sidebar-menu ul ul { display: none; }
#sidebar-menu ul ul li { border-top: 0; }
#sidebar-menu ul ul li.active > a { color: #f8fafc; }
#sidebar-menu ul ul a {
  color: #94a3b8;
  display: block;
  padding: 9px 20px 9px 54px;
  font-size: 0.82rem;
  transition: var(--transition);
}
#sidebar-menu ul ul a:hover { color: #e2e8f0; background: rgba(255,255,255,0.05); }
#sidebar-menu ul ul a i { margin-right: 6px; }
#sidebar-menu ul ul ul a { padding-left: 74px; }
#sidebar-menu .label { margin-top: 2px; }

/* ── sub-drop (open parent) ── */
#sidebar-menu .subdrop {
  color: #fff !important;
  background-color: rgba(255,255,255,0.06);
  border-left: 2px solid var(--primary) !important;
}

/* ── top-level links ── */
#sidebar-menu > ul > li > a {
  color: #94a3b8;
  display: flex;
  align-items: center;
  padding: 11px 16px;
  font-weight: 500;
  font-size: 0.85rem;
  border-left: 3px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  transition: var(--transition);
}
#sidebar-menu > ul > li > a:hover {
  color: #f1f5f9;
  background-color: rgba(255,255,255,0.08);
  border-left-color: var(--primary);
  text-decoration: none;
}
#sidebar-menu > ul > li > a > span {
  vertical-align: middle;
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* ── icons ── */
#sidebar-menu ul li a i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  min-width: 20px;
  width: 20px;
  margin-right: 13px;
  flex-shrink: 0;
  opacity: 0.75;
  transition: var(--transition);
}
#sidebar-menu ul li a .drop-arrow { float: right; }
#sidebar-menu ul li a .drop-arrow i { margin-right: 0; }

/* ── active link ── */
#sidebar-menu > ul > li > a.active {
  color: #ffffff !important;
  background-color: var(--primary);
  border-left-color: rgba(255,255,255,0.4);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
#sidebar-menu > ul > li > a.active i { opacity: 1; }

/* ── section title ── */
.menu-title {
  padding: 18px 16px 6px !important;
  letter-spacing: 0.08em;
  pointer-events: none;
  cursor: default;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

#sidebar-menu > ul > li > a.pro {
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff;
  border-left: none;
}

/* ═══════════════════════════════════════════════════════
   CONTENT PAGE — margin tracks sidebar width
   ═══════════════════════════════════════════════════════ */
.content-page {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.content-page .content {
  padding: 20px 20px 60px 20px;
  padding-top: calc(var(--header-height) + 20px);
}

.main-sidebar.left { position: fixed; }

body.adminbody .main-sidebar.left { background-color: #f8fafc; }

/* ═══════════════════════════════════════════════════════
   COLLAPSED STATE  #main.enlarged
   Sidebar narrows to 70px (icon-only).
   Hover on a list item expands it to 260px so the label shows.
   ═══════════════════════════════════════════════════════ */
#main.enlarged .left.main-sidebar {
  width: 70px;
  overflow: visible;           /* allow flyout to escape */
}
#main.enlarged .content-page  { margin-left: 70px; }
/* #main.enlarged .navbar-custom { margin-left: 70px; } */
/* #main.enlarged .footer        { left: 70px; } */
#main.enlarged .headerbar .headerbar-left { width: 70px !important; }
#main.enlarged .headerbar .headerbar-left .logo span { display: none; opacity: 0; }

/* hide text labels & section titles */
#main.enlarged .left.main-sidebar #sidebar-menu > ul > li > a > span { opacity: 0; width: 0; overflow: hidden; }
#main.enlarged .menu-title { opacity: 0; pointer-events: none; }
#main.enlarged .menu-arrow { display: none !important; }

/* icon-only link sizing */
#main.enlarged .left.main-sidebar #sidebar-menu > ul > li > a {
  padding: 13px 0;
  justify-content: center;
  border-left: 3px solid transparent;
}
#main.enlarged .left.main-sidebar #sidebar-menu > ul > li > a i {
  margin-right: 0;
  font-size: 19px;
  opacity: 0.85;
}

/* ── HOVER FLYOUT in collapsed mode ── */
#main.enlarged .left.main-sidebar #sidebar-menu > ul > li {
  position: relative;
}
#main.enlarged .left.main-sidebar #sidebar-menu > ul > li:hover > a {
  width: 260px;
  background-color: var(--primary);
  color: #fff;
  border-left-color: rgba(255,255,255,0.3);
  justify-content: flex-start;
  padding-left: 16px;
  z-index: 200;
  position: relative;
}
#main.enlarged .left.main-sidebar #sidebar-menu > ul > li:hover > a i {
  margin-right: 13px;
  opacity: 1;
  color: #fff;
}
/* show the span text on hover */
#main.enlarged .left.main-sidebar #sidebar-menu > ul > li:hover > a > span {
  opacity: 1;
  width: auto;
  overflow: visible;
  display: inline;
}

/* sub-menu flyout panel */
#main.enlarged .left.main-sidebar #sidebar-menu > ul > li > ul { display: none; }
#main.enlarged .left.main-sidebar #sidebar-menu > ul > li:hover > ul {
  display: block;
  position: absolute;
  left: 70px;
  top: 0;
  width: 190px;
  padding: 6px 0;
  background: var(--card-bg);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow-lg);
  z-index: 199;
}
#main.enlarged .left.main-sidebar #sidebar-menu > ul > li:hover > ul a {
  color: var(--text-main);
  padding: 9px 16px;
  background: transparent;
  border-radius: var(--radius-sm);
  width: 100%;
  white-space: nowrap;
}
#main.enlarged .left.main-sidebar #sidebar-menu > ul > li:hover > ul a:hover {
  color: var(--primary);
  background: var(--primary-light);
}

/* nested 3rd-level flyout */
#main.enlarged .left.main-sidebar #sidebar-menu ul ul li:hover > ul {
  display: block;
  left: 190px;
  margin-top: -36px;
  position: absolute;
  width: 190px;
}

/* active link in collapsed mode */
#main.enlarged #sidebar-menu ul ul li.active a { color: var(--primary); }

/* ===== DROPDOWN ===== */
.dropdown-lg { width: 290px; }
.dropdown-menu {
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--card-border);
  margin: 4px 0 0 0;
  padding: 6px;
  border-radius: var(--radius);
}
.dropdown-item {
  font-size: 0.87rem;
  white-space: inherit;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  transition: var(--transition);
}
.dropdown-item.active, .dropdown-item:active {
  background-color: var(--primary);
  color: #fff;
}
.dropdown-example { position: static; display: block; margin-bottom: 0.25rem; clear: left; }

/* ===== NOTIFICATION ===== */
.notif { margin-left: 0 !important; }
.notif .noti-title {
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  margin: 0; width: auto;
  padding: 10px 16px 14px 16px;
}
.notif .noti-title h5 { color: #ffffff; margin: 0; font-weight: 600; }
.notif .noti-title .label { float: right; }
.notif .noti-icon {
  font-size: 20px; padding: 0 12px;
  vertical-align: middle;
  color: var(--text-light);
  transition: var(--transition);
}
.notif .noti-icon:hover { color: var(--primary); }
.notif .notif-bullet {
  height: 10px; width: 10px;
  background-color: var(--danger);
  display: inline-block;
  position: absolute; top: 12px; right: 8px;
  border-radius: 50%;
  border: 2px solid #fff;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  50% { box-shadow: 0 0 0 5px rgba(239,68,68,0); }
}
.notif .notify-item { padding: 10px 14px; border-radius: var(--radius-sm); transition: var(--transition); }
.notif .notify-item:hover { background: var(--body-bg); }
.notif .notify-item .notify-icon {
  float: left; height: 38px; width: 38px;
  line-height: 38px; text-align: center;
  margin-right: 10px; border-radius: 10px;
  color: #ffffff;
}
.notif .notify-item .notify-icon img { margin-top: 4px; }
.notif .notify-item .notify-details {
  margin-bottom: 0; overflow: hidden;
  margin-left: 48px; text-overflow: ellipsis; white-space: inherit;
}
.notif .notify-item .notify-details b { font-weight: 600; }
.notif .notify-item .notify-details small { display: block; color: var(--text-muted); margin-top: 2px; }
.notif .notify-item .notify-details span {
  display: block; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text-light);
}
.notif .notify-all {
  border-radius: 0 0 var(--radius) var(--radius);
  margin: 0; background-color: var(--primary-light);
  color: var(--primary); font-weight: 600; text-align: center;
  padding: 10px;
}

/* ===== PROFILE ===== */
.profile-dropdown { width: 180px; }
.profile-dropdown i { font-size: 15px; vertical-align: middle; margin-right: 8px; color: var(--text-light); }
.profile-dropdown span { vertical-align: middle; }
.nav-user { padding: 0 10px !important; }
.nav-user img {
  height: 34px; width: 34px; margin-bottom: 6px;
  border-radius: 50%;
  border: 2px solid var(--primary-light);
  object-fit: cover;
  box-shadow: var(--shadow-sm);
}
.avatar-circle, .avatar-rounded { border-radius: 50%; }

/* ===== TOGGLE SWITCH ===== */
.switch {
  position: relative;
  width: 44px; height: 22px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #cbd5e1;
  transition: 0.3s;
}
.slider:before {
  position: absolute; content: "";
  height: 14px; width: 14px;
  left: 4px; bottom: 4px;
  background-color: white;
  transition: 0.3s;
  box-shadow: var(--shadow-sm);
}
input:checked + .slider { background-color: var(--primary); }
input:focus + .slider { box-shadow: 0 0 0 3px rgba(79,110,247,0.2); }
input:checked + .slider:before { transform: translateX(22px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }

/* ===== PASSWORD TOGGLE ===== */
.password-toggle-icon i {
  font-size: 16px; position: absolute;
  right: 28px; top: 163px; color: var(--text-muted); z-index: 9999999;
  cursor: pointer; transition: var(--transition);
}
.password-toggle-icon i:hover { color: var(--primary); }
.passkey-toggle-icon i {
  font-size: 16px; position: absolute;
  right: 16px; top: 10px; color: var(--text-muted); cursor: pointer;
  transition: var(--transition);
}
.passkey-toggle-icon i:hover { color: var(--primary); }

/* ===== FILE INPUT ===== */
.btcd-f-input { display: inline-block; width: 100%; position: relative; overflow: hidden; }
.btcd-f-input > div > input::-webkit-file-upload-button { cursor: pointer; }
.btcd-f-wrp { cursor: pointer; padding: 6px; border-radius: var(--radius-sm); transition: var(--transition); }
.btcd-f-wrp > small { color: var(--text-muted); font-size: 0.75rem; }
.btcd-f-wrp > button {
  cursor: pointer; background: #f1f5f9;
  padding: 5px 10px;
  display: inline-block; border-radius: var(--radius-sm);
  border: none; margin-right: 8px; height: 34px;
  transition: var(--transition);
}
.btcd-f-wrp > button:hover { background: #e2e8f0; }
.btcd-f-wrp > button > img { width: 22px; }
.btcd-f-wrp > button > span,
.btcd-f-wrp > span,
.btcd-f-wrp > small { vertical-align: super; }
.btcd-f-input > .btcd-f-wrp > input {
  z-index: 100; width: 100%; position: absolute;
  opacity: 0; left: 0; height: 36px; cursor: pointer;
}
.btcd-f-wrp:hover { background: #f8fafc; border-radius: var(--radius-sm); }

.btcd-files > div {
  display: flex; align-items: center;
  background: #f8fafc;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  margin-left: 24px; width: 91%;
  margin-top: 8px; height: 44px;
  transition: var(--transition);
}
.btcd-files > div:hover { box-shadow: var(--shadow-sm); }
.btcd-files > div > div { display: inline-block; width: 73%; }
.btcd-files > div > div > small { color: var(--text-muted); font-size: 0.72rem; }
.btcd-files > div > img { width: 36px; height: 36px; margin: 0 10px; border-radius: var(--radius-sm); object-fit: cover; }
.btcd-files > div > div > span {
  display: inline-block; width: 100%;
  text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
  font-weight: 500; font-size: 0.85rem;
}
.btcd-files > div > button {
  background: #e2e8f0; border: none; border-radius: 50%;
  width: 26px; height: 26px;
  font-size: 16px; margin-right: 8px; padding: 0;
  transition: var(--transition); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-light);
}
.btcd-files > div > button:hover { background: #cbd5e1; color: var(--danger); }

/* ===== BUTTONS ===== */
.btn-rounded { border-radius: 2em !important; padding: 0.45rem 1.4rem; font-weight: 500; }

.btn-label {
  background: rgba(0,0,0,0.08);
  display: inline-block; padding: 7px 15px;
  border-radius: 3px 0 0 3px;
  margin: -7px -14px; margin-right: 12px;
}
.btn-rounded .btn-label { padding: 7px 15px 7px 20px; margin-left: -20px; }
.btn-rounded .btn-label-right { margin-right: -20px; margin-left: 12px; }
.btn-label-right { margin-left: 12px; margin-right: -13px; border-radius: 0 3px 3px 0; }

.btn-custom { background-color: #93c5fd; border-color: #93c5fd; color: #fff; }
.btn-custom:hover, .btn-custom:focus, .btn-custom:active, .btn-custom.active,
.open > .dropdown-toggle.btn-custom { background-color: #60a5fa; border-color: #60a5fa; color: #fff; }

.btn-primary { background-color: var(--primary); border-color: var(--primary); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.open > .dropdown-toggle.btn-primary { background-color: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }

.btn-success { background-color: var(--success); border-color: var(--success); }
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active,
.open > .dropdown-toggle.btn-success { background-color: var(--success-dark); border-color: var(--success-dark); color: #fff; }

.btn-info { background-color: var(--info); border-color: var(--info); }
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active,
.open > .dropdown-toggle.btn-info { background-color: #0891b2; border-color: #0891b2; color: #fff; }

.btn-warning { background-color: var(--warning); border-color: var(--warning); color: #fff; }
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active,
.open > .dropdown-toggle.btn-warning { background-color: #d97706; border-color: #d97706; color: #fff; }

.btn-danger { background-color: var(--danger); border-color: var(--danger); }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active,
.open > .dropdown-toggle.btn-danger { background-color: var(--danger-dark); border-color: var(--danger-dark); color: #fff; }

.btn-dark { background-color: var(--dark); border-color: var(--dark); color: #fff; }
.btn-dark:hover, .btn-dark:focus, .btn-dark:active, .btn-dark.active,
.open > .dropdown-toggle.btn-dark { background-color: #0f172a; border-color: #0f172a; color: #fff; }

.btn-outline-custom { color: #93c5fd; background: transparent; border-color: #93c5fd; }
.btn-outline-custom:hover, .btn-outline-custom:focus, .btn-outline-custom:active,
.open > .dropdown-toggle.btn-outline-custom { color: #fff; background-color: #93c5fd; border-color: #93c5fd; }

.btn-outline-primary { color: var(--primary); background: transparent; border-color: var(--primary); }
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active,
.open > .dropdown-toggle.btn-outline-primary { color: #fff; background-color: var(--primary); border-color: var(--primary); }

.btn-outline-success { color: var(--success); background: transparent; border-color: var(--success); }
.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active,
.open > .dropdown-toggle.btn-outline-success { color: #fff; background-color: var(--success); border-color: var(--success); }

.btn-outline-info { color: var(--info); background: transparent; border-color: var(--info); }
.btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info:active,
.open > .dropdown-toggle.btn-outline-info { color: #fff; background-color: var(--info); border-color: var(--info); }

.btn-outline-warning { color: var(--warning); background: transparent; border-color: var(--warning); }
.btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning:active,
.open > .dropdown-toggle.btn-outline-warning { color: #fff; background-color: var(--warning); border-color: var(--warning); }

.btn-outline-danger { color: var(--danger); background: transparent; border-color: var(--danger); }
.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active,
.open > .dropdown-toggle.btn-outline-danger { color: #fff; background-color: var(--danger); border-color: var(--danger); }

.btn-outline-pink { color: var(--pink); background: transparent; border-color: var(--pink); }
.btn-outline-pink:hover, .btn-outline-pink:focus, .btn-outline-pink:active,
.open > .dropdown-toggle.btn-outline-pink { color: #fff; background-color: var(--pink); border-color: var(--pink); }

.btn-outline-purple { color: var(--purple); background: transparent; border-color: var(--purple); }
.btn-outline-purple:hover, .btn-outline-purple:focus, .btn-outline-purple:active,
.open > .dropdown-toggle.btn-outline-purple { color: #fff; background-color: var(--purple); border-color: var(--purple); }

.btn-outline-dark { color: var(--dark); background: transparent; border-color: var(--dark); }
.btn-outline-dark:hover, .btn-outline-dark:focus, .btn-outline-dark:active,
.open > .dropdown-toggle.btn-outline-dark { color: #fff; background-color: var(--dark); border-color: var(--dark); }

/* Social Buttons */
.btn-facebook  { color: #fff !important; background-color: #1877f2 !important; }
.btn-twitter   { color: #fff !important; background-color: #1da1f2 !important; }
.btn-linkedin  { color: #fff !important; background-color: #0a66c2 !important; }
.btn-dribbble  { color: #fff !important; background-color: #ea4c89 !important; }
.btn-googleplus{ color: #fff !important; background-color: #ea4335 !important; }
.btn-instagram { color: #fff !important; background-color: #e1306c !important; }
.btn-pinterest { color: #fff !important; background-color: #e60023 !important; }
.btn-dropbox   { color: #fff !important; background-color: #0061ff !important; }
.btn-flickr    { color: #fff !important; background-color: #ff0084 !important; }
.btn-tumblr    { color: #fff !important; background-color: #35465c !important; }
.btn-skype     { color: #fff !important; background-color: #00aff0 !important; }
.btn-youtube   { color: #fff !important; background-color: #ff0000 !important; }
.btn-github    { color: #fff !important; background-color: #24292e !important; }

/* ===== NAV PILLS ===== */
.nav-pills .nav-item.show .nav-link, .nav-pills .nav-link.active {
  background-color: var(--primary);
  box-shadow: 0 4px 12px rgba(79,110,247,0.3);
}

/* ===== BUTTON LIST ===== */
.button-list { margin-bottom: -5px; margin-left: -7px; }
.button-list button, .button-list a { margin: 5px 7px; }

/* ===== WIDGET MESSAGES ===== */
.widget-messages .message-item {
  position: relative; overflow: hidden;
  border-bottom: 1px solid #f1f5f9;
  padding: 12px 0; transition: var(--transition);
}
.widget-messages .message-item:hover { background: #fafbff; border-radius: var(--radius-sm); }
.widget-messages .message-item img { width: 38px; }
.widget-messages .message-item .message-user-img { display: block; float: left; margin-right: 12px; width: 38px; }
.widget-messages .message-item .message-item-user { color: var(--text-main); display: block; font-weight: 600; margin: 0; }
.widget-messages .message-item .message-item-msg { color: var(--text-light); display: block; font-weight: 400; margin: 0; font-size: 0.83rem; }
.widget-messages .message-item .message-item-date { color: var(--text-muted); font-weight: 400; position: absolute; right: 7px; top: 2px; font-size: 0.75rem; }

/* ===== CUSTOM MODAL ===== */
.custom-modal .modal-header {
  padding: 12px 16px !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; border: none;
}
.custom-modal .modal-content {
  background-color: #f8fafc;
  border-radius: var(--radius);
  border: none;
  box-shadow: var(--shadow-lg);
}
.custom-modal .modal-footer {
  padding: 10px 16px !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
  background-color: #f1f5f9;
  border-top: 1px solid var(--card-border);
}
.custom-modal .close { color: rgba(255,255,255,0.8); text-shadow: none; transition: var(--transition); }
.custom-modal .close:hover { color: #fff; }

/* ===== ADMIN BODY ===== */
body.adminbody-void { min-height: 1170px; }
.mobile.smallscreen .sidebar-inner.leftscroll { overflow: scroll !important; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  body { overflow-x: hidden; }
  .enlarged .left.main-sidebar { margin-left: -75px; }
  .headerbar-left { width: 70px !important; }
  .headerbar-left span { display: none !important; }
  .headerbar-left i { display: block !important; line-height: 56px !important; }
  .navbar-custom { margin-left: 70px !important; }
  .content-page { margin-left: 0 !important; }
  .footer { left: 0 !important; }
  .mobile-sidebar { left: 0; }
  .mobile-content { left: 250px; right: -250px; }
  .wrapper-page { width: 90%; }
  .dataTables_wrapper .col-xs-6 { width: 100%; text-align: left; }
  div#datatable-buttons_info { float: none; }
  .ms-container { width: 100%; }
  .navbar-toggleable-md .navbar-nav { flex-direction: row; }
}

@media (max-width: 767px) {
  .dropdown-lg { width: 210px; }
  .notif .notify-item { padding: 10px 12px; }
  .breadcrumb-holder .main-title, .breadcrumb-holder .breadcrumb { float: none; }
}

@media (max-width: 480px) {
  .m-none { font-size: 8px; display: none; }
  .notif .noti-icon { font-size: 16px; padding: 0 8px; }
  .hidden-mobile { display: none !important; }
}

/* IE9 Fallbacks */
@media screen and (min-width: 0\0) {
  .form-control { padding: 0.55rem 0.75rem !important; }
  .input-group-addon { line-height: inherit !important; font-size: 1rem !important; }
  .carousel-control span { right: 20px; }
}

/* ===== NAVBAR INNER LAYOUT FIX ===== */
/* Fixes the navbar content stretching issue when Bootstrap flex classes
   are used inside navbar-custom which is already a flex container */
.navbar-custom > div {
  width: 100%;
}
.navbar-custom .col-lg-3,
.navbar-custom .col-lg-9 {
  display: flex;
  align-items: center;
}
.navbar-custom h4,
.navbar-custom h5 {
  margin: 0;
  line-height: 1;
  color: #64748b;
  font-size: 0.85rem;
  font-weight: 500;
}
#clock {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #64748b;
}