/* Deskman UI extension layer (renamed from Modern)
   Non-destructive: overrides and utility additions layered atop existing Tailwind + legacy styles.
   Keep selectors specific but low-risk; prefer CSS variables for theming.
*/
:root {
  --modern-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --modern-radius-sm: 4px;
  --modern-radius-md: 8px;
  --modern-radius-lg: 14px;
  --modern-transition: 150ms cubic-bezier(.4,0,.2,1);
  --modern-bg-surface: #ffffff;
  --modern-bg-muted: #f5f7fa;
  --modern-bg-accent: #0d5df4;
  --modern-bg-accent-hover: #0b50d0;
  --modern-border: #e2e8f0;
  --modern-text-primary: #1f2937;
  --modern-text-secondary: #4b5563;
  --modern-text-faint: #6b7280;
  --modern-elevation-1: 0 1px 2px rgba(0,0,0,.04),0 1px 3px rgba(0,0,0,.08);
  --modern-elevation-2: 0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.06);
  --modern-focus: 0 0 0 3px rgba(13,93,244,.35);
}

.dark:root, .theme-dark {
  --modern-bg-surface: #1f242b;
  --modern-bg-muted: #161b21;
  --modern-border: #2a313a;
  --modern-text-primary: #f3f4f6;
  --modern-text-secondary: #d1d5db;
  --modern-text-faint: #9ca3af;
  --modern-elevation-1: 0 1px 2px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.35);
  --modern-elevation-2: 0 4px 20px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.45);
  --modern-focus: 0 0 0 3px rgba(56,132,255,.55);
}

body.modern-ui-enabled { /* keep original class for backward compat */
  font-family: var(--modern-font-sans);
  background: var(--modern-bg-muted);
  color: var(--modern-text-primary);
  -webkit-font-smoothing: antialiased;
}

/* Card */
.mod-card {background: var(--modern-bg-surface);border: 1px solid var(--modern-border);border-radius: var(--modern-radius-lg);padding: 1.25rem 1.25rem 1.15rem;box-shadow: var(--modern-elevation-1);position: relative;transition: box-shadow var(--modern-transition), transform var(--modern-transition), border-color var(--modern-transition);} 
.mod-card:hover {box-shadow: var(--modern-elevation-2);} 
.mod-card.mod-interactive:hover {transform: translateY(-2px);} 
.mod-card-header {display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem;} 
.mod-card-title {font-size:1.05rem;font-weight:600;letter-spacing:.015em;color:var(--modern-text-primary);} 
.mod-card-sub {font-size:.75rem;font-weight:500;color:var(--modern-text-faint);text-transform:uppercase;letter-spacing:.08em;}

/* Buttons */
.btn-modern-primary {--btn-bg: var(--modern-bg-accent);--btn-bg-hover: var(--modern-bg-accent-hover);--btn-text: #fff;background: var(--btn-bg);color: var(--btn-text) !important;border: 1px solid var(--modern-bg-accent);font-weight:600;letter-spacing:.025em;border-radius: var(--modern-radius-md);padding:.625rem 1.05rem;line-height:1.15;box-shadow: 0 1px 2px rgba(0,0,0,.04),0 2px 4px rgba(0,0,0,.08);transition: background var(--modern-transition), box-shadow var(--modern-transition), transform var(--modern-transition);} 
.btn-modern-primary:hover {background:var(--btn-bg-hover);text-decoration:none;} 
.btn-modern-primary:focus {outline:none;box-shadow:var(--modern-focus);}  
.btn-modern-primary:active {transform:translateY(1px);}  
.btn-modern-outline {background:transparent;border:1px solid var(--modern-border);color:var(--modern-text-primary)!important;padding:.55rem .95rem;border-radius:var(--modern-radius-md);font-weight:500;transition:background var(--modern-transition),border-color var(--modern-transition);} 
.btn-modern-outline:hover {background:var(--modern-bg-surface);border-color:var(--modern-bg-accent);} 
.btn-modern-ghost {background:transparent;color:var(--modern-text-secondary)!important;padding:.5rem .85rem;border-radius:var(--modern-radius-md);font-weight:500;} 
.btn-modern-ghost:hover {color:var(--modern-text-primary)!important;background:var(--modern-bg-surface);} 

/* Forms */
.mod-field {position:relative;display:flex;flex-direction:column;margin-bottom:1.15rem;} 
.mod-label {font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.065em;margin-bottom:.5rem;color:var(--modern-text-faint);} 
.mod-input {border:1px solid var(--modern-border);background:var(--modern-bg-surface);border-radius:var(--modern-radius-md);padding:.7rem .85rem;font-size:.95rem;line-height:1.2;transition:border-color var(--modern-transition), box-shadow var(--modern-transition), background var(--modern-transition);} 
.mod-input:focus {outline:none;border-color:var(--modern-bg-accent);box-shadow:var(--modern-focus);}  
.mod-input[disabled] {opacity:.6;cursor:not-allowed;} 
.mod-hint {font-size:.7rem;color:var(--modern-text-faint);margin-top:.35rem;} 
.mod-error {color:#dc2626;font-size:.7rem;margin-top:.35rem;font-weight:500;letter-spacing:.04em;} 
.mod-input.error {border-color:#dc2626;}

/* Metrics tiles */
.metrics-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.15rem;align-items:stretch;margin-bottom:1.5rem;} 
.metric-tile {background:var(--modern-bg-surface);border:1px solid var(--modern-border);border-radius:var(--modern-radius-lg);padding:1rem 1.1rem;position:relative;overflow:hidden;transition:box-shadow var(--modern-transition),transform var(--modern-transition);} 
.metric-tile:hover {box-shadow:var(--modern-elevation-2);}  
.metric-label {font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--modern-text-faint);margin-bottom:.35rem;} 
.metric-value {font-size:1.55rem;font-weight:600;letter-spacing:.01em;color:var(--modern-text-primary);}  
.metric-trend {font-size:.7rem;font-weight:500;margin-top:.35rem;display:inline-flex;align-items:center;gap:.25rem;} 
.metric-trend.up {color:#059669;} .metric-trend.down {color:#dc2626;}

/* Navigation adjustments */
#side-menu.modern-slim > li > a {padding:.65rem .95rem;font-weight:500;letter-spacing:.01em;border-radius:var(--modern-radius-md);margin:.15rem .5rem;transition:background var(--modern-transition),color var(--modern-transition);}  
#side-menu.modern-slim > li.active > a, #side-menu.modern-slim > li > a:hover {background:var(--modern-bg-accent);color:#fff;}

/* Top header refinement */
#header.modern-header {backdrop-filter:saturate(180%) blur(14px);background:rgba(255,255,255,.85);border-bottom:1px solid var(--modern-border);}  
.theme-dark #header.modern-header {background:rgba(31,36,43,.78);}  

/* Dashboard sections */
.dashboard-section {margin-bottom:2rem;}  
.dashboard-section-title {font-size:1rem;font-weight:600;margin:0 0 .85rem;color:var(--modern-text-primary);letter-spacing:.01em;}

/* Fade in for modern layer */
body.modern-ui-enabled .mod-fade-in {animation:modFadeIn .5s ease;}  
@keyframes modFadeIn {from {opacity:0; transform:translateY(6px);} to {opacity:1; transform:translateY(0);} }

/* Dark mode helper */
.dark .mod-card, .theme-dark .mod-card, .dark .metric-tile {background:var(--modern-bg-surface);} 

/* Utility */
.mod-flex {display:flex;} .mod-justify-between {justify-content:space-between;} .mod-items-center {align-items:center;} .mod-gap-sm {gap:.5rem;} .mod-mb-0 {margin-bottom:0;} .mod-w-full {width:100%;}

/* Login page enhancement */
body.login_admin.modern-ui-enabled {background: var(--modern-bg-muted);} 
.login-modern-wrapper {position:relative;} 
.login-modern-panel {background:var(--modern-bg-surface);border:1px solid var(--modern-border);border-radius:var(--modern-radius-lg);padding:2rem 2.25rem;box-shadow:var(--modern-elevation-2);}  
.login-brand {font-size:1.85rem;font-weight:700;letter-spacing:.02em;background:linear-gradient(90deg,#0d5df4,#5b21b6);background-clip:text;-webkit-background-clip:text;color:transparent;} 
.login-subtitle {font-size:.9rem;color:var(--modern-text-secondary);margin-top:.5rem;}

/* Toggle */
.theme-toggle {position:absolute;top:1rem;right:1rem;display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:600;padding:.45rem .7rem;border:1px solid var(--modern-border);border-radius:var(--modern-radius-md);cursor:pointer;background:var(--modern-bg-surface);box-shadow:var(--modern-elevation-1);} 
.theme-toggle:hover {border-color:var(--modern-bg-accent);} 

/* Deskman sidebar refinements */
.deskman-sidebar {background:var(--modern-bg-surface);border-right:1px solid var(--modern-border);} 
.deskman-sidebar #side-menu.modern-slim > li {margin:0 .25rem;} 
.deskman-sidebar #side-menu.modern-slim > li > a {font-size:.83rem;} 
.deskman-sidebar #side-menu.modern-slim .menu-icon {opacity:.85;margin-right:.55rem;font-size:.9rem;} 
.deskman-sidebar #side-menu.modern-slim > li.active > a .menu-icon, .deskman-sidebar #side-menu.modern-slim > li > a:hover .menu-icon {opacity:1;} 

/* Header refinement (if header has id header) */
#header.modern-header {backdrop-filter:saturate(180%) blur(14px);background:rgba(255,255,255,.9);border-bottom:1px solid var(--modern-border);} 
.theme-dark #header.modern-header {background:rgba(31,36,43,.78);} 

/* Top navigation transformation (horizontal main nav) */
/* New horizontal nav container replaces legacy sidebar */
nav#deskman-main-nav.deskman-horizontal-nav {width:100%;display:block;background:var(--modern-bg-surface);border-bottom:1px solid var(--modern-border);box-shadow:var(--modern-elevation-1);position:relative;z-index:45;}
nav#deskman-main-nav.deskman-horizontal-nav {overflow:visible;}
/* Profile link flex enforcement */
.deskman-user-dropdown > a.deskman-profile-link {display:inline-flex !important;flex-direction:row !important;align-items:center !important;}
.deskman-user-dropdown > a.deskman-profile-link span {display:inline-block;}

nav#deskman-main-nav.deskman-horizontal-nav > ul#side-menu {margin:0;padding:.45rem .75rem;}
nav#deskman-main-nav.deskman-horizontal-nav #side-menu.modern-slim {flex-wrap:nowrap;}
body.deskman-topnav #side-menu.modern-slim {display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;padding:.4rem .75rem;margin-top:0;}
/* Force horizontal flow; enable horizontal scrolling if overflow */
body.deskman-topnav #side-menu.modern-slim {flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;white-space:nowrap;scrollbar-width:thin;-webkit-overflow-scrolling:touch;}
body.deskman-topnav #side-menu.modern-slim > li {display:inline-flex;flex-direction:column;position:relative;}
body.deskman-topnav #side-menu.modern-slim > li {overflow:visible;}
body.deskman-topnav #side-menu.modern-slim > li > a {white-space:nowrap;}
body.deskman-topnav #side-menu.modern-slim > li {margin:0;}
body.deskman-topnav #side-menu.modern-slim > li > a {display:inline-flex;align-items:center;font-weight:500;padding:.55rem .85rem;margin:0;border-radius:var(--modern-radius-md);line-height:1.1;}
body.deskman-topnav #side-menu.modern-slim > li.active > a, body.deskman-topnav #side-menu.modern-slim > li > a:hover {background:var(--modern-bg-accent);color:#fff;}
body.deskman-topnav #side-menu.modern-slim > li > a .fa.arrow, body.deskman-topnav #side-menu.modern-slim > li > a .arrow {display:none !important;}
body.deskman-topnav #side-menu.modern-slim > li > a .deskman-caret {font-size:.55rem;margin-left:.4rem;transition:transform .18s ease;opacity:.75;}
body.deskman-topnav #side-menu.modern-slim > li.open > a .deskman-caret {transform:rotate(180deg);opacity:1;}
/* Dropdown (second level) as popover menu */
body.deskman-topnav #side-menu.modern-slim > li {position:relative;}
body.deskman-topnav #side-menu.modern-slim > li > ul.nav-second-level {position:absolute;top:100%;left:0;background:var(--modern-bg-surface);border:1px solid var(--modern-border);border-radius:var(--modern-radius-md);padding:.35rem 0;min-width:220px;box-shadow:var(--modern-elevation-2);display:none;z-index:200;}
body.deskman-topnav #side-menu.modern-slim > li.open > ul.nav-second-level {animation:deskmanSubFade .14s ease;}
@keyframes deskmanSubFade {from {opacity:0;transform:translateY(4px);} to {opacity:1;transform:translateY(0);} }
/* Hover disabled; visibility controlled by .open class (JS) */
body.deskman-topnav #side-menu.modern-slim > li.open > ul.nav-second-level {display:block;}
/* Guarantee submenu visibility when .open set (override any legacy !important) */
body.deskman-topnav #side-menu.modern-slim > li.open > ul.nav-second-level {display:block !important;}
/* Force-hide embedded second-level lists in popup mode */
body.deskman-topnav.popup-nav-active #side-menu.modern-slim > li > ul.nav-second-level,
body.deskman-topnav.popup-nav-active #side-menu.modern-slim > li.open > ul.nav-second-level,
body.deskman-topnav.popup-nav-active #side-menu.modern-slim > li:hover > ul.nav-second-level {display:none !important;visibility:hidden !important;pointer-events:none !important;height:0 !important;overflow:hidden !important;}
/* Popup submenu container ---------------------------------------------------*/
/* Subrow mode (full-width second row) --------------------------------------*/
#deskman-subrow {display:none;position:relative;width:100%;background:var(--modern-bg-subtle,#f7f9fb);border-bottom:1px solid var(--modern-border);box-shadow:inset 0 1px 0 rgba(255,255,255,.4);z-index:60;}
.theme-dark #deskman-subrow {background:rgba(40,45,53,.85);}
#deskman-subrow.open {display:block;animation:deskmanSubRowFade .18s ease;}
@keyframes deskmanSubRowFade {from{opacity:0;transform:translateY(-4px);} to {opacity:1;transform:translateY(0);} }
#deskman-subrow .deskman-subrow-inner {display:flex;flex-wrap:wrap;gap:.35rem;padding:.45rem .85rem;min-height:2.2rem;align-items:center;}
#deskman-subrow .deskman-subrow-inner[data-empty="true"] {min-height:0;padding:.2rem .85rem;}
#deskman-subrow .deskman-subrow-link {display:inline-flex;align-items:center;font-size:.72rem;font-weight:500;padding:.45rem .65rem;border-radius:var(--modern-radius-sm);color:var(--modern-text-primary);text-decoration:none;line-height:1;position:relative;transition:background var(--modern-transition),color var(--modern-transition);} 
#deskman-subrow .deskman-subrow-link:hover {background:var(--modern-bg-accent);color:#fff;}
#deskman-subrow .deskman-subrow-link.active {background:var(--modern-bg-accent);color:#fff;}
/* Distinct marker for current loaded page (persisting state) */
#deskman-subrow .deskman-subrow-link.current-page {position:relative;}
#deskman-subrow .deskman-subrow-link.current-page::after {content:"";position:absolute;left:8px;right:8px;bottom:4px;height:2px;border-radius:2px;background:currentColor;opacity:.9;}
body.deskman-topnav #side-menu.modern-slim > li.subrow-active > a {background:var(--modern-bg-accent);color:#fff;}
@media (max-width:900px){
  #deskman-subrow .deskman-subrow-inner {overflow-x:auto;flex-wrap:nowrap;white-space:nowrap;}
}
/* Optional hover open for pointer devices */
@media (hover:hover){
  body.deskman-topnav #side-menu.modern-slim > li:hover > ul.nav-second-level {display:block;animation:deskmanSubFade .14s ease;}
  body.deskman-topnav #side-menu.modern-slim > li:hover > a .deskman-caret {transform:rotate(180deg);opacity:1;}
}
/* User dropdown tweaks */
.deskman-user-dropdown > a img {box-shadow:0 0 0 1px var(--modern-border);} 
.deskman-user-dropdown .dropdown-menu {margin-top:4px;border:1px solid var(--modern-border);border-radius:var(--modern-radius-md);box-shadow:var(--modern-elevation-2);}
.deskman-user-dropdown .dropdown-menu > li > a {padding:.55rem .9rem;}
.deskman-user-dropdown .dropdown-menu > li.active > a {background:var(--modern-bg-accent);color:#fff;}
/* Responsive fallback: stack on narrow screens */
@media (max-width: 900px){
  body.deskman-topnav #side-menu.modern-slim {flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;}
  body.deskman-topnav #side-menu.modern-slim > li > ul.nav-second-level {position:fixed;left:0;right:0;top:var(--deskman-submenu-top,110px);border-radius:0;min-width:unset;}
}
/* Content area compensation if legacy styles added left padding */
body.deskman-topnav #wrapper, body.deskman-topnav .content-wrapper {padding-left:0 !important;margin-left:0 !important;}