/* ==========================================================================
   Worksuite UI theme for AOG Unified
   --------------------------------------------------------------------------
   Loaded after app.css, in the slot nexus.css used to occupy. Same contract:
   no view markup changes, the whole re-skin happens by re-pointing the design
   tokens that app.css and the 82 view files already read through var().

   Values are lifted from the Worksuite install at /worksuite
   (public/css/main.css + theme_settings: sidebar_theme=dark, header_color=#1D82F5),
   not eyeballed. Worksuite ships Bootstrap 4; this app is Bootstrap 5, so the
   look is ported rather than the stylesheet - dropping BS4 in would break every
   dropdown, modal and utility class the views depend on.
   ========================================================================== */

body.nexus-ui{
    /* --- Worksuite palette ------------------------------------------------ */
    --ws-primary:#1d82f5;
    --ws-primary-dark:#0a6fe2;
    --ws-primary-soft:rgba(29,130,245,.10);
    --ws-sidebar:#171f29;         /* .sidebar-dark .sidebar-menu            */
    --ws-sidebar-line:rgba(232,238,243,.078);
    --ws-sidebar-ink:#99a5b5;
    --ws-sidebar-ink-active:#f7faff;
    --ws-body:#f2f4f7;            /* .bg-additional-grey                    */
    --ws-surface:#fff;
    --ws-border:#e8eef3;
    --ws-ink:#28313c;             /* headings                               */
    --ws-ink-grey:#616e80;        /* .text-dark-grey                        */
    --ws-ink-lightest:#99a5b5;    /* .text-lightest                         */
    --ws-radius:4px;
    --ws-shadow:0 0 4px 0 #e8eef3;/* .b-shadow-4                            */
    --ws-sidebar-w:240px;
    --ws-sidebar-mini:60px;
    --ws-topbar-h:63px;

    /* --- nexus tokens, re-pointed ---------------------------------------- */
    --nx-primary:var(--ws-primary);
    --nx-primary-rgb:29,130,245;
    --nx-bg:var(--ws-body);
    --nx-bg-2:var(--ws-body);
    --nx-panel:var(--ws-surface);
    --nx-panel-strong:var(--ws-surface);
    --nx-panel-soft:#f7faff;
    --nx-stroke:var(--ws-border);
    --nx-stroke-strong:#d9e2ec;
    --nx-text:var(--ws-ink);
    --nx-muted:var(--ws-ink-grey);
    --nx-cyan:var(--ws-primary);
    --nx-cyan-2:var(--ws-primary);
    --nx-violet:var(--ws-primary);
    --nx-pink:#ea4c89;
    --nx-green:#28a745;
    --nx-yellow:#fcbd01;
    --nx-red:#d30000;
    --nx-shadow:var(--ws-shadow);
    --nx-shadow-soft:var(--ws-shadow);
    --nx-radius-xl:var(--ws-radius);
    --nx-radius-lg:var(--ws-radius);
    --nx-radius-md:var(--ws-radius);
    --nx-sidebar:var(--ws-sidebar-w);

    /* --- legacy tokens every existing page reads -------------------------- */
    --bg:var(--ws-body);
    --surface:var(--ws-surface);
    --card:var(--ws-surface);
    --ink:var(--ws-ink);
    --ink2:var(--ws-ink);
    --tx:var(--ws-ink);
    --tx2:var(--ws-ink-grey);
    --tx3:var(--ws-ink-lightest);
    --line:var(--ws-border);
    --brand:var(--ws-primary);
    --brand2:var(--ws-primary);
    --brand3:var(--ws-primary);
    --brand-bg:var(--ws-primary-soft);
    --amber:#fcbd01;
    --amber2:#fcbd01;
    --amber-bg:rgba(252,189,1,.12);
    --ok:#28a745;
    --ok-bg:rgba(40,167,69,.12);
    --warn:#fcbd01;
    --warn-bg:rgba(252,189,1,.12);
    --bad:#d30000;
    --bad-bg:rgba(211,0,0,.10);
    --sh:var(--ws-shadow);
    --sh2:0 0 8px 0 #dfe6ee;
    --r:var(--ws-radius);
    --r-sm:var(--ws-radius);

    /* Worksuite runs the stock system stack. Cairo stays appended so the
       Arabic copy throughout this app keeps rendering properly. */
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans","Cairo",sans-serif,"Apple Color Emoji","Segoe UI Emoji";
    font-size:14px;
    color:var(--ws-ink-grey);
    background:var(--ws-body);
    min-height:100vh;
    /* The app is light-only since the theme toggle was removed. Declaring it
       here keeps native form controls and scrollbars light on an OS set to
       dark - app.js used to set this, but the CSP blocks inline styles. */
    color-scheme:light;
}

/* The light toggle keeps working; Worksuite's default skin is this light one,
   so both states share it rather than flipping to an unrelated palette. */
body.nexus-ui.nexus-light{
    --nx-bg:var(--ws-body);
    --nx-panel:var(--ws-surface);
    --nx-text:var(--ws-ink);
    background:var(--ws-body);
}

/* Worksuite has no grain overlay. */
body.nexus-ui .nexus-noise{display:none!important}

body.nexus-ui h1,body.nexus-ui h2,body.nexus-ui h3,
body.nexus-ui h4,body.nexus-ui h5,body.nexus-ui h6{
    color:var(--ws-ink);
    font-weight:500;
}
body.nexus-ui a{color:var(--ws-primary);text-decoration:none}
body.nexus-ui a:hover{color:var(--ws-primary-dark)}
body.nexus-ui .text-muted{color:var(--ws-ink-lightest)!important}

/* --------------------------------------------------------------------------
   Shell — 240px sidebar, 63px sticky white header, #f2f4f7 canvas
   -------------------------------------------------------------------------- */
body.nexus-ui .app-shell{background:var(--ws-body)}
body.nexus-ui .main-content{
    margin-left:var(--ws-sidebar-w);
    width:calc(100% - var(--ws-sidebar-w));
    background:var(--ws-body);
}
body.nexus-ui .app-content{
    padding:20px 25px 60px!important;
    max-width:none;
    background:var(--ws-body);
}

/* --------------------------------------------------------------------------
   Sidebar — flat #171f29, square rows, hairline separators
   -------------------------------------------------------------------------- */
body.nexus-ui .sidebar{
    width:var(--ws-sidebar-w);
    padding:0;
    background:var(--ws-sidebar);
    border-right:0;
    box-shadow:none;
    color:var(--ws-sidebar-ink);
}

/* Brand block = Worksuite's .sidebar-brand-box: 63px, aligned to the header. */
body.nexus-ui .brand{
    height:var(--ws-topbar-h);
    margin:0;
    padding:8px 20px;
    gap:10px;
    border-bottom:1px solid #252d37;
    font-size:16px;
    font-weight:500;
    flex:0 0 var(--ws-topbar-h);
}
body.nexus-ui .brand-logo-stack{
    flex:0 0 34px;
    padding:0;
    gap:0;
    background:transparent;
    border:0;
    border-radius:0;
}
/* Logo plate. --brand-logo-bg comes from Settings > Company Identity; it is
   'transparent' unless a colour is chosen. The padding is always applied so the
   logo keeps the same visual size whether or not a plate is showing. */
body.nexus-ui .brand-logo{
    width:31px;height:31px;
    padding:3px;
    filter:none;
    background:var(--brand-logo-bg,transparent);
    border-radius:var(--ws-radius);
}
/* Settings > Company Identity preview. It paints the real sidebar colour and
   the chosen plate, so the swatch shows whether the logo is actually legible
   where it lands - previewing it on white would hide the problem this solves. */
body.nexus-ui .settings-branding-preview{
    background:var(--ws-sidebar);
    border:1px solid var(--ws-border);
    border-radius:var(--ws-radius);
}
body.nexus-ui .settings-branding-preview img{
    background:var(--brand-logo-bg,transparent);
    padding:4px;
    border-radius:var(--ws-radius);
}
body.nexus-ui .settings-branding-preview strong{color:var(--ws-sidebar-ink)}

body.nexus-ui .brand-logo-stack strong{font-size:9px;color:var(--ws-sidebar-ink);font-weight:600}
body.nexus-ui .brand span{font-size:16px;font-weight:500;color:#fff;line-height:1.38}
body.nexus-ui .brand small{font-size:11px;color:var(--ws-sidebar-ink);font-weight:400;margin-top:1px}

body.nexus-ui .sidebar-scroll{padding:0 0 8px}
body.nexus-ui .sidebar nav{padding:0}
body.nexus-ui .sidebar-scroll::-webkit-scrollbar{width:10px;background:#262f3a}
body.nexus-ui .sidebar-scroll::-webkit-scrollbar-thumb{background:#585858;border:3px solid #262f3a;border-radius:0}

body.nexus-ui .nav-section{
    padding:16px 20px 6px;
    font-size:10px;
    letter-spacing:.08em;
    color:#5c6673;
    font-weight:600;
}

/* Worksuite rows: full-bleed, square, 1px separator, no transform on hover. */
body.nexus-ui .sidebar .nav-link,
body.nexus-ui .nav-group-toggle{
    border-radius:0;
    margin:0;
    padding:10px 20px;
    font-size:13px;
    font-weight:400;
    color:var(--ws-sidebar-ink);
    box-shadow:0 1px 0 0 var(--ws-sidebar-line);
    transition:color .15s,background-color .15s;
}
body.nexus-ui .sidebar .nav-link i,
body.nexus-ui .nav-group-toggle i{color:inherit}
body.nexus-ui .sidebar .nav-link:hover,
body.nexus-ui .nav-group-toggle:hover,
body.nexus-ui .nav-group-toggle:not(.collapsed){
    background:transparent;
    color:var(--ws-sidebar-ink-active);
    transform:none;
}
body.nexus-ui .sidebar .nav-link:hover i,
body.nexus-ui .nav-group-toggle:hover i{color:var(--ws-sidebar-ink-active)}
body.nexus-ui .sidebar .nav-link.active{
    background:transparent;
    color:var(--ws-sidebar-ink-active);
    font-weight:500;
    box-shadow:0 1px 0 0 var(--ws-sidebar-line);
    border-left:3px solid var(--ws-primary);
    padding-left:17px;
}
body.nexus-ui .sidebar .nav-link.active i{color:var(--ws-primary)}
body.nexus-ui .nav-group-toggle.active{background:transparent;color:var(--ws-sidebar-ink-active)}

/* Sub-items sit indented like Worksuite's .accordionItemContent a. */
body.nexus-ui .sidebar .collapse .nav-link{
    border-left:0;
    margin-left:0;
    padding:8px 20px 8px 46px;
    border-radius:0;
    font-size:12.5px;
    box-shadow:none;
}
body.nexus-ui .sidebar .collapse .nav-link.active{
    border-left:3px solid var(--ws-primary);
    padding-left:43px;
}
body.nexus-ui .nav-group-chevron{font-size:10px}

body.nexus-ui .sidefoot{
    padding:14px 20px;
    border-top:1px solid #252d37;
    margin-top:0;
}
body.nexus-ui .sidefoot .hot{color:#fff;font-size:16px;font-weight:600}
body.nexus-ui .sidefoot .hot small{color:var(--ws-sidebar-ink);font-weight:400}
body.nexus-ui .sidefoot .tag{color:#5c6673;font-style:normal;font-size:10.5px}

body.nexus-ui .sidebar-collapse-btn{
    border-radius:var(--ws-radius);
    border:1px solid #2b3541;
    background:transparent;
    color:var(--ws-sidebar-ink);
    width:28px;height:28px;flex:0 0 28px;
}
body.nexus-ui .sidebar-collapse-btn:hover{
    background:var(--ws-primary);
    border-color:var(--ws-primary);
    color:#fff;
}
body.nexus-ui.sidebar-collapsed .main-content{margin-left:0!important;width:100%!important}

/* --------------------------------------------------------------------------
   Topbar — Worksuite's .main-header: white, 63px, single hairline
   -------------------------------------------------------------------------- */
body.nexus-ui .topbar{
    height:var(--ws-topbar-h);
    padding:0 25px;
    background:var(--ws-surface);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border-bottom:1px solid var(--ws-border);
    box-shadow:none;
}
body.nexus-ui .page-title{
    font-size:18px;
    font-weight:500;
    color:var(--ws-ink);
    padding-bottom:0;
    letter-spacing:0;
}
/* Worksuite has no underline accent on the page title. */
body.nexus-ui .page-title:after{display:none}

body.nexus-ui .topbar-search{
    border-radius:var(--ws-radius);
    border:1px solid var(--ws-border);
    box-shadow:none;
    padding:6px 14px;
    background:var(--ws-surface);
}
body.nexus-ui .topbar-search:focus-within{
    border-color:var(--ws-primary);
    box-shadow:0 0 0 .2rem rgba(29,130,245,.15);
}
body.nexus-ui .topbar-search i{color:var(--ws-ink-lightest)}
body.nexus-ui .topbar-search input{font-size:13px;color:var(--ws-ink)}

body.nexus-ui .user-chip{font-size:13px;font-weight:500;color:var(--ws-ink)}
body.nexus-ui .user-chip small{font-size:11px;color:var(--ws-ink-lightest);font-weight:400}

/* Notification bell + panel */
body.nexus-ui .notif-toggle{
    width:34px;height:34px;
    border-radius:var(--ws-radius);
    border:1px solid var(--ws-border);
    background:var(--ws-surface);
    color:var(--ws-ink-grey);
}
body.nexus-ui .notif-toggle:hover{background:var(--ws-primary);border-color:var(--ws-primary);color:#fff}
body.nexus-ui .notif-count{
    background:var(--ws-primary);
    border-radius:10px;
    font-size:10px;
    font-weight:600;
    border:2px solid #fff;
}
body.nexus-ui .notif-menu{
    border-radius:var(--ws-radius);
    border:1px solid var(--ws-border);
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}
body.nexus-ui .notif-menu-head{
    border-bottom:1px solid var(--ws-border);
    font-weight:500;
    color:var(--ws-ink);
}
body.nexus-ui .notif-item{border-bottom:1px solid var(--ws-border);border-radius:0}
body.nexus-ui .notif-item:hover{background:#f7faff}

/* --------------------------------------------------------------------------
   Cards — Worksuite's .card / .w-tables: white, hairline, 4px, flat
   -------------------------------------------------------------------------- */
body.nexus-ui .card,
body.nexus-ui .metric-card,
body.nexus-ui .settings-side-card,
body.nexus-ui .settings-table-card,
body.nexus-ui .settings-create,
body.nexus-ui .settings-content,
body.nexus-ui .report-card,
body.nexus-ui .app-filter-card{
    background:var(--ws-surface)!important;
    border:1px solid var(--ws-border)!important;
    border-radius:var(--ws-radius)!important;
    box-shadow:var(--ws-shadow)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
}
/* Worksuite cards do not lift on hover. */
body.nexus-ui .card:hover,
body.nexus-ui .report-card:hover{
    box-shadow:var(--ws-shadow)!important;
    transform:none!important;
}
body.nexus-ui .card-header{
    background:var(--ws-surface)!important;
    border-bottom:1px solid var(--ws-border)!important;
    border-radius:var(--ws-radius) var(--ws-radius) 0 0!important;
    font-weight:500;
    font-size:15px;
    color:var(--ws-ink);
    padding:14px 20px;
}
body.nexus-ui .card-body{padding:20px}
body.nexus-ui .card-footer{background:var(--ws-surface);border-top:1px solid var(--ws-border)}
body.nexus-ui .page-heading h4{font-weight:500;color:var(--ws-ink);letter-spacing:0}

/* --------------------------------------------------------------------------
   Buttons — #1d82f5, square, capitalised, hover to black (Worksuite's rule)
   -------------------------------------------------------------------------- */
body.nexus-ui .btn{
    border-radius:var(--ws-radius);
    font-size:13px;
    font-weight:400;
    text-transform:capitalize;
    padding:9px 14px;
    transition:all .15s;
}
body.nexus-ui .btn-sm{padding:5px 10px;font-size:12px}
body.nexus-ui .btn-lg{padding:12px 20px;font-size:15px}

body.nexus-ui .btn-primary{
    background-color:var(--ws-primary)!important;
    border:1px solid var(--ws-primary)!important;
    color:#fff!important;
}
body.nexus-ui .btn-primary:hover{
    background-color:#000!important;
    border-color:#000!important;
    color:#fff!important;
}
body.nexus-ui .btn-primary:disabled,
body.nexus-ui .btn-primary.disabled{
    background-color:var(--ws-primary)!important;
    border-color:var(--ws-primary)!important;
    cursor:not-allowed;
    opacity:.65;
}
body.nexus-ui .btn-outline-primary{
    color:var(--ws-primary)!important;
    border:1px solid var(--ws-primary)!important;
    background:transparent!important;
}
body.nexus-ui .btn-outline-primary:hover{
    background:var(--ws-primary)!important;
    border-color:var(--ws-primary)!important;
    color:#fff!important;
}
/* app.css marks these !important, so the flat Worksuite fills have to match it. */
body.nexus-ui .btn-secondary,
body.nexus-ui .btn-light,
body.nexus-ui .btn-outline-secondary{
    background:var(--ws-surface)!important;
    border:1px solid var(--ws-border)!important;
    color:var(--ws-ink-grey)!important;
}
body.nexus-ui .btn-secondary:hover,
body.nexus-ui .btn-light:hover,
body.nexus-ui .btn-outline-secondary:hover{
    background:#f7faff!important;
    border-color:#d9e2ec!important;
    color:var(--ws-ink)!important;
}
/* Worksuite uses flat status fills; app.css ships gradients with !important. */
body.nexus-ui .btn-success{background:#28a745!important;border:1px solid #28a745!important;color:#fff!important}
body.nexus-ui .btn-danger{background:#d30000!important;border:1px solid #d30000!important;color:#fff!important}
body.nexus-ui .btn-warning{background:#fcbd01!important;border:1px solid #fcbd01!important;color:#212529!important}
body.nexus-ui .btn-info{background:#17a2b8!important;border:1px solid #17a2b8!important;color:#fff!important}
body.nexus-ui .btn-dark{background:var(--ws-ink)!important;border:1px solid var(--ws-ink)!important;color:#fff!important}
body.nexus-ui .btn-outline-success{color:#28a745!important;border:1px solid #28a745!important;background:transparent!important}
body.nexus-ui .btn-outline-success:hover{background:#28a745!important;color:#fff!important}
body.nexus-ui .btn-outline-danger{color:#d30000!important;border:1px solid #d30000!important}
body.nexus-ui .btn-outline-danger:hover{background:#d30000!important;color:#fff!important}
body.nexus-ui .btn:focus,body.nexus-ui .btn:focus-visible{
    box-shadow:0 0 0 .2rem rgba(29,130,245,.25);
    outline:0;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
/* app.css fills inputs with #f7f8fc !important; Worksuite's are plain white. */
body.nexus-ui .form-control,
body.nexus-ui .form-select,
body.nexus-ui .input-group-text{
    border-radius:var(--ws-radius)!important;
    border:1px solid var(--ws-border)!important;
    background:var(--ws-surface)!important;
    color:var(--ws-ink)!important;
    font-size:13px;
    padding:8px 12px;
    box-shadow:none!important;
}
body.nexus-ui .form-control:focus,
body.nexus-ui .form-select:focus{
    border-color:var(--ws-primary);
    box-shadow:0 0 0 .2rem rgba(29,130,245,.15);
    background:var(--ws-surface);
    color:var(--ws-ink);
}
body.nexus-ui .form-control::placeholder{color:var(--ws-ink-lightest)}
body.nexus-ui .form-control:disabled,
body.nexus-ui .form-select:disabled{background:#f2f4f7;color:var(--ws-ink-lightest)}
body.nexus-ui .form-label{
    font-size:12px;
    font-weight:500;
    color:var(--ws-ink-grey);
    margin-bottom:5px;
}
body.nexus-ui .form-check-input{border-radius:3px;border:1px solid #c4cdd8}
body.nexus-ui .form-check-input:checked{
    background-color:var(--ws-primary)!important;
    border-color:var(--ws-primary)!important;
}
body.nexus-ui .form-check-input:focus{box-shadow:0 0 0 .2rem rgba(29,130,245,.15)}
body.nexus-ui .input-group-text{background:#f7faff;color:var(--ws-ink-grey)}

/* --------------------------------------------------------------------------
   Tables — Worksuite's .w-tables: flat, hairline rows, light grey head
   -------------------------------------------------------------------------- */
body.nexus-ui .table{
    color:var(--ws-ink-grey);
    font-size:13px;
    margin-bottom:0;
    --bs-table-bg:transparent;
}
body.nexus-ui .table>thead>tr>th{
    background:#f7faff!important;
    color:var(--ws-ink-grey);
    font-weight:500;
    font-size:12px;
    text-transform:capitalize;
    letter-spacing:0;
    border-bottom:1px solid var(--ws-border);
    border-top:0;
    padding:12px 15px;
    white-space:nowrap;
}
body.nexus-ui .table>tbody>tr>td{
    border-top:0;
    border-bottom:1px solid var(--ws-border);
    padding:12px 15px;
    vertical-align:middle;
    color:var(--ws-ink-grey);
}
body.nexus-ui .table>tbody>tr:last-child>td{border-bottom:0}
body.nexus-ui .table-hover>tbody>tr:hover>*{background:#f7faff!important;color:var(--ws-ink)}
body.nexus-ui .table-bordered,
body.nexus-ui .table-bordered>:not(caption)>*>*{border-color:var(--ws-border)}
body.nexus-ui .table-responsive{border-radius:var(--ws-radius)}

/* --------------------------------------------------------------------------
   Badges, alerts, tabs, dropdowns, modals, pagination
   -------------------------------------------------------------------------- */
body.nexus-ui .badge{
    border-radius:var(--ws-radius);
    font-weight:500;
    font-size:11px;
    padding:5px 8px;
    text-transform:capitalize;
}
body.nexus-ui .badge.bg-primary,
body.nexus-ui .badge.text-bg-primary{background-color:var(--ws-primary)!important;color:#fff!important}
body.nexus-ui .badge.text-bg-light,
body.nexus-ui .badge.bg-light{background-color:#f2f4f7!important;color:var(--ws-ink-grey)!important}

body.nexus-ui .alert{
    border-radius:var(--ws-radius);
    border:1px solid var(--ws-border);
    font-size:13px;
    padding:12px 16px;
}
body.nexus-ui .alert-success{background:#eaf7ee;border-color:#c3e6cb;color:#1b6b2c}
body.nexus-ui .alert-danger{background:#fdeaea;border-color:#f3b8b8;color:#a10000}
body.nexus-ui .alert-warning{background:#fff8e5;border-color:#feedb8;color:#8a6400}
body.nexus-ui .alert-info{background:#e9f3fe;border-color:#bee5eb;color:#0d5aa7}

body.nexus-ui .nav-tabs{border-bottom:1px solid var(--ws-border)}
body.nexus-ui .nav-tabs .nav-link{
    border:0;
    border-bottom:3px solid transparent;
    border-radius:0;
    color:var(--ws-ink-grey);
    font-size:13px;
    padding:12px 18px;
}
body.nexus-ui .nav-tabs .nav-link:hover,
body.nexus-ui .nav-tabs .nav-link.active{
    background:transparent;
    color:var(--ws-ink);
    border-bottom:3px solid var(--ws-primary);
}

body.nexus-ui .dropdown-menu{
    border-radius:var(--ws-radius);
    border:1px solid var(--ws-border);
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    font-size:13px;
    padding:6px 0;
}
body.nexus-ui .dropdown-item{padding:8px 16px;color:var(--ws-ink-grey)}
body.nexus-ui .dropdown-item:hover{background:#f7faff;color:var(--ws-ink)}
body.nexus-ui .dropdown-item.active{background-color:var(--ws-primary)!important;color:#fff}

body.nexus-ui .modal-content{
    border-radius:var(--ws-radius);
    border:1px solid var(--ws-border);
    box-shadow:0 4px 16px rgba(0,0,0,.12);
}
body.nexus-ui .modal-header{
    border-bottom:1px solid var(--ws-border);
    padding:16px 20px;
}
body.nexus-ui .modal-title{font-size:16px;font-weight:500;color:var(--ws-ink)}
body.nexus-ui .modal-footer{border-top:1px solid var(--ws-border);padding:14px 20px}

body.nexus-ui .pagination{font-size:13px}
body.nexus-ui .page-link{
    border-radius:var(--ws-radius)!important;
    border:1px solid var(--ws-border);
    color:var(--ws-ink-grey);
    margin:0 2px;
    padding:6px 12px;
}
body.nexus-ui .page-link:hover{background:#f7faff;color:var(--ws-ink)}
body.nexus-ui .pagination .active>.page-link{
    background-color:var(--ws-primary)!important;
    border-color:var(--ws-primary)!important;
    color:#fff!important;
}

body.nexus-ui .progress{background:#e8eef3;border-radius:var(--ws-radius);height:6px}
body.nexus-ui .progress-bar{background-color:var(--ws-primary)}
body.nexus-ui hr{border-color:var(--ws-border);opacity:1}
body.nexus-ui code{color:#d63384;background:#f7faff;padding:2px 5px;border-radius:3px}

/* Anything still carrying a pill/oversized radius from the old theme. */
body.nexus-ui .rounded-pill{border-radius:var(--ws-radius)!important}
body.nexus-ui .rounded-3,
body.nexus-ui .rounded-4,
body.nexus-ui .rounded-circle.brand-logo{border-radius:var(--ws-radius)!important}

/* --------------------------------------------------------------------------
   Collapsed sidebar — Worksuite's 60px mini rail.
   app.js builds .nav-hover-group wrappers and sets --flyout-top, so the
   flyout contract has to be honoured here; app.css on its own only hides the
   sidebar off-screen, which is not what the toggle is supposed to do.
   -------------------------------------------------------------------------- */
body.nexus-ui.sidebar-collapsed{--nx-sidebar:var(--ws-sidebar-mini)}
body.nexus-ui.sidebar-collapsed .sidebar{
    width:var(--ws-sidebar-mini)!important;
    transform:none!important;
    padding:0;
}
body.nexus-ui.sidebar-collapsed .main-content{
    margin-left:var(--ws-sidebar-mini)!important;
    width:calc(100% - var(--ws-sidebar-mini))!important;
}
body.nexus-ui.sidebar-collapsed .topbar{padding-left:25px}
body.nexus-ui.sidebar-collapsed .brand{justify-content:center;padding:8px}
body.nexus-ui.sidebar-collapsed .brand>span,
body.nexus-ui.sidebar-collapsed .nav-section,
body.nexus-ui.sidebar-collapsed .sidefoot,
body.nexus-ui.sidebar-collapsed .brand-logo-stack strong{display:none!important}
body.nexus-ui.sidebar-collapsed .sidebar-collapse-btn{position:absolute;top:74px;left:16px}
body.nexus-ui.sidebar-collapsed .sidebar-collapse-btn i{transform:rotate(180deg)}
body.nexus-ui.sidebar-collapsed .sidebar,
body.nexus-ui.sidebar-collapsed .sidebar-scroll{overflow:visible!important}
body.nexus-ui.sidebar-collapsed .sidebar-scroll{padding-top:42px}
body.nexus-ui.sidebar-collapsed .sidebar>.sidebar-scroll>.nav-link,
body.nexus-ui.sidebar-collapsed .nav-hover-group>.nav-group-toggle{
    justify-content:center;
    padding:0;
    width:var(--ws-sidebar-mini);
    min-height:42px;
    margin:0;
    font-size:0;
}
body.nexus-ui.sidebar-collapsed .sidebar>.sidebar-scroll>.nav-link.active{
    border-left:3px solid var(--ws-primary);
    padding-left:0;
}
body.nexus-ui.sidebar-collapsed .sidebar>.sidebar-scroll>.nav-link>i,
body.nexus-ui.sidebar-collapsed .nav-hover-group>.nav-group-toggle .nav-group-icon{font-size:15px}
body.nexus-ui.sidebar-collapsed .nav-hover-group{position:relative;width:var(--ws-sidebar-mini)}
body.nexus-ui.sidebar-collapsed .nav-hover-group>.nav-group-toggle span,
body.nexus-ui.sidebar-collapsed .nav-hover-group>.nav-group-toggle .nav-group-chevron{display:none}

/* Flyout submenu: a plain white Worksuite panel.
   Anchored to the group rather than position:fixed + the --flyout-top that
   app.js sets - the app's CSP has no 'unsafe-inline' for style-src, so that
   inline custom property is blocked and every flyout would stack at the same
   top offset. Absolute positioning needs no JS. */
body.nexus-ui.sidebar-collapsed .nav-hover-group>.collapse{
    position:absolute;
    top:0;
    left:var(--ws-sidebar-mini);
    z-index:80;
    display:block!important;
    width:230px;
    max-height:calc(100vh - 24px);
    padding:6px 0;
    overflow-y:auto;
    border:1px solid var(--ws-border);
    border-radius:var(--ws-radius);
    background:var(--ws-surface);
    box-shadow:0 2px 8px rgba(0,0,0,.12);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .14s ease,visibility 0s linear .14s;
}
body.nexus-ui.sidebar-collapsed .nav-hover-group:hover>.collapse,
body.nexus-ui.sidebar-collapsed .nav-hover-group:focus-within>.collapse{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition-delay:0s;
}
body.nexus-ui.sidebar-collapsed .nav-hover-group>.collapse .nav-link{
    justify-content:flex-start;
    padding:8px 16px;
    margin:0;
    font-size:12.5px;
    color:var(--ws-ink-grey);
    white-space:normal;
    box-shadow:none;
}
body.nexus-ui.sidebar-collapsed .nav-hover-group>.collapse .nav-link:hover{
    background:#f7faff;
    color:var(--ws-ink);
}
body.nexus-ui.sidebar-collapsed .nav-hover-group>.collapse .nav-link.active{
    color:var(--ws-primary);
    border-left:3px solid var(--ws-primary);
    padding-left:13px;
}

/* Mobile scrim. nexus.css owned this rule; without it the button renders as a
   stray 15px flex item next to the sidebar on desktop. */
body.nexus-ui .sidebar-mobile-overlay{
    display:none;
    position:fixed;
    inset:0;
    z-index:29;
    border:0;
    padding:0;
    background:rgba(2,8,16,.5);
}

body.nexus-ui .skip-link{
    background:var(--ws-primary);
    border-radius:var(--ws-radius);
    font-weight:500;
    box-shadow:none;
}

/* --------------------------------------------------------------------------
   Login — Worksuite's auth screen: flat grey canvas, plain white card,
   50px fields, full-width primary button. Scoped to .auth-bg because the
   auth layout does not carry the .nexus-ui class.
   -------------------------------------------------------------------------- */
body.auth-bg{
    /* app.css styles .form-control etc. with !important through these tokens,
       so the login page needs the same re-pointing the app shell gets - without
       it the inputs keep the old navy border and 12px radius. */
    --bg:#f2f4f7;
    --surface:#fff;
    --card:#fff;
    --ink:#28313c;
    --ink2:#28313c;
    --tx:#28313c;
    --tx2:#616e80;
    --tx3:#99a5b5;
    --line:#e8eef3;
    --brand:#1d82f5;
    --brand2:#1d82f5;
    --brand3:#1d82f5;
    --brand-bg:rgba(29,130,245,.10);
    --sh:0 0 4px 0 #e8eef3;
    --sh2:0 0 8px 0 #dfe6ee;
    --r:4px;
    --r-sm:4px;
    background:#f2f4f7;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans","Cairo",sans-serif;
    color:#616e80;
}
body.auth-bg .card{
    border-radius:4px!important;
    border:1px solid #e8eef3!important;
    box-shadow:0 0 4px 0 #e8eef3!important;
    background:#fff!important;
}
body.auth-bg h1,body.auth-bg h2,body.auth-bg h3,
body.auth-bg h4,body.auth-bg h5{color:#28313c;font-weight:500}
body.auth-bg .auth-logo-frame{
    width:64px;height:64px;
    border-radius:4px;
    background:transparent;
    box-shadow:none;
    padding:0;
}
body.auth-bg .auth-logo{
    padding:6px;
    background:var(--brand-logo-bg,transparent);
    border-radius:4px;
}
body.auth-bg .form-control{
    height:50px;
    border-radius:4px!important;
    border:1px solid #e8eef3!important;
    background:#fff!important;
    font-size:15px;
    color:#28313c!important;
}
body.auth-bg .form-control:focus{
    border-color:#1d82f5!important;
    box-shadow:0 0 0 .2rem rgba(29,130,245,.15)!important;
}
body.auth-bg .form-label{font-size:12px;font-weight:500;color:#616e80}
body.auth-bg .btn-primary{
    background-color:#1d82f5!important;
    border:1px solid #1d82f5!important;
    color:#fff!important;
    height:50px;
    border-radius:4px;
    font-size:16px;
    font-weight:500;
    width:100%;
    text-transform:capitalize;
}
body.auth-bg .btn-primary:hover{background-color:#000!important;border-color:#000!important}
body.auth-bg .alert{border-radius:4px;font-size:13px;border:1px solid #e8eef3}

/* --------------------------------------------------------------------------
   Responsive — mirrors Worksuite's off-canvas behaviour
   -------------------------------------------------------------------------- */
@media (max-width:992px){
    body.nexus-ui .sidebar,
    body.nexus-ui.sidebar-collapsed .sidebar{
        width:var(--ws-sidebar-w)!important;
        transform:translateX(-105%)!important;
        padding:0;
    }
    body.nexus-ui .sidebar.open,
    body.nexus-ui.sidebar-mobile-open .sidebar{
        transform:translateX(0)!important;
        box-shadow:0 0 20px rgba(0,0,0,.25);
    }
    body.nexus-ui.sidebar-mobile-open .sidebar-mobile-overlay{display:block}
    body.nexus-ui .main-content,
    body.nexus-ui.sidebar-collapsed .main-content{margin-left:0!important;width:100%!important}
    body.nexus-ui .topbar,
    body.nexus-ui.sidebar-collapsed .topbar{padding:0 15px}
    body.nexus-ui .app-content{padding:15px 15px 80px!important}
    /* The rail collapse is desktop-only; restore full labels in the drawer. */
    body.nexus-ui.sidebar-collapsed .brand>span,
    body.nexus-ui.sidebar-collapsed .nav-section,
    body.nexus-ui.sidebar-collapsed .sidefoot{display:revert!important}
    body.nexus-ui.sidebar-collapsed .sidebar>.sidebar-scroll>.nav-link,
    body.nexus-ui.sidebar-collapsed .nav-hover-group>.nav-group-toggle{
        justify-content:flex-start;
        width:100%;
        padding:10px 20px;
        font-size:13px;
    }
    body.nexus-ui.sidebar-collapsed .nav-hover-group{width:100%}
    body.nexus-ui.sidebar-collapsed .nav-hover-group>.nav-group-toggle span,
    body.nexus-ui.sidebar-collapsed .nav-hover-group>.nav-group-toggle .nav-group-chevron{display:revert}
    body.nexus-ui.sidebar-collapsed .nav-hover-group>.collapse{
        position:static;width:auto;border:0;box-shadow:none;background:transparent;
        opacity:1;visibility:visible;pointer-events:auto;display:none!important;
    }
    body.nexus-ui.sidebar-collapsed .nav-hover-group>.collapse.show{display:block!important}
    body.nexus-ui.sidebar-collapsed .sidebar-collapse-btn{display:none}
}