:root{
  --blue:#0b5cff;
  --blue2:#0ea5e9;
  --navy:#07152f;
  --ink:#132033;
  --muted:#6b7280;
  --line:#dbe3ef;
  --soft:#f3f7ff;
  --white:#fff;
  --green:#16a34a;
  --red:#dc2626;
  --yellow:#d97706;
  --shadow:0 18px 45px rgba(10,47,100,.10);
  --radius:22px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:linear-gradient(180deg,#eef5ff 0%,#f8fbff 45%,#fff 100%);
  color:var(--ink);
}
a{text-decoration:none;color:inherit}
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(219,227,239,.85);
}
.nav-wrap{
  max-width:1440px;margin:auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:-.04em;color:var(--navy)}
.brand-mark{
  width:42px;height:42px;border-radius:14px;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff;display:grid;place-items:center;font-weight:900;
  box-shadow:0 12px 28px rgba(11,92,255,.25);
}
.brand span small{display:block;font-weight:700;color:var(--muted);letter-spacing:0;font-size:11px;margin-top:1px}
.nav-links{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nav-links a{
  padding:10px 13px;border-radius:999px;color:#334155;font-weight:750;font-size:14px;
}
.nav-links a:hover,.nav-links a.active{background:#eaf2ff;color:var(--blue)}
.user-pill{padding:9px 13px;background:#07152f;color:white;border-radius:999px;font-size:13px;font-weight:800}
.container{max-width:1440px;margin:auto;padding:28px 24px}
.hero{
  position:relative;overflow:hidden;border-radius:32px;
  background:
    radial-gradient(circle at 10% 10%,rgba(14,165,233,.34),transparent 28%),
    radial-gradient(circle at 90% 0%,rgba(11,92,255,.30),transparent 30%),
    linear-gradient(135deg,#081532,#123d91 62%,#0ea5e9);
  color:white;padding:58px 48px;box-shadow:var(--shadow);
}
.hero:after{
  content:"";position:absolute;right:-70px;bottom:-90px;width:340px;height:340px;
  background:rgba(255,255,255,.13);border-radius:80px;transform:rotate(24deg);
}
.hero h1{font-size:clamp(36px,5vw,72px);line-height:.96;margin:0 0 16px;letter-spacing:-.06em;max-width:820px}
.hero p{font-size:18px;line-height:1.7;max-width:720px;color:#dbeafe;margin:0 0 28px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:999px;padding:12px 18px;
  font-weight:900;cursor:pointer;font-size:14px;
  transition:.2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue2));color:white;box-shadow:0 12px 28px rgba(11,92,255,.22)}
.btn-dark{background:#07152f;color:white}
.btn-light{background:#fff;color:#07152f}
.btn-ghost{background:#eef5ff;color:#0b5cff}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.card{
  background:rgba(255,255,255,.9);
  border:1px solid rgba(219,227,239,.95);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
}
.metric{grid-column:span 3;min-height:140px}
.metric .label{color:var(--muted);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.metric .value{font-size:32px;font-weight:950;letter-spacing:-.05em;margin-top:12px}
.metric.blue{background:linear-gradient(135deg,#0b5cff,#0ea5e9);color:white}
.metric.blue .label{color:#dbeafe}
.metric.navy{background:linear-gradient(135deg,#07152f,#173a7a);color:white}
.metric.navy .label{color:#dbeafe}
.page-title{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}
.page-title h1{font-size:34px;letter-spacing:-.05em;margin:0}
.table-wrap{overflow:auto;border-radius:18px;border:1px solid var(--line);background:white}
table{width:100%;border-collapse:collapse;min-width:850px}
th,td{padding:14px 16px;border-bottom:1px solid #edf2f7;text-align:left;font-size:14px;vertical-align:top}
th{background:#f8fbff;color:#475569;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
tr:hover td{background:#fbfdff}
.badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:6px 15px;min-width:78px;font-size:12px;font-weight:900;white-space:nowrap;line-height:1;box-sizing:border-box}
.badge.green{background:#dcfce7;color:#166534}
.badge.red{background:#fee2e2;color:#991b1b}
.badge.yellow{background:#fef3c7;color:#92400e}
.badge.blue{background:#dbeafe;color:#1d4ed8}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field label{display:block;font-weight:900;font-size:13px;color:#334155;margin-bottom:7px}
input,select,textarea{
  width:100%;border:1px solid var(--line);border-radius:14px;padding:12px 13px;background:white;
  font:inherit;color:#111827;outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(11,92,255,.09)}
textarea{min-height:120px;resize:vertical}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.alert{padding:13px 16px;border-radius:16px;margin-bottom:16px;font-weight:800}
.alert.ok{background:#dcfce7;color:#166534}
.alert.err{background:#fee2e2;color:#991b1b}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:
 radial-gradient(circle at 20% 20%,rgba(14,165,233,.22),transparent 28%),
 linear-gradient(135deg,#eef5ff,#ffffff)}
.login-card{width:min(460px,100%);padding:30px;border-radius:30px;background:rgba(255,255,255,.75);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow)}
.public-section{padding:34px 0}
.service-card{grid-column:span 4}
.software-card{grid-column:span 4}
.footer{padding:30px 24px;text-align:center;color:#64748b}
@media(max-width:980px){
  .metric,.service-card,.software-card{grid-column:span 6}
  .nav-wrap{align-items:flex-start;flex-direction:column}
  .nav-links{width:100%;overflow:auto;flex-wrap:nowrap;padding-bottom:4px}
  .form-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .container{padding:18px 14px}
  .hero{padding:36px 24px;border-radius:24px}
  .metric,.service-card,.software-card{grid-column:span 12}
  .page-title{align-items:flex-start;flex-direction:column}
}
.muted{color:#64748b}.wide{grid-column:span 2}.profile-head{display:flex;gap:22px;align-items:center}.avatar-xl{width:132px;height:132px;border-radius:28px;object-fit:cover;box-shadow:0 12px 30px rgba(15,23,42,.15)}.avatar-xl.placeholder{display:grid;place-items:center;background:linear-gradient(135deg,#0b5cff,#0f172a);color:white;font-size:54px;font-weight:900}@media(max-width:720px){.wide{grid-column:span 1}.profile-head{display:block}.avatar-xl{margin-bottom:15px}}
@media print{.topbar,.footer,.btn,.actions{display:none!important}.container{max-width:100%;padding:0}.card{box-shadow:none;border:1px solid #ddd;break-inside:avoid}.table-wrap{overflow:visible}}


/* Nexus Mobile App Mode - applied globally without changing desktop behavior */
.mobile-menu-toggle{display:none;border:0;background:#07152f;color:#fff;border-radius:14px;padding:10px 12px;font-weight:900;box-shadow:0 10px 24px rgba(7,21,47,.18)}
.mobile-only{display:none!important}
.app-page-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
@media(max-width:760px){
  body{background:#f3f7ff;padding-bottom:78px;-webkit-tap-highlight-color:transparent}
  .topbar{background:rgba(255,255,255,.96);box-shadow:0 10px 28px rgba(15,23,42,.08)}
  .nav-wrap{padding:10px 12px;flex-direction:row;align-items:center;gap:10px;position:relative}
  .brand-mark{width:38px;height:38px;border-radius:13px}
  .brand span{font-size:15px;line-height:1.05}.brand span small{font-size:10px}
  .mobile-menu-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:auto}
  .nav-links{display:none;position:absolute;top:62px;left:10px;right:10px;width:auto;max-height:72vh;overflow:auto;flex-direction:column;align-items:stretch;gap:8px;padding:12px;background:rgba(255,255,255,.98);border:1px solid var(--line);border-radius:22px;box-shadow:0 20px 55px rgba(15,23,42,.18);z-index:100}
  body.mobile-menu-open .nav-links{display:flex}
  .nav-links a,.user-pill{width:100%;border-radius:16px;padding:13px 14px;font-size:15px;background:#f8fbff;color:#0f172a;text-align:left}
  .nav-links a.active{background:#dbeafe;color:#0b5cff}
  .container{padding:16px 12px}
  .page-title{position:sticky;top:60px;z-index:30;background:rgba(243,247,255,.95);backdrop-filter:blur(14px);border:1px solid rgba(219,227,239,.9);border-radius:20px;padding:12px;margin:0 0 14px;box-shadow:0 10px 26px rgba(15,23,42,.08)}
  .page-title h1{font-size:24px;letter-spacing:-.04em}
  .card{border-radius:22px;padding:16px;box-shadow:0 12px 34px rgba(15,23,42,.08);margin-bottom:14px}
  .grid{display:block}.metric{min-height:auto;margin-bottom:12px}.metric .value{font-size:26px}
  .form-grid{grid-template-columns:1fr!important;gap:12px}
  input,select,textarea{border-radius:16px;min-height:46px;font-size:16px;padding:12px 14px}
  textarea{min-height:160px}
  .actions,.hero-actions{position:relative;display:grid;grid-template-columns:1fr;gap:9px;width:100%}
  .btn{width:100%;min-height:46px;border-radius:16px;font-size:15px;padding:13px 15px}
  .table-wrap{border:0;background:transparent;overflow:visible;border-radius:0}
  table{display:block;min-width:0;width:100%;border-collapse:separate;border-spacing:0}
  thead{display:none}
  tbody,tr,td{display:block;width:100%}
  tr{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 12px 30px rgba(15,23,42,.07);margin:0 0 12px;padding:10px;overflow:hidden}
  tr:hover td{background:transparent}
  td{border:0;border-bottom:1px solid #edf2f7;padding:10px 8px 10px 44%;min-height:42px;position:relative;font-size:14px;word-break:break-word}
  td:last-child{border-bottom:0}
  td:before{content:attr(data-label);position:absolute;left:8px;top:10px;width:38%;font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:900;color:#64748b;line-height:1.2}
  td .actions, td.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:2px}
  td .actions .btn, td.actions .btn{width:100%;min-width:0}
  .badge{min-width:auto;padding:7px 12px}
  .hero{border-radius:24px;padding:32px 20px}.hero h1{font-size:34px}.hero p{font-size:15px}
  .login-shell{padding:16px}.login-card{border-radius:26px;padding:22px}
  .profile-head{display:block}.avatar-xl{width:104px;height:104px;border-radius:24px;margin-bottom:14px}
  .footer{display:none}
  .mobile-bottom-nav{display:flex!important;position:fixed;left:10px;right:10px;bottom:10px;z-index:70;background:rgba(7,21,47,.96);backdrop-filter:blur(18px);border-radius:22px;box-shadow:0 18px 55px rgba(15,23,42,.28);padding:8px;gap:6px;justify-content:space-around}
  .mobile-bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#dbeafe;font-size:10px;font-weight:900;border-radius:16px;padding:8px 4px;min-height:52px;text-align:center}
  .mobile-bottom-nav a.active{background:#0b5cff;color:#fff}
  .mobile-bottom-nav .ico{font-size:18px;line-height:1;margin-bottom:3px}
}


/* FINAL REAL MOBILE DATE FIELD FIX - Nexus
   Applies to Date of Birth, Issue Date, Expiration Date, Training dates and Payroll dates.
   This overrides native mobile browser date input sizing without cutting the value. */
@media (max-width: 760px) {
  .emp-field,
  .field,
  .portal-card .field,
  .employee-card .emp-field,
  .portal-form-grid .field,
  .form-grid .field {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  input[type="date"],
  input.app-date-input,
  .emp-field input[type="date"],
  .field input[type="date"],
  .portal-card input[type="date"],
  .employee-card input[type="date"],
  .form-grid input[type="date"],
  .portal-form-grid input[type="date"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    box-sizing: border-box !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: none !important;
    padding: 8px 38px 8px 10px !important;
    border-radius: 13px !important;
    font-size: 14px !important;
    line-height: normal !important;
    text-align: left !important;
    background-color: #fff !important;
    white-space: nowrap !important;
    overflow: visible !important;
    transform: none !important;
    zoom: 1 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  input[type="date"]::-webkit-date-and-time-value,
  input.app-date-input::-webkit-date-and-time-value {
    text-align: left !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: calc(100% - 22px) !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 24px !important;
  }

  input[type="date"]::-webkit-calendar-picker-indicator,
  input.app-date-input::-webkit-calendar-picker-indicator {
    position: absolute !important;
    right: 10px !important;
    width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: .75 !important;
  }

  .emp-form-grid,
  .portal-form-grid,
  .form-grid,
  .date-range-app {
    grid-template-columns: minmax(0,1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
}

@media (max-width: 390px) {
  input[type="date"],
  input.app-date-input,
  .emp-field input[type="date"],
  .field input[type="date"],
  .portal-card input[type="date"],
  .employee-card input[type="date"] {
    font-size: 13px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding-left: 9px !important;
    padding-right: 34px !important;
  }
}

/* Employee mobile bottom navigation active state */
@media (max-width: 760px) {
  .mobile-bottom-nav a.active,
  .mobile-bottom-nav a[aria-current="page"] {
    background: #0b5cff !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(11, 92, 255, .35);
  }
  .mobile-bottom-nav a.active .ico,
  .mobile-bottom-nav a[aria-current="page"] .ico {
    transform: translateY(-1px);
  }
}

/* Desktop workspace fix: bottom mobile menu/footer must not appear on desktop or mouse/trackpad layouts */
@media (min-width: 761px), (pointer: fine) {
  .mobile-bottom-nav,
  nav.mobile-bottom-nav,
  .mobile-only {
    display: none !important;
    visibility: hidden !important;
  }
  .footer {
    display: none !important;
  }
  body {
    padding-bottom: 0 !important;
  }
}

/* Show bottom navigation only on real mobile/touch screens */
@media (max-width: 760px) and (pointer: coarse) {
  nav.mobile-bottom-nav.mobile-only {
    display: flex !important;
    visibility: visible !important;
  }
  .footer {
    display: block !important;
    padding-bottom: 96px;
  }
  body {
    padding-bottom: 88px !important;
  }
}


/* Nexus Enterprise PRO - Mobile work-ready pass for admin/supervisor modules
   Keeps desktop intact; applies only on phone/touch widths. */
@media (max-width: 760px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .container > * { max-width: 100%; }
  .card, .table-wrap, .login-card, .hero, .employee-panel, .day-editor, .payroll-kpi {
    max-width: 100% !important;
  }

  /* Keep all forms in app style */
  .field, .emp-field, .form-group, .form-control-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  input, select, textarea, button {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="time"], input[type="date"], select {
    min-height: 44px !important;
  }
  textarea { min-height: 132px !important; }

  /* Page title/actions never overflow */
  .page-title .actions, .page-title form, .page-title > div:last-child {
    width: 100%;
  }
  .page-title .actions a, .page-title .actions button {
    width: 100%;
  }

  /* Common two-column work areas become app stacks */
  .employee-workspace,
  .invoice-workspace,
  .project-workspace,
  .company-workspace,
  .training-workspace,
  .reports-workspace,
  .settings-workspace,
  .users-workspace,
  .admin-workspace,
  .split-layout,
  .two-col,
  .layout-two-col {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* Make side panels normal blocks on mobile */
  .employee-panel,
  .side-panel,
  .left-panel,
  .right-panel,
  .sticky-panel {
    position: static !important;
    top: auto !important;
    width: 100% !important;
  }

  /* Directories and cards */
  .period-list, .date-summary-grid, .payroll-kpis, .bulk-employee-grid,
  .cards-grid, .directory-grid, .stats-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Admin bottom nav app behavior */
  .mobile-bottom-nav {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    border-radius: 20px !important;
  }
  .mobile-bottom-nav a {
    min-width: 0 !important;
    line-height: 1.05 !important;
  }

  /* Action bars should not stay cramped */
  .actions:not(td .actions),
  .payroll-actions,
  .app-page-actions,
  .range-toolbar,
  .employee-select-form,
  .employee-select-form-top,
  .form-actions,
  .button-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    width: 100% !important;
  }
  .actions:not(td .actions) .btn,
  .payroll-actions .btn,
  .app-page-actions .btn,
  .range-toolbar .btn,
  .employee-select-form .btn,
  .form-actions .btn,
  .button-row .btn {
    width: 100% !important;
  }

  /* Tables are cards by default, but keep intentional horizontal work tables usable */
  .payroll-entry-wrap,
  .line-items-wrap,
  .horizontal-scroll,
  .mobile-scroll-x {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 18px !important;
  }
  .payroll-entry-wrap table,
  .line-items-wrap table,
  table.force-horizontal {
    display: table !important;
    min-width: 760px !important;
    border-collapse: separate !important;
  }
  .payroll-entry-wrap thead,
  .line-items-wrap thead,
  table.force-horizontal thead { display: table-header-group !important; }
  .payroll-entry-wrap tbody,
  .line-items-wrap tbody,
  table.force-horizontal tbody { display: table-row-group !important; }
  .payroll-entry-wrap tr,
  .line-items-wrap tr,
  table.force-horizontal tr { display: table-row !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; }
  .payroll-entry-wrap td,
  .payroll-entry-wrap th,
  .line-items-wrap td,
  .line-items-wrap th,
  table.force-horizontal td,
  table.force-horizontal th { display: table-cell !important; width: auto !important; padding: 10px !important; position: static !important; }
  .payroll-entry-wrap td:before,
  .line-items-wrap td:before,
  table.force-horizontal td:before { content: none !important; }

  /* Make long invoice descriptions comfortable */
  .line-desc, textarea[name*="description"], textarea[name*="notes"] {
    min-height: 150px !important;
    line-height: 1.45 !important;
  }

  /* Compact but readable payroll rows on mobile */
  .payroll-entry-table select,
  .payroll-entry-table input {
    min-width: 96px !important;
    font-size: 14px !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
  }
  .payroll-entry-table input[type="text"] { min-width: 160px !important; }
  .payroll-date-main { font-size: 13px !important; }
  .payroll-date-sub { font-size: 11px !important; }

  /* Hide leftover desktop-only helper/footer text blocks on mobile */
  .desktop-only, .desktop-helper, .desktop-note { display: none !important; }
}


/* Super Admin Workspace PRO */
.workspace-switcher{
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(7,21,47,.06);
  border:1px solid rgba(219,227,239,.95);
  border-radius:999px;
  padding:6px 8px 6px 12px;
  min-width:260px;
}
.workspace-switcher .workspace-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#64748b;
  font-weight:900;
  white-space:nowrap;
}
.workspace-switcher select{
  min-height:34px;
  padding:7px 34px 7px 10px;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
  border:1px solid #dbe3ef;
  background:#fff;
}
.workspace-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  background:#eef5ff;
  border:1px solid #dbeafe;
  color:#0f172a;
  font-size:13px;
  font-weight:900;
}
.workspace-pill span{
  color:#64748b;
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:.08em;
}
.superadmin-context{
  max-width:1440px;
  margin:14px auto 0;
  padding:16px 24px;
  border-radius:24px;
  background:
    radial-gradient(circle at 8% 20%,rgba(14,165,233,.22),transparent 34%),
    linear-gradient(135deg,#07152f,#123d91);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  box-shadow:0 18px 45px rgba(7,21,47,.18);
}
.superadmin-context strong{
  display:block;
  font-size:22px;
  letter-spacing:-.04em;
  margin-top:4px;
}
.superadmin-context p{
  margin:4px 0 0;
  color:#dbeafe;
  font-weight:650;
}
.context-kicker{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.13);
  color:#dbeafe;
  font-size:11px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.context-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.superadmin-hero{
  position:relative;
  overflow:hidden;
  border-radius:32px;
  padding:34px;
  margin-bottom:20px;
  background:
    radial-gradient(circle at 15% 20%,rgba(14,165,233,.36),transparent 28%),
    radial-gradient(circle at 95% 5%,rgba(255,255,255,.16),transparent 26%),
    linear-gradient(135deg,#07152f,#0b5cff 64%,#0ea5e9);
  color:#fff;
  box-shadow:0 22px 60px rgba(7,21,47,.2);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
}
.superadmin-hero h1{
  font-size:clamp(32px,4vw,54px);
  letter-spacing:-.06em;
  line-height:.98;
  margin:12px 0 8px;
}
.superadmin-hero p{
  color:#dbeafe;
  margin:0;
  max-width:720px;
  font-weight:650;
}
.superadmin-hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.super-kpi-grid .metric{
  border:0;
  overflow:hidden;
}
.section-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  margin-bottom:14px;
}
.section-head h2{margin:0 0 4px}
.workspace-module-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.workspace-module-grid a{
  padding:16px;
  border-radius:18px;
  background:linear-gradient(180deg,#f8fbff,#eef5ff);
  border:1px solid #dbeafe;
  transition:.18s ease;
}
.workspace-module-grid a:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(15,23,42,.08);
}
.workspace-module-grid b{
  display:block;
  font-size:15px;
  color:#07152f;
  margin-bottom:6px;
}
.workspace-module-grid span{
  color:#64748b;
  font-size:13px;
  font-weight:700;
}
.status-line{
  display:flex;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid #edf2f7;
  padding:12px 0;
}
.status-line span{
  color:#64748b;
  font-weight:800;
}
.status-line strong{
  text-align:right;
  color:#07152f;
}
.super-users-title p{margin:6px 0 0}
.user-editor-card,
.role-guide-card,
.super-workspace-panel{
  border:1px solid rgba(219,234,254,.98);
}
.role-guide-item{
  display:grid;
  grid-template-columns:130px 1fr;
  gap:12px;
  align-items:flex-start;
  padding:12px 0;
  border-bottom:1px solid #edf2f7;
}
.role-guide-item:last-child{border-bottom:0}
.role-guide-item p{
  margin:0;
  color:#64748b;
  font-weight:700;
  line-height:1.45;
}
.user-card-list{
  display:grid;
  gap:12px;
}
.user-pro-card{
  display:grid;
  grid-template-columns:52px minmax(220px,1.2fr) minmax(220px,1fr) minmax(150px,.7fr) auto;
  gap:14px;
  align-items:center;
  padding:14px;
  border:1px solid #e2e8f0;
  border-radius:20px;
  background:linear-gradient(180deg,#fff,#f8fbff);
  box-shadow:0 10px 26px rgba(15,23,42,.05);
}
.user-avatar{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:17px;
  background:linear-gradient(135deg,#0b5cff,#07152f);
  color:#fff;
  font-weight:950;
  font-size:20px;
  box-shadow:0 12px 26px rgba(11,92,255,.18);
}
.user-main strong{
  display:block;
  font-size:16px;
  color:#07152f;
}
.user-main span{
  display:block;
  margin-top:3px;
  color:#64748b;
  font-weight:700;
  word-break:break-word;
}
.user-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.company-chip{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:6px 12px;
  background:#f1f5f9;
  color:#334155;
  font-size:12px;
  font-weight:900;
}
.user-meta span{
  display:block;
  color:#64748b;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:900;
}
.user-meta b{
  display:block;
  color:#0f172a;
  font-size:13px;
  margin-top:3px;
}
.user-actions{
  display:flex;
  justify-content:flex-end;
}
@media(max-width:1100px){
  .user-pro-card{
    grid-template-columns:52px 1fr;
  }
  .user-badges,.user-meta,.user-actions{
    grid-column:2;
  }
  .workspace-module-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .workspace-switcher{
    order:3;
    width:100%;
    min-width:0;
    border-radius:18px;
    justify-content:space-between;
  }
  .workspace-switcher select{flex:1}
  .superadmin-context{
    margin:10px 10px 0;
    padding:14px;
    border-radius:22px;
    flex-direction:column;
    align-items:stretch;
  }
  .context-actions{display:grid;grid-template-columns:1fr 1fr}
  .superadmin-hero{
    border-radius:24px;
    padding:22px;
    flex-direction:column;
    align-items:stretch;
  }
  .superadmin-hero-actions{display:grid;grid-template-columns:1fr}
  .workspace-module-grid{grid-template-columns:1fr}
  .role-guide-item{grid-template-columns:1fr}
  .user-pro-card{
    grid-template-columns:46px 1fr;
    padding:12px;
  }
  .user-avatar{width:46px;height:46px;border-radius:15px}
  .user-badges,.user-meta,.user-actions{grid-column:1 / -1}
  .user-actions .btn{width:100%}
}

.workspace-apply{
  padding:8px 12px!important;
  min-height:34px!important;
  border-radius:999px!important;
  font-size:12px!important;
  white-space:nowrap;
}
@media(max-width:760px){
  .workspace-switcher{display:grid!important;grid-template-columns:1fr;gap:8px}
  .workspace-apply{width:100%!important;border-radius:16px!important}
}

.scope-warning{margin-top:8px;display:inline-flex;padding:7px 10px;border-radius:999px;background:#fef3c7;color:#92400e;font-size:12px;font-weight:900}

.payroll-entry-wrap.is-locked{opacity:.82}.range-close-bar .badge{font-size:12px}.btn-danger{background:#dc2626;color:#fff}



/* ==========================================================
   GLOBAL MOBILE PRO FIX - Nexus Enterprise PRO
   Keeps layouts inside the screen on phones/tablets.
   ========================================================== */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

img, video, iframe {
  max-width: 100%;
  height: auto;
}

table {
  width: 100%;
}

input, select, textarea, button {
  max-width: 100%;
}

.table-wrap,
.payroll-report-table-wrap,
.employee-report-table-wrap,
.users-table-wrap,
.card .table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrap table,
.payroll-report-table,
.employee-payroll-report-table,
.users-table {
  min-width: 720px;
}

.actions,
.form-actions,
.pro-actions,
.hero-actions,
.report-action-row,
.employee-report-actions,
.users-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.btn,
button,
input[type="submit"] {
  white-space: nowrap;
}

.card,
.cardx,
.users-panel,
.employee-card,
.login-card {
  max-width: 100%;
}

.grid,
.grid.two,
.form-grid,
.emp-form-grid,
.users-layout,
.shell,
.super-kpi-grid,
.users-kpis {
  max-width: 100%;
}

@media (max-width: 980px) {
  .grid,
  .grid.two,
  .form-grid,
  .emp-form-grid,
  .shell,
  .users-layout,
  .mig-grid {
    grid-template-columns: 1fr !important;
  }

  .super-kpi-grid,
  .users-kpis,
  .stats,
  .employee-mini-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .topbar,
  .nav-wrap {
    max-width: 100%;
  }

  .workspace-switcher {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .workspace-switcher select,
  .workspace-switcher button {
    width: 100%;
  }

  .page-title,
  .users-hero,
  .pro-hero,
  .mig-hero,
  .superadmin-hero,
  .cardx-h,
  .section-head,
  .users-directory-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .page-title .actions,
  .users-hero .btn,
  .pro-actions,
  .hero-actions,
  .form-actions {
    width: 100%;
  }

  .page-title .btn,
  .actions .btn,
  .pro-actions .btn,
  .hero-actions .btn,
  .form-actions .btn,
  .form-actions button,
  .report-action-row .btn,
  .employee-report-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .login-card {
    width: calc(100vw - 24px) !important;
    margin: 12px auto !important;
    padding: 18px !important;
  }
}

@media (max-width: 760px) {
  body {
    font-size: 15px;
  }

  .nav-wrap {
    padding: 10px 12px !important;
  }

  .brand {
    min-width: 0;
  }

  .brand span,
  .brand small {
    overflow-wrap: anywhere;
  }

  .nav-links {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }

  body.mobile-menu-open .nav-links {
    width: calc(100vw - 24px);
    left: 12px;
    right: 12px;
  }

  .card,
  .cardx,
  .users-panel,
  .mig-card,
  .employee-card,
  .user-editor-card,
  .role-guide-card {
    border-radius: 20px !important;
    padding: 16px !important;
  }

  .cardx,
  .users-panel {
    padding: 0 !important;
  }

  .cardx-b,
  .users-panel-body {
    padding: 16px !important;
  }

  .cardx-h,
  .users-panel-head {
    padding: 16px !important;
  }

  h1 {
    font-size: 28px !important;
    line-height: 1.1 !important;
  }

  h2 {
    font-size: 22px !important;
    line-height: 1.15 !important;
  }

  h3 {
    font-size: 18px !important;
  }

  .super-kpi-grid,
  .users-kpis,
  .stats,
  .employee-mini-stats {
    grid-template-columns: 1fr !important;
  }

  .field,
  .emp-field,
  .mini {
    min-width: 0 !important;
  }

  .field input,
  .field select,
  .field textarea,
  .emp-field input,
  .emp-field select,
  .emp-field textarea,
  .mini input,
  .mini select,
  .mini textarea,
  .users-form-grid input,
  .users-form-grid select {
    width: 100% !important;
    min-width: 0 !important;
  }

  .item-row,
  .split-row {
    grid-template-columns: 1fr !important;
  }

  .invoice-actions-col,
  .invoice-actions-head {
    min-width: 180px !important;
  }

  .act {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .act .link,
  .act button.link {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
  }

  .employee-mini,
  .employee-summary-above,
  .profile-head {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }

  .employee-avatar,
  .avatar-xl {
    width: 92px !important;
    height: 92px !important;
  }

  .employee-days-workarea,
  .payroll-entry-wrap,
  .employee-payroll-report-card,
  .payroll-report-card {
    max-width: 100%;
    overflow-x: hidden;
  }

  .payroll-entry-table {
    min-width: 820px;
  }

  .report-filter-block,
  .range-close-bar,
  .print-report-title {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .period-list,
  .report-period-list {
    grid-template-columns: 1fr !important;
  }

  .period-card-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .period-card-actions .btn,
  .period-card-actions button {
    width: 100%;
  }

  .employee-report-info-grid,
  .info-grid,
  .register-form-grid {
    grid-template-columns: 1fr !important;
  }

  .employee-report-info-grid .full,
  .register-form-grid .full {
    grid-column: auto !important;
  }

  .users-table-wrap,
  .table-wrap,
  .payroll-report-table-wrap {
    border-radius: 16px !important;
  }

  .users-table,
  .table-wrap table,
  .payroll-report-table {
    min-width: 680px;
  }

  .users-person,
  .user-pro-card {
    min-width: 0;
  }

  .users-person small,
  .users-person strong,
  .user-main span,
  .user-main strong {
    overflow-wrap: anywhere;
  }

  .register-page {
    padding: 14px 10px !important;
  }

  .register-top,
  .register-hero {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  .register-hero {
    padding: 18px !important;
    border-radius: 24px !important;
  }

  .register-copy h1 {
    font-size: 31px !important;
  }

  .register-form-card {
    padding: 18px !important;
    border-radius: 22px !important;
  }
}

@media (max-width: 480px) {
  .btn,
  button,
  input[type="submit"] {
    width: 100%;
    justify-content: center;
  }

  .table-wrap table,
  .users-table,
  .payroll-report-table {
    min-width: 620px;
  }

  .payroll-entry-table {
    min-width: 760px;
  }

  .brand-mark {
    flex: 0 0 auto;
  }

  .workspace-label,
  .muted,
  small,
  .sub {
    overflow-wrap: anywhere;
  }

  .metric .value,
  .users-kpi b,
  .stat b {
    font-size: 24px !important;
    overflow-wrap: anywhere;
  }
}

@media print {
  body {
    overflow: visible !important;
  }
  .table-wrap,
  .payroll-report-table-wrap,
  .users-table-wrap {
    overflow: visible !important;
  }
}