/*! * Taj Company admin — house CSS. * Self-authored, no external framework. Replaces Bootstrap 5.3.2. * * Naming: every component/utility class carries a `uk-` prefix so it can never * collide with a page's own ad-hoc class names. Class NAMES intentionally do * not mirror Bootstrap's (this is a real visual system, not a re-skin), but the * SHAPE of the utility set (flex/gap/spacing/col-*) mirrors what pages already * lean on, since 100+ files were built assuming that vocabulary exists. */ /* ============================== Design tokens ============================= */ :root { /* Brand — carried over from the site's own established identity, not new */ --uk-deep: #0F3D2E; /* primary green: topbar, table heads, card heads */ --uk-abyss: #0A2C21; /* deepest green: sidebar ground */ --uk-gold: #C9A227; /* antique gold: hairlines, active markers, badges */ --uk-gold-soft: rgba(201,162,39,.16); --uk-deep-soft: rgba(15,61,46,.08); /* Neutrals — warmed a touch toward the brand green rather than pure grey */ --uk-bg: #F6F8F6; --uk-surface: #FFFFFF; --uk-surface-2: #FBFCFA; --uk-border: #E3E8E3; --uk-border-2: #D3DAD2; --uk-ink: #182420; --uk-ink-soft: #45524C; --uk-muted: #74807A; --uk-muted-2: #98A29C; /* Semantic — distinguishable from the brand green, not competing with it */ --uk-success: #1E8A5B; --uk-success-bg: #E7F5EE; --uk-success-ink: #0E5C3B; --uk-warning: #B8791E; --uk-warning-bg: #FBF1DF; --uk-warning-ink: #7A4F0F; --uk-danger: #C1433F; --uk-danger-bg: #FBEAE9; --uk-danger-ink: #86211E; --uk-info: #2C6FA0; --uk-info-bg: #E9F1F8; --uk-info-ink: #1B4A6B; --uk-secondary: #5B655F; --uk-secondary-bg: #EEF1EE; /* Type */ --uk-font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --uk-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --uk-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Scale */ --uk-radius-sm: 6px; --uk-radius: 10px; --uk-radius-lg: 16px; --uk-shadow-sm: 0 1px 2px rgba(15,30,22,.05), 0 1px 1px rgba(15,30,22,.04); --uk-shadow: 0 2px 10px rgba(15,30,22,.06), 0 1px 3px rgba(15,30,22,.05); --uk-shadow-lg: 0 12px 32px rgba(15,30,22,.12), 0 4px 10px rgba(15,30,22,.06); --uk-gap-1: .25rem; --uk-gap-2: .5rem; --uk-gap-3: .75rem; --uk-gap-4: 1rem; --uk-gap-5: 1.5rem; --uk-gap-6: 2rem; } /* ========================= Text size & style prefs ========================= * * User-selectable, on top of the fluid default type scale (--fs-scale-small/ * base/large, defined in _header.php's own :root -- see the note there). * These are two bigger size steps and two alternate system-font styles, * toggled by a data-text-size / data-font-style attribute on that * app.js sets from localStorage as early as it can (before first paint) and * that the "Aa" control in the topbar (_header.php) writes on click. * * An attribute selector on html (0,1,1) always outranks a :root rule (0,1,0) * on specificity regardless of which file loads first or which var() a page * reads -- app.css is here the single global place these overrides live, * without needing to move or touch _header.php's existing scale block. * Font choices are system-stack only (no @font-face, no Google Fonts link) -- * this app carries no font CDN and today's ask was explicitly not to add one. */ html[data-text-size="sm"] { /* font-size here scales every rem in this file (117 of them -- .uk-table, .uk-btn, .uk-input, .uk-panel, badges, modals: the actual inner content of every admin page) since rem is relative to the ROOT element's own font-size, which nothing had ever set before this. The --fs-scale-* tokens above are a SEPARATE mechanism -- px-based clamp()s that only the dashboard's bespoke headings/metrics and the topbar/sidebar reach for -- so a bigger size step was only ever making headings and KPI figures bigger, never the tables/forms/buttons everything else is built from. Both need to move together for "bigger text" to mean the whole page, not just its headings. */ font-size: 87.5%; --fs-scale-small: clamp(10px, 0.09vw + 9.6px, 11px); --fs-scale-base : clamp(11px, 0.11vw + 10.6px, 13px); --fs-scale-large: clamp(15px, 0.37vw + 13.7px, 21px); } html[data-text-size="lg"] { font-size: 112.5%; --fs-scale-small: clamp(13px, 0.11vw + 12.6px, 15px); --fs-scale-base : clamp(15px, 0.15vw + 14.4px, 17px); --fs-scale-large: clamp(21px, 0.52vw + 18.8px, 29px); } html[data-text-size="xl"] { font-size: 130%; --fs-scale-small: clamp(15px, 0.13vw + 14.5px, 17px); --fs-scale-base : clamp(17px, 0.17vw + 16.3px, 20px); --fs-scale-large: clamp(24px, 0.60vw + 21.7px, 33px); } html[data-text-size="xxl"] { font-size: 150%; --fs-scale-small: clamp(17px, 0.15vw + 16.3px, 19px); --fs-scale-base : clamp(20px, 0.20vw + 19.1px, 23px); --fs-scale-large: clamp(28px, 0.68vw + 25.2px, 38px); } html[data-text-size="huge"] { font-size: 175%; --fs-scale-small: clamp(19px, 0.17vw + 18.2px, 22px); --fs-scale-base : clamp(23px, 0.23vw + 22.0px, 26px); --fs-scale-large: clamp(32px, 0.78vw + 28.9px, 44px); } html[data-text-size="giant"] { font-size: 200%; --fs-scale-small: clamp(21px, 0.19vw + 20.1px, 24px); --fs-scale-base : clamp(26px, 0.26vw + 24.9px, 30px); --fs-scale-large: clamp(35px, 0.85vw + 31.6px, 48px); } /* Each "family" pairs a DIFFERENT display font against a different body font (a real combination, not one font used for both) -- and every font named below is a genuine pre-installed system font on Windows, Mac and Linux, so the pairing actually renders as named rather than silently falling through to a font that isn't there (the previous "Rounded" style leaned on Century Gothic/Avenir Next, both absent on stock Windows, so it rendered identical to the default and looked broken). */ html[data-font-style="press"] { --uk-font-display: Verdana, Geneva, sans-serif; --uk-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } html[data-font-style="editors"] { --uk-font-display: Georgia, 'Times New Roman', serif; --uk-font-body: Verdana, Geneva, sans-serif; } html[data-font-style="typewriter"] { --uk-font-display: 'Courier New', Courier, monospace; --uk-font-body: Georgia, 'Times New Roman', serif; } /* Same hand-drawn stack the dashboard's own "Sketchbook" theme already uses (dashboard.php, .uk-sketch) -- one font for both roles there, not a pair, same as here. Picking this is what makes dashboard.php's own !important override (see the comment beside .uk-sketch there) a no-op in practice: it swaps the hardcoded literal for var(--uk-font-body), which this sets to the exact same font, so the look doesn't change on the dashboard -- but it now also reaches every OTHER page, which the hardcoded rule never did. */ html[data-font-style="sketch"] { --uk-font-display: 'Kalam', 'Comic Sans MS', cursive, sans-serif; --uk-font-body: 'Kalam', 'Comic Sans MS', cursive, sans-serif; } /* =============================== Named themes =============================== * * Three, picked from the same "Appearance" panel as text size/font style, same * mechanism: html[data-theme="X"], set by UK.setTheme() (app.js) from * localStorage, beating :root on specificity regardless of source order -- * see the note at the top of the text-size section above for why that's * reliable. The attribute value stays a plain stable key (light/andalusian/ * dark) even though the panel shows a period name -- renaming a live * localStorage value would silently reset everyone's saved choice. * * (no attribute) "Abbasid" -- the original light theme, unchanged. Cream * and gold reads as the House of Wisdom's * illuminated manuscripts without needing a * repaint of anything that already works. * data-theme="andalusian" -- new. Warm parchment and terracotta in * place of green -- Alhambra tilework's * earth tones instead of the brand's usual * cool green, a genuinely different feel * rather than light-with-a-filter. * data-theme="dark" -- "Ottoman": the original dark theme, * unchanged. Deep emerald and gold at night * already reads as Ottoman-tiled domes. * * Scope, both themes below: every token here re-themes app.css's OWN * component library (panels, tables, modals, inputs, badges, alerts, * dropdowns) because that library is built entirely on these tokens already. * The sidebar/topbar need nothing -- they stay the constant brand green+gold * regardless of theme, on purpose: it is the app's chrome, not its content, * and it anchors "which app is this" the same way across all three. What * this does NOT yet reach: per-page hardcoded colors (dashboard.php alone * has hundreds of literal #hex values instead of var() -- .kpi-tile, most * panel headers, etc.), and a handful of hardcoded #fff spots inside app.css * itself (the procurement step wizard, a couple of dropdown corners). Same * arrangement as the text-size/font rollout: the mechanism ships now, pages * that don't pick it up yet get fixed one by one as they're pointed out. */ html[data-theme="andalusian"] { --uk-deep: #A8522C; /* terracotta in place of the brand green */ --uk-abyss: #7A3A1F; --uk-gold-soft: rgba(201,162,39,.20); --uk-deep-soft: rgba(168,82,44,.10); --uk-bg: #F7EEDF; --uk-surface: #FDF9F0; --uk-surface-2: #FAF2E3; --uk-border: #E8D7B8; --uk-border-2: #D9C29A; --uk-ink: #2E2015; --uk-ink-soft: #5C4838; --uk-muted: #8A7461; --uk-muted-2: #A89680; --uk-shadow-sm: 0 1px 2px rgba(60,35,10,.08), 0 1px 1px rgba(60,35,10,.06); --uk-shadow: 0 2px 10px rgba(60,35,10,.10), 0 1px 3px rgba(60,35,10,.07); --uk-shadow-lg: 0 12px 32px rgba(60,35,10,.16), 0 4px 10px rgba(60,35,10,.08); } html[data-theme="dark"] { --uk-bg: #121815; --uk-surface: #1B2420; --uk-surface-2: #202B26; --uk-border: #2B3833; --uk-border-2: #37453F; --uk-ink: #E8EDE9; --uk-ink-soft: #B9C4BE; --uk-muted: #8B978F; --uk-muted-2: #6C7871; --uk-gold-soft: rgba(201,162,39,.22); --uk-deep-soft: rgba(51,194,133,.14); --uk-success: #33C285; --uk-success-bg: rgba(30,138,91,.2); --uk-success-ink: #7EE8B8; --uk-warning: #E0A542; --uk-warning-bg: rgba(184,121,30,.2); --uk-warning-ink: #F4C978; --uk-danger: #E2635D; --uk-danger-bg: rgba(193,67,63,.2); --uk-danger-ink: #F5A19D; --uk-info: #5B9FD4; --uk-info-bg: rgba(44,111,160,.2); --uk-info-ink: #9AC7EA; --uk-secondary: #9AA6A0; --uk-secondary-bg: rgba(91,101,95,.28); --uk-shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.3); --uk-shadow: 0 2px 10px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35); --uk-shadow-lg: 0 12px 32px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.4); } /* Topbar "Appearance" panel -- shared classes so the picker isn't a pile of inline styles in _header.php. */ .uk-textprefs-panel { background: var(--uk-surface); color: var(--uk-ink); border-color: var(--uk-border-2) !important; } .uk-textpref-label { font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: .03em; color: var(--uk-muted-2); font-weight: 700; margin: 0 0 .35rem; } .uk-textpref-row { display: flex; gap: .35rem; margin-bottom: .7rem; } .uk-textpref-row:last-child { margin-bottom: 0; } .uk-textpref-row-wrap { flex-wrap: wrap; } .uk-textpref-opt { flex: 1 1 auto; min-width: 72px; padding: .3rem .5rem; font-size: .78rem; font-weight: 600; border: 1px solid var(--uk-border-2); background: var(--uk-surface); color: var(--uk-ink-soft); border-radius: var(--uk-radius-sm); cursor: pointer; white-space: nowrap; } .uk-textpref-opt:hover { border-color: var(--uk-deep); color: var(--uk-deep); } .uk-textpref-opt.active { background: var(--uk-deep); border-color: var(--uk-deep); color: #fff; } /* ================================= Reset ================================== */ .uk-scope, .uk-scope * { box-sizing: border-box; } /* The browser's own default body margin (~8px) was never zeroed here, so it sat between the viewport edge and every full-bleed element built to butt right up against it -- the topbar and sidebar most visibly, as a sliver of the raw page background showing down both sides of an otherwise edge-to-edge dark bar. */ body { margin: 0; font-family: var(--uk-font-body); color: var(--uk-ink); background: var(--uk-bg); } button, input, select, textarea { font-family: inherit; } /* ================================ Typography =============================== */ .uk-h1,.uk-h2,.uk-h3,.uk-h4,.uk-h5,.uk-h6 { font-family: var(--uk-font-display); font-weight: 700; color: var(--uk-ink); margin: 0; line-height: 1.25; } .uk-h5 { font-size: 1.05rem; } .uk-h6 { font-size: .92rem; } .uk-fs-3 { font-size: 1.75rem !important; } .uk-fs-4 { font-size: 1.5rem !important; } .uk-fs-5 { font-size: 1.25rem !important; } .uk-fs-6 { font-size: 1rem !important; } .uk-text-muted { color: var(--uk-muted) !important; } .uk-text-muted-2{ color: var(--uk-muted-2) !important; } .uk-text-danger { color: var(--uk-danger) !important; } .uk-text-success{ color: var(--uk-success) !important; } .uk-text-warning{ color: var(--uk-warning-ink) !important; } .uk-text-info { color: var(--uk-info) !important; } .uk-text-primary{ color: var(--uk-deep) !important; } .uk-text-secondary{ color: var(--uk-secondary) !important; } .uk-text-white { color: #fff !important; } .uk-text-center { text-align: center !important; } .uk-text-end { text-align: right !important; } .uk-text-nowrap { white-space: nowrap !important; } .uk-text-decoration-none { text-decoration: none !important; } .uk-text-truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .uk-fw-normal { font-weight: 400 !important; } .uk-fw-semibold { font-weight: 600 !important; } .uk-fw-bold { font-weight: 700 !important; } .uk-small { font-size: .8125rem; } .uk-tabular { font-variant-numeric: tabular-nums; font-family: var(--uk-font-mono); } .uk-font-mono { font-family: var(--uk-font-mono); } /* ============================ Layout / flex / grid ========================= */ .uk-flex { display: flex !important; } .uk-inline-flex { display: inline-flex !important; } .uk-flex-col { flex-direction: column !important; } .uk-flex-wrap { flex-wrap: wrap !important; } .uk-items-center { align-items: center !important; } .uk-items-start { align-items: flex-start !important; } .uk-items-end { align-items: flex-end !important; } .uk-items-baseline{ align-items: baseline !important; } .uk-justify-between{ justify-content: space-between !important; } .uk-justify-center { justify-content: center !important; } .uk-justify-end { justify-content: flex-end !important; } .uk-flex-1 { flex: 1 1 0% !important; } .uk-flex-grow { flex-grow: 1 !important; } .uk-flex-none { flex: none !important; } .uk-flex-shrink-0 { flex-shrink: 0 !important; } .uk-ms-auto { margin-left: auto !important; } .uk-me-auto { margin-right: auto !important; } .uk-hidden { display: none !important; } .uk-block { display: block !important; } .uk-w-100 { width: 100% !important; } .uk-h-100 { height: 100% !important; } .uk-position-relative { position: relative !important; } .uk-gap-1{gap:var(--uk-gap-1)!important} .uk-gap-2{gap:var(--uk-gap-2)!important} .uk-gap-3{gap:var(--uk-gap-3)!important} .uk-gap-4{gap:var(--uk-gap-4)!important} .uk-gap-5{gap:var(--uk-gap-5)!important} .uk-gap-6{gap:var(--uk-gap-6)!important} /* Spacing utilities: 0-6 step scale on the same rhythm as the gaps above */ :root{ --uk-sp-0:0; --uk-sp-1:.25rem; --uk-sp-2:.5rem; --uk-sp-3:.75rem; --uk-sp-4:1rem; --uk-sp-5:1.5rem; --uk-sp-6:2rem; } .uk-p-0{padding:var(--uk-sp-0)!important} .uk-p-1{padding:var(--uk-sp-1)!important} .uk-p-2{padding:var(--uk-sp-2)!important} .uk-p-3{padding:var(--uk-sp-3)!important} .uk-p-4{padding:var(--uk-sp-4)!important} .uk-p-5{padding:var(--uk-sp-5)!important} .uk-px-1{padding-inline:var(--uk-sp-1)!important} .uk-px-2{padding-inline:var(--uk-sp-2)!important} .uk-px-3{padding-inline:var(--uk-sp-3)!important} .uk-px-4{padding-inline:var(--uk-sp-4)!important} .uk-px-5{padding-inline:var(--uk-sp-5)!important} .uk-py-0{padding-block:var(--uk-sp-0)!important} .uk-py-1{padding-block:var(--uk-sp-1)!important} .uk-py-2{padding-block:var(--uk-sp-2)!important} .uk-py-3{padding-block:var(--uk-sp-3)!important} .uk-py-4{padding-block:var(--uk-sp-4)!important} .uk-py-5{padding-block:var(--uk-sp-5)!important} .uk-pb-1{padding-bottom:var(--uk-sp-1)!important} .uk-pb-2{padding-bottom:var(--uk-sp-2)!important} .uk-pb-3{padding-bottom:var(--uk-sp-3)!important} .uk-pt-1{padding-top:var(--uk-sp-1)!important} .uk-pt-2{padding-top:var(--uk-sp-2)!important} .uk-pt-3{padding-top:var(--uk-sp-3)!important} .uk-pe-1{padding-inline-end:var(--uk-sp-1)!important} .uk-pe-2{padding-inline-end:var(--uk-sp-2)!important} .uk-pe-3{padding-inline-end:var(--uk-sp-3)!important} .uk-pe-4{padding-inline-end:var(--uk-sp-4)!important} .uk-pe-5{padding-inline-end:var(--uk-sp-5)!important} .uk-ps-1{padding-inline-start:var(--uk-sp-1)!important} .uk-ps-2{padding-inline-start:var(--uk-sp-2)!important} .uk-ps-3{padding-inline-start:var(--uk-sp-3)!important} .uk-ps-4{padding-inline-start:var(--uk-sp-4)!important} .uk-ps-5{padding-inline-start:var(--uk-sp-5)!important} .uk-my-2{margin-block:var(--uk-sp-2)!important} .uk-my-3{margin-block:var(--uk-sp-3)!important} .uk-m-0{margin:var(--uk-sp-0)!important} .uk-mb-0{margin-bottom:var(--uk-sp-0)!important} .uk-mt-1{margin-top:var(--uk-sp-1)!important} .uk-mt-2{margin-top:var(--uk-sp-2)!important} .uk-mt-3{margin-top:var(--uk-sp-3)!important} .uk-mt-4{margin-top:var(--uk-sp-4)!important} .uk-mb-1{margin-bottom:var(--uk-sp-1)!important} .uk-mb-2{margin-bottom:var(--uk-sp-2)!important} .uk-mb-3{margin-bottom:var(--uk-sp-3)!important} .uk-mb-4{margin-bottom:var(--uk-sp-4)!important} .uk-mb-5{margin-bottom:var(--uk-sp-5)!important} .uk-ms-1{margin-left:var(--uk-sp-1)!important} .uk-ms-2{margin-left:var(--uk-sp-2)!important} .uk-ms-3{margin-left:var(--uk-sp-3)!important} .uk-me-1{margin-right:var(--uk-sp-1)!important} .uk-me-2{margin-right:var(--uk-sp-2)!important} .uk-me-3{margin-right:var(--uk-sp-3)!important} /* 12-column row/col grid, mirroring the responsive breakpoints already in use */ .uk-row { display: flex; flex-wrap: wrap; margin-inline: calc(var(--uk-gap-3) * -1); row-gap: var(--uk-gap-3); } .uk-row > * { padding-inline: var(--uk-gap-3); } [class*="uk-col"] { flex: 1 0 0%; min-width: 0; } .uk-col-auto { flex: 0 0 auto; width: auto; } .uk-col-1{flex:0 0 auto;width:8.3333%}.uk-col-2{flex:0 0 auto;width:16.6667%}.uk-col-3{flex:0 0 auto;width:25%} .uk-col-4{flex:0 0 auto;width:33.3333%}.uk-col-5{flex:0 0 auto;width:41.6667%}.uk-col-6{flex:0 0 auto;width:50%} .uk-col-7{flex:0 0 auto;width:58.3333%}.uk-col-8{flex:0 0 auto;width:66.6667%}.uk-col-9{flex:0 0 auto;width:75%} .uk-col-10{flex:0 0 auto;width:83.3333%}.uk-col-11{flex:0 0 auto;width:91.6667%}.uk-col-12{flex:0 0 auto;width:100%} @media (min-width: 768px) { .uk-col-md{flex:1 0 0%;width:auto} .uk-col-md-1{flex:0 0 auto;width:8.3333%} .uk-col-md-2{flex:0 0 auto;width:16.6667%} .uk-col-md-3{flex:0 0 auto;width:25%} .uk-col-md-4{flex:0 0 auto;width:33.3333%} .uk-col-md-5{flex:0 0 auto;width:41.6667%} .uk-col-md-6{flex:0 0 auto;width:50%} .uk-col-md-7{flex:0 0 auto;width:58.3333%} .uk-col-md-8{flex:0 0 auto;width:66.6667%} .uk-col-md-9{flex:0 0 auto;width:75%} .uk-col-md-10{flex:0 0 auto;width:83.3333%} .uk-col-md-11{flex:0 0 auto;width:91.6667%} .uk-col-md-12{flex:0 0 auto;width:100%} } @media (min-width: 992px) { .uk-col-lg-3{flex:0 0 auto;width:25%} .uk-col-lg-4{flex:0 0 auto;width:33.3333%} .uk-col-lg-5{flex:0 0 auto;width:41.6667%} .uk-col-lg-6{flex:0 0 auto;width:50%} .uk-col-lg-7{flex:0 0 auto;width:58.3333%} .uk-col-lg-9{flex:0 0 auto;width:75%} } @media (min-width: 1200px) { .uk-col-xl{flex:1 0 0%} .uk-col-xl-3{flex:0 0 auto;width:25%} .uk-col-xl-4{flex:0 0 auto;width:33.3333%} .uk-col-xl-6{flex:0 0 auto;width:50%} } @media (max-width: 575.98px) { .uk-flex-wrap-mobile { flex-wrap: wrap !important; } } @media print { .uk-d-print-none { display: none !important; } #uk-item-thumb-preview { display: none !important; } } /* ================================= Buttons ================================= */ .uk-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; font-family: var(--uk-font-display); font-weight: 600; font-size: .875rem; padding: .5rem 1rem; border-radius: var(--uk-radius-sm); border: 1px solid transparent; cursor: pointer; transition: background-color .15s, border-color .15s, box-shadow .15s, transform .04s; line-height: 1.35; text-decoration: none; white-space: nowrap; } .uk-btn:active { transform: translateY(1px); } .uk-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; } .uk-btn-sm { padding: .3rem .65rem; font-size: .78rem; border-radius: 7px; } .uk-btn-lg { padding: .7rem 1.4rem; font-size: 1rem; } .uk-btn-icon { padding: .45rem; width: 2.1rem; height: 2.1rem; } .uk-btn-primary { background: var(--uk-deep); border-color: var(--uk-deep); color: #fff; } .uk-btn-primary:hover { background: #0c3226; border-color: #0c3226; } .uk-btn-gold { background: var(--uk-gold); border-color: var(--uk-gold); color: #241c04; } .uk-btn-gold:hover { filter: brightness(.94); } .uk-btn-success { background: var(--uk-success); border-color: var(--uk-success); color: #fff; } .uk-btn-success:hover { filter: brightness(.94); } .uk-btn-warning { background: var(--uk-warning); border-color: var(--uk-warning); color: #fff; } .uk-btn-danger { background: var(--uk-danger); border-color: var(--uk-danger); color: #fff; } .uk-btn-danger:hover { filter: brightness(.94); } .uk-btn-info { background: var(--uk-info); border-color: var(--uk-info); color: #fff; } .uk-btn-light { background: var(--uk-surface-2); border-color: var(--uk-border); color: var(--uk-ink-soft); } .uk-btn-light:hover { background: #F0F3F0; } .uk-btn-secondary { background: var(--uk-secondary-bg); border-color: var(--uk-border); color: var(--uk-ink-soft); } .uk-btn-white { background: #fff; border-color: var(--uk-border); color: var(--uk-ink); } .uk-btn-outline-primary { background: transparent; border-color: var(--uk-deep); color: var(--uk-deep); } .uk-btn-outline-primary:hover { background: var(--uk-deep-soft); } .uk-btn-outline-secondary { background: transparent; border-color: var(--uk-border-2); color: var(--uk-ink-soft); } .uk-btn-outline-secondary:hover { background: var(--uk-surface-2); } .uk-btn-outline-success { background: transparent; border-color: var(--uk-success); color: var(--uk-success); } .uk-btn-outline-success:hover { background: var(--uk-success-bg); } .uk-btn-outline-danger { background: transparent; border-color: var(--uk-danger); color: var(--uk-danger); } .uk-btn-outline-danger:hover { background: var(--uk-danger-bg); } .uk-btn-outline-warning { background: transparent; border-color: var(--uk-warning); color: var(--uk-warning-ink); } .uk-btn-outline-info { background: transparent; border-color: var(--uk-info); color: var(--uk-info); } .uk-btn-link { background: transparent; border: none; color: var(--uk-deep); padding: 0; font-weight: 600; } .uk-btn-link:hover { text-decoration: underline; } .uk-btn-group { display: inline-flex; } .uk-btn-group > .uk-btn { border-radius: 0; margin-left: -1px; } .uk-btn-group > .uk-btn:first-child { border-top-left-radius: var(--uk-radius-sm); border-bottom-left-radius: var(--uk-radius-sm); margin-left: 0; } .uk-btn-group > .uk-btn:last-child { border-top-right-radius: var(--uk-radius-sm); border-bottom-right-radius: var(--uk-radius-sm); } /* ================================== Badges ================================= */ .uk-badge { display: inline-flex; align-items: center; gap: .3em; font-size: .72rem; font-weight: 700; padding: .28em .6em; border-radius: 999px; line-height: 1.4; border: 1px solid transparent; } .uk-badge-primary { background: var(--uk-deep-soft); color: var(--uk-deep); } .uk-badge-success { background: var(--uk-success-bg); color: var(--uk-success-ink); } .uk-badge-warning { background: var(--uk-warning-bg); color: var(--uk-warning-ink); } .uk-badge-danger { background: var(--uk-danger-bg); color: var(--uk-danger-ink); } .uk-badge-info { background: var(--uk-info-bg); color: var(--uk-info-ink); } .uk-badge-secondary { background: var(--uk-secondary-bg); color: var(--uk-ink-soft); } .uk-badge-gold { background: var(--uk-gold-soft); color: #6b551a; } .uk-badge-light { background: var(--uk-surface-2); color: var(--uk-muted); border-color: var(--uk-border); } .uk-badge-dark { background: var(--uk-ink); color: #fff; } .uk-badge-solid-primary { background: var(--uk-deep); color: #fff; } .uk-badge-solid-success { background: var(--uk-success); color: #fff; } .uk-badge-solid-warning { background: var(--uk-warning); color: #fff; } .uk-badge-solid-danger { background: var(--uk-danger); color: #fff; } .uk-badge-solid-info { background: var(--uk-info); color: #fff; } .uk-badge-solid-secondary { background: var(--uk-secondary); color: #fff; } /* ============================ Procurement step pills ========================= */ .proc-step, a.proc-step { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: .7813rem; line-height: 1; color: var(--uk-ink-soft); background: var(--uk-surface-2); border: 1px solid var(--uk-border); text-decoration: none; transition: background .15s, border-color .15s; } a.proc-step:hover { background: #fff; border-color: var(--proc-step-clr); color: var(--uk-ink); } .proc-step-static { opacity: .6; cursor: default; } .proc-step-num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; border-radius: 50%; font-size: .6563rem; font-weight: 700; background: var(--proc-step-clr); color: #fff; } .proc-step-count { background: #fff; border: 1px solid var(--uk-border); border-radius: 999px; padding: 0 6px; font-size: .6875rem; font-weight: 600; color: var(--uk-muted); } .proc-step-active { background: var(--proc-step-clr); border-color: var(--proc-step-clr); color: #fff; font-weight: 600; } .proc-step-active .proc-step-num { background: #fff; color: var(--proc-step-clr); } .proc-step-active .proc-step-count { background: rgba(255,255,255,.9); color: var(--proc-step-clr); } .proc-step-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--proc-step-clr); } .proc-step-active .proc-step-dot { background: #fff; } /* =============================== Panels / cards ============================= */ .uk-panel { background: var(--uk-surface); border: 1px solid var(--uk-border); border-radius: var(--uk-radius); box-shadow: var(--uk-shadow-sm); } .uk-panel-flat { border: none; box-shadow: none; } .uk-panel-hairline { border: 1px solid var(--uk-border); box-shadow: none; } .uk-panel-header { padding: .85rem 1.1rem; border-bottom: 1px solid var(--uk-border); font-weight: 700; font-family: var(--uk-font-display); background: var(--uk-surface-2); border-radius: var(--uk-radius) var(--uk-radius) 0 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .uk-panel-header-brand { background: var(--uk-deep); color: #fff; border-color: var(--uk-deep); } .uk-panel-body { padding: 1.1rem; } .uk-panel-body-tight { padding: .6rem; } .uk-panel-footer { padding: .75rem 1.1rem; border-top: 1px solid var(--uk-border); background: var(--uk-surface-2); border-radius: 0 0 var(--uk-radius) var(--uk-radius); } .uk-panel-accent-left { border-left: 3px solid var(--uk-deep); } /* Soft tinted backgrounds -- same soft tone as the badges/alerts, for stat tiles and highlight panels */ .uk-bg-light { background: var(--uk-surface-2) !important; } .uk-bg-primary-soft { background: var(--uk-deep-soft) !important; } .uk-bg-success-soft { background: var(--uk-success-bg) !important; } .uk-bg-warning-soft { background: var(--uk-warning-bg) !important; } .uk-bg-danger-soft { background: var(--uk-danger-bg) !important; } .uk-bg-info-soft { background: var(--uk-info-bg) !important; } .uk-bg-secondary-soft { background: var(--uk-secondary-bg) !important; } /* ================================== Tables ================================== */ .uk-table-wrap { overflow-x: auto; } .uk-table { width: 100%; border-collapse: collapse; font-size: .875rem; } .uk-table th, .uk-table td { padding: .6rem .75rem; vertical-align: middle; border-bottom: 1px solid var(--uk-border); text-align: left; } .uk-table thead th { background: var(--uk-deep); color: #fff; font-family: var(--uk-font-display); font-weight: 600; font-size: .78rem; letter-spacing: .01em; border-bottom: none; white-space: nowrap; } .uk-table-light thead th { background: var(--uk-surface-2); color: var(--uk-ink-soft); } .uk-table-sm th, .uk-table-sm td { padding: .38rem .55rem; } .uk-table-hover tbody tr { transition: background-color .1s; } .uk-table-hover tbody tr:hover { background: var(--uk-deep-soft); } .uk-table-bordered th, .uk-table-bordered td { border: 1px solid var(--uk-border); } .uk-table-borderless th, .uk-table-borderless td { border-bottom: none; } .uk-table tbody tr:last-child td { border-bottom: none; } .uk-row-success td, tr.uk-row-success { background: var(--uk-success-bg); } .uk-row-warning td, tr.uk-row-warning { background: var(--uk-warning-bg); } .uk-row-danger td, tr.uk-row-danger { background: var(--uk-danger-bg); } .uk-row-info td, tr.uk-row-info { background: var(--uk-info-bg); } .uk-row-secondary td, tr.uk-row-secondary { background: var(--uk-secondary-bg); } /* =================================== Forms =================================== */ .uk-label { display: block; font-size: .8rem; font-weight: 600; color: var(--uk-ink-soft); margin-bottom: .3rem; } .uk-input, .uk-select, .uk-textarea { width: 100%; padding: .5rem .7rem; font-size: .875rem; color: var(--uk-ink); background: #fff; border: 1px solid var(--uk-border-2); border-radius: var(--uk-radius-sm); transition: border-color .15s, box-shadow .15s; } .uk-input:focus, .uk-select:focus, .uk-textarea:focus { outline: none; border-color: var(--uk-deep); box-shadow: 0 0 0 3px var(--uk-deep-soft); } .uk-input-sm, .uk-select-sm { padding: .3rem .55rem; font-size: .8rem; } .uk-input:disabled, .uk-select:disabled { background: var(--uk-surface-2); color: var(--uk-muted); } .uk-input-group { display: flex; align-items: stretch; } .uk-input-group > .uk-input, .uk-input-group > .uk-select { border-radius: 0; } .uk-input-group > *:first-child { border-top-left-radius: var(--uk-radius-sm); border-bottom-left-radius: var(--uk-radius-sm); } .uk-input-group > *:last-child { border-top-right-radius: var(--uk-radius-sm); border-bottom-right-radius: var(--uk-radius-sm); } .uk-input-group-text { display: flex; align-items: center; padding: 0 .65rem; background: var(--uk-surface-2); border: 1px solid var(--uk-border-2); border-right: none; color: var(--uk-muted); font-size: .82rem; } .uk-form-check { display: flex; align-items: center; gap: .5rem; } .uk-form-check input[type="checkbox"], .uk-form-check input[type="radio"] { width: 1.05rem; height: 1.05rem; accent-color: var(--uk-deep); } /* ================================= Nav tabs ================================== */ .uk-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--uk-border); flex-wrap: wrap; } .uk-tab { padding: .55rem 1rem; font-weight: 600; font-size: .85rem; color: var(--uk-muted); border: 1px solid transparent; border-bottom: none; border-radius: var(--uk-radius-sm) var(--uk-radius-sm) 0 0; cursor: pointer; text-decoration: none; margin-bottom: -1px; background: none; } .uk-tab:hover { color: var(--uk-deep); background: var(--uk-deep-soft); } .uk-tab.uk-active, .uk-tab[aria-selected="true"] { color: var(--uk-deep); background: var(--uk-surface); border-color: var(--uk-border); border-bottom-color: var(--uk-surface); } .uk-tab-panel { display: none; } .uk-tab-panel.uk-active { display: block; } /* =================================== Alerts =================================== */ .uk-alert { padding: .75rem 1rem; border-radius: var(--uk-radius-sm); border: 1px solid transparent; font-size: .875rem; display: flex; align-items: flex-start; gap: .6rem; } .uk-alert-success { background: var(--uk-success-bg); border-color: rgba(30,138,91,.25); color: var(--uk-success-ink); } .uk-alert-warning { background: var(--uk-warning-bg); border-color: rgba(184,121,30,.25); color: var(--uk-warning-ink); } .uk-alert-danger { background: var(--uk-danger-bg); border-color: rgba(193,67,63,.25); color: var(--uk-danger-ink); } .uk-alert-info { background: var(--uk-info-bg); border-color: rgba(44,111,160,.25); color: var(--uk-info-ink); } .uk-alert-dismiss { margin-left: auto; background: none; border: none; cursor: pointer; opacity: .6; font-size: 1.1rem; line-height: 1; } .uk-alert-dismiss:hover { opacity: 1; } /* =================================== Spinner =================================== */ .uk-spinner { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: .18rem solid var(--uk-border-2); border-top-color: var(--uk-deep); animation: uk-spin .6s linear infinite; display: inline-block; } @keyframes uk-spin { to { transform: rotate(360deg); } } /* =================================== Toast =================================== */ .uk-toast-stack { position: fixed; top: 1rem; right: 1rem; z-index: 1200; display: flex; flex-direction: column; gap: .5rem; } .uk-toast { background: var(--uk-ink); color: #fff; padding: .65rem 1rem; border-radius: var(--uk-radius-sm); box-shadow: var(--uk-shadow-lg); font-size: .85rem; display: flex; align-items: center; gap: .6rem; transform: translateY(-8px); opacity: 0; transition: transform .2s, opacity .2s; } .uk-toast.uk-show { transform: translateY(0); opacity: 1; } .uk-toast-success { background: var(--uk-success-ink); } .uk-toast-danger { background: var(--uk-danger-ink); } /* =================================== Modal =================================== */ .uk-modal-backdrop { position: fixed; inset: 0; background: rgba(10,24,18,.55); z-index: 1050; opacity: 0; transition: opacity .15s; pointer-events: none; } .uk-modal-backdrop.uk-show { opacity: 1; pointer-events: auto; } .uk-modal { position: fixed; inset: 0; z-index: 1055; display: none; overflow-y: auto; padding: 2.5rem 1rem; } .uk-modal.uk-show { display: block; } .uk-modal-dialog { max-width: 560px; margin: 0 auto; background: var(--uk-surface); border-radius: var(--uk-radius-lg); box-shadow: var(--uk-shadow-lg); transform: translateY(-16px) scale(.98); opacity: 0; transition: transform .18s ease-out, opacity .18s ease-out; } .uk-modal.uk-show .uk-modal-dialog { transform: translateY(0) scale(1); opacity: 1; } .uk-modal-dialog-sm { max-width: 340px; } .uk-modal-dialog-lg { max-width: 860px; } .uk-modal-dialog-xl { max-width: 1140px; } /* Bootstrap's modal-dialog-scrollable pins header/footer and scrolls only the body; .uk-modal itself already scrolls the whole dialog, which is fine for short content but drags header/footer off-screen on a long one. */ .uk-modal-dialog-scrollable { display: flex; flex-direction: column; max-height: calc(100vh - 5rem); } .uk-modal-dialog-scrollable .uk-modal-body { overflow-y: auto; } .uk-modal-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--uk-border); display: flex; align-items: center; gap: .75rem; } .uk-modal-title { font-family: var(--uk-font-display); font-weight: 700; font-size: 1.05rem; margin: 0; } .uk-modal-close { margin-left: auto; background: none; border: none; font-size: 1.3rem; line-height: 1; color: var(--uk-muted); cursor: pointer; } .uk-modal-close:hover { color: var(--uk-ink); } .uk-modal-body { padding: 1.25rem; } .uk-modal-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--uk-border); display: flex; justify-content: flex-end; gap: .5rem; } body.uk-modal-open { overflow: hidden; } /* ================================== Collapse =================================== */ .uk-collapse { height: 0; overflow: hidden; transition: height .2s ease; } .uk-collapse.uk-show { height: auto; } .uk-collapsing { overflow: hidden; transition: height .2s ease; } .uk-collapse-toggle .uk-chev { transition: transform .15s; } .uk-collapse-toggle[aria-expanded="true"] .uk-chev { transform: rotate(90deg); } /* A