/* components.css is now loaded explicitly via hooks.py app_include_css + web_include_css with the ?v={mtime} cache buster. The previous @import url('components.css') was unversioned and combined with nginx max-age=31536000 on /assets/, pinned a stale components.css in browsers for up to 1 year after any .eh-* atom change. */ /* ── Cairo (self-hosted variable font) ── 3 woff2 files in public/fonts/cairo/ cover Arabic + Latin + Latin Ext. Unicode-range tells the browser to only fetch the subset(s) it needs. font-weight: 300 800 declares the variable axis range, so a single file serves every weight instead of one per weight. font-display: swap renders fallback text immediately, then swaps when Cairo loads — avoids invisible-text flash. NOTE (cache-busting): these woff2 URLs intentionally carry NO ?v= buster — a url() inside a static CSS file can't take the dynamic version hooks.py computes. The fonts are effectively immutable; if a Cairo file is ever re-subsetted/replaced, RENAME it (e.g. cairo-arabic-v2.woff2) so the URL changes — otherwise nginx max-age + Cloudflare serve the old glyphs for up to a year. Same caveat applies to the icon paths inside manifest.json. */ @font-face { font-family: 'Cairo'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/assets/maktab_bouholaigah/fonts/cairo/cairo-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: 'Cairo'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/assets/maktab_bouholaigah/fonts/cairo/cairo-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: 'Cairo'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/assets/maktab_bouholaigah/fonts/cairo/cairo-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; } /* FIX 12 (FIX_PLAN.md item 12): LTR-isolate embedded record IDs so they don't pollute Arabic sentence flow. The bidi algorithm otherwise drags surrounding punctuation/dashes into the wrong run when codes like FB-2026-00302, LEASE-00002, MTX-26-00040 appear mid-AR-sentence in activity feeds, detail panels, and admin activity. - direction: ltr keeps the digits + dashes in left-to-right order. - unicode-bidi: isolate makes the bidi algorithm treat the code as an atomic LTR run (won't bleed into neighbouring AR text). - display: inline-block prevents the wrapper from breaking lines awkwardly mid-word in justify scenarios. Use via maktab.ltr_code(name) in JS or maktab.api.utils.ltr_code(name) in Python wherever a record ID is rendered inline with prose copy. */ .ltr-code { direction: ltr; unicode-bidi: isolate; display: inline-block; } /* ── Version-update banner (replaces Frappe core's version-update msgprint) ── Fixed at the top of the viewport, above desk chrome + dialogs. Built on the .mkt-banner atom; injected by maktab._show_version_banner(). */ .maktab-version-banner { position: fixed; top: 0; inset-inline: 0; z-index: 1090; padding: var(--s-3); display: flex; justify-content: center; pointer-events: none; } .maktab-version-banner .mkt-banner { pointer-events: auto; max-width: 640px; width: 100%; align-items: center; box-shadow: var(--shadow-overlay); } .maktab-version-banner .mkt-banner__body { font-weight: 600; } .maktab-version-banner__x { appearance: none; background: transparent; border: none; font-size: 20px; line-height: 1; color: var(--ink-muted); cursor: pointer; padding: 0 4px; flex-shrink: 0; } .maktab-version-banner__x:hover { color: var(--ink); } /* ── Entity-class chrome (FIX 5 — religious-legal classification) ── Drives row + pill chrome on E1 (entity-ledger), E2 (reconciliation-report), E3 (thilth-report), C5 (expenses-list). CLAUDE.md flags entity-boundary confusion (Family heir misreading Khums as Thilth) as a P0 failure mode. Tokens defined in the :root block below; classes auto-flip in dark mode via the underlying --success/--info/--warn/--ink-muted tokens. API: maktab.entity_class(name) → 'charitable'|'passthrough'|'personal'|'operational' maktab.entity_pill(name) → '...' */ /* The .entity-row row-stripe rule was reduced to bare padding in the 2026-06-01 side-stripe purge and fully retired 2026-06-03 when its last emitter (reconciliation_report) moved to the inline .recon-ent chip. Nothing emits the .entity-row class anymore. */ /* Outer banner-stripe variant — for single-entity reports (E3 Thilth) where per-row chrome is meaningless. Apply to the report wrapper. */ .entity-banner { border-top: 4px solid transparent; padding-top: var(--s-3); } .entity-banner-charitable { border-top-color: var(--entity-charitable); } .entity-banner-passthrough { border-top-color: var(--entity-passthrough); } .entity-banner-personal { border-top-color: var(--entity-personal); } .entity-banner-operational { border-top-color: var(--entity-operational); } /* Brand-text column — wraps Arabic wordmark + sandbox tag vertically. Parent .brand is flex-row; .brand-text is flex-column so the tag sits on its own line below the wordmark without crowding it. */ .maktab-sidebar .brand .brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; } /* Sandbox tag — only renders when hostname starts with "sandbox". Visual cue to never confuse it for prod. */ .maktab-sidebar .brand .sandbox-tag { font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.5; margin-top: 2px; line-height: 1; } /* Inline pill — small badge next to a company name. Hidden 2026-05-21 per Ahmad — the .entity-row-* / .mkt-pg-head color spine carries the same information; the verbal class label next to every company was noise. The class survives in DOM (rendered by ~5 callers + maktab.entity_pill helper) so tooling that reads it still works. To re-enable, change display back to inline-block. */ .entity-pill { display: none; padding: 2px 9px; border-radius: var(--r-pill); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em; line-height: 1.4; border: 1px solid transparent; vertical-align: middle; white-space: nowrap; } .entity-pill-charitable { background: var(--entity-charitable-bg); color: var(--entity-charitable); border-color: var(--entity-charitable); } .entity-pill-passthrough { background: var(--entity-passthrough-bg); color: var(--entity-passthrough); border-color: var(--entity-passthrough); } .entity-pill-personal { background: var(--entity-personal-bg); color: var(--warn-text); border-color: var(--entity-personal); } .entity-pill-operational { background: var(--entity-operational-bg); color: var(--ink); border-color: var(--entity-operational); } /* Screen-reader-only utility (WCAG standard) — visually hides content while keeping it available to assistive tech */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ── Page loading placeholder (palm tree logo) ── */ .maktab-page-loading { display: flex; align-items: center; justify-content: center; min-height: 60vh; opacity: 0.5; } .maktab-page-loading img { width: 48px; height: 48px; animation: maktab-pulse 1.8s ease-in-out infinite; } @keyframes maktab-pulse { 0%, 100% { opacity: 0.3; transform: scale(0.95); } 50% { opacity: 0.6; transform: scale(1); } } /* * Maktab Bouholaigah — Hasawi Palm Tree Palette * * Straw: #D4C5A0 (light backgrounds, cards) * Beige: #F5F0E6 (page background) * Sand: #C2AD7E (borders, subtle accents) * Brown: #6B4F36 (headings, primary text) * Dark Brown: #4A3728 (navbar, strong accents) * Palm Green: #5E7D5E (success, positive indicators) * Leaf Green: #7A9E7A (secondary green) * Sky Blue: #8FB8D4 (links, info accents) * Light Blue: #D4E6F1 (info backgrounds) * Cream: #FAF8F2 (card backgrounds) * Red/Warm: #C0735E (warnings, alerts — earthy terracotta) * Orange: #D4A05A (caution — amber/date color) */ /* ── CSS Custom Properties ── */ :root { /* Legacy --maktab-* palette — bridged to v2 tokens (Phase RS Pass A). Light + dark values come from the v2 :root + [data-theme="dark"] blocks below, so dark mode auto-flips without duplicate overrides. */ --maktab-beige: var(--beige); --maktab-cream: var(--cream); --maktab-straw: var(--straw); --maktab-sand: var(--sand); --maktab-brown: var(--brown); --maktab-dark-brown: var(--brown-deep); --maktab-green: var(--success); --maktab-leaf: #7A9E7A; --maktab-sky: #8FB8D4; --maktab-sky-hover: #6A9BBF; /* Link color — warm brand brown, NOT blue. The historical mapping to var(--info) ("sky-link" in the handoff) leaked Frappe-style blue anchors into every list/detail/panel surface (FB-2026-00222/227/228). Pointing to var(--brown) auto-flips for dark mode via the [data-theme] block above (--brown becomes #C2AD7E sand in dark). All consumers of --maktab-link (.rc-link, .lv-phone, .lv-map-link, .fb-attach-btn, .lv-invoice-link, .ul-tenant-link, plain ) now render brand-warm. */ --maktab-link: var(--brown); --maktab-light-blue: #D4E6F1; --maktab-terracotta: var(--crit); --maktab-amber: var(--warn); --maktab-white: #FFFFFF; --maktab-text: var(--ink); --maktab-text-muted: var(--ink-muted); --maktab-border: var(--border); --maktab-radius: var(--r-sq); --maktab-shadow: none; --maktab-shadow-hover: none; /* Bridges for page-specific CSS that was authored before the v2 token system landed. Without these, var(--maktab-card-bg, #fff) etc. falls back to the hardcoded Tailwind-style hex, fighting the foundation. */ --maktab-card-bg: var(--cream); --maktab-bg: var(--beige); --maktab-surface: var(--cream); --maktab-dark-bg: var(--brown-night); --maktab-border-light: var(--border-soft); --maktab-red: var(--crit); --maktab-orange: var(--warn); --maktab-amber-dark: var(--sand-deep); --maktab-blue: var(--info); --maktab-sky-blue: var(--info); /* Frappe core variables — bridged to v2 tokens. */ --bg-color: var(--beige); --fg-color: var(--cream); --text-color: var(--ink); --text-muted: var(--ink-muted); --border-color: var(--border); --card-bg: var(--cream); --subtle-fg: var(--straw); --control-bg: #FFFFFF; } /* ── v2 Redesign Tokens — LIVE-ONLY REMAINDER ── The canonical token definitions (palette, status, basil, entity, type, spacing, radii, motion) ship verbatim via `public/css/tokens.css`, loaded FIRST in the cascade per hooks.py app_include_css. This block holds only tokens NOT defined by the mockup — keeping the mockup as the single source of truth eliminates the drift cycle. */ :root { /* Warm-amber text on light warn surfaces. Not in mockup tokens.css. */ --warn-text: #8B6914; /* Square radius for filter pills (toggleable, paper-tab feel) — live-only. --r-sm/md/lg/pill come from mockup tokens.css. */ --r-sq: 2px; /* Latin caption helper tracking — live-only. */ --caption-tracking: 0.08em; --caption-tracking-loose: 0.12em; } /* v2 dark mode — LIVE-ONLY REMAINDER Surface, basil, ink, border tokens ship verbatim via tokens.css. This block holds only the dark-mode overrides for the warn-text helper that the mockup doesn't define. Status colors (--success/--info/--warn/ --crit/--overdue) intentionally NOT redefined here — they stay at their light values per mockup canonical (the mockup designer chose to keep status colors warm in dark, not saturate them). */ [data-theme="dark"] { /* warn-text deepens in dark so it stays legible on --warn-bg. */ --warn-text: #E5BB7A; } /* Latin caption helper — small uppercase, letter-spaced. Use .caption (0.08em tracking) by default, .caption--loose (0.12em) for status pills + section heads. See README §2.8 caption matrix. */ .caption { font-family: var(--font-en); font-size: var(--text-xs); letter-spacing: var(--caption-tracking); text-transform: uppercase; font-weight: 500; color: var(--ink-muted); } .caption--loose { letter-spacing: var(--caption-tracking-loose); } /* The Expiry Center v2-component block (.expiry-dashboard .btn/.pill/ .f-pill/.stat/.lv-table + sticky + days-cell + dark overrides) was removed 2026-06-03 — expiry now ships public/css/expiry_dashboard.css (.exp-* div-grid; .mkt-pill status pills; tone-corrected buckets). */ /* ── Global Typography ── Cairo single-family for both Arabic and Latin (set in --font-ar/en/num). font-feature-settings: "tnum" enables tabular figures so all numerals share the same advance width — financial tables align vertically. "lnum" forces lining (uppercase-height) figures over old-style. */ body, .frappe-control, .page-container, .modal-dialog, .body-sidebar, .frappe-list, input, select, textarea, button, .btn, .alert, .badge { font-family: var(--font-ar) !important; font-feature-settings: "tnum" 1, "lnum" 1; } /* ── Color Scheme ── */ :root { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } /* Splash screen handled at end of file — see @media prefers-color-scheme */ /* ── Page Background ── html bg controls overscroll bounce color on iOS Safari. Set both a raw fallback AND the variable for dark mode. */ html { /* Raw color, NOT the CSS variable. The variable gets temporarily overridden to dark by prefers-color-scheme:dark media query before Frappe sets data-theme, which makes Safari cache a dark overscroll. */ background-color: #F5F0E6 !important; overscroll-behavior-x: none !important; } /* When modal is open, darken html/body to match the overlay tint. Prevents solid beige showing behind iOS address bar. */ html:has(body.modal-open) { background-color: #C2BCB3 !important; transition: background-color 0.25s ease !important; } html[data-theme="dark"] { background-color: #18130D !important; } html[data-theme="dark"]:has(body.modal-open) { background-color: #0F0C09 !important; } body { background-color: var(--maktab-beige) !important; color: var(--maktab-text) !important; overflow-x: hidden !important; overscroll-behavior-x: none !important; } /* FB-2026-00210: only apply the body bg transition AFTER the initial page paint has settled. Frappe's desk.html ships with `data-theme="light"` even when the user has dark mode preferred via our localStorage flag, so the IIFE in maktab.js flips data-theme→dark slightly after first paint. With an unconditional `transition: background-color 0.25s` the body then animates light→dark over 250ms, while the sidebar/splash with hard-set dark backgrounds snap instantly — which the user sees as a "darker block" behind the palm tree. Gating the transition on `.maktab-theme-ready` (added at first rAF) makes the initial flip instantaneous, while subsequent toggle clicks still animate smoothly. */ html.maktab-theme-ready body { transition: background-color 0.25s ease !important; } /* Language-switch overlay. Toggle handler injects a fixed-position palm-tree loading splash that covers everything before reload. Frappe shows its own .splash with our palm during boot (see maktab.fix_splash), so the palm stays visible across the reload boundary — to the user it looks like the page is loading, not blanking out. Pointer-events locked so a stray double-click can't fire two reloads. */ .maktab-lang-overlay { position: fixed !important; inset: 0 !important; z-index: 999999 !important; background: var(--maktab-beige) !important; display: flex !important; align-items: center !important; justify-content: center !important; pointer-events: all !important; opacity: 0; transition: opacity 0.15s ease; } .maktab-lang-overlay.is-shown { opacity: 1; } .maktab-lang-overlay img { width: 64px; height: 64px; animation: maktab-pulse 1.8s ease-in-out infinite; } [data-theme="dark"] .maktab-lang-overlay { background: var(--maktab-beige) !important; } body.modal-open { background-color: #C2BCB3 !important; } [data-theme="dark"] body.modal-open { background-color: #0F0C09 !important; } /* Scroll lock when slide panel is open (iOS needs position:fixed) */ body.maktab-panel-open { position: fixed !important; width: 100% !important; overflow: hidden !important; } /* FB-2026-00177/180: scroll lock when the sidebar drawer is open. Two earlier attempts both broke things: - `html { overflow: hidden }` reset document.scrollingElement.scrollTop on WebKit (visible scroll-jump-to-top on open). - `body { position: fixed; top: -scrollY }` preserved position but the unpin at close-time forced a layout reflow that iOS used to skip the drawer's transform animation paint frames (drawer "just disappears"). Body-only overflow:hidden + touch-action:none preserves scrollY without shifting the body, so the close transition can paint cleanly. */ body.maktab-modal-scroll-lock { overflow: hidden !important; touch-action: none !important; overscroll-behavior: none !important; } /* Scroll-lock for the .pd-overlay dialog family (openEditDialog / openConfirmDialog / the payment dialog). Refcounted in edit-pattern.js (installModalBehaviors) so stacked overlays — the discard-guard, a nested confirm — don't unlock the page while a parent dialog is still open. Kept separate from maktab-modal-scroll-lock so it never fights the bs.modal lifecycle's add/remove of that class during the dialog migration. position:fixed (NOT just overflow:hidden) is what stops iOS Safari from scrolling the whole page up when the soft keyboard opens over a field in a bottom-sheet: overflow:hidden blocks finger-scroll but NOT the keyboard's auto-scroll-into-view, so the page (and the fixed dialog) slid up. Pinning at top:-scrollY (set inline by _pdLock) leaves nothing for iOS to scroll. Same pattern the slide-over detail panel uses (maktab-panel-open). On desktop scrollY is 0 (the scroll surface is .main-section), so top:0 = no shift. touch-action/overscroll-behavior keep the iOS rubber-band off. */ body.maktab-pd-scroll-lock { position: fixed !important; width: 100% !important; overflow: hidden !important; touch-action: none !important; overscroll-behavior: none !important; } /* ── Dark Mode — Palm garden at dusk ── Bridged --maktab-* and Frappe core tokens auto-flip via the v2 dark block above. Only non-bridgeable legacy tokens (--maktab-leaf, --maktab-sky, --maktab-sky-hover, --maktab-light-blue, --maktab-white, --maktab-shadow*) plus --control-bg need explicit dark values here. */ [data-theme="dark"] { --maktab-leaf: #8FB88F; --maktab-sky: #9AC4E0; --maktab-sky-hover: #B0D4F0; --maktab-light-blue: #1A2A3A; --maktab-white: var(--ink); --maktab-shadow: none; --maktab-shadow-hover: none; /* Frappe control bg — slightly lighter than card bg for input contrast */ --control-bg: #2E2820; } /* ── Detail slide panel ── */ /* Grey backdrop — separate element, sits behind the panel. Element is created/destroyed in JS so iOS Safari fully repaints when it's removed from the DOM (CSS-only hides leave painted pixels in the address bar area on iOS). */ .maktab-detail-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; /* Warm-brown wash, matches dialog backdrop. Pass E retoken: was a beige tint (rgba(237,229,212,0.55)); now matches the brown-deep semantic. */ background: rgba(74, 55, 40, 0.32); z-index: 1049; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .maktab-detail-backdrop.open { opacity: 1; pointer-events: auto; } [data-theme="dark"] .maktab-detail-backdrop { background: rgba(0, 0, 0, 0.45); } .maktab-detail-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 92vw); /* Pass E: --cream (cards) instead of --beige (page) so the panel reads as a lifted surface, not a continuation of the page. Phase A shadow purge: depth conveyed by border-inline-start + the page scrim, no box-shadow. */ background: var(--cream); z-index: 1050; border-inline-start: 1px solid var(--border); transform: translateX(100%); transition: transform 0.2s ease; display: flex; flex-direction: column; overflow: hidden; } .maktab-detail-panel.open { transform: translateX(0); } /* FB-2026-00183: Arabic / RTL — slide in from the visual LEFT edge so the panel matches reading direction. Anchor flips, slide-out vector flips with it (-100% instead of +100%). */ [dir="rtl"] .maktab-detail-panel { right: auto; left: 0; transform: translateX(-100%); } [dir="rtl"] .maktab-detail-panel.open { transform: translateX(0); } /* FB-2026-00196: on mobile, narrow the panel so the page behind shows ~80px strip — comfortable thumb-tap area to dismiss. Desktop max (480px) is unchanged. At 393px viewport → 314px panel (79px visible); at 768px → 614px capped to 480. */ @media (max-width: 768px) { .maktab-detail-panel { width: min(480px, 80vw); } } .maktab-detail-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--maktab-border); flex-shrink: 0; } .maktab-detail-title { font-size: 16px; font-weight: 600; color: var(--maktab-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .maktab-detail-back { background: none; border: none; font-size: 22px; color: var(--maktab-text-muted); cursor: pointer; padding: 0 8px 0 0; line-height: 1; flex-shrink: 0; } .maktab-detail-back:hover { color: var(--maktab-text); } .maktab-detail-close { background: none; border: none; font-size: 24px; color: var(--maktab-text-muted); cursor: pointer; padding: 0 4px; line-height: 1; flex-shrink: 0; margin-inline-start: 12px; } .maktab-detail-close:hover { color: var(--maktab-text); } .maktab-detail-body { flex: 1; overflow-y: auto; /* FB-2026-00216: belt-and-suspenders — even if some descendant has a long unbroken token, the panel itself never grows a horizontal scrollbar. Specific overflow defenses on .fb-panel-ua handle the actual wrap; this is the safety net. */ overflow-x: hidden; padding: 16px 20px 40px; } @media (max-width: 768px) { .maktab-detail-body { padding: 16px 12px 40px; } } /* Reuse lv-card styles in the panel */ .maktab-detail-body .lv-card { padding: 16px; border-bottom: 1px solid var(--maktab-border); } [data-theme="dark"] .maktab-detail-panel { /* Use --maktab-cream (slightly lighter than body) so the panel edge stays visible against the dark page background. Thin left border for definition; the backdrop overlay provides the rest of the separation. No shadow per project convention. */ background: var(--maktab-cream); border-inline-start: 1px solid var(--maktab-border); } [data-theme="dark"] .maktab-detail-title { color: var(--maktab-text); } /* ── Navbar ── */ .navbar { background-color: var(--maktab-dark-brown) !important; border-bottom: 3px solid var(--maktab-sand) !important; box-shadow: none !important; } .navbar .navbar-brand, .navbar .nav-link, .navbar .navbar-nav .nav-link, .navbar .navbar-brand img + span, .navbar .dropdown-toggle { color: var(--maktab-straw) !important; } .navbar .nav-link:hover, .navbar .dropdown-toggle:hover { color: var(--maktab-white) !important; } .navbar .navbar-brand { font-weight: 700 !important; font-size: 1.1rem !important; letter-spacing: 0.5px; } /* ── Page Head / Titles ── */ .page-head, .page-head .page-title .title-text { color: var(--maktab-text) !important; } .page-head { background-color: var(--maktab-cream) !important; border-bottom: 1px solid var(--maktab-border) !important; } .section-head { color: var(--maktab-brown) !important; font-weight: 600 !important; font-size: 1.05rem !important; border-bottom: 2px solid var(--maktab-sand) !important; padding-bottom: 8px !important; margin-bottom: 16px !important; margin-top: 24px !important; } /* ── Cards (reusable component) ── */ .maktab-card, .frappe-card, .widget.widget-shadow, .wasi-dashboard-container .card, .thilth-report .col-md-2 > div, .family-overview .card { background: var(--maktab-cream) !important; border: 1px solid var(--maktab-border) !important; border-radius: var(--maktab-radius) !important; box-shadow: var(--maktab-shadow) !important; transition: box-shadow 0.2s ease, transform 0.2s ease; } .maktab-card:hover, .widget.widget-shadow:hover, .wasi-dashboard-container .card:hover, .thilth-report .col-md-2 > div:hover { box-shadow: var(--maktab-shadow-hover) !important; transform: translateY(-1px); } .wasi-dashboard-container .card h5 { color: var(--maktab-text) !important; font-weight: 600; } /* ── Buttons ── */ .btn-primary, .btn-primary-dark { background-color: var(--maktab-brown) !important; border-color: var(--maktab-brown) !important; color: var(--maktab-white) !important; border-radius: var(--r-md) !important; font-weight: 600 !important; transition: all 0.2s ease; } .btn-primary:hover, .btn-primary-dark:hover { background-color: var(--maktab-dark-brown) !important; border-color: var(--maktab-dark-brown) !important; transform: translateY(-1px); box-shadow: var(--maktab-shadow) !important; } .btn-secondary, .btn-default { background-color: var(--maktab-cream) !important; border-color: var(--maktab-sand) !important; color: var(--maktab-brown) !important; border-radius: var(--r-md) !important; font-weight: 500 !important; } .btn-secondary:hover, .btn-default:hover { background-color: var(--maktab-straw) !important; border-color: var(--maktab-brown) !important; } /* ── Links ── Plain rule wins by cascade order over Frappe's a{color:$text-color}; no !important needed. Color comes from --maktab-link (now warm brown — see token definition for context). Hover deepens one shade and underlines — no blue anywhere in the link state machine. */ a { color: var(--maktab-link); } a:hover { color: var(--brown-deep); text-decoration: underline; } [data-theme="dark"] a:hover { /* Dark-mode --brown-deep is near-black sidebar bg; use --brown (sand) instead. */ color: var(--sand); } /* Defensive: kill any Frappe-injected link-color/text-blue tokens at body scope so legacy widgets we haven't retoken'd don't suddenly render Frappe-blue. Bridged to --maktab-link so dark-mode flip cascades automatically. */ body { --link-color: var(--maktab-link); --text-blue: var(--maktab-link); } /* Keep button text colors correct */ .btn-primary a, .btn a { color: inherit !important; } /* ── Tables ── */ .table, .frappe-list .list-row, .report-wrapper .dt-scrollable table { background-color: var(--maktab-cream) !important; } .table th { background-color: var(--maktab-straw) !important; color: var(--maktab-text) !important; font-weight: 600 !important; border-bottom: 2px solid var(--maktab-sand) !important; } .table td { border-color: var(--maktab-border) !important; color: var(--maktab-text) !important; } .table-bordered { border-color: var(--maktab-border) !important; } .table tr:hover td { background-color: rgba(212, 197, 160, 0.15) !important; } /* ── List View ── */ .frappe-list .list-row { border-bottom: 1px solid var(--maktab-border) !important; } .frappe-list .list-row:hover { background-color: rgba(212, 197, 160, 0.1) !important; } .frappe-list .list-row-head { background-color: var(--maktab-straw) !important; } /* ── Form View ── */ .form-section, .section-body { border-color: var(--maktab-border) !important; } .frappe-control .control-label, .form-group label { color: var(--maktab-brown) !important; font-weight: 500 !important; } .form-control, .frappe-control input, .frappe-control select, .frappe-control textarea { border-color: var(--maktab-sand) !important; border-radius: var(--r-md) !important; background-color: var(--maktab-white) !important; } .form-control:focus, .frappe-control input:focus, .frappe-control select:focus, .frappe-control textarea:focus { border-color: var(--maktab-link) !important; box-shadow: none !important; } /* ── Alerts ── */ .alert-warning { background-color: rgba(212, 160, 90, 0.12) !important; border: 1px solid var(--maktab-amber) !important; color: var(--text-on-orange) !important; border-radius: var(--r-md) !important; } .alert-danger, .alert-error { background-color: rgba(192, 115, 94, 0.12) !important; border: 1px solid var(--maktab-terracotta) !important; color: var(--text-on-red) !important; border-radius: var(--r-md) !important; } .alert-success { background-color: rgba(94, 125, 94, 0.12) !important; border: 1px solid var(--maktab-green) !important; color: var(--text-on-green) !important; border-radius: var(--r-md) !important; } .alert-info { background-color: rgba(143, 184, 212, 0.12) !important; border: 1px solid var(--maktab-sky) !important; color: var(--text-on-blue) !important; border-radius: var(--r-md) !important; } /* ── Indicator Pills ── */ /* Light mode: tinted backgrounds with dark text */ :root, [data-theme="light"] { --bg-green: rgba(94, 125, 94, 0.15); --text-on-green: #3A5A3A; --bg-orange: rgba(184, 134, 11, 0.15); --text-on-orange: #8B6508; --bg-red: rgba(192, 115, 94, 0.15); --text-on-red: #7A3B2A; --bg-blue: rgba(74, 127, 160, 0.15); --text-on-blue: #2D6080; --bg-grey: rgba(140, 122, 107, 0.18); --text-on-grey: #5A4A3C; --bg-gray: rgba(140, 122, 107, 0.18); --text-on-gray: #5A4A3C; --bg-cyan: rgba(91, 158, 166, 0.15); --text-on-cyan: #3A7A82; --bg-pink: rgba(176, 122, 138, 0.15); --text-on-pink: #7A4A5A; --bg-yellow: rgba(184, 150, 11, 0.15); --text-on-yellow: #8B7208; --bg-purple: rgba(122, 107, 158, 0.15); --text-on-purple: #4A3D6A; --bg-darkgrey: rgba(107, 94, 82, 0.18); --text-on-darkgrey: #4A3D32; --bg-light-blue: rgba(106, 155, 191, 0.15); --text-on-light-blue: #3A6A8A; } /* Dark mode: brighter tints on dark background */ [data-theme="dark"] { --bg-green: rgba(107, 143, 107, 0.25); --text-on-green: #8FB88F; --bg-orange: rgba(224, 176, 106, 0.2); --text-on-orange: #E0B06A; --bg-red: rgba(212, 138, 116, 0.2); --text-on-red: #D48A74; --bg-blue: rgba(154, 196, 224, 0.2); --text-on-blue: #9AC4E0; --bg-grey: rgba(154, 138, 122, 0.2); --text-on-grey: #B0A090; --bg-gray: rgba(154, 138, 122, 0.2); --text-on-gray: #B0A090; --bg-cyan: rgba(107, 170, 178, 0.2); --text-on-cyan: #8FC8D0; --bg-pink: rgba(188, 138, 154, 0.2); --text-on-pink: #C8A0B0; --bg-yellow: rgba(196, 162, 26, 0.2); --text-on-yellow: #E0C860; --bg-purple: rgba(138, 122, 170, 0.2); --text-on-purple: #B0A0D0; --bg-darkgrey: rgba(122, 110, 96, 0.2); --text-on-darkgrey: #A09080; --bg-light-blue: rgba(122, 168, 204, 0.2); --text-on-light-blue: #9AC4E0; } .indicator-pill, .indicator-pill-right { font-weight: 700 !important; font-size: 0.72rem !important; padding: 3px 10px !important; border-radius: var(--r-lg) !important; line-height: 1.4 !important; white-space: nowrap !important; border: none !important; box-shadow: none !important; outline: none !important; height: auto !important; } /* Hide the colored dot before pill text */ .indicator-pill::before, .indicator-pill-right::after { display: none !important; content: none !important; } /* Inner spans inherit pill color */ .indicator-pill span, .indicator-pill .ellipsis { color: inherit !important; background: transparent !important; } /* Fix white rectangle: .level-right has white background by default */ .frappe-list .level-right { background: transparent !important; } /* Hide activity items that create artifacts at end of rows on mobile */ .list-row-activity { display: none !important; } /* ── Hide Frappe workspace chrome on custom pages ── Frappe injects a workspace-container above our page content, pushing it ~600px below the fold. Hide it on maktab. */ .page-container[data-page-container="maktab"] .workspace-container, .page-container[data-page-container="maktab"] .codex-editor, body[data-route="maktab"] .workspace-container, body[data-route="maktab"] .codex-editor { display: none !important; } .badge-success { background-color: var(--bg-green) !important; color: var(--text-on-green) !important; } .badge-danger { background-color: var(--bg-red) !important; color: var(--text-on-red) !important; } .badge-warning { background-color: var(--bg-orange) !important; color: var(--text-on-orange) !important; } .badge-info { background-color: var(--bg-blue) !important; color: var(--text-on-blue) !important; } /* ── Mobile navbar ── */ @media (max-width: 768px) { /* On mobile, the page-head already has the hamburger menu, title, search, and action buttons. The separate navbar is redundant and wastes vertical space. Hide it. */ .navbar { display: none !important; } } /* Hide Frappe's sidebar-toggle burger at every viewport. Our sidebar (v4) is decoupled from Frappe — `