/* ============================================================
   eWORKERS — UI Modernization Layer
   Phase A: design tokens + buttons + form controls.
   Phase B: cards / panels + tables / DataTables.
   Phase C: alerts, modal chrome, tabs, dropdown menus,
            wizard (jquery-steps) buttons, select2 v4 inputs.
   Phase D: brand typography (Almarai body / Montserrat headings),
            empty states, navbar polish, login card.
            (Navbar responsive layout & the login header/background/layout
             are deliberately left as-is.)

   Loaded AFTER probase.css in every layout; this file ONLY
   overrides — it adds no markup dependencies and can be removed
   (delete the <link> + this file) to fully revert.

   Brand source of truth: BRAND_MANUAL_VER_2.pdf
     Primary  Blue   #137ab9  rgb(19,122,185)
     Secondary Orange #ef7d23  rgb(239,125,35)
     Neutral  White  #e7e7e6
   Density: conservative — base font-size & spacing unchanged.
   ============================================================ */

:root {
    /* --- Brand (authoritative) --- */
    --wc-blue:      #137ab9;
    --wc-blue-600:  #0f5f91;  /* hover */
    --wc-blue-700:  #0c4d76;  /* active */
    --wc-blue-50:   #e6f1f9;  /* tint / focus halo / accents */

    --wc-orange:     #ef7d23; /* secondary / CTA */
    --wc-orange-600: #d96a14; /* hover */
    --wc-orange-700: #b9560c; /* active */
    --wc-orange-50:  #fdf1e6;

    /* --- Neutrals (derived; brand "white" = #e7e7e6) --- */
    --wc-ink:       #1f2933;  /* primary text */
    --wc-ink-2:     #3e4c59;  /* secondary text */
    --wc-muted:     #6e6e6e;  /* hints (matches existing .text-gray) */
    --wc-line:      #d2d6dc;  /* default border */
    --wc-line-2:    #e4e7eb;  /* subtle border */
    --wc-surface:   #ffffff;
    --wc-surface-2: #f7f8fa;

    /* --- Radius scale (replaces the current 1–11px grab-bag) --- */
    --wc-radius-sm: 4px;
    --wc-radius-md: 8px;
    --wc-radius-lg: 12px;

    /* --- Elevation --- */
    --wc-shadow-sm: 0 1px 2px rgba(16, 33, 51, .06);
    --wc-shadow-md: 0 2px 8px rgba(16, 33, 51, .08);

    /* --- Focus ring --- */
    --wc-focus:        0 0 0 3px rgba(19, 122, 185, .25);
    --wc-focus-danger: 0 0 0 3px rgba(214, 69, 69, .22);

    /* --- Motion --- */
    --wc-transition: .15s ease;
}

/* ============================================================
   Phase A — Buttons
   (padding / sizes left to Bootstrap + probase — density unchanged)
   ============================================================ */
.btn {
    border-radius: var(--wc-radius-md);
    font-weight: 500;
    transition: background-color var(--wc-transition),
                border-color var(--wc-transition),
                box-shadow var(--wc-transition),
                color var(--wc-transition);
}

.btn:focus,
.btn:focus-visible {
    outline: none;
    box-shadow: var(--wc-focus);
}

/* Primary = brand blue */
.btn-primary {
    background-color: var(--wc-blue);
    background-image: none;
    border-color: var(--wc-blue) !important; /* overrides probase olive #485447 */
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.active,
.btn-primary:active,
.open .dropdown-toggle.btn-primary {
    background-color: var(--wc-blue-600);
    border-color: var(--wc-blue-600) !important;
    color: #fff;
}

.btn-primary:active,
.btn-primary.active {
    background-color: var(--wc-blue-700);
}

/* Success / primary CTA = brand orange (keeps existing convention) */
.btn-success {
    background-color: var(--wc-orange) !important;
    border-color: var(--wc-orange) !important;
    color: #fff;
}

.btn-success:hover,
.btn-success:focus,
.btn-success.active,
.btn-success:active {
    background-color: var(--wc-orange-600) !important;
    border-color: var(--wc-orange-600) !important;
    color: #fff;
}

/* Default / secondary */
.btn-default {
    background-color: var(--wc-surface);
    border-color: var(--wc-line);
    color: var(--wc-ink-2);
}

.btn-default:hover,
.btn-default:focus {
    background-color: var(--wc-surface-2);
    border-color: var(--wc-blue);
    color: var(--wc-blue);
}

.btn-link {
    box-shadow: none;
}

/* ============================================================
   Phase A — Form controls
   (height / font-size inherited from probase — density unchanged)
   ============================================================ */
.form-control {
    border-radius: var(--wc-radius-md);
    border: 1px solid var(--wc-line);
    box-shadow: none;
    color: var(--wc-ink);
    transition: border-color var(--wc-transition),
                box-shadow var(--wc-transition);
}

.form-control:focus {
    border-color: var(--wc-blue);
    box-shadow: var(--wc-focus);
    outline: none;
}

.form-control::placeholder {
    color: #9aa5b1;
}

.form-control[disabled],
.form-control[readonly] {
    background-color: var(--wc-surface-2);
    color: var(--wc-muted);
}

textarea.form-control {
    height: auto;
}

/* Input-group add-ons (radius left to Bootstrap so joined corners stay flush) */
.input-group-addon {
    border: 1px solid var(--wc-line);
    background-color: var(--wc-surface-2);
    color: var(--wc-ink-2);
}

/* DataTables search box — match .form-control */
.dataTables_filter input[type=search] {
    border: 1px solid var(--wc-line);
    border-radius: var(--wc-radius-md);
    box-shadow: none;
    color: var(--wc-ink);
    transition: border-color var(--wc-transition),
                box-shadow var(--wc-transition);
}

.dataTables_filter input[type=search]:focus {
    border-color: var(--wc-blue);
    box-shadow: var(--wc-focus);
    outline: none;
}

/* Validation states keep their semantic intent with the new ring */
.has-error .form-control {
    border-color: #d64545;
}

.has-error .form-control:focus {
    box-shadow: var(--wc-focus-danger);
}

.has-success .form-control {
    border-color: #2f855a;
}

/* ============================================================
   Phase B — Cards & panels
   ============================================================ */
.card-pf,
.panel {
    background-color: var(--wc-surface);
    border: 1px solid var(--wc-line-2);
    border-radius: var(--wc-radius-lg);
    box-shadow: var(--wc-shadow-sm);
}

/* Dominant content surfaces + dashboard status tiles → same radius */
.card-pf.page-content,
.card-pf.card-pf-aggregate-status {
    border-radius: var(--wc-radius-lg);
}

/* "Flat" panels opt out of elevation, as the name implies */
.panel.panel-flat {
    border: none;
    box-shadow: none;
}

.card-pf-heading,
.panel-heading {
    border-bottom: 1px solid var(--wc-line-2);
    color: var(--wc-ink);
}

.card-pf-title,
.panel-title,
h5.panel-title,
h6.panel-title {
    color: var(--wc-ink);
    font-weight: 600;
}

.card-pf-footer,
.panel-footer {
    background-color: var(--wc-surface-2);
    border-top: 1px solid var(--wc-line-2);
}

/* ============================================================
   Phase B — Tables
   (cell padding inherited from probase — density unchanged)
   ============================================================ */
.table {
    background-color: var(--wc-surface);
}

.table > thead > tr > th {
    background-color: var(--wc-blue-50);
    color: var(--wc-blue-700);
    font-weight: 600;
    border-bottom: 1px solid var(--wc-line);
    vertical-align: middle;
}

.table > tbody > tr > td,
.table > tbody > tr > th {
    border-top: 1px solid var(--wc-line-2);
}

/* Soften the heavy full-grid lines where .table-bordered is used */
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > tfoot > tr > td {
    border-color: var(--wc-line-2);
}

/* Subtle row hover — works on every data table without needing a
   .table-hover class, and beats DataTables striping / sorted-column
   shading by painting the cells (which sit above the row background). */
.table > tbody > tr:hover > td,
.table > tbody > tr:hover > th {
    background-color: var(--wc-blue-50) !important;
}

/* ============================================================
   Phase B — Pagination
   This build uses dataTables.bootstrap (Bootstrap <ul.pagination>
   markup). PatternFly overrides the active page with both a sky-blue
   rule and a higher-specificity grey one, so the active state needs
   specificity + !important (and background-image reset) to land.
   ============================================================ */

/* Inactive page links */
.pagination > li > a,
.pagination > li > span {
    background-color: var(--wc-surface);
    border-color: var(--wc-line);
    color: var(--wc-blue);
}

.pagination > li > a:hover,
.pagination > li > a:focus,
.pagination > li > span:hover,
.pagination > li > span:focus {
    background-color: var(--wc-blue-50);
    border-color: var(--wc-line);
    color: var(--wc-blue-700);
}

/* Active page — solid brand blue, white text. Covers active-on-<li>,
   active-on-<a>, and the DataTables paginate_button markup. */
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span,
.pagination > .active > span:hover,
.pagination > .active > span:focus,
.pagination > li > a.active,
.pagination > li.paginate_button.active > a {
    background-color: var(--wc-blue) !important;
    background-image: none !important;
    border-color: var(--wc-blue) !important;
    color: #fff !important;
}

/* Standalone (non-Bootstrap) DataTables pagination, if used anywhere */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--wc-radius-sm);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--wc-blue) !important;
    border-color: var(--wc-blue) !important;
    color: #fff !important;
}

/* ============================================================
   Phase C — Alerts
   (brand-blue info; conventional green/amber/red for the rest;
    thin full border with a thicker left accent)
   ============================================================ */
.alert {
    border-radius: var(--wc-radius-md);
    border: 1px solid transparent;
    border-left-width: 4px;
}

.alert-info {
    color: #0c4d76;
    background-color: var(--wc-blue-50);
    border-color: var(--wc-blue);
}

.alert-success {
    color: #1e4620;
    background-color: #e6f4ea;
    border-color: #2f855a;
}

.alert-warning {
    color: #7a5b00;
    background-color: #fff8e6;
    border-color: #d9a40a;
}

.alert-danger {
    color: #842029;
    background-color: #fdecec;
    border-color: #d64545;
}

/* ============================================================
   Phase C — Modal chrome
   (probase's red close button & spacing left untouched)
   ============================================================ */
.modal-content {
    border: none;
    border-radius: var(--wc-radius-lg);
    box-shadow: var(--wc-shadow-md);
}

.modal-header {
    border-bottom: 1px solid var(--wc-line-2);
}

.modal-title {
    color: var(--wc-ink);
    font-weight: 600;
}

.modal-footer {
    border-top: 1px solid var(--wc-line-2);
}

/* ============================================================
   Phase C — Tabs
   (keeps the existing blue-fill paradigm; just tokenises radius,
    adds a hover state, tidies the active contrast)
   ============================================================ */
.nav-tabs {
    border-bottom-color: var(--wc-blue);
}

.nav-tabs > li > a {
    background-color: var(--wc-blue);
    color: #fff;
    border-top-left-radius: var(--wc-radius-md);
    border-top-right-radius: var(--wc-radius-md);
    transition: background-color var(--wc-transition),
                color var(--wc-transition);
}

.nav-tabs > li > a:hover {
    background-color: var(--wc-blue-600);
    color: #fff;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--wc-blue);
    background-color: #fff;
    border-color: var(--wc-blue);
    border-bottom-color: transparent;
}

/* ============================================================
   Phase C — Dropdown menus (navbar user menu, table actions, etc.)
   Layout of the navbar bar itself is intentionally NOT touched.
   No overflow:hidden — it would clip .dropdown-submenu fly-outs.
   ============================================================ */
.dropdown-menu {
    border: 1px solid var(--wc-line-2);
    border-radius: var(--wc-radius-md);
    box-shadow: var(--wc-shadow-md);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: var(--wc-blue-50);
    color: var(--wc-blue-700);
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-color: var(--wc-blue);
    color: #fff;
}

/* ============================================================
   Phase C — Wizard buttons (jquery-steps .actions) — the Phase A
   carry-over; bring the orange nav buttons in line with the new
   button styling. Padding/size from probase left unchanged.
   ============================================================ */
.wizard > .actions a,
.wizard > .actions a:active {
    background-color: var(--wc-orange);
    border-radius: var(--wc-radius-md);
    color: #fff;
    transition: background-color var(--wc-transition);
}

.wizard > .actions a:hover {
    background-color: var(--wc-orange-600);
    color: #fff;
}

.wizard > .actions .disabled a,
.wizard > .actions .disabled a:hover {
    background-color: var(--wc-line);
    color: var(--wc-muted);
}

/* ============================================================
   Phase C — select2 v4 — the other Phase A carry-over; make the
   searchable dropdowns match .form-control (height 32px / 8px radius).
   ============================================================ */
.select2-container--default .select2-selection--single {
    height: 32px;
    border: 1px solid var(--wc-line);
    border-radius: var(--wc-radius-md);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 30px;
    color: var(--wc-ink);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 30px;
}

.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--wc-line);
    border-radius: var(--wc-radius-md);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--wc-blue);
    box-shadow: var(--wc-focus);
}

.select2-dropdown {
    border-color: var(--wc-line);
    border-radius: var(--wc-radius-md);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--wc-blue);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--wc-line);
    border-radius: var(--wc-radius-sm);
}

/* ============================================================
   Phase D — Brand typography
   Almarai for body copy, Montserrat for headings & controls (per the
   brand manual). Almarai is SELF-HOSTED below (Latin subset, woff2),
   matching how Montserrat is bundled — no external font dependency.
   probase.css forces Montserrat via `body *`, so body copy must be
   re-set at the same breadth here; the Montserrat rules below win on
   the heading/control elements because they target those elements
   directly. Icon fonts (.fa, .pficon, .glyphicon) set their own family
   at higher specificity, so glyphs are unaffected.
   ============================================================ */
@font-face {
    font-family: 'Almarai';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/almarai-v19-latin-300.woff2') format('woff2');
}
@font-face {
    font-family: 'Almarai';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/almarai-v19-latin-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Almarai';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/almarai-v19-latin-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Almarai';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/almarai-v19-latin-800.woff2') format('woff2');
}

body,
body * {
    font-family: 'Almarai', 'Montserrat', "Open Sans", -apple-system,
                 BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.panel-title, .card-pf-title, .modal-title,
.btn, .nav-tabs > li > a {
    font-family: 'Montserrat', "Open Sans", -apple-system,
                 BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ============================================================
   Phase D — Empty states (PatternFly blank-slate)
   Colour the icon + text only; no container box, since these often
   already sit inside a card.
   ============================================================ */
.blank-slate-pf-icon {
    color: var(--wc-blue);
    opacity: .9;
}

.blank-slate-pf h1 {
    color: var(--wc-ink);
}

.blank-slate-pf p {
    color: var(--wc-muted);
}

/* ============================================================
   Phase D — Navbar
   White bar kept. Goal: a compact, standard-height bar. probase used
   1.7em vertical padding (≈79px tall); the desktop block below trims it
   to a standard ~56px. Font size is left untouched so the logo clearance
   (`li.first-element` margin, the absolutely-positioned 40px logo) still
   computes correctly. Interaction is just a subtle blue-tint hover and a
   solid-blue open-menu state — no accent line, no rounded items.
   Sizing is scoped to min-width 960 so the mobile menu is untouched.
   ============================================================ */
.navbar-pf {
    box-shadow: var(--wc-shadow-sm);
}

button.mobile-menu-toggle {
    border-radius: var(--wc-radius-md);
    color: var(--wc-blue);
}

.navbar-pf .navbar-primary > li > a,
.navbar-pf .navbar-primary > li > button {
    transition: background-color var(--wc-transition),
                color var(--wc-transition);
}

/* Hover — subtle blue tint only (square, no accent line) */
.navbar-pf .navbar-primary > li > a:not(.no-hover-effect):hover,
.navbar-pf .navbar-primary > li > button:not(.no-hover-effect):hover {
    background-color: var(--wc-blue-50);
    color: var(--wc-blue-700);
    border-radius: 0;
    box-shadow: inset 0 3px 0 var(--wc-orange); /* flat orange top accent */
}

.navbar-pf .navbar-primary > li > a:not(.no-hover-effect):hover .fa,
.navbar-pf .navbar-primary > li > button:not(.no-hover-effect):hover .fa {
    color: var(--wc-blue-700) !important;
}

/* Open dropdown — solid brand blue + white (square) */
.navbar-pf .navbar-primary .open > a:not(.no-hover-effect),
.navbar-pf .navbar-primary .open > a:not(.no-hover-effect):hover,
.navbar-pf .navbar-primary .open > a:not(.no-hover-effect):focus {
    background-color: var(--wc-blue);
    color: #fff;
    border-radius: 0;
    box-shadow: inset 0 3px 0 var(--wc-orange); /* flat orange top accent */
}

.navbar-pf .navbar-primary .open > a:not(.no-hover-effect) .fa {
    color: #fff !important;
}

/* Compact, standard navbar (desktop only).
   The bar height is driven by its tallest floated child, so trimming
   only the menu padding wasn't enough — the brand/logo and the
   pull-right account item (which carries inline `padding:8px;height:100%`)
   kept it tall and misaligned. Fix: give every item a uniform ~56px
   height with line-height centring (so font size no longer drives
   height), shrink the oversized text/logo, override the account item's
   inline styles (needs !important), and pin the logo's clearance to a
   fixed px (it was em-based, so it shifted when the font changed). */
@media (min-width: 960px) {
    /* All nav links → 56px tall (16 + 24 + 16), text vertically centred */
    .navbar-pf .navbar-primary > li > a,
    .navbar-pf .navbar-primary > li > button,
    .navbar-pf .navbar-utility > li > a,
    .navbar-pf .navbar-utility > li > button {
        margin: 0; /* probase set margin:1px 0 0 — caused the non-flush gap/line at the top */
        padding: 16px 14px;
        line-height: 24px;
        font-size: 14px;
    }

    .navbar-pf .navbar-primary {
        font-size: 14px !important; /* override probase 1.3em */
    }

    ul.nav.navbar-nav.navbar-primary > li > a .fa {
        font-size: 15px; /* match the smaller label text */
    }

    /* Account dropdown (pull-right) carries inline padding/height tuned
       for the old tall bar — reset it so it aligns with the menu row */
    .navbar-pf .navbar-primary > li.pull-right {
        padding: 0 !important;
        height: auto !important;
    }

    /* Brand + logo: clamp to the bar and centre the (smaller) logo */
    a.navbar-brand.custom-navbar {
        height: 56px;
        padding: 0 2em 0 0;
    }

    img.custom-logo {
        height: 36px;
        margin: 10px 0 0 0; /* (56 - 36) / 2 */
    }

    li.first-element {
        margin-left: 200px; /* fixed logo clearance (was 13em) */
    }

    /* Utility nav (other portals) — drop the margin-top offset */
    ul.nav.navbar-nav.navbar-utility {
        margin-top: 0;
    }
}

/* ============================================================
   Phase D — Login shell
   The sign-in card sits directly under the login tabs, so its TOP must
   stay square to meet them; only the bottom corners are rounded, with a
   soft downward shadow. Header bar, tabs, background & layout left as-is.
   ============================================================ */
.login-box .card-pf {
    border-radius: 0 0 var(--wc-radius-lg) var(--wc-radius-lg);
    box-shadow: var(--wc-shadow-md);
}