/* ============================================================================= app-ui.css — Noor Al-Sabah (شركة نور الصباح) design layer ----------------------------------------------------------------------------- Loaded AFTER the Metronic bundle and after assets/fonts/dinnext/styles.rtl.css, so it wins on cascade ORDER rather than on !important sprawl. Why public/css/ and not public/assets/: public/assets/ is the 77MB Metronic bundle. It is NOT in git — it lives on the server and is rsync'd down. Anything written there is lost on a fresh clone and clobbered by the next rsync. public/css/ is tracked, so it ships with `git pull` (which is how this app deploys — nginx + php8.2-fpm, no Docker). Cache-bust: linked with ?v={{ config('global.ver.version_css') }}. NOTE: if the server runs `php artisan config:cache`, bumping version_css is a no-op until `config:clear && config:cache`. Blade recompiles on mtime; config does not. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. IBM Plex Sans Arabic — self-hosted, replacing BOTH Poppins and DIN Next. Chosen on measurement, not taste. Against Almarai/Cairo/Tajawal/Noto Kufi and the incumbent DIN Next, Plex was the only candidate that won on every axis that matters for a dense Arabic financial UI: - Tabular digits. Measured digit-width spread = 0px. Almarai and Tajawal are proportional (~7px spread) and do NOT ship the `tnum` feature, so font-variant-numeric silently no-ops and money columns go ragged. - Real 500 and 600. Metronic asks for exactly those two: .fw-bold {font-weight:500} -> 2221 uses across live views .fw-bolder {font-weight:600} -> 544 uses DIN Next has neither (only 300/400/700), so today CSS font-matching resolves 500 down to 400 and `fw-bold` renders IDENTICALLY to body text — measured at 237.24px for both. 2221 elements meant to read as emphasis currently do nothing. That is a real reason the UI reads flat. Plex has genuine faces at 500/600, so this is fixed with zero markup changes and zero !important. - Built for UI density at small sizes. This app's base is 13px. - Already proven here: invoices_local/{show,index}.blade.php use it. Self-hosted, not the Google CDN: this is a login-gated internal tool serving Gulf users from a Contabo/EU VPS. A CDN adds DNS+TLS+RTT on the critical path, buys zero SEO, and breaks on an egress-blocked server. 192KB (arabic+latin) vs the 600KB of .woff/.ttf DIN Next ships today. url() resolves against THIS stylesheet's URL, so it is immune to the in the layout. (That tag only endangers HTML-relative URLs — those must keep using asset().) Subsets: arabic + latin + latin-ext. Cyrillic and weight 300 dropped — fw-light is used 0 times. unicode-range means the browser fetches only what it renders. -------------------------------------------------------------------------- */ @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/plex/plex-400-arabic.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/plex/plex-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/plex/plex-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/plex/plex-500-arabic.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/plex/plex-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/plex/plex-500-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/plex/plex-600-arabic.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/plex/plex-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/plex/plex-600-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/plex/plex-700-arabic.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/plex/plex-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/plex/plex-700-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ----------------------------------------------------------------------------- 2. Tokens — نور الصباح. Palette sampled directly from the company logo (public/assets/media/logos/logo.jpg): navy #25435D wordmark, blue #1477AE on "نور" and the triangles, green #60BA49 leaf/arrow, orange #F78F13 sun rays. The surface set is a cool neutral to sit under that cool mark. These were previously صباح النور's emerald + warm cream "paper" set, which belonged to a different company's agricultural/wheat identity. The token NAMES are deliberately unchanged (--sn-emerald etc.): they are referenced from dozens of blade files, and renaming them would be a huge cosmetic diff with real regression risk for zero visual gain. Only the values moved. -------------------------------------------------------------------------- */ :root { /* brand — logo-derived */ --sn-emerald: #1477ae; /* logo blue — primary */ --sn-emerald-deep: #25435d; /* logo navy — headers, table head */ --sn-emerald-soft: #2e90cc; /* lighter blue — hover */ --sn-emerald-tint: #e8f1f7; /* pale blue — zebra rows, fills */ --sn-green: #60ba49; /* logo green — success / positive */ --sn-green-tint: #e6f4e2; --sn-gold: #c8891f; --sn-amber: #f78f13; /* logo orange — sun rays, warnings */ --sn-amber-tint: #fef0dc; --sn-rust: #a93b2c; --sn-rust-tint: #f4e2dc; --sn-sky: #1477ae; /* surface / ink — cool neutral */ --sn-paper: #eef2f6; --sn-paper-2: #f7fafc; --sn-card: #ffffff; --sn-ink: #1b2c3a; --sn-ink-soft: #5a6b7a; --sn-line: #d8e2ea; /* radii */ --sn-r-sm: 8px; --sn-r-md: 12px; --sn-r-lg: 18px; --sn-r-pill: 50rem; /* elevation */ --sn-shadow-sm: 0 1px 2px rgba(27, 44, 58, 0.04); --sn-shadow-md: 0 1px 2px rgba(27, 44, 58, 0.04), 0 12px 30px -12px rgba(27, 44, 58, 0.18); --sn-shadow-lg: 0 20px 60px -20px rgba(27, 44, 58, 0.28); /* motion — --sn-ease-out is the easing the existing .ai-* layer ALREADY uses. Adopting it as a token makes deduping that layer a rename, not a redesign. */ --sn-dur-fast: 120ms; --sn-dur-base: 220ms; --sn-dur-slow: 420ms; --sn-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* type */ --sn-font: "IBM Plex Sans Arabic", "DIN Next LT Arabic", system-ui, -apple-system, "Segoe UI", sans-serif; /* Metronic drives its typography off this. Redefining it here — later in the cascade, equal specificity — retires Poppins app-wide with no !important. */ --bs-font-sans-serif: "IBM Plex Sans Arabic", "DIN Next LT Arabic", system-ui, -apple-system, sans-serif; } /* ----------------------------------------------------------------------------- 3. Apply the family. assets/fonts/dinnext/styles.rtl.css sets `html,body{font-family:... !important}`. Matching !important + later load order is the only way past it. This is the one place the file uses !important deliberately — it is not sprawl. That dinnext file stays linked ON PURPOSE: besides @font-face it carries real layout rules (.container-xxl max-width:1430px, toolbar spacing, card title weights) and icon references. Removing the link would silently break container widths across all 74 live views. -------------------------------------------------------------------------- */ html, body { font-family: var(--sn-font) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ----------------------------------------------------------------------------- 4. Financial figures. Plex ships true tabular digits (measured spread: 0px), so money columns align by default. These declarations also pin lining figures and kill any inherited letter-spacing that would break the column grid. number_format() emits Latin digits — keep it that way; nothing here should flip to Arabic-Indic mid-app. -------------------------------------------------------------------------- */ .sn-num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; letter-spacing: 0; } /* ----------------------------------------------------------------------------- 5. Brand recolor — retire Metronic's stock blue (#009EF7) for the نور الصباح logo blue across all 74 views at once. Metronic 8 hardcodes #009EF7 into its compiled component classes instead of routing them through --bs-primary, so overriding the var alone isn't enough. We override the var (helps the few var-based rules like .text-primary #1) AND the specific high-traffic component classes, matching Metronic's own selector specificity + !important exactly so these win on cascade order. Semantic colors are retuned in section 5b below — they are NOT left at Metronic's stock values, because those (purple info #7239EA, pink danger #F1416C, mint success #50CD89) visibly clash with a navy/blue identity. -------------------------------------------------------------------------- */ :root { --bs-primary: var(--sn-emerald); --bs-primary-rgb: 20, 119, 174; /* #1477AE — MUST track --sn-emerald; rgba(var(--bs-primary-rgb),…) reads this */ --bs-primary-active: var(--sn-emerald-deep); --bs-link-color: var(--sn-emerald); --bs-link-hover-color: var(--sn-emerald-deep); } /* solid primary buttons. NOTE: assets/fonts/dinnext/styles.rtl.css is the OLD Abdullah brand layer (blue #1949ea) and sets .btn.btn-primary background with !important. It also carries essential layout rules, so it can't be removed — we out-!important it here. */ .btn.btn-primary { border-color: var(--sn-emerald) !important; background-color: var(--sn-emerald) !important; } .btn-check:checked + .btn.btn-primary, .btn-check:active + .btn.btn-primary, .btn.btn-primary:focus:not(.btn-active), .btn.btn-primary:hover:not(.btn-active), .btn.btn-primary:active:not(.btn-active) { border-color: var(--sn-emerald-deep) !important; background-color: var(--sn-emerald-deep) !important; } /* soft / light primary buttons + surfaces */ .btn.btn-light-primary { color: var(--sn-emerald); border-color: var(--sn-emerald-tint); background-color: var(--sn-emerald-tint); } .btn-check:checked + .btn.btn-light-primary, .btn-check:active + .btn.btn-light-primary, .btn.btn-light-primary:focus:not(.btn-active), .btn.btn-light-primary:hover:not(.btn-active), .btn.btn-light-primary:active:not(.btn-active) { color: #fff; border-color: var(--sn-emerald) !important; background-color: var(--sn-emerald) !important; } .bg-light-primary { background-color: var(--sn-emerald-tint) !important; } .badge-light-primary { color: var(--sn-emerald-deep); background-color: var(--sn-emerald-tint); } .badge-primary { background-color: var(--sn-emerald); } /* text + links */ .text-primary { color: var(--sn-emerald) !important; } /* dinnext repurposed .text-info as the old-brand blue accent (#1949ea) app-wide — headings, the user name, menu links. Rebrand it to emerald. (Semantic surfaces like badge-info / alert-info keep their own colors.) */ .text-info { color: var(--sn-emerald) !important; } .text-hover-primary:hover, a.text-hover-primary:hover, .text-hover-primary:hover i { color: var(--sn-emerald) !important; } .link-primary { color: var(--sn-emerald); } .link-primary:hover, .link-primary:focus { color: var(--sn-emerald-deep); } /* form controls */ .form-check-input:checked { background-color: var(--sn-emerald); border-color: var(--sn-emerald); } .form-control:focus, .form-select:focus { border-color: var(--sn-emerald); box-shadow: 0 0 0 0.2rem var(--sn-emerald-tint); } /* ----------------------------------------------------------------------------- 5b. Semantic palette — make colour carry MEANING, not decoration. Metronic ships success #50CD89 (mint), danger #F1416C (hot pink), warning #FFC700 (school-bus yellow) and info #7239EA (PURPLE). Against a navy/blue logo those read as four unrelated brands fighting on one screen — and because the home dashboard uses badge-light-danger for every expired-residency row, the busiest widget was mostly hot pink. Retuned to the logo's own accents so the palette is closed (navy/blue/green/ orange) and each hue means exactly one thing: success #60BA49 logo green — confirmed, paid, active, inside-KSA warning #F78F13 logo orange — needs attention, expiring soon danger #B3382B brick red — genuine failure/expired ONLY. Deeper and less saturated than #F1416C so it reads as serious rather than loud, and sits with navy. info #25435D logo navy — structural/neutral emphasis (was purple) -------------------------------------------------------------------------- */ :root { --bs-success: var(--sn-green); --bs-success-rgb: 96, 186, 73; --bs-warning: var(--sn-amber); --bs-warning-rgb: 247, 143, 19; --bs-danger: #b3382b; --bs-danger-rgb: 179, 56, 43; --bs-info: var(--sn-emerald-deep); --bs-info-rgb: 37, 67, 93; } /* text */ .text-success { color: var(--sn-green) !important; } .text-warning { color: var(--sn-amber) !important; } .text-danger { color: #b3382b !important; } /* badges — the highest-traffic semantic surface on the dashboard */ .badge-light-success { color: #3f8a2f; background-color: var(--sn-green-tint); } .badge-light-warning { color: #9c5a06; background-color: var(--sn-amber-tint); } .badge-light-danger { color: #8f2b20; background-color: var(--sn-rust-tint); } .badge-light-info { color: var(--sn-emerald-deep); background-color: var(--sn-emerald-tint); } .badge-success { background-color: var(--sn-green); } .badge-warning { background-color: var(--sn-amber); } .badge-danger { background-color: #b3382b; } /* soft surfaces */ .bg-light-success { background-color: var(--sn-green-tint) !important; } .bg-light-warning { background-color: var(--sn-amber-tint) !important; } .bg-light-danger { background-color: var(--sn-rust-tint) !important; } /* solid buttons */ .btn.btn-success { border-color: var(--sn-green) !important; background-color: var(--sn-green) !important; } .btn.btn-warning { border-color: var(--sn-amber) !important; background-color: var(--sn-amber) !important; } .btn.btn-danger { border-color: #b3382b !important; background-color: #b3382b !important; } /* accent borders used on the home widget cards */ .border-success { border-color: var(--sn-green) !important; } .border-warning { border-color: var(--sn-amber) !important; } .border-danger { border-color: #b3382b !important; } /* ----------------------------------------------------------------------------- Sidebar (aside) polish — rounded links, emerald active state with a start-side accent bar, gentle hover. Logos/structure untouched. -------------------------------------------------------------------------- */ .aside .menu > .menu-item .menu-link, #kt_aside .menu .menu-item .menu-link { border-radius: var(--sn-r-md); margin-inline: 0.5rem; transition: background-color var(--sn-dur-fast) var(--sn-ease-out), color var(--sn-dur-fast) var(--sn-ease-out); } #kt_aside .menu .menu-item .menu-link:hover { background-color: var(--sn-emerald-tint) !important; } .menu-state-primary .menu-item .menu-link.active, .menu-active-bg .menu-item .menu-link.active, #kt_aside .menu .menu-item .menu-link.active { position: relative; background-color: var(--sn-emerald-tint) !important; } /* start-side accent bar on the active item */ #kt_aside .menu .menu-item .menu-link.active::before { content: ""; position: absolute; inset-inline-start: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 3px; background: var(--sn-emerald); } .menu-item .menu-link.active .menu-title, .menu-item .menu-link.active .menu-icon i, #kt_aside .menu .menu-item .menu-link.active .menu-title, #kt_aside .menu .menu-item .menu-link.active .menu-icon i { color: var(--sn-emerald-deep) !important; } #kt_aside .menu .menu-item .menu-link:hover .menu-title { color: var(--sn-emerald-deep) !important; } /* pagination (Laravel Bootstrap-5 paginator, used by the log pages) */ .page-item.active .page-link { background-color: var(--sn-emerald); border-color: var(--sn-emerald); } .page-link { color: var(--sn-emerald); } .page-link:hover { color: var(--sn-emerald-deep); background-color: var(--sn-emerald-tint); } /* ----------------------------------------------------------------------------- 6. Surface warmth + table polish (subtle, global). Softer card radius/shadow and a calm table header — replaces the ad-hoc inline #ffb822 yellow headers scattered across 11 views. Views can opt a table header into the brand tint with `.sn-thead`. -------------------------------------------------------------------------- */ .card { border-radius: var(--sn-r-lg); box-shadow: var(--sn-shadow-sm); border-color: var(--sn-line); } /* The page-title toolbar band was painted old-brand blue (#083da6) by the dinnext override. Rebrand it to the emerald identity. */ .toolbar { background: linear-gradient( 90deg, var(--sn-emerald-deep), var(--sn-emerald) ) !important; } .toolbar .page-title .page-heading, .toolbar .page-title, .toolbar .breadcrumb .breadcrumb-item, .toolbar .breadcrumb .breadcrumb-item a, .toolbar .page-title .text-muted { color: #fff !important; } .toolbar .breadcrumb .breadcrumb-item:before { color: rgba(255, 255, 255, 0.5) !important; } /* Card titles were forced pink (#d3224c) at an oversized 1.675rem by dinnext, and many section labels use .text-info which dinnext painted old-brand blue (#1949ea). Normalize card headings to brand ink at a sane size. */ .card .card-header .card-title, .card .card-header .card-title .card-label { color: var(--sn-ink) !important; font-size: 1.15rem !important; font-weight: 700; } .card .card-header .card-title .text-info, .card .card-header .card-title .card-label.text-info { color: var(--sn-ink) !important; } .card .card-header .card-title .text-muted { color: var(--sn-ink-soft) !important; } .table.sn-thead thead tr, .table thead.sn-thead tr { background: var(--sn-emerald-tint) !important; color: var(--sn-emerald-deep) !important; } .table.sn-thead thead th, .table thead.sn-thead th { border-bottom: 2px solid var(--sn-emerald) !important; font-weight: 600; } /* ----------------------------------------------------------------------------- 7. Global motion guard. Anything this layer animates must die here too. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ----------------------------------------------------------------------------- 8. Dashboard widget polish (home) — subtle, business-appropriate motion only. Card hover gets a gentle depth lift; urgent badges pulse. No entrance animations. Killed globally by the section-7 prefers-reduced-motion guard. -------------------------------------------------------------------------- */ .card { transition: box-shadow var(--sn-dur-base) var(--sn-ease-out); } .card:hover { box-shadow: var(--sn-shadow-md); } /* list-row hover inside scrollable widget bodies */ .sn-row-hover { transition: background-color var(--sn-dur-fast) var(--sn-ease-out); } .sn-row-hover:hover { background-color: var(--sn-emerald-tint) !important; } /* RTL-safe status accents for the vacations widget (border-inline-start, never border-left). Colors stay semantic — emerald ongoing, amber upcoming, muted ended. */ .sn-accent-success { border-inline-start: 4px solid var(--sn-emerald); } .sn-accent-warning { border-inline-start: 4px solid var(--sn-amber); } .sn-accent-muted { border-inline-start: 4px solid var(--sn-line); } /* pulse reserved for the overdue-tasks counter badge ONLY */ @keyframes sn-badge-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } .sn-badge-pulse { animation: sn-badge-pulse 1.6s var(--sn-ease-out) infinite; } /* ----------------------------------------------------------------------------- 9. Lease review table (unprocessed) — fixed layout, controlled column sizes. Notes column gets the flex space and clamps long text; actions stay on one line; no physical properties (RTL-safe). -------------------------------------------------------------------------- */ .sn-lease-review { table-layout: fixed; width: 100%; } .sn-lease-review .sn-col-id { width: 3.5rem; } .sn-lease-review .sn-col-batch { width: 5rem; } .sn-lease-review .sn-col-contract { width: 11rem; } .sn-lease-review .sn-col-tenant { width: 16rem; } .sn-lease-review .sn-col-status { width: 7.5rem; } .sn-lease-review .sn-col-notes { width: auto; } .sn-lease-review .sn-col-actions { width: 12rem; } .sn-lease-review td { vertical-align: middle; padding-block: 0.85rem; } .sn-lease-review .sn-notes-cell { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.7; word-break: break-word; } @media (max-width: 991.98px) { .sn-lease-review .sn-col-contract, .sn-lease-review .sn-col-tenant { width: auto; } } /* ============================================================================ §12. Row-lift stacking fix — keeps action dropdowns above the rows below ---------------------------------------------------------------------------- The list restyles (specs 021-024) animate rows in with `sn-row-in` and lift them on hover with `transform: translateY(...)`. A transform makes every its own stacking context, which TRAPS an open dropdown inside its own row: Bootstrap gives .dropdown-menu z-index:1000, but that z-index is then scoped to the row, so the NEXT rows — painted later in DOM order — cover the menu and its lower items become unclickable. Reproduced on the shops list ("الاجراءات" menu, ShopController) where 21 sample points inside the open menu were occluded by the following rows' buttons; the workers list renders the same menu and had the same defect. Two parts: 1. `animation-fill-mode: backwards` — the entrance animation stops leaving a permanent transform on every idle row, so idle rows are no longer stacking contexts at all. Visually identical: the animation already ended on `opacity:1; translateY(0)`, which is also the untransformed resting state. 2. The row holding focus (a Bootstrap dropdown keeps focus on its toggle while open) is promoted above its siblings and drops its hover lift, so the menu paints over everything below it. `:focus-within` rather than `:has(.dropdown-menu.show)` on purpose — wider browser support, and it is true for exactly as long as the menu is open. `!important` is required only because the page-scoped rules that introduce the transform carry an id selector (`.shop-log #shop_table tbody tr`). ========================================================================== */ table tbody tr { animation-fill-mode: backwards !important; } table tbody tr:hover { position: relative; z-index: 2; } table tbody tr:focus-within { position: relative; z-index: 1060; transform: none !important; }