/* SKAY Admin premium workspace theme */
:root {
  --skay-ink: #162033;
  --skay-ink-soft: #536176;
  --skay-muted: #8190a5;
  --skay-line: #e7edf5;
  --skay-surface: #ffffff;
  --skay-canvas: #f5f7fb;
  --skay-primary: #2868e6;
  --skay-primary-dark: #1d4ed8;
  --skay-cyan: #0ea5b7;
  --skay-sidebar: #111b2e;
  --skay-sidebar-soft: #1c2b45;
  --skay-radius: 16px;
  --skay-shadow: 0 12px 34px rgba(24, 39, 75, .06);
  --skay-shadow-hover: 0 18px 44px rgba(24, 39, 75, .12);
}

html,
body { background: var(--skay-canvas); }
body { color: var(--skay-ink); font-family: Inter, "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.01em; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: 280px; pointer-events: none; z-index: -1; background: radial-gradient(circle at 75% -25%, rgba(40,104,230,.1), transparent 48%), linear-gradient(180deg, rgba(255,255,255,.85), transparent); }

/* Workspace sidebar */
#layout-menu.layout-menu {
  width: 272px;
  color: #b9c5d9;
  background: linear-gradient(180deg, #121d31 0%, #0d1728 100%) !important;
  border-right: 1px solid rgba(255,255,255,.05);
  box-shadow: 8px 0 32px rgba(15, 23, 42, .1);
}
#layout-menu .app-brand-link { min-width: 0; flex: 1 1 auto; }
#layout-menu .app-brand-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#layout-menu .app-brand > .layout-menu-toggle { flex: 0 0 34px; width: 34px; height: 34px; min-height: 34px; margin-left: auto !important; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; }
#layout-menu .app-brand > .layout-menu-toggle .menu-toggle-icon { width: 1rem; margin-right: 0; color: inherit; }
#layout-menu .app-brand { height: 76px; padding: 0 1.5rem; border-bottom: 1px solid rgba(255,255,255,.08); }
#layout-menu .app-brand-link { gap: .75rem; }
#layout-menu .app-brand-text { color: #f8fbff !important; letter-spacing: .01em; font-size: 1.02rem; }
#layout-menu .app-brand-logo { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg, #3c82f6, #0ea5b7); box-shadow: 0 8px 18px rgba(14,165,183,.24); }
#layout-menu .app-brand-logo img { width: 24px; height: auto; }
#layout-menu .app-brand-logo svg { width: 22px; }
#layout-menu .app-brand-logo svg path { fill: #fff; }
#layout-menu .layout-menu-toggle { color: #8fa1bb; border-radius: 9px; }
#layout-menu .layout-menu-toggle:hover { color: #fff; background: rgba(255,255,255,.08); }
#layout-menu .menu-inner { padding: .85rem .8rem 1.25rem !important; }
#layout-menu .menu-header { margin: 1rem .7rem .45rem; padding: 0; color: #6e819e; letter-spacing: .12em; font-size: .66rem; font-weight: 700; }
#layout-menu .menu-header-text { color: inherit; }
#layout-menu .menu-item { margin: .18rem 0; }
#layout-menu .menu-link { min-height: 44px; padding: .68rem .78rem; color: #b7c4d7; border-radius: 11px; font-size: .83rem; font-weight: 500; transition: color .2s ease, background .2s ease, transform .2s ease; }
#layout-menu .menu-link > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#layout-menu .menu-link i { width: 1.5rem; margin-right: .45rem; color: #7f93b1; font-size: 1.15rem; transition: color .2s ease; }
#layout-menu .menu-link:hover { color: #fff; background: rgba(255,255,255,.075); transform: translateX(2px); }
#layout-menu .menu-link:hover i { color: #69c9d6; }
#layout-menu .menu-item.active > .menu-link { color: #fff; background: linear-gradient(100deg, rgba(47,111,237,.98), rgba(14,165,183,.9)); box-shadow: 0 8px 20px rgba(14, 91, 173, .28); }
#layout-menu .menu-item.active > .menu-link i { color: #fff; }
#layout-menu .menu-item.open:not(.active) > .menu-link { color: #eef5ff; background: rgba(255,255,255,.055); }
#layout-menu .menu-sub { padding-left: 1.1rem; }
#layout-menu .menu-sub .menu-link { min-height: 38px; padding-top: .5rem; padding-bottom: .5rem; font-size: .78rem; }
#layout-menu .menu-sub .menu-item.active > .menu-link { background: rgba(47,111,237,.22); box-shadow: none; }
#layout-menu .menu-inner-shadow { display: none; }
#layout-menu .menu-inner-shadow,
#layout-menu .menu-inner-shadow::before,
#layout-menu .menu-inner-shadow::after { display: none !important; background: transparent !important; }
#layout-menu .menu-inner { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(132, 160, 199, .36) transparent; }
#layout-menu .menu-inner::-webkit-scrollbar { width: 5px; }
#layout-menu .menu-inner::-webkit-scrollbar-track { background: transparent; }
#layout-menu .menu-inner::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(132, 160, 199, .36); }
#layout-menu .ps__rail-y { width: 5px !important; background: transparent !important; opacity: 0 !important; }
#layout-menu .ps__thumb-y { width: 5px !important; border-radius: 999px; background: rgba(132, 160, 199, .36) !important; }
#layout-menu .menu-toggle-icon { position: relative; width: 1rem; height: 1rem; font-size: 0; }
#layout-menu .menu-toggle-icon::before { content: "" !important; position: absolute; top: 50%; left: 50%; width: .45rem; height: .45rem; border-top: 1.5px solid currentColor; border-left: 1.5px solid currentColor; transform: translate(-35%, -50%) rotate(-45deg); }
html.layout-menu-collapsed #layout-menu .menu-toggle-icon::before { transform: translate(-65%, -50%) rotate(135deg); }

/* Keep nested entries readable and evenly spaced. */
#layout-menu .menu-sub { width: 100%; padding: .35rem 0 !important; gap: .15rem; }
#layout-menu .menu-sub .menu-item { width: 100%; margin: 0 !important; }
#layout-menu .menu-sub .menu-link { width: auto; min-height: 37px; margin: 0 .35rem !important; padding: .52rem .7rem .52rem 2.75rem !important; border-radius: 9px; line-height: 1.35; white-space: nowrap; }
#layout-menu .menu-sub .menu-link > div { overflow: visible; text-overflow: clip; white-space: nowrap; }
#layout-menu .menu-sub .menu-link::before { content: ""; position: absolute; left: 1.45rem; top: 50%; width: 5px; height: 5px; border: 1px solid #7890b0; border-radius: 50%; transform: translateY(-50%); }
#layout-menu .menu-sub .menu-link:hover::before,
#layout-menu .menu-sub .menu-item.active > .menu-link::before { border-color: #fff; background: #fff; }
#layout-menu .menu-sub .menu-sub { padding-left: .35rem !important; }
#layout-menu .menu-sub .menu-sub .menu-link { padding-left: 3.05rem !important; }
#layout-menu .menu-sub .menu-sub .menu-link::before { left: 1.8rem; width: 4px; height: 4px; }

/* Vuexy's collapsed state is driven by a class on <html>; keep the custom width compatible with it. */
html.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) #layout-menu.layout-menu { width: 5.25rem !important; }
html.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) #layout-menu .app-brand { padding-right: .65rem; padding-left: .65rem; }
html.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) #layout-menu .app-brand-link { width: 100%; justify-content: center; }
html.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) #layout-menu .app-brand-text,
html.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) #layout-menu .admin-brand-meta { display: none; }
.admin-brand-meta { padding: .65rem 1.5rem .8rem; color: #70839f; font-size: .67rem; letter-spacing: .08em; text-transform: uppercase; }
.admin-brand-meta strong { display: block; margin-top: .22rem; color: #dbe8f9; letter-spacing: 0; font-size: .72rem; font-weight: 600; text-transform: none; }

/* Floating topbar */
.layout-page { background: transparent; }
#layout-navbar.layout-navbar { min-height: 70px; margin: 1.15rem 1.35rem 0; padding: .55rem .7rem; border: 1px solid rgba(228,234,243,.95); border-radius: 17px; background: rgba(255,255,255,.88) !important; box-shadow: var(--skay-shadow); backdrop-filter: blur(18px); }
#layout-navbar .navbar-nav-right { min-height: 56px; }
#layout-navbar .layout-menu-toggle .nav-link { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; color: var(--skay-ink-soft); }
#layout-navbar .layout-menu-toggle .nav-link:hover { color: var(--skay-primary); background: #eef4ff; }
#layout-navbar .nav-link { color: #627189; border-radius: 10px; }
#layout-navbar .nav-link:hover { color: var(--skay-primary); background: #f0f5ff; }
#layout-navbar .dropdown-menu { padding: .55rem; border: 1px solid var(--skay-line); border-radius: 14px; box-shadow: 0 16px 40px rgba(24,39,75,.13); }
#layout-navbar .dropdown-item { border-radius: 9px; font-size: .79rem; }
#layout-navbar .dropdown-item:hover { background: #eef4ff; color: var(--skay-primary); }
#layout-navbar .avatar img { border: 2px solid #fff; box-shadow: 0 0 0 2px #d8e4fa, 0 4px 10px rgba(24,39,75,.12); }
.admin-navbar-context { display: flex; flex-direction: column; gap: .08rem; margin-left: .35rem; line-height: 1.15; }
.admin-navbar-context span { color: #8b98aa; font-size: .63rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.admin-navbar-context strong { color: var(--skay-ink); font-size: .84rem; font-weight: 700; }
.badge-notifications { min-width: 17px; height: 17px; padding: 0 .28rem; font-size: .6rem; line-height: 17px; background: #ef5b68 !important; box-shadow: 0 0 0 3px #fff; }

/* Content, cards and controls */
.content-wrapper > .container-fluid,
.content-wrapper > .container-xxl { padding-top: 1.5rem !important; }
.card { border: 1px solid var(--skay-line); border-radius: var(--skay-radius); background: var(--skay-surface); box-shadow: var(--skay-shadow); }
.card-header { padding: 1.2rem 1.35rem 0; border-bottom: 0; background: transparent; }
.card-body { padding: 1.35rem; }
.card-title, .card-header h5, .card-header h6 { color: var(--skay-ink); font-weight: 700; letter-spacing: -.02em; }
.card:hover { box-shadow: var(--skay-shadow-hover); }
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table thead th { padding: .8rem 1rem; color: #7b889d; background: #f8faff; border-bottom: 1px solid var(--skay-line); font-size: .67rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; white-space: nowrap; }
.table tbody td { padding: .9rem 1rem; color: #475569; border-color: #eef2f7; font-size: .79rem; vertical-align: middle; }
.table tbody tr { transition: background .18s ease; }
.table tbody tr:hover { background: #f7faff; }
.table-responsive { border-radius: 12px; }
.form-label { color: #435169; font-size: .74rem; font-weight: 700; letter-spacing: .02em; }
.form-control, .form-select, .input-group-text { border-color: #dfe7f1; border-radius: 10px; color: var(--skay-ink); font-size: .82rem; }
.form-control, .form-select { min-height: 42px; padding: .55rem .8rem; background-color: #fff; }
.input-group-text { background: #f7f9fc; }
.form-control:focus, .form-select:focus { border-color: rgba(40,104,230,.55); box-shadow: 0 0 0 4px rgba(40,104,230,.1); }
.btn { border-radius: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .01em; padding: .58rem .9rem; }
.btn-primary { border-color: var(--skay-primary); background: linear-gradient(100deg, var(--skay-primary-dark), var(--skay-primary)); box-shadow: 0 8px 16px rgba(40,104,230,.2); }
.btn-primary:hover, .btn-primary:focus { border-color: #1744a9; background: linear-gradient(100deg, #1744a9, #245fd6); transform: translateY(-1px); }
.btn-label-primary { color: var(--skay-primary); background: #edf4ff; border-color: transparent; }
.btn-label-primary:hover { color: #1744a9; background: #dfeaff; }
.btn-outline-primary { border-color: #bdd1f7; color: var(--skay-primary); }
.btn-outline-primary:hover { border-color: var(--skay-primary); background: #edf4ff; color: var(--skay-primary-dark); }
.btn-success { background: #129b82; border-color: #129b82; }
.btn-danger { background: #e05363; border-color: #e05363; }
.pagination .page-link { margin: 0 .15rem; border: 0; border-radius: 8px; color: #6e7b8f; font-size: .75rem; }
.pagination .page-item.active .page-link { background: var(--skay-primary); box-shadow: 0 5px 12px rgba(40,104,230,.2); }
.nav-tabs .nav-link { border: 0; color: #7b889d; font-size: .8rem; font-weight: 600; }
.nav-tabs .nav-link.active { color: var(--skay-primary); border-bottom: 2px solid var(--skay-primary); background: transparent; }
.alert { border: 0; border-radius: 12px; font-size: .8rem; }
.modal-content { border: 1px solid var(--skay-line); border-radius: 17px; box-shadow: 0 24px 70px rgba(15,23,42,.2); }
.modal-header { padding: 1.2rem 1.35rem; border-bottom-color: var(--skay-line); }
.modal-footer { border-top-color: var(--skay-line); }

/* Dashboard and empty states inherit the workspace language */
.dashboard-shell .dashboard-hero { background: linear-gradient(120deg, #173b7a 0%, #2868e6 50%, #0ea5b7 100%); border-radius: 18px; box-shadow: 0 16px 32px rgba(40,104,230,.2); }
.dashboard-shell .card { border-color: var(--skay-line); }
.dashboard-shell .quick-action:hover { border-color: rgba(40,104,230,.45); background: #f0f5ff; }

/* Footer */
.content-footer { margin-top: .5rem; background: transparent !important; color: #8996a8; font-size: .72rem; }
.content-footer a { color: var(--skay-primary); font-weight: 700; }

/* Dark mode */
html[data-bs-theme="dark"] body { background: #0f172a; color: #d7dfed; }
html[data-bs-theme="dark"] body::before { background: radial-gradient(circle at 75% -25%, rgba(40,104,230,.15), transparent 48%), linear-gradient(180deg, rgba(15,23,42,.8), transparent); }
html[data-bs-theme="dark"] #layout-navbar.layout-navbar { border-color: rgba(255,255,255,.08); background: rgba(20,30,48,.88) !important; }
html[data-bs-theme="dark"] #layout-navbar .nav-link, html[data-bs-theme="dark"] .admin-navbar-context strong { color: #d7dfed; }
html[data-bs-theme="dark"] .card { border-color: rgba(255,255,255,.08); background: #162137; }
html[data-bs-theme="dark"] .card-title, html[data-bs-theme="dark"] .card-header h5, html[data-bs-theme="dark"] .card-header h6 { color: #f1f5fb; }
html[data-bs-theme="dark"] .table thead th { background: #1b2941; color: #9cacc4; border-color: rgba(255,255,255,.08); }
html[data-bs-theme="dark"] .table tbody td { color: #c4d0e2; border-color: rgba(255,255,255,.06); }
html[data-bs-theme="dark"] .table tbody tr:hover { background: #1a2942; }
html[data-bs-theme="dark"] .form-control, html[data-bs-theme="dark"] .form-select { color: #e7edf6; background: #111b2e; border-color: #2b3b56; }
html[data-bs-theme="dark"] .input-group-text { color: #b9c5d9; background: #1b2941; border-color: #2b3b56; }
html[data-bs-theme="dark"] .form-label { color: #bdc9da; }
html[data-bs-theme="dark"] .dropdown-menu, html[data-bs-theme="dark"] .modal-content { background: #162137; border-color: #2b3b56; }
html[data-bs-theme="dark"] .dropdown-item { color: #cbd5e1; }
html[data-bs-theme="dark"] .dropdown-item:hover { background: #1f3352; color: #fff; }

@media (max-width: 1199.98px) {
  #layout-navbar.layout-navbar { margin: .8rem .8rem 0; }
}
@media (max-width: 767.98px) {
  #layout-navbar.layout-navbar { border-radius: 13px; }
  .content-wrapper > .container-fluid, .content-wrapper > .container-xxl { padding-top: 1rem !important; }
  .card-body { padding: 1rem; }
  .table thead th, .table tbody td { padding-left: .7rem; padding-right: .7rem; }
}