/* File: shared/css/ecvalla-identity.css
 *
 * ECVALLA visual identity.
 *
 * Loaded last on every screen so it takes precedence. It works by redefining the design
 * tokens the existing ~350 KB of stylesheets already consume through var(), which
 * retextures the whole application without touching those files, plus a focused set of
 * component refinements underneath.
 *
 * The palette, typography and motion language are taken from ECVALLA's own current
 * implementation (the ecvalla-todo portals), not invented here:
 *
 *   ink    #17191b   near-black — brand ink, primary actions, display type
 *   muted  #73787b   secondary text
 *   line   #e5e6e4   hairline rules and borders
 *   paper  #ffffff   card and panel surfaces
 *   canvas #f5f5f3   page background, warm off-white
 *   soft   #eff0ee   subtle fills, icon tiles
 *   green  #13813b   confirmation only
 *   red    #ad291f   error only
 *
 * The identity is greyscale: colour carries meaning (a state), never decoration. The
 * previous gold and blue accents are therefore replaced by ink on light surfaces and by
 * near-white on dark ones — the same inversion ECVALLA uses for its own dark panels.
 *
 * Deliberately not changed: layout geometry (widths, grids, paddings) is left alone, so
 * this is a re-skin and not a re-flow.
 *
 * The product is now branded ECVALLA Ticket System, so the wordmark itself
 * (shared/assets/ecvalla-logo.png) is used in the brand slots — the sidebars, the auth
 * header and the landing hero. It is a black wordmark on transparency, inverted where it
 * sits on a dark surface.
 */

/* ------------------------------------------------------------------ *
 * Typeface
 *
 * Manrope for Latin, IBM Plex Sans Arabic for Arabic — self-hosted, so the interface has
 * no runtime dependency on a font CDN. Both are open licensed (OFL).
 *
 * This replaces Poppins, which the two common stylesheets pulled from Google Fonts with a
 * render-blocking @import. Those imports are gone: the pair below is served from the same
 * origin as the page, and Arabic text falls through to IBM Plex automatically because
 * Manrope carries no Arabic glyphs.
 * ------------------------------------------------------------------ */

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* 500/600 are mapped onto the bold cut: the identity uses two weights only, and letting
 * the browser synthesise an intermediate weight would break that discipline. */
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Bold.ttf') format('truetype');
    font-weight: 500 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/IBMPlexSansArabic-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/IBMPlexSansArabic-Bold.ttf') format('truetype');
    font-weight: 500 700;
    font-style: normal;
    font-display: swap;
}

/* ------------------------------------------------------------------ *
 * Tokens — light surfaces ("paper")
 * ------------------------------------------------------------------ */

:root {
    /* Identity primitives */
    --ecv-ink: #17191b;
    --ecv-ink-soft: #2b2e30;
    --ecv-muted: #73787b;
    --ecv-line: #e5e6e4;
    --ecv-paper: #ffffff;
    --ecv-canvas: #f5f5f3;
    --ecv-soft: #eff0ee;
    --ecv-green: #13813b;
    --ecv-green-wash: #edf8f1;
    --ecv-red: #ad291f;
    --ecv-red-wash: #fff0ee;
    --ecv-red-line: #efc8c4;

    --ecv-font-latin: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
    --ecv-font-arabic: 'IBM Plex Sans Arabic', 'Manrope', Arial, sans-serif;
    --ecv-font: var(--ecv-font-latin), var(--ecv-font-arabic);

    /* Geometry: hairlines and small radii, never heavy chrome */
    --ecv-radius-control: 9px;
    --ecv-radius-card: 12px;
    --ecv-radius-modal: 14px;
    --ecv-radius-pill: 999px;

    /* Elevation is used sparingly: a card is defined by its hairline, not its shadow */
    --ecv-shadow-raise: 0 1px 2px rgba(23, 25, 27, .04), 0 12px 32px rgba(23, 25, 27, .06);
    --ecv-shadow-float: 0 18px 48px rgba(23, 25, 27, .12), 0 2px 6px rgba(23, 25, 27, .06);
    --ecv-shadow-press: 0 10px 26px rgba(23, 25, 27, .16);
    --ecv-focus-ring: 0 0 0 4px rgba(23, 25, 27, .10);

    --ecv-ease: cubic-bezier(.16, 1, .3, 1);
    --ecv-quick: 160ms var(--ecv-ease);

    /* --- existing application tokens, remapped --- */
    --primary-color: #17191b;
    --primary-dark: #000000;
    --primary-light: #3f4245;
    --primary-light-transparent: rgba(23, 25, 27, .10);
    --primary-color-rgb: 23, 25, 27;

    --secondary-color: #73787b;
    --secondary-dark: #4c5052;

    --accent-color: #17191b;
    --accent-dark: #000000;

    --success-color: #13813b;
    --success-light: #edf8f1;
    --success-dark: #0e5f2c;
    --success-dark-surface: #13813b;
    --danger-color: #ad291f;
    --danger-light: #fff0ee;
    --danger-dark: #8a1f17;
    --danger-color-rgb: 173, 41, 31;
    --warning-color: #8a6a12;
    --warning-dark: #6d5310;
    --info-color: #45585f;
    --info-light: #eef1f2;
    --info-dark: #2f3d42;

    --text-color: #17191b;
    --text-light: #73787b;
    --text-muted: #8b9093;
    --text-white: #ffffff;
    --text-black: #17191b;

    --bg-light: #f5f5f3;
    --bg-white: #ffffff;
    --input-bg: #ffffff;
    --border-color: #e5e6e4;
    --border-color-light: #eff0ee;
    --card-bg: #ffffff;
    --card-shadow: var(--ecv-shadow-raise);
    --hover-bg: #f7f7f5;
    --bg-dark-sidebar: #111315;
    --color-background-dark: #151719;
    --bg-dark-surface: #181a1c;

    --toast-bg-color: #ffffff;
    --toast-shadow-color: rgba(23, 25, 27, .12);
    --toast-success-bg: var(--ecv-green-wash);
    --toast-success-text: var(--ecv-green);
    --toast-error-bg: var(--ecv-red-wash);
    --toast-error-text: var(--ecv-red);
    --toast-info-bg: var(--ecv-soft);
    --toast-info-text: var(--ecv-ink);
}

/* ------------------------------------------------------------------ *
 * Tokens — dark surfaces
 *
 * ECVALLA's dark treatment inverts rather than tints: near-white acts as the accent and
 * carries ink-coloured text, which is why primary buttons stay legible without
 * introducing a second hue.
 * ------------------------------------------------------------------ */

body.dark-theme,
.dark-theme,
:root.dark-theme {
    --ecv-ink: #f2f2f0;
    --ecv-ink-soft: #d5d6d4;
    --ecv-muted: #9aa0a3;
    --ecv-line: #2b2e30;
    --ecv-paper: #181a1c;
    --ecv-canvas: #111315;
    --ecv-soft: #202325;

    --ecv-shadow-raise: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 34px rgba(0, 0, 0, .38);
    --ecv-shadow-float: 0 22px 56px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4);
    --ecv-shadow-press: 0 12px 28px rgba(0, 0, 0, .45);
    --ecv-focus-ring: 0 0 0 4px rgba(242, 242, 240, .14);

    --primary-color: #f2f2f0;
    --primary-dark: #d5d6d4;
    --primary-light: #ffffff;
    --primary-light-transparent: rgba(242, 242, 240, .14);
    --primary-color-rgb: 242, 242, 240;

    --secondary-color: #9aa0a3;
    --secondary-dark: #6f7477;

    --accent-color: #f2f2f0;
    --accent-dark: #d5d6d4;

    --success-color: #5fc98a;
    --success-light: rgba(19, 129, 59, .18);
    --success-dark: #8ee0ac;
    --success-dark-surface: #13813b;
    --danger-color: #ef8b80;
    --danger-light: rgba(173, 41, 31, .20);
    --danger-dark: #f6b3ab;
    --danger-color-rgb: 239, 139, 128;
    --warning-color: #e0c169;
    --warning-dark: #c9a851;
    --info-color: #9fb3ba;
    --info-light: rgba(159, 179, 186, .16);
    --info-dark: #c3d2d7;

    --text-color: #e9eae8;
    --text-light: #9aa0a3;
    --text-muted: #7f8588;
    --text-white: #ffffff;
    --text-black: #17191b;

    --bg-light: #111315;
    --bg-white: #181a1c;
    --input-bg: #1c1f21;
    --border-color: #2b2e30;
    --border-color-light: #232628;
    --card-bg: #181a1c;
    --hover-bg: #202325;
    --bg-dark-sidebar: #111315;
    --color-background-dark: #151719;
    --bg-dark-surface: #181a1c;

    --toast-bg-color: #1c1f21;
    --toast-shadow-color: rgba(0, 0, 0, .5);
    --toast-success-bg: rgba(19, 129, 59, .18);
    --toast-success-text: #7fd6a1;
    --toast-error-bg: rgba(173, 41, 31, .20);
    --toast-error-text: #f0a097;
    --toast-info-bg: #202325;
    --toast-info-text: #e9eae8;
}

/* ------------------------------------------------------------------ *
 * Foundations
 * ------------------------------------------------------------------ */

/* The application stylesheets already establish these, but this file is also loaded by
 * screens that use nothing else (the landing page), so the identity carries its own
 * baseline rather than depending on load order. Without them, `width: 100%` plus padding
 * overflows and the user agent's 8px body margin offsets the whole layout. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

body {
    font-family: var(--ecv-font-latin) !important;
    background-color: var(--ecv-canvas);
    color: var(--text-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
    letter-spacing: -.006em;
}

/* --- Arabic typography ------------------------------------------------------------------
 *
 * ECVALLA's Arabic cut is IBM Plex Sans Arabic (--ecv-font-arabic), self-hosted alongside
 * Manrope. This is the single place the Arabic family is chosen, and it wins in all three
 * situations that occur in this platform:
 *
 *   1. the whole document is Arabic (html[lang="ar"] / dir="rtl");
 *   2. an individual element is marked Arabic inside an English page — the language
 *      toggle's own label, and any element a screen tags with lang="ar";
 *   3. Arabic text a person typed into an English interface (ticket subjects and replies
 *      frequently are), which falls through the Latin stack into the Arabic cut because
 *      Manrope carries no Arabic glyphs.
 *
 * The `[lang="ar"]` selector is what unifies (2) with (1): any subtree declaring Arabic
 * takes the identity's Arabic family even if a local rule asked for something else, so no
 * screen can quietly introduce a second Arabic font. */
html[lang="ar"] body,
[dir="rtl"],
[dir="rtl"] body,
[lang="ar"],
[lang="ar"] * {
    font-family: var(--ecv-font-arabic) !important;
}

/* Icon fonts are not text: Font Awesome renders glyphs from its own family, so forcing the
 * Arabic cut onto them turns every icon into an empty box. They are exempt here — the only
 * exception to the rule above, and the reason it is safe for that rule to use !important. */
.fa,
.fas,
.far,
.fab,
.fal,
.fad,
[class^="fa-"],
[class*=" fa-"],
[lang="ar"] .fa,
[lang="ar"] .fas,
[lang="ar"] .far,
[lang="ar"] .fab,
[lang="ar"] [class^="fa-"],
[lang="ar"] [class*=" fa-"],
[dir="rtl"] .fa,
[dir="rtl"] .fas,
[dir="rtl"] .far,
[dir="rtl"] .fab,
[dir="rtl"] [class^="fa-"],
[dir="rtl"] [class*=" fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free" !important;
}

/* Arabic is not letter-spaced — tracking breaks the cursive joining — and its taller
 * ascenders and descenders need more leading than Manrope's. Applied to the Arabic
 * document and to Arabic-tagged elements alike, so both read the same. */
html[lang="ar"] body,
[dir="rtl"] body,
[lang="ar"] {
    letter-spacing: 0 !important;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

/* Headings keep their weight but drop Latin tracking and uppercasing, neither of which
 * Arabic script supports. */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4 {
    letter-spacing: 0 !important;
    line-height: 1.4;
}

/* Micro-captions across the platform are tracked, uppercase Latin. In Arabic that is
 * unreadable, so the tracking is removed and the size lifted a touch to compensate for
 * the lost visual weight. */
[dir="rtl"] .dept-eyebrow,
[dir="rtl"] .landing-eyebrow,
[dir="rtl"] th,
[dir="rtl"] .up-kpi b,
[dir="rtl"] .up-brand small,
[dir="rtl"] .up-section-head h2 {
    letter-spacing: 0 !important;
    text-transform: none;
}

button,
input,
select,
textarea,
.btn,
label,
th,
td {
    font-family: inherit !important;
}

::selection {
    background: rgba(23, 25, 27, .12);
    color: inherit;
}

.dark-theme ::selection {
    background: rgba(242, 242, 240, .20);
}

/* ------------------------------------------------------------------ *
 * Display typography
 *
 * The identity's signature: negative tracking that tightens as type grows, against
 * widely tracked uppercase micro-labels. That contrast is what reads as considered
 * rather than merely large.
 * ------------------------------------------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.page-title,
.modal-title,
.card-title {
    font-family: var(--ecv-font-latin) !important;
    font-weight: 700;
    color: var(--text-color);
    text-wrap: balance;
}

h1,
.page-title {
    letter-spacing: -.038em;
    line-height: 1.08;
}

h2 {
    letter-spacing: -.03em;
    line-height: 1.14;
}

h3,
h4 {
    letter-spacing: -.022em;
    line-height: 1.2;
}

h5,
h6 {
    letter-spacing: -.012em;
}

/* Eyebrow / overline labels above headings and around stat tiles. */
.eyebrow,
.overline,
.stat-label,
.filter-label,
.form-section-title,
.table-section-title {
    text-transform: uppercase;
    letter-spacing: .17em;
    font-weight: 700;
    color: var(--text-light);
}

/* The ECVALLA product wordmark, set in the ECVALLA manner: wide, quiet, ink. */
.logo-brand,
.navbar-brand,
.brand-name,
.sidebar-brand {
    font-family: var(--ecv-font-latin) !important;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-color) !important;
}

.powered-by-text {
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--text-light);
}

/* Numerals in metrics should line up in columns rather than wander. */
.stat-value,
.stat-number,
.metric-value,
.count,
table td,
table th {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* ------------------------------------------------------------------ *
 * Surfaces
 * ------------------------------------------------------------------ */

.card,
.panel,
.stat-card,
.summary-card,
.dashboard-card,
.report-card,
.form-container,
.table-container,
.filter-container,
.ticket-card,
.request-card,
.user-card,
.details-container,
.log-container {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--ecv-radius-card);
    box-shadow: none;
    transition: border-color var(--ecv-quick), box-shadow var(--ecv-quick), transform var(--ecv-quick);
}

/* Interactive cards lift by a single pixel — enough to register, not enough to bounce. */
.stat-card:hover,
.summary-card:hover,
.ticket-card:hover,
.request-card:hover,
.user-card:hover {
    border-color: var(--ecv-ink-soft);
    box-shadow: var(--ecv-shadow-raise);
    transform: translateY(-1px);
}

hr,
.divider,
.separator {
    border: 0;
    border-top: 1px solid var(--border-color);
}

/* ------------------------------------------------------------------ *
 * Controls
 * ------------------------------------------------------------------ */

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea,
.form-control,
.input-field {
    background-color: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: var(--ecv-radius-control);
    transition: border-color var(--ecv-quick), box-shadow var(--ecv-quick), background-color var(--ecv-quick);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus,
.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--ecv-focus-ring);
}

/* Keyboard users get a visible ring everywhere; pointer users are not shouted at. */
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
}

button,
.btn,
input[type="submit"],
input[type="button"] {
    border-radius: var(--ecv-radius-control);
    font-weight: 700;
    letter-spacing: .01em;
    transition: background-color var(--ecv-quick), border-color var(--ecv-quick),
        color var(--ecv-quick), box-shadow var(--ecv-quick), transform var(--ecv-quick);
}

.btn-primary,
.primary-btn,
button[type="submit"],
.submit-btn,
.save-btn,
.confirm-btn {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: var(--bg-white);
}

.btn-primary:hover,
.primary-btn:hover,
button[type="submit"]:hover,
.submit-btn:hover,
.save-btn:hover,
.confirm-btn:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    box-shadow: var(--ecv-shadow-press);
    transform: translateY(-1px);
}

.btn-primary:active,
.primary-btn:active,
button[type="submit"]:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-secondary,
.secondary-btn,
.cancel-btn,
.btn-outline {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

.btn-secondary:hover,
.secondary-btn:hover,
.cancel-btn:hover,
.btn-outline:hover {
    background-color: var(--hover-bg);
    border-color: var(--ecv-ink-soft);
}

.btn-danger,
.delete-btn {
    background-color: transparent;
    border: 1px solid var(--ecv-red-line);
    color: var(--danger-color);
}

.btn-danger:hover,
.delete-btn:hover {
    background-color: var(--danger-light);
    border-color: var(--danger-color);
}

.btn-icon,
.theme-toggle-btn,
.lang-toggle-btn {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-radius: var(--ecv-radius-control);
}

.btn-icon:hover,
.theme-toggle-btn:hover,
.lang-toggle-btn:hover {
    background-color: var(--hover-bg);
    border-color: var(--ecv-ink-soft);
}

button:disabled,
.btn:disabled,
button[disabled] {
    opacity: .45;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

/* ------------------------------------------------------------------ *
 * Tables
 *
 * Rules instead of stripes: hairline rows, micro-tracked headers, a quiet hover tint.
 * ------------------------------------------------------------------ */

table {
    border-collapse: collapse;
    width: 100%;
}

table thead th {
    background-color: transparent;
    color: var(--text-light);
    font-size: .72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .15em;
    border-bottom: 1px solid var(--border-color);
}

table tbody td {
    border-bottom: 1px solid var(--border-color-light);
    color: var(--text-color);
}

table tbody tr {
    transition: background-color var(--ecv-quick);
}

table tbody tr:hover {
    background-color: var(--hover-bg);
}

table tbody tr:last-child td {
    border-bottom: 0;
}

/* ------------------------------------------------------------------ *
 * Status
 *
 * The only place colour is allowed to speak. Everything else is greyscale, so these read
 * immediately.
 * ------------------------------------------------------------------ */

.badge,
.status-badge,
.priority-badge,
.role-badge,
.tag,
.pill,
.chip {
    border-radius: var(--ecv-radius-pill);
    font-weight: 700;
    font-size: .74em;
    letter-spacing: .06em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.status-open,
.status-new,
.badge-info {
    background-color: var(--ecv-soft);
    color: var(--text-color);
    border-color: var(--border-color);
}

.status-resolved,
.status-completed,
.badge-success,
.status-closed {
    background-color: var(--success-light);
    color: var(--success-color);
}

.status-high,
.priority-high,
.badge-danger,
.status-rejected,
.status-cancelled {
    background-color: var(--danger-light);
    color: var(--danger-color);
}

.priority-medium,
.badge-warning,
.status-in-progress,
.status-pending {
    background-color: rgba(138, 106, 18, .10);
    color: var(--warning-color);
}

.dark-theme .priority-medium,
.dark-theme .badge-warning,
.dark-theme .status-in-progress,
.dark-theme .status-pending {
    background-color: rgba(224, 193, 105, .16);
}

/* ------------------------------------------------------------------ *
 * Overlays
 * ------------------------------------------------------------------ */

.modal,
.modal-content,
.modal-container,
.dialog {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--ecv-radius-modal);
    box-shadow: var(--ecv-shadow-float);
}

.modal-overlay,
.overlay,
.backdrop {
    background-color: rgba(17, 19, 21, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.toast,
.toast-notification {
    border-radius: var(--ecv-radius-control);
    border: 1px solid var(--border-color);
    box-shadow: var(--ecv-shadow-float);
    font-weight: 500;
}

/* ------------------------------------------------------------------ *
 * Navigation
 * ------------------------------------------------------------------ */

.navbar,
.top-navbar,
header.navbar {
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: none;
}

.sidebar,
.admin-sidebar {
    background-color: var(--bg-dark-sidebar);
    border-right: 1px solid var(--ecv-line);
    color: #e9eae8;
}

.sidebar a,
.sidebar button,
.admin-sidebar a {
    color: #a9adaf;
    border-radius: var(--ecv-radius-control);
    transition: background-color var(--ecv-quick), color var(--ecv-quick);
}

.sidebar a:hover,
.sidebar a.active,
.admin-sidebar a:hover,
.admin-sidebar a.active {
    background-color: #292c2e;
    color: #ffffff;
}

/* ------------------------------------------------------------------ *
 * Links
 * ------------------------------------------------------------------ */

a {
    color: var(--text-color);
    text-decoration-color: var(--border-color);
    text-underline-offset: .18em;
    transition: color var(--ecv-quick), text-decoration-color var(--ecv-quick);
}

a:hover {
    color: var(--primary-color);
    text-decoration-color: currentColor;
}

/* ------------------------------------------------------------------ *
 * Scrollbars — thin, ink, unobtrusive
 * ------------------------------------------------------------------ */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: var(--ecv-radius-pill);
    border: 3px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--secondary-color);
}

/* ------------------------------------------------------------------ *
 * Video backgrounds
 *
 * The welcome and form screens play a video behind the content. Under a greyscale
 * identity it is desaturated and dimmed so it reads as texture rather than decoration,
 * and the content above it keeps its contrast.
 * ------------------------------------------------------------------ */

.welcome-background-video,
.login-background-video,
video.background-video {
    filter: grayscale(1) contrast(1.05) brightness(.55);
}

.welcome-video-background::before,
.login-video-background::before,
.ticket-form-video-background::before {
    background: linear-gradient(180deg, rgba(17, 19, 21, .72) 0%, rgba(17, 19, 21, .86) 100%);
}

/* ------------------------------------------------------------------ *
 * Motion
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .stat-card:hover,
    .btn-primary:hover,
    .primary-btn:hover,
    button[type="submit"]:hover {
        transform: none;
    }
}

/* Honour the operating system preference on first load, before the application's own
 * theme script has read localStorage — this removes the pale flash on a dark desktop. */
@media (prefers-color-scheme: dark) {
    body:not(.light-theme):not(.dark-theme) {
        background-color: #111315;
        color: #e9eae8;
    }
}

@media print {
    body {
        background: #ffffff;
        color: #000000;
    }

    .navbar,
    .sidebar,
    .admin-sidebar,
    .btn,
    button {
        display: none !important;
    }
}

/* ================================================================== *
 * Components
 *
 * The rules above retexture anything driven by tokens. This section addresses the
 * application's actual component classes, which carry their own hardcoded chrome —
 * mostly drop shadows tuned for the old dark gold theme, which read as generic under a
 * paper identity. Hairlines replace them.
 * ================================================================== */

/* --- Brand mark -------------------------------------------------- */

/* The wordmark image, used wherever the brand appears.
 *
 * The artwork is black on an opaque white field, not transparent, so it cannot simply be
 * dropped onto a coloured surface. Two blend modes handle it without needing a second
 * asset: `multiply` lets the white field disappear into a light surface, and on dark
 * surfaces the image is inverted (white mark on black) and `screen` drops the black. */
.brand-wordmark {
    display: block;
    width: 132px;
    height: auto;
    object-fit: contain;
    object-position: left center;
    mix-blend-mode: multiply;
}

.ticket-admin-sidebar .brand-wordmark,
.requests-sidebar .brand-wordmark,
.department-sidebar .brand-wordmark,
.landing-bar .brand-wordmark,
body.dark-theme .auth-header .brand-wordmark,
body.dark-theme .brand-wordmark {
    filter: invert(1);
    mix-blend-mode: screen;
}

/* The product label sits beneath the wordmark as a tracked micro-caption: the mark reads
 * as the brand, the label as the system. */
.logo-link .app-name {
    display: block;
    margin-top: 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #8f9497;
}

.ticket-admin-sidebar .logo-link,
.requests-sidebar .logo-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
}

.auth-header .brand-wordmark {
    width: 148px;
}

/* Text-only brand slots keep the same typographic treatment: wide tracking, uppercase, ink. */
.app-logo-link,
.app-logo-link span,
.navbar-logo-text {
    font-family: var(--ecv-font-latin) !important;
    font-weight: 700 !important;
    letter-spacing: .2em !important;
    text-transform: uppercase;
    color: var(--text-color) !important;
    text-decoration: none;
}

/* --- Authentication screens -------------------------------------- */

/* ECVALLA's premium auth treatment: a card defined by a hairline and a wide, quiet
 * shadow, contents arriving in one considered movement. */
.login-container,
.register-container,
.forgot-password-container,
.reset-password-container {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color);
    border-radius: var(--ecv-radius-modal) !important;
    box-shadow: var(--ecv-shadow-float) !important;
    animation: ecv-rise .7s var(--ecv-ease) both;
}

.login-container h1,
.login-container h2,
.register-container h1,
.register-container h2 {
    letter-spacing: -.042em;
}

.login-form input:not([type="checkbox"]),
.register-form input:not([type="checkbox"]),
.login-container input:not([type="checkbox"]) {
    height: 52px;
    border-radius: 11px;
    padding-left: 44px;
    font-size: 15px;
}

[dir="rtl"] .login-form input:not([type="checkbox"]),
[dir="rtl"] .login-container input:not([type="checkbox"]) {
    padding-left: 14px;
    padding-right: 44px;
}

.login-form input:focus,
.login-container input:focus {
    transform: translateY(-1px);
}

.login-form button[type="submit"],
.login-container button[type="submit"] {
    height: 52px;
    border-radius: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: 13px;
}

@keyframes ecv-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* --- Chrome: navbars, headers, sidebars -------------------------- */

.ticket-admin-navbar,
.main-navbar,
.admin-main-header,
.requests-main-header,
.requests-navbar {
    background-color: var(--card-bg) !important;
    border-bottom: 1px solid var(--border-color);
    box-shadow: none !important;
    backdrop-filter: saturate(1.1) blur(6px);
    -webkit-backdrop-filter: saturate(1.1) blur(6px);
}

/* The wordmark in the top bar was white because that bar used to be dark. Under this
 * identity the bar is paper — as in ECVALLA's own shell, which pairs a white header with
 * a dark aside — so the mark has to be ink. */
.ticket-admin-navbar .logo-link,
.main-navbar .logo-link,
.ticket-admin-navbar .logo-link span,
.main-navbar .logo-link span {
    color: var(--text-color) !important;
}

/* The sidebar is a dark island inside a light shell. Rather than restyle each rule
 * inside it, the tokens are redefined locally: custom properties inherit, so every
 * var()-driven colour within the sidebar flips to its dark-surface value no matter which
 * theme the page is in. This is what stopped the brand mark rendering ink-on-ink. */
.ticket-admin-sidebar,
.requests-sidebar {
    --primary-color: #f2f2f0;
    --primary-light: #ffffff;
    --primary-dark: #d5d6d4;
    --primary-light-transparent: rgba(255, 255, 255, .14);
    --text-color: #e9eae8;
    --text-light: #9aa0a3;
    --text-muted: #7f8588;
    --text-black: #17191b;
    --border-color: #2b2e30;
    --border-color-light: #232628;
    --card-bg: #181a1c;
    --bg-white: #181a1c;
    --bg-light: #111315;
    --hover-bg: #292c2e;
    --input-bg: #1c1f21;

    background-color: var(--bg-dark-sidebar) !important;
    border-right: 1px solid #2b2e30;
    box-shadow: none !important;
    color: #e9eae8;
}

.ticket-admin-sidebar .logo-link,
.requests-sidebar .logo-link,
.ticket-admin-sidebar .sidebar-header .logo-link,
.requests-sidebar .sidebar-header .logo-link {
    color: #f2f2f0 !important;
}

.ticket-admin-sidebar .sidebar-header,
.requests-sidebar .sidebar-header {
    border-bottom: 1px solid #2b2e30;
}

.ticket-admin-sidebar a,
.requests-sidebar a,
.ticket-admin-sidebar li,
.requests-sidebar li {
    letter-spacing: .02em;
}

/* Inactive items sit back in mid-grey so the current page reads immediately — the
 * hierarchy ECVALLA's own navigation uses. */
.ticket-admin-sidebar a:not(.logo-link),
.requests-sidebar a:not(.logo-link) {
    color: #a9adaf !important;
    border-radius: var(--ecv-radius-control);
    transition: background-color var(--ecv-quick), color var(--ecv-quick);
}

.ticket-admin-sidebar a:not(.logo-link):hover,
.requests-sidebar a:not(.logo-link):hover {
    background-color: #202325 !important;
    color: #ffffff !important;
}

/* The active item previously took the gold accent as its background. With the accent now
 * near-white, that rule produced white text on a white fill; it is replaced outright. */
.ticket-admin-sidebar a.active,
.requests-sidebar a.active,
.ticket-admin-sidebar li.active>a,
.requests-sidebar li.active>a,
.ticket-admin-sidebar .sidebar-nav a.active,
.requests-sidebar .sidebar-nav a.active {
    background-color: #292c2e !important;
    color: #ffffff !important;
    box-shadow: inset 2px 0 0 #f2f2f0;
}

/* The bug-report action at the foot of the sidebar is marked up as a primary button, so
 * with the accent now near-white it rendered as a solid white block — louder than the
 * navigation above it. It is demoted to the outlined treatment its role calls for. */
.ticket-admin-sidebar button,
.requests-sidebar button,
.ticket-admin-sidebar .btn.btn-primary,
.requests-sidebar .btn.btn-primary,
#reportBugBtnAdmin,
#reportBugBtnRequests {
    background-color: transparent !important;
    border: 1px solid #323537 !important;
    color: #d5d6d4 !important;
    box-shadow: none !important;
    letter-spacing: .06em;
}

.ticket-admin-sidebar button:hover,
.requests-sidebar button:hover,
.ticket-admin-sidebar .btn.btn-primary:hover,
.requests-sidebar .btn.btn-primary:hover,
#reportBugBtnAdmin:hover,
#reportBugBtnRequests:hover {
    background-color: #292c2e !important;
    border-color: #4a4d4f !important;
    color: #ffffff !important;
    transform: none;
}

/* --- Data tables -------------------------------------------------- */

.tickets-table,
.users-table,
.requests-table,
.admin-table {
    border-collapse: separate;
    border-spacing: 0;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--ecv-radius-card);
    overflow: hidden;
    box-shadow: none !important;
}

.tickets-table thead th,
.users-table thead th,
.requests-table thead th,
.admin-table thead th {
    background-color: var(--ecv-soft) !important;
    color: var(--text-light) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .15em;
    border-bottom: 1px solid var(--border-color) !important;
    white-space: nowrap;
}

.tickets-table tbody td,
.users-table tbody td,
.requests-table tbody td,
.admin-table tbody td {
    border-bottom: 1px solid var(--border-color-light) !important;
}

.tickets-table tbody tr:hover,
.users-table tbody tr:hover,
.requests-table tbody tr:hover,
.admin-table tbody tr:hover {
    background-color: var(--hover-bg) !important;
}

/* --- Metric tiles ------------------------------------------------- */

.stat-card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--ecv-radius-card) !important;
    box-shadow: none !important;
}

.stat-card:hover {
    border-color: var(--ecv-ink-soft) !important;
    box-shadow: var(--ecv-shadow-raise) !important;
    transform: translateY(-2px);
}

.stat-card h3,
.stat-card .stat-title,
.stat-card p:first-child {
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 11px;
    color: var(--text-light);
    font-weight: 700;
}

.stat-card .stat-value,
.stat-card h2,
.stat-card .stat-number {
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}

/* --- Filters and control strips ----------------------------------- */

.collapsible-filters-container,
.controls-section,
.user-controls,
.request-controls,
.report-filters {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--ecv-radius-card);
    box-shadow: none !important;
}

/* These containers nest (a controls strip wrapping a collapsible filter panel). Giving
 * each its own hairline draws a frame inside a frame, so a nested one goes flat. */
.controls-section .collapsible-filters-container,
.user-controls .collapsible-filters-container,
.request-controls .collapsible-filters-container,
.report-filters .collapsible-filters-container,
.collapsible-filters-container .controls-section,
.collapsible-filters-container .user-controls,
.collapsible-filters-container .request-controls {
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none !important;
}

.filter-toggle-btn {
    border-radius: var(--ecv-radius-control);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: 12px;
}

/* --- Modals ------------------------------------------------------- */

.request-modal-content,
.export-modal-content,
.info-modal-content,
.bug-report-modal-content,
.ticket-details-modal-content,
.invite-member-modal-content,
.submission-modal-content,
.confirmation-modal-content {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color);
    border-radius: var(--ecv-radius-modal) !important;
    box-shadow: var(--ecv-shadow-float) !important;
}

.close-modal-icon {
    color: var(--text-light);
    border-radius: var(--ecv-radius-pill);
    transition: background-color var(--ecv-quick), color var(--ecv-quick);
}

.close-modal-icon:hover {
    background-color: var(--hover-bg);
    color: var(--text-color);
}

/* --- Feed items --------------------------------------------------- */

.activity-item,
.internal-note-item,
.notification-popup-body>* {
    border-bottom: 1px solid var(--border-color-light);
    box-shadow: none !important;
    transition: background-color var(--ecv-quick);
}

.activity-item:hover,
.internal-note-item:hover {
    background-color: var(--hover-bg);
}

.activity-details {
    color: var(--text-light);
}

/* --- Toasts ------------------------------------------------------- */

.toast-notification-item {
    border: 1px solid var(--border-color);
    border-radius: var(--ecv-radius-control) !important;
    box-shadow: var(--ecv-shadow-float) !important;
    font-weight: 500;
    letter-spacing: -.005em;
}

/* --- Verification code entry -------------------------------------- */

.pe-otp-input {
    font-family: var(--ecv-font-latin) !important;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
    letter-spacing: 0;
    transition: border-color var(--ecv-quick), box-shadow var(--ecv-quick), transform var(--ecv-quick);
}

.pe-otp-input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: var(--ecv-focus-ring) !important;
    transform: translateY(-1px);
}

.otp-email-display {
    letter-spacing: .04em;
    color: var(--text-light);
}

/* --- Form fields -------------------------------------------------- */

.form-group label,
.checkbox-group label {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--text-color);
}

.field-error-fancy {
    color: var(--danger-color) !important;
    font-weight: 500;
    letter-spacing: .01em;
}

/* --- Badges ------------------------------------------------------- */

.priority-badge,
.status-badge,
.role-badge {
    border-radius: var(--ecv-radius-pill) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: none !important;
}

/* --- Landing screen ----------------------------------------------- */

/* The welcome gate is the first thing anyone sees, so it carries the identity most
 * deliberately: ink-on-glass panels over a desaturated video, wide-tracked labels. */
.welcome-container {
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    background-color: rgba(17, 19, 21, .55);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 18px;
}

.welcome-header h1,
.welcome-header h2 {
    color: #ffffff;
    letter-spacing: -.04em;
}

.welcome-header p,
.welcome-container .powered-by-text {
    color: #a9adaf;
}

.welcome-buttons .btn {
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, .16);
    background-color: rgba(255, 255, 255, .06);
    color: #ffffff;
    letter-spacing: .06em;
    transition: background-color var(--ecv-quick), border-color var(--ecv-quick), transform var(--ecv-quick);
}

.welcome-buttons .btn:hover {
    background-color: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .30);
    transform: translateY(-2px);
}

.welcome-buttons .btn-primary {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #17191b;
}

.welcome-buttons .btn-primary:hover {
    background-color: #ececea;
    border-color: #ececea;
    color: #17191b;
}

.new-feature-badge,
.development-badge {
    border-radius: var(--ecv-radius-pill);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 9px;
    font-weight: 700;
}

/* --- Language toggle typography ---------------------------------------------------
 * The one control that names a language wears the house serif voice — the same
 * high-contrast editorial register as the ECVALLA wordmark itself. System serif stack
 * only (no external font requests); Arabic glyphs fall back to IBM Plex Sans Arabic,
 * which stays the approved Arabic family. Applies to every screen's toggle: the
 * landing bar, the auth header, the admin navbar and the portal chrome. */
.lang-toggle-btn span,
#langToggleBtn span,
#langToggleAuth span,
#langToggleAdmin span,
.i18n-toggle span {
    font-family: "Didot", "Bodoni 72", "Bodoni MT", "Playfair Display", Georgia,
        "IBM Plex Sans Arabic", serif;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0;
    font-feature-settings: "case" on;
}

/* Only the Latin label ("EN") is tracked — Arabic script must never be letterspaced,
 * or its cursive joining breaks. The span's lang attribute is set by the toggle. */
.lang-toggle-btn span[lang="en"],
#langToggleBtn span[lang="en"],
#langToggleAuth span[lang="en"],
#langToggleAdmin span[lang="en"],
.i18n-toggle span[lang="en"] {
    letter-spacing: .18em;
    padding-inline-start: .18em;
}