/* ============================================================
MIZAN DESIGN SYSTEM — Ledgera theme
Graphite / Cobalt / Soft White + Tulips Gold (10% accent)
"Gold identifies the brand; cobalt identifies actions."
============================================================ */
:root {
/* Brand palette */
--gold: #B79A4B; /* Tulips Gold — logo, premium moments, max 10% of working screens */
--gold-soft: #D4B978; /* hover / highlight */
--gold-pale: #F4ECDA; /* tinted backgrounds, gold chips */
--graphite: #1D2226; /* primary text, dark surfaces, headers */
--graphite-2: #2A3036; /* slightly lifted dark */
--graphite-3: #3A4148; /* tertiary dark */
--soft-white: #F6F7F5; /* app background */
--cobalt: #3157D5; /* PRIMARY ACTION — buttons, links, focus, selected nav */
--cobalt-soft: #4D72E0; /* hover */
--cobalt-deep: #1F3FA8; /* pressed */
--cobalt-pale: #E6ECFB; /* selected surfaces, hover backgrounds */
--cool-gray: #DCE1E5; /* borders, dividers, disabled surfaces */
--gray-100: #F6F7F5; /* soft white */
--gray-150: #EDEEF0; /* subtle bg */
--gray-200: #E3E7EC; /* default card border */
--gray-300: #C9D3E0; /* hover card border */
--gray-400: #9AA4B2; /* muted text */
--gray-500: #6B7689; /* secondary text */
--gray-600: #4A5567; /* primary text in light surfaces */
--gray-700: #2A3036; /* near-headings */
--gray-900: #1D2226; /* = graphite */
--white: #FFFFFF;
/* Status */
--success: #1F9D68;
--success-pale:#E5F4EC;
--warning: #C88216;
--warning-pale:#FBEFD9;
--critical: #D64545;
--critical-pale:#FBE5E5;
/* Semantic */
--text: var(--gray-900);
--text-soft: var(--gray-500);
--text-muted: var(--gray-400);
--border: var(--gray-200);
--border-soft: var(--gray-150);
/* Elevation */
--shadow-1: 0 1px 2px rgba(29,34,38,.05), 0 2px 8px rgba(29,34,38,.05);
--shadow-2: 0 4px 12px rgba(29,34,38,.08), 0 2px 6px rgba(29,34,38,.04);
--shadow-3: 0 12px 32px rgba(29,34,38,.12), 0 4px 12px rgba(29,34,38,.06);
--shadow-modal: 0 20px 60px rgba(29,34,38,.18);
/* Radius */
--r-1: 4px;
--r-2: 6px;
--r-3: 10px; /* default card radius */
--r-4: 14px;
--r-pill: 100px;
/* Spacing — 8pt scale */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
/* Layout */
--nav-w: 240px;
--nav-w-collapsed: 72px;
--topbar-h: 72px;
--topbar-h-mobile: 56px;
--content-pad: 32px;
/* Type */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
--font-display: 'DM Sans', var(--font-sans);
--font-arabic: 'Tajawal', 'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
/* Motion */
--easing-standard: cubic-bezier(.2,0,0,1);
--duration-fast: 120ms;
--duration-normal: 200ms;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
font-family: var(--font-sans);
background: var(--soft-white);
color: var(--text);
line-height: 1.55;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'tnum' 1, 'cv11' 1;
}
.ar { font-family: var(--font-arabic); }
/* Arabic word inside Latin lockup — keep inline LTR, only flip direction when entire block is RTL */
[dir="rtl"] .ar,
.ar-block { font-family: var(--font-arabic); direction: rtl; unicode-bidi: isolate; }
.mono, code, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tabular { font-variant-numeric: tabular-nums; }
a { color: var(--cobalt); text-decoration: none; }
a:hover { color: var(--cobalt-deep); text-decoration: underline; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: 14px; }
input:focus, select:focus, textarea:focus, button:focus-visible {
outline: 2px solid var(--cobalt);
outline-offset: 2px;
}
hr { border: none; border-top: 1px solid var(--border-soft); margin: var(--space-4) 0; }
/* ============================================================
ATOMS — Buttons, Badges, Inputs, Tables
============================================================ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: 36px; padding: 0 14px;
border-radius: var(--r-2);
font-size: 13px; font-weight: 600;
transition: all var(--duration-fast) var(--easing-standard);
border: 1px solid transparent;
white-space: nowrap;
user-select: none;
}
.btn-lg { height: 44px; padding: 0 22px; font-size: 14px; border-radius: var(--r-3); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn-icon { width: 36px; padding: 0; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
/* Primary = cobalt (operational action), NOT gold */
.btn-primary { background: var(--cobalt); color: var(--white); }
.btn-primary:hover:not(:disabled) { background: var(--cobalt-soft); }
.btn-primary:active:not(:disabled) { background: var(--cobalt-deep); }
/* Secondary / ghost */
.btn-secondary, .btn-ghost {
background: var(--white); color: var(--graphite);
border-color: var(--border);
}
.btn-secondary:hover:not(:disabled), .btn-ghost:hover:not(:disabled) {
border-color: var(--gray-300); background: var(--gray-150);
}
/* Tertiary (text-only with hover) */
.btn-tertiary { background: transparent; color: var(--cobalt); }
.btn-tertiary:hover:not(:disabled) { background: var(--cobalt-pale); }
/* Brand gold — RESERVED for premium moments, NOT for primary CTAs */
.btn-gold { background: var(--gold); color: var(--graphite); }
.btn-gold:hover:not(:disabled) { background: var(--gold-soft); }
.btn-dark { background: var(--graphite); color: var(--white); }
.btn-dark:hover:not(:disabled) { background: var(--graphite-2); }
/* Destructive / status */
.btn-danger { background: var(--critical); color: var(--white); }
.btn-danger:hover:not(:disabled) { background: #B83A3A; }
.btn-success { background: var(--success); color: var(--white); }
.btn-warning { background: var(--warning); color: var(--white); }
/* Chips & Badges — TEXT + ICON + COLOR (never color-only) */
.chip, .badge {
display: inline-flex; align-items: center; gap: 4px;
height: 22px; padding: 0 9px;
border-radius: var(--r-pill);
font-size: 11px; font-weight: 600;
line-height: 1;
white-space: nowrap;
}
.chip-lg { height: 26px; padding: 0 12px; font-size: 12px; }
.chip-success, .badge-success { background: var(--success-pale); color: #14633F; }
.chip-warning, .badge-warning { background: var(--warning-pale); color: #8E5B0F; }
.chip-danger, .badge-danger { background: var(--critical-pale); color: #8B2929; }
.chip-info, .badge-info { background: var(--cobalt-pale); color: var(--cobalt-deep); }
.chip-neutral, .badge-ghost { background: var(--gray-150); color: var(--gray-600); border: 1px solid var(--border); }
.chip-gold, .badge-gold { background: var(--gold-pale); color: #6B5212; }
.chip-dark, .badge-ink { background: var(--graphite); color: var(--white); }
.chip .dot, .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; }
/* Inputs */
.input, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="search"], select, textarea {
width: 100%;
height: 36px;
padding: 0 12px;
border: 1px solid var(--border);
border-radius: var(--r-2);
background: var(--white);
color: var(--text);
font-size: 14px;
transition: border-color var(--duration-fast) var(--easing-standard);
}
textarea { height: auto; min-height: 80px; padding: 8px 12px; }
.input:focus, input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--cobalt);
box-shadow: 0 0 0 3px rgba(49,87,213,0.12);
}
.input-lg, input.lg { height: 44px; font-size: 15px; }
label, .label {
display: block;
font-size: 12px; font-weight: 600;
color: var(--gray-600);
margin-bottom: 6px;
letter-spacing: 0.01em;
}
.label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.label-row .label { margin-bottom: 0; }
.hint { font-size: 12px; color: var(--text-soft); margin-top: 4px; }
.required::after { content: ' *'; color: var(--critical); }
/* Form rows */
.form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--space-4); }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-4); }
@media (max-width: 640px) {
.form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
}
/* ============================================================
DATA TABLE
============================================================ */
.table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 13px;
}
.table thead th {
position: sticky; top: 0;
background: var(--gray-150);
color: var(--gray-600);
text-align: left;
font-weight: 600;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 10px 12px;
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.table tbody td {
padding: 10px 12px;
border-bottom: 1px solid var(--border-soft);
color: var(--gray-700);
vertical-align: middle;
}
.table tbody tr:hover { background: var(--cobalt-pale); }
.table tbody tr:last-child td { border-bottom: none; }
.table .num, .table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .neg { color: var(--critical); }
.table .pos { color: var(--success); }
.table .parens { color: var(--critical); } /* (1,250.00) for negative */
.table .compact tbody td, .table .compact thead th { padding: 6px 10px; }
/* ============================================================
LAYOUT — Sidebar + Topbar + Content
============================================================ */
.app-shell {
display: grid;
grid-template-columns: var(--nav-w) 1fr;
grid-template-rows: var(--topbar-h) 1fr;
grid-template-areas:
"sidebar topbar"
"sidebar main";
min-height: 100vh;
background: var(--soft-white);
}
.app-shell.collapsed { grid-template-columns: var(--nav-w-collapsed) 1fr; }
/* Sidebar */
.sidebar {
grid-area: sidebar;
background: var(--graphite);
color: var(--white);
padding: 16px 12px;
border-right: 1px solid var(--graphite-2);
overflow-y: auto;
}
.sidebar-brand {
display: flex; align-items: center; gap: 10px;
padding: 8px 8px 20px;
}
.sidebar-brand .mark {
width: 36px; height: 36px;
background: var(--graphite-2);
border: 1px solid var(--graphite-3);
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
color: var(--gold);
font-family: var(--font-display);
font-weight: 700; font-size: 18px;
position: relative;
}
.sidebar-brand .mark::after {
content: ''; position: absolute; right: 4px; top: 4px;
width: 6px; height: 6px;
background: var(--gold);
border-radius: 0 2px 2px 0;
transform: rotate(45deg);
}
.sidebar-brand .name { display: flex; flex-direction: column; line-height: 1.15; }
.sidebar-brand .name .en { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--white); letter-spacing: 0.01em; }
.sidebar-brand .name .ar { font-family: var(--font-arabic); font-size: 12px; color: var(--gold); font-weight: 500; }
.sidebar-section {
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--gray-400);
padding: 16px 12px 6px;
}
.sidebar-item {
display: flex; align-items: center; gap: 12px;
padding: 8px 12px;
border-radius: var(--r-2);
font-size: 13px; font-weight: 500;
color: var(--gray-200);
cursor: pointer;
transition: all var(--duration-fast) var(--easing-standard);
margin-bottom: 2px;
}
.sidebar-item:hover { background: var(--graphite-2); color: var(--white); }
.sidebar-item.active {
background: var(--cobalt);
color: var(--white);
}
.sidebar-item .icon { width: 18px; text-align: center; font-size: 14px; }
.sidebar-item .badge-num {
margin-left: auto;
background: var(--gold);
color: var(--graphite);
font-size: 10px; font-weight: 700;
height: 18px; min-width: 18px; padding: 0 6px;
border-radius: 9px;
display: flex; align-items: center; justify-content: center;
}
.sidebar-divider { height: 1px; background: var(--graphite-2); margin: 12px 8px; }
.sidebar.collapsed .sidebar-section,
.sidebar.collapsed .sidebar-item span:not(.icon):not(.badge-num):not(.caret) { display: none; }
.sidebar.collapsed .sidebar-brand .name { display: none; }
.sidebar.collapsed .sidebar-item { justify-content: center; padding: 10px; }
/* V20.8.8: Sub-menus (collapsible groups) */
.sidebar-group-header { font-weight: 600; }
.sidebar-group-header .caret {
margin-left: auto;
font-size: 11px;
opacity: 0.7;
transition: transform var(--duration-fast) var(--easing-standard);
}
.sidebar-group.expanded .sidebar-group-header .caret { transform: rotate(0deg); }
.sidebar-group:not(.expanded) .sidebar-group-header .caret { transform: rotate(0deg); }
.sidebar-subitems {
display: none;
margin-left: 16px;
border-left: 1px solid var(--graphite-2);
padding-left: 8px;
margin-bottom: 4px;
}
.sidebar-group.expanded .sidebar-subitems { display: block; }
.sidebar-subitem {
font-size: 12.5px;
padding: 6px 10px;
background: transparent !important;
display: flex;
align-items: center;
gap: 8px;
}
.sidebar-subitem:hover { background: var(--graphite-2) !important; }
.sidebar-subitem.active {
background: var(--cobalt-pale) !important;
color: var(--cobalt-deep) !important;
border-left: 2px solid var(--cobalt);
padding-left: 8px;
}
.sidebar.collapsed .sidebar-subitems { display: none; }
/* V20.8.8: Bilingual EN/AR labels in sidebar */
.sidebar-item .lbl-en { display: inline; }
.sidebar-item .lbl-ar {
display: inline;
font-size: 11px;
color: var(--text-muted, #9aa3ad);
margin-left: 6px;
font-family: "Segoe UI", "Tahoma", sans-serif;
direction: rtl;
}
.sidebar-item .lbl-ar:empty { display: none; }
/* Topbar */
.topbar {
grid-area: topbar;
background: var(--white);
border-bottom: 1px solid var(--border-soft);
display: flex; align-items: center; gap: 12px;
padding: 0 var(--space-6);
position: sticky; top: 0; z-index: 50;
}
.topbar-toggle {
width: 36px; height: 36px;
border-radius: var(--r-2);
display: flex; align-items: center; justify-content: center;
color: var(--gray-600);
}
.topbar-toggle:hover { background: var(--gray-150); color: var(--graphite); }
.topbar-title {
display: flex; flex-direction: column; line-height: 1.2;
}
.topbar-title .page { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--graphite); }
.topbar-title .crumb { font-size: 12px; color: var(--text-soft); }
.topbar-period {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
background: var(--soft-white);
border: 1px solid var(--border);
border-radius: var(--r-2);
font-size: 12px; color: var(--gray-600);
}
.topbar-search {
flex: 1; max-width: 360px;
position: relative;
}
.topbar-search input {
height: 36px;
padding-left: 36px;
background: var(--soft-white);
border-color: transparent;
border-radius: var(--r-2);
}
.topbar-search::before {
content: '⌕'; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
color: var(--gray-400); font-size: 16px;
}
.topbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.topbar-icon-btn {
width: 36px; height: 36px;
border-radius: var(--r-2);
display: flex; align-items: center; justify-content: center;
color: var(--gray-600);
position: relative;
}
.topbar-icon-btn:hover { background: var(--gray-150); color: var(--graphite); }
.topbar-icon-btn .dot {
position: absolute; top: 8px; right: 8px;
width: 8px; height: 8px;
background: var(--critical);
border-radius: 50%;
border: 2px solid var(--white);
}
.topbar-user {
display: flex; align-items: center; gap: 8px;
padding: 4px 12px 4px 4px;
border-radius: var(--r-pill);
cursor: pointer;
font-size: 13px;
}
.topbar-user:hover { background: var(--gray-150); }
.topbar-user .avatar {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--cobalt);
color: var(--white);
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700;
}
.topbar-user .name { font-weight: 600; color: var(--graphite); }
.topbar-user .role { font-size: 11px; color: var(--text-soft); }
/* Main content */
.main {
grid-area: main;
padding: var(--content-pad);
max-width: 1600px;
width: 100%;
}
.main-header {
display: flex; justify-content: space-between; align-items: flex-end;
margin-bottom: var(--space-6);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--border-soft);
gap: var(--space-4);
flex-wrap: wrap;
}
.main-header h1 {
font-family: var(--font-display);
font-size: 28px; font-weight: 600; line-height: 1.2;
color: var(--graphite);
letter-spacing: -0.01em;
}
.main-header .sub { color: var(--text-soft); font-size: 14px; margin-top: 4px; }
.main-header .actions { display: flex; gap: 8px; }
/* Period filter — pill row used on the home dashboard to scope KPIs to
a month / quarter / year / custom date range. */
.period-filter {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
margin: 16px 0 24px;
padding: 10px 12px;
background: var(--white);
border: 1px solid var(--border-soft);
border-radius: var(--r-2);
box-shadow: var(--shadow-1);
}
.period-filter-label {
font-size: 12px; font-weight: 600; color: var(--text-soft);
text-transform: uppercase; letter-spacing: 0.04em;
margin-right: 4px;
}
.period-pill {
background: transparent; color: var(--graphite);
border: 1px solid var(--border);
border-radius: 999px;
padding: 6px 14px;
font-size: 13px; font-weight: 500;
cursor: pointer;
transition: all var(--duration-fast) var(--easing-standard);
}
.period-pill:hover {
background: var(--cobalt-pale);
border-color: var(--cobalt);
color: var(--cobalt-deep);
}
.period-pill.active {
background: var(--cobalt);
color: var(--white);
border-color: var(--cobalt);
box-shadow: 0 2px 4px rgba(49, 87, 213, 0.25);
}
.period-filter-range {
margin-left: auto;
font-size: 12px; color: var(--text-soft);
padding: 4px 10px;
background: var(--gold-pale);
border-radius: 4px;
font-weight: 600;
color: var(--graphite);
}
/* ============================================================
ODOO-INSPIRED DASHBOARD — status cards, sparklines, quick tiles
Light-first, graphite text, cobalt/gold accent rules
============================================================ */
/* Favorites chip buttons (Favorites / Accounting Dashboard / Search row) */
.chip-btn {
display: inline-flex; align-items: center; gap: 6px;
background: var(--white);
border: 1px solid var(--border);
color: var(--graphite);
border-radius: 999px;
padding: 6px 12px;
font-size: 12px; font-weight: 600;
cursor: pointer;
transition: all var(--duration-fast) var(--easing-standard);
white-space: nowrap;
}
.chip-btn:hover {
background: var(--cobalt-pale);
border-color: var(--cobalt);
color: var(--cobalt-deep);
}
.chip-btn.active,
.chip-btn.is-active {
background: var(--cobalt);
border-color: var(--cobalt);
color: var(--white);
}
.chip-btn .chip-x { opacity: 0.6; margin-left: 2px; }
.chip-btn .chip-x:hover { opacity: 1; }
/* Status card grid (Odoo Accounting Dashboard tiles) */
.status-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
margin-bottom: 16px;
}
.status-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.status-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.status-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
.status-grid.cols-2,
.status-grid.cols-3,
.status-grid.cols-4 { grid-template-columns: 1fr; }
}
/* Individual status card — clean white panel with a colored title */
.status-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: 10px;
padding: 18px 18px 14px;
display: flex; flex-direction: column;
min-height: 180px;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-1);
transition: box-shadow var(--duration-normal) var(--easing-standard),
transform var(--duration-normal) var(--easing-standard);
}
.status-card:hover {
box-shadow: var(--shadow-2);
transform: translateY(-1px);
}
/* Accent rule — colored top border by variant (cobalt = action, gold = brand) */
.status-card.status-cobalt { border-top: 3px solid var(--cobalt); }
.status-card.status-gold { border-top: 3px solid var(--gold); }
.status-card.status-green { border-top: 3px solid var(--success); }
.status-card.status-navy { border-top: 3px solid var(--graphite); }
.status-card.status-cobalt::before,
.status-card.status-gold::before,
.status-card.status-green::before,
.status-card.status-navy::before { content: none; }
.status-card-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 8px;
margin-bottom: 10px;
}
.status-card-title {
font-size: 15px; font-weight: 700;
color: var(--cobalt);
letter-spacing: 0.01em;
line-height: 1.2;
}
.status-card.status-gold .status-card-title { color: var(--gold); }
.status-card.status-green .status-card-title { color: var(--success); }
.status-card.status-navy .status-card-title { color: var(--graphite); }
.status-card-sub {
font-size: 12px; color: var(--text-soft);
margin-top: 2px;
line-height: 1.3;
}
.status-card-action {
background: var(--cobalt);
color: var(--white);
border: 0;
border-radius: 6px;
padding: 6px 14px;
font-size: 12px; font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background var(--duration-fast);
}
.status-card-action:hover { background: var(--cobalt-deep); }
.status-card.status-gold .status-card-action { background: var(--gold); }
.status-card.status-gold .status-card-action:hover { background: var(--gold-soft); color: var(--graphite); }
.status-card.status-navy .status-card-action { background: var(--graphite); }
.status-card.status-navy .status-card-action:hover { background: var(--graphite-2); }
.status-card.status-green .status-card-action { background: var(--success); }
.status-card-kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 8px 14px;
margin: 4px 0 8px;
flex: 1;
}
.status-kpi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.status-kpi-label {
font-size: 11px; color: var(--cobalt);
font-weight: 600; text-transform: none;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.status-card.status-gold .status-kpi-label { color: var(--gold); }
.status-card.status-navy .status-kpi-label { color: var(--graphite); }
.status-card.status-green .status-kpi-label { color: var(--success); }
.status-kpi-value {
font-size: 14px; font-weight: 700; color: var(--graphite);
font-feature-settings: 'tnum' 1;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.status-kpi.warn .status-kpi-value { color: var(--critical); }
.status-kpi-link {
font-size: 11px; color: var(--cobalt);
cursor: pointer; user-select: none;
font-weight: 600;
}
.status-kpi-link:hover { text-decoration: underline; }
.status-kpi.warn .status-kpi-link { color: var(--critical); }
.status-card-sparkline {
margin: 4px -8px -8px;
padding: 4px 0 0;
border-top: 1px dashed var(--border-soft);
}
.status-card-sparkline svg { display: block; }
/* Quick grid (Odoo-style favorites tile grid: 4x2 icons + label) */
.quick-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
padding: 4px;
}
@media (max-width: 700px) {
.quick-grid { grid-template-columns: repeat(2, 1fr); }
}
.quick-tile {
display: flex; flex-direction: column; align-items: center;
gap: 6px;
padding: 14px 8px;
background: var(--soft-white);
border: 1px solid var(--border-soft);
border-radius: 10px;
cursor: pointer;
transition: all var(--duration-fast) var(--easing-standard);
font-family: inherit;
color: var(--graphite);
}
.quick-tile:hover {
background: var(--white);
border-color: var(--cobalt);
transform: translateY(-2px);
box-shadow: var(--shadow-2);
}
.quick-icon {
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
background: var(--white);
border: 1px solid var(--border-soft);
border-radius: 10px;
font-size: 22px;
transition: all var(--duration-fast);
}
.quick-tile:hover .quick-icon {
background: var(--cobalt-pale);
border-color: var(--cobalt);
}
.quick-label {
font-size: 12px; font-weight: 600; color: var(--graphite);
text-align: center;
line-height: 1.2;
}
/* Page title (in SPA without sidebar layout) */
.page-title {
font-family: var(--font-display);
font-size: 28px; font-weight: 600; line-height: 1.2;
color: var(--graphite);
letter-spacing: -0.01em;
margin: 0 0 4px;
}
.page-sub { color: var(--text-soft); font-size: 14px; margin: 0 0 var(--space-5); }
/* Cards */
.card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--r-3);
box-shadow: var(--shadow-1);
}
.card:hover { box-shadow: var(--shadow-2); }
.card-pad { padding: 20px; }
.card-pad-lg { padding: 24px; }
.card-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--border-soft);
}
.card-header h3 { font-size: 14px; font-weight: 600; color: var(--graphite); }
.card-body { padding: 20px; }
.card-footer { padding: 12px 20px; border-top: 1px solid var(--border-soft); background: var(--soft-white); border-radius: 0 0 var(--r-3) var(--r-3); }
/* KPI Card */
.kpi {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--r-3);
padding: 20px;
box-shadow: var(--shadow-1);
position: relative;
overflow: hidden;
transition: all var(--duration-normal) var(--easing-standard);
}
.kpi:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.kpi .label { font-size: 12px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.kpi .value {
font-family: var(--font-display);
font-size: 32px; font-weight: 600; line-height: 1.1;
color: var(--graphite);
margin: 8px 0 6px;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.kpi .trend { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.kpi .trend.up { color: var(--success); }
.kpi .trend.down { color: var(--critical); }
.kpi .meta { font-size: 11px; color: var(--text-soft); margin-top: 4px; }
.kpi .accent {
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: var(--cobalt);
}
.kpi.gold .accent { background: var(--gold); }
.kpi.success .accent { background: var(--success); }
.kpi.warning .accent { background: var(--warning); }
.kpi.danger .accent { background: var(--critical); }
/* KPI grid */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi-grid-3 { grid-template-columns: repeat(3, 1fr); }
.kpi-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1024px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .kpi-grid, .kpi-grid-3, .kpi-grid-2 { grid-template-columns: 1fr; } }
/* Grids for content */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
@media (max-width: 1024px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.split-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-6); }
.split-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-6); }
.split-3-1 { display: grid; grid-template-columns: 3fr 1fr; gap: var(--space-6); }
@media (max-width: 1024px) { .split-2-1, .split-1-2, .split-3-1 { grid-template-columns: 1fr; } }
/* Drawer */
.drawer {
position: fixed; top: 0; right: 0; bottom: 0;
width: 480px; max-width: 90vw;
background: var(--white);
border-left: 1px solid var(--border);
box-shadow: var(--shadow-3);
z-index: 200;
display: flex; flex-direction: column;
transform: translateX(100%);
transition: transform var(--duration-normal) var(--easing-standard);
}
.drawer.open { transform: translateX(0); }
.drawer-header {
display: flex; justify-content: space-between; align-items: center;
padding: 16px 20px;
border-bottom: 1px solid var(--border-soft);
}
.drawer-header h3 { font-size: 16px; font-weight: 600; color: var(--graphite); }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px; }
.drawer-footer { padding: 12px 20px; border-top: 1px solid var(--border-soft); display: flex; justify-content: flex-end; gap: 8px; }
/* Modal */
.modal-backdrop {
position: fixed; inset: 0;
background: rgba(29,34,38,0.45);
display: none;
align-items: center; justify-content: center;
z-index: 300;
padding: 16px;
}
/* JS uses classList.add('active') to open, classList.remove('active') to close */
.modal-backdrop.active,
.modal-backdrop.open { display: flex; }
.modal {
background: var(--white);
border-radius: var(--r-4);
box-shadow: var(--shadow-modal);
max-width: 560px; width: 100%;
max-height: 90vh;
display: flex; flex-direction: column;
}
.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border-soft); }
.modal-header h3 { font-size: 16px; font-weight: 600; color: var(--graphite); }
.modal-body { padding: 20px; overflow-y: auto; }
.modal-footer { padding: 12px 20px; border-top: 1px solid var(--border-soft); display: flex; justify-content: flex-end; gap: 8px; }
/* Toast */
.toast-host { position: fixed; top: 20px; right: 20px; z-index: 500; display: flex; flex-direction: column; gap: 8px; }
.toast {
background: var(--white);
border: 1px solid var(--border);
border-left: 4px solid var(--cobalt);
border-radius: var(--r-3);
box-shadow: var(--shadow-2);
padding: 12px 16px;
min-width: 280px; max-width: 400px;
display: flex; gap: 10px; align-items: flex-start;
color: var(--graphite);
font-size: 13px;
line-height: 1.5;
opacity: 1 !important;
}
.toast .title { font-weight: 700; font-size: 13px; color: var(--graphite); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.toast .msg { color: var(--gray-700); font-size: 13px; }
.toast.success { border-left-color: var(--success); }
.toast.success .title { color: #14633F; }
.toast.warning { border-left-color: var(--warning); }
.toast.warning .title { color: #8E5B0F; }
.toast.danger, .toast.error { border-left-color: var(--critical); }
.toast.danger .title, .toast.error .title { color: #8B2929; }
.toast .icon { font-size: 18px; line-height: 1; }
.toast .body { flex: 1; font-size: 13px; color: var(--graphite); }
.toast .body strong { display: block; margin-bottom: 2px; }
/* Empty state */
.empty {
text-align: center;
padding: 48px 24px;
color: var(--text-soft);
}
.empty .icon { font-size: 40px; opacity: 0.4; margin-bottom: 12px; }
.empty h4 { font-size: 16px; font-weight: 600; color: var(--graphite); margin-bottom: 6px; }
.empty p { font-size: 13px; margin-bottom: 16px; }
/* ============================================================
LOGIN SCREEN
============================================================ */
.login-screen {
position: fixed; inset: 0;
display: grid; grid-template-columns: 1.1fr 1fr;
background: var(--soft-white);
overflow: hidden;
}
.login-brand {
background: linear-gradient(135deg, #14202A 0%, var(--graphite) 50%, #0E1418 100%);
padding: 60px;
display: flex; flex-direction: column; justify-content: center;
position: relative;
overflow: hidden;
color: var(--white);
}
.login-brand::before {
content: ''; position: absolute; inset: 0;
background-image: radial-gradient(circle at 20% 30%, rgba(183,154,75,0.10), transparent 50%),
radial-gradient(circle at 80% 70%, rgba(49,87,213,0.08), transparent 50%);
pointer-events: none;
}
.login-brand::after {
content: ''; position: absolute; inset: 0;
background-image:
linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px);
background-size: 32px 32px;
pointer-events: none;
}
.login-brand-content { position: relative; z-index: 1; max-width: 480px; }
.login-brand .mark {
width: 56px; height: 56px;
background: var(--graphite-2);
border: 1px solid var(--graphite-3);
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 32px;
position: relative;
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.login-brand .mark::after {
content: ''; position: absolute; right: 8px; top: 8px;
width: 8px; height: 8px;
background: var(--gold);
border-radius: 0 2px 2px 0;
transform: rotate(45deg);
}
.login-brand .mark svg { width: 32px; height: 32px; }
.login-brand .lockup { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.login-brand .lockup .name {
font-family: var(--font-display);
font-size: 44px; font-weight: 700;
color: var(--white);
letter-spacing: -0.02em;
}
.login-brand .lockup .name .ar {
font-family: var(--font-arabic);
font-size: 32px; font-weight: 500;
color: var(--gold);
margin-left: 8px;
display: inline-block;
}
.login-brand .endorsement {
font-size: 11px; font-weight: 600;
color: var(--gray-400);
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 32px;
}
.login-brand h1 {
font-family: var(--font-display);
font-size: 32px; font-weight: 600; line-height: 1.2;
letter-spacing: -0.01em;
color: var(--white);
margin-bottom: 16px;
}
.login-brand p.tagline {
font-size: 16px; color: rgba(255,255,255,0.7); line-height: 1.6;
margin-bottom: 40px;
}
.login-brand .features { list-style: none; }
.login-brand .features li {
display: flex; align-items: center; gap: 12px;
padding: 10px 0;
color: rgba(255,255,255,0.85);
font-size: 14px;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.login-brand .features li:last-child { border-bottom: none; }
.login-brand .features li::before {
content: '✓'; color: var(--gold);
font-weight: 700; font-size: 14px;
width: 20px; height: 20px;
background: rgba(183,154,75,0.15);
border-radius: 4px;
display: inline-flex; align-items: center; justify-content: center;
}
.login-form-wrap {
background: var(--white);
padding: 60px;
display: flex; flex-direction: column; justify-content: center;
}
.login-form-inner { max-width: 400px; width: 100%; margin: 0 auto; }
.login-form-inner .form-brand {
display: flex; align-items: center; gap: 10px;
margin-bottom: 40px;
}
.login-form-inner .form-brand .mark {
width: 36px; height: 36px;
background: var(--graphite);
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
color: var(--gold);
font-family: var(--font-display);
font-weight: 700; font-size: 18px;
position: relative;
overflow: hidden;
}
.login-form-inner .form-brand .mark svg { width: 22px; height: 22px; }
.login-form-inner .form-brand .name { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--graphite); }
.login-form-inner h2 {
font-family: var(--font-display);
font-size: 24px; font-weight: 600;
color: var(--graphite);
margin-bottom: 6px;
letter-spacing: -0.01em;
}
.login-form-inner .sub {
color: var(--text-soft);
font-size: 14px;
margin-bottom: 32px;
}
.login-form-inner .login-btn {
width: 100%;
height: 44px;
background: var(--cobalt);
color: var(--white);
border: none;
border-radius: var(--r-2);
font-size: 14px; font-weight: 600;
cursor: pointer;
margin-top: 8px;
transition: background var(--duration-fast) var(--easing-standard);
}
.login-form-inner .login-btn:hover { background: var(--cobalt-soft); }
.login-form-inner .login-btn:active { background: var(--cobalt-deep); }
.login-form-inner .hint {
margin-top: 24px; padding: 16px;
background: var(--cobalt-pale);
border-left: 3px solid var(--cobalt);
border-radius: var(--r-2);
font-size: 12px;
color: var(--cobalt-deep);
}
.login-form-inner .hint strong { color: var(--graphite); display: block; margin-bottom: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.login-form-inner .hint code {
background: var(--white);
padding: 2px 6px;
border-radius: 3px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--cobalt-deep);
}
.login-form-inner .links { display: flex; gap: 16px; margin-top: 20px; font-size: 12px; }
.login-form-inner .links a { color: var(--text-soft); }
.login-form-inner .links a:hover { color: var(--cobalt); }
@media (max-width: 900px) {
.login-screen { grid-template-columns: 1fr; }
.login-brand { display: none; }
.login-form-wrap { padding: 32px 20px; }
}
/* ============================================================
NAV BAR (legacy Mizan — kept for backward compat)
============================================================ */
.navbar {
position: sticky; top: 0; z-index: 100;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(16px) saturate(180%);
border-bottom: 1px solid var(--border-soft);
padding: 0;
}
.navbar-inner {
max-width: 100%;
margin: 0 auto; padding: 0 20px;
display: flex; align-items: center;
height: 56px; gap: 8px;
}
.navbar-brand {
display: flex; align-items: center; gap: 10px;
cursor: pointer; padding-right: 16px; margin-right: 8px;
border-right: 1px solid var(--border-soft);
}
.navbar-brand .brand-mark {
width: 32px; height: 32px;
background: var(--graphite);
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
color: var(--gold);
font-family: var(--font-display);
font-size: 16px; font-weight: 700;
box-shadow: var(--shadow-1);
position: relative;
}
.navbar-brand .brand-mark::after {
content: ''; position: absolute; right: 3px; top: 3px;
width: 5px; height: 5px;
background: var(--gold);
border-radius: 0 1px 1px 0;
transform: rotate(45deg);
}
.navbar-brand .name { display: flex; flex-direction: column; line-height: 1.1; }
.navbar-brand .name .en { font-size: 15px; font-weight: 700; color: var(--graphite); letter-spacing: -0.01em; }
.navbar-brand .name .ar { font-size: 12px; color: var(--gold); font-weight: 500; font-family: var(--font-arabic); }
.navbar-menu { display: flex; align-items: center; gap: 2px; flex: 1; }
.navbar-menu-item {
padding: 8px 12px;
border-radius: var(--r-2);
font-size: 13px; font-weight: 600; color: var(--text-soft);
cursor: pointer;
transition: all var(--duration-fast) var(--easing-standard);
display: flex; align-items: center; gap: 6px;
white-space: nowrap;
}
.navbar-menu-item:hover { background: var(--cobalt-pale); color: var(--cobalt); }
.navbar-menu-item.active { background: var(--cobalt); color: var(--white); }
.navbar-menu-item.primary { background: var(--cobalt); color: var(--white); }
.navbar-menu-item.primary:hover { background: var(--cobalt-soft); }
.navbar-menu-item .icon { font-size: 14px; }
.navbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.navbar-search { width: 200px; padding: 7px 12px; background: var(--soft-white); border: 1px solid var(--border); border-radius: var(--r-pill); font-size: 13px; color: var(--text); }
.navbar-search:focus { outline: none; border-color: var(--cobalt); background: var(--white); }
.navbar-user {
display: flex; align-items: center; gap: 8px;
padding: 4px 10px 4px 4px;
background: var(--soft-white);
border-radius: var(--r-pill); cursor: pointer;
font-size: 13px; color: var(--text);
}
.navbar-user .user-avatar {
width: 28px; height: 28px; border-radius: 50%;
background: var(--cobalt);
color: var(--white);
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700;
}
.navbar-actions { display: flex; gap: 4px; }
.navbar-link {
display: inline-flex; align-items: center; gap: 4px;
padding: 6px 10px;
font-size: 12px; color: var(--text-soft);
border-radius: var(--r-2);
border: 1px solid var(--border);
text-decoration: none;
}
.navbar-link:hover { color: var(--cobalt); border-color: var(--cobalt); }
.navbar-more { position: relative; }
.navbar-more-trigger { padding: 8px 12px; border-radius: var(--r-2); font-size: 13px; font-weight: 600; color: var(--text-soft); cursor: pointer; }
.navbar-more-trigger:hover { background: var(--cobalt-pale); color: var(--cobalt); }
.navbar-more-menu {
position: absolute; top: 100%; right: 0; margin-top: 4px;
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--r-3);
box-shadow: var(--shadow-2);
min-width: 240px;
padding: 8px;
display: none;
z-index: 110;
}
.navbar-more.open .navbar-more-menu { display: block; }
.navbar-more-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px;
border-radius: var(--r-2);
cursor: pointer; font-size: 13px; color: var(--text);
}
.navbar-more-item:hover { background: var(--cobalt-pale); color: var(--cobalt); }
.navbar-more-item .icon { width: 24px; font-size: 14px; text-align: center; }
.navbar-more-divider { height: 1px; background: var(--border-soft); margin: 6px 4px; }
.navbar-more-section { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); padding: 6px 12px 4px; letter-spacing: 0.08em; }
@media (max-width: 1024px) { .navbar-search { display: none; } }
@media (max-width: 768px) {
.navbar-inner { padding: 0 12px; gap: 4px; }
.navbar-menu-item { padding: 6px 8px; font-size: 12px; }
.navbar-menu-item .label { display: none; }
.navbar-link { display: none; }
}
/* ============================================================
UTILITIES
============================================================ */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }
.p-2 { padding: 8px; } .p-3 { padding: 12px; } .p-4 { padding: 16px; } .p-6 { padding: 24px; }
.text-xs { font-size: 11px; } .text-sm { font-size: 12px; } .text-md { font-size: 14px; } .text-lg { font-size: 16px; } .text-xl { font-size: 20px; } .text-2xl { font-size: 24px; } .text-3xl { font-size: 32px; }
.font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; }
.text-muted { color: var(--text-soft); }
.text-graphite { color: var(--graphite); }
.text-gold { color: var(--gold); }
.text-cobalt { color: var(--cobalt); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-critical, .text-danger { color: var(--critical); }
.text-center { text-align: center; } .text-right { text-align: right; }
.uppercase { text-transform: uppercase; letter-spacing: 0.04em; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Accounting value formatting */
.amount { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.amount.pos { color: var(--success); }
.amount.neg, .amount.parens { color: var(--critical); }
.currency { color: var(--text-soft); font-size: 0.85em; margin-right: 2px; }
/* Loading skeleton */
.skeleton {
background: linear-gradient(90deg, var(--gray-150) 25%, var(--gray-100) 50%, var(--gray-150) 75%);
background-size: 200% 100%;
animation: skel 1.4s linear infinite;
border-radius: var(--r-2);
}
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
/* RTL support */
[dir="rtl"] .sidebar { border-right: none; border-left: 1px solid var(--graphite-2); }
[dir="rtl"] .amount { text-align: left; }
[dir="rtl"] .topbar-search::before { left: auto; right: 12px; }
[dir="rtl"] .topbar-search input { padding-left: 12px; padding-right: 36px; }
/* Print */
@media print {
.sidebar, .topbar, .navbar, .btn { display: none !important; }
.main { padding: 0; max-width: 100%; }
.card { box-shadow: none; border: 1px solid var(--border); }
}
/* ============================================================
LEGACY STYLES — back-compat for existing render() functions
Most older renders use these class names. New screens use the
primary design system above. This block ensures nothing renders
invisible.
============================================================ */
/* Page header / breadcrumb */
.page-header { margin-bottom: var(--space-5); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-soft); }
.page-header h1, .page-header .page-title { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--graphite); margin: 0; }
.page-header .sub { color: var(--text-soft); font-size: 14px; margin-top: 4px; }
.breadcrumb { color: var(--text-soft); font-size: 13px; }
.breadcrumb a { color: var(--cobalt); cursor: pointer; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: var(--text-muted); margin: 0 6px; }
/* App grid + tiles (used by section landing pages) */
.app-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
}
.app-tile {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--r-3);
padding: 16px;
display: flex; flex-direction: column; gap: 8px;
cursor: pointer;
transition: all var(--duration-fast) var(--easing-standard);
text-align: left;
color: var(--graphite);
font-family: inherit;
}
.app-tile:hover { border-color: var(--cobalt); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.app-tile .icon-box {
width: 36px; height: 36px;
border-radius: var(--r-2);
display: flex; align-items: center; justify-content: center;
font-size: 20px;
background: var(--cobalt-pale);
color: var(--cobalt);
}
.app-tile .icon-box.bg-ar { background: var(--cobalt-pale); color: var(--cobalt); }
.app-tile .icon-box.bg-tax { background: var(--warning-pale); color: var(--warning); }
.app-tile .icon-box.bg-report { background: var(--success-pale); color: var(--success); }
.app-tile .icon-box.bg-gold { background: var(--gold-pale); color: #6B5212; }
.app-tile .name { font-size: 14px; font-weight: 600; color: var(--graphite); }
.app-tile .desc { font-size: 12px; color: var(--text-soft); }
/* Old data table alias */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--graphite); }
.data-table thead th { text-align: left; padding: 10px 12px; background: var(--gray-150); color: var(--gray-600); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); }
.data-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); color: var(--gray-700); }
.data-table tbody tr:hover { background: var(--cobalt-pale); }
/* Old badge alias */
.badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: 100px; font-size: 11px; font-weight: 600; background: var(--gray-150); color: var(--gray-600); border: 1px solid var(--border); }
.badge.badge-success { background: var(--success-pale); color: #14633F; border-color: transparent; }
.badge.badge-warning { background: var(--warning-pale); color: #8E5B0F; border-color: transparent; }
.badge.badge-danger { background: var(--critical-pale); color: #8B2929; border-color: transparent; }
.badge.badge-info { background: var(--cobalt-pale); color: var(--cobalt-deep); border-color: transparent; }
/* Old text utility aliases */
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-muted { color: var(--text-soft); }
.text-money { font-variant-numeric: tabular-nums; }
/* Old card aliases (some renders use .app-card) */
.app-card, .panel {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--r-3);
box-shadow: var(--shadow-1);
padding: 16px;
color: var(--graphite);
}
.app-card h3, .panel h3 { font-size: 14px; font-weight: 600; color: var(--graphite); margin: 0 0 12px; }
/* Form helpers used in legacy code */
.form-group { margin-bottom: 16px; color: var(--graphite); }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--gray-600); margin-bottom: 6px; }
.form-control, .form-input, .form-select {
width: 100%; height: 36px; padding: 0 12px;
background: var(--white); border: 1px solid var(--border); border-radius: var(--r-2);
font-size: 14px; color: var(--graphite); font-family: inherit;
}
.form-control:focus, .form-input:focus, .form-select:focus {
outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(49,87,213,0.12);
}
/* Default body text inside .content-area */
.content-area { display: flex; flex-direction: column; gap: var(--space-5); color: var(--graphite); }
/* Scan promo (used in Accounting landing) */
.scan-promo {
display: flex; align-items: center; gap: 16px;
padding: 20px 24px;
background: linear-gradient(135deg, #2A3B4A 0%, #1D2A38 100%);
color: var(--white);
border-radius: var(--r-3);
border: 1px solid var(--gold);
box-shadow: var(--shadow-1);
}
.scan-promo .icon { font-size: 32px; }
.scan-promo .title { font-size: 18px; font-weight: 600; color: var(--white); }
.scan-promo .desc { font-size: 13px; color: rgba(255,255,255,0.7); }
.scan-promo .actions { margin-left: auto; display: flex; gap: 8px; }
/* ============================================================
JOURNAL WORKSPACE — 8/4 split per Ledgera spec §8
Form + validation/activity panel + sticky totals bar
============================================================ */
.journal-workspace {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--space-5);
align-items: start;
}
@media (max-width: 1024px) { .journal-workspace { grid-template-columns: 1fr; } }
.journal-form { display: flex; flex-direction: column; gap: var(--space-4); }
.journal-side { display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: 88px; }
.journal-header {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--r-3);
padding: 20px;
box-shadow: var(--shadow-1);
}
.journal-header .grid-2col {
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px 16px;
}
@media (max-width: 768px) { .journal-header .grid-2col { grid-template-columns: 1fr; } }
.journal-header label { display: block; font-size: 11px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.journal-header input,
.journal-header select,
.journal-header textarea {
height: 36px; width: 100%; padding: 0 10px;
background: var(--white); color: var(--graphite);
border: 1px solid var(--border); border-radius: var(--r-2);
font-size: 14px; font-family: inherit;
}
.journal-header textarea { height: 60px; padding: 8px 10px; }
.journal-header .full { grid-column: 1 / -1; }
/* Journal lines table */
.journal-lines {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--r-3);
box-shadow: var(--shadow-1);
overflow: hidden;
}
.journal-lines .jl-header {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid var(--border-soft);
background: var(--soft-white);
}
.journal-lines .jl-header h3 { font-size: 14px; font-weight: 600; color: var(--graphite); margin: 0; }
.journal-lines table { width: 100%; border-collapse: collapse; }
.journal-lines thead th {
position: sticky; top: 0; z-index: 1;
background: var(--gray-150);
color: var(--gray-600);
text-align: left;
font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
padding: 10px 8px;
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.journal-lines tbody td { padding: 6px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.journal-lines tbody tr:hover { background: var(--cobalt-pale); }
.journal-lines .num { text-align: right; font-variant-numeric: tabular-nums; }
.journal-lines input.jline,
.journal-lines select.jline {
height: 32px; width: 100%;
background: var(--white); color: var(--graphite);
border: 1px solid transparent; border-radius: var(--r-2);
font-size: 13px; font-family: inherit; padding: 0 8px;
}
.journal-lines input.jline:hover,
.journal-lines select.jline:hover { border-color: var(--border); background: var(--soft-white); }
.journal-lines input.jline:focus,
.journal-lines select.jline:focus { border-color: var(--cobalt); background: var(--white); box-shadow: 0 0 0 3px rgba(49,87,213,0.12); }
.journal-lines input.jline.num { text-align: right; font-variant-numeric: tabular-nums; }
.journal-lines .jline-x {
width: 28px; height: 28px;
background: transparent; border: none; color: var(--text-muted);
border-radius: var(--r-2); cursor: pointer; font-size: 16px;
}
.journal-lines .jline-x:hover { background: var(--critical-pale); color: var(--critical); }
/* Sticky totals bar */
.journal-totals {
position: sticky; bottom: 0;
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--r-3);
box-shadow: var(--shadow-2);
padding: 12px 20px;
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
font-size: 14px;
z-index: 10;
}
.journal-totals .totals-pair { display: flex; gap: 24px; align-items: baseline; }
.journal-totals .totals-label { font-size: 11px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.journal-totals .totals-value { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--graphite); font-variant-numeric: tabular-nums; }
.journal-totals .totals-diff { font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.journal-totals .totals-diff.balanced { color: var(--success); }
.journal-totals .totals-diff.unbalanced { color: var(--critical); }
.journal-totals .totals-status { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; }
.journal-totals .totals-status.balanced { background: var(--success-pale); color: #14633F; }
.journal-totals .totals-status.unbalanced { background: var(--critical-pale); color: #8B2929; }
/* Side panel cards (validation + activity) */
.side-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--r-3);
box-shadow: var(--shadow-1);
overflow: hidden;
}
.side-card .side-card-header {
padding: 12px 16px;
border-bottom: 1px solid var(--border-soft);
background: var(--soft-white);
display: flex; align-items: center; justify-content: space-between;
}
.side-card .side-card-header h3 { font-size: 13px; font-weight: 600; color: var(--graphite); margin: 0; }
.side-card .side-card-body { padding: 16px; }
.check-list { display: flex; flex-direction: column; gap: 8px; }
.check-list .check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--gray-700); }
.check-list .check .icon { width: 18px; flex-shrink: 0; }
.check-list .check.pass .icon { color: var(--success); }
.check-list .check.fail .icon { color: var(--critical); }
.check-list .check.warn .icon { color: var(--warning); }
.activity-list { display: flex; flex-direction: column; gap: 10px; max-height: 280px; overflow-y: auto; }
.activity-item { display: flex; gap: 10px; font-size: 13px; }
.activity-item .when { font-size: 11px; color: var(--text-soft); white-space: nowrap; }
.activity-item .what { color: var(--gray-700); }
.activity-item .who { font-weight: 600; color: var(--graphite); }
/* Trial balance table */
.trial-balance-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-3); box-shadow: var(--shadow-1); overflow: hidden; }
.trial-balance-card .tb-header { padding: 16px 20px; border-bottom: 1px solid var(--border-soft); background: var(--soft-white); display: flex; justify-content: space-between; align-items: center; }
.trial-balance-card .tb-header h3 { font-size: 16px; font-weight: 600; color: var(--graphite); margin: 0; }
.trial-balance-card .tb-header .sub { font-size: 12px; color: var(--text-soft); }
.trial-balance-card table { width: 100%; border-collapse: collapse; font-size: 13px; }
.trial-balance-card thead th { background: var(--gray-150); color: var(--gray-600); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.trial-balance-card thead th.num { text-align: right; }
.trial-balance-card tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); color: var(--gray-700); }
.trial-balance-card tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.trial-balance-card tbody tr:hover { background: var(--cobalt-pale); }
.trial-balance-card tbody tr.group-header { background: var(--gray-150); font-weight: 600; }
.trial-balance-card tbody tr.group-header td { color: var(--graphite); }
.trial-balance-card tfoot td { padding: 12px; border-top: 2px solid var(--graphite); font-weight: 700; color: var(--graphite); background: var(--soft-white); }
.trial-balance-card tfoot td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Chart of accounts layout */
.coa-layout { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-4); align-items: start; }
@media (max-width: 1024px) { .coa-layout { grid-template-columns: 1fr; } }
.coa-tree {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--r-3);
box-shadow: var(--shadow-1);
padding: 12px;
max-height: 70vh; overflow-y: auto;
}
.coa-tree .type-section { margin-bottom: 12px; }
.coa-tree .type-section .type-header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-soft); padding: 4px 8px; }
.coa-tree .acct-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-2); cursor: pointer; font-size: 13px; color: var(--gray-700); }
.coa-tree .acct-item:hover { background: var(--cobalt-pale); color: var(--cobalt-deep); }
.coa-tree .acct-item.active { background: var(--cobalt); color: var(--white); }
.coa-tree .acct-item .code { font-family: var(--font-mono); font-size: 11px; color: var(--text-soft); }
.coa-tree .acct-item.active .code { color: rgba(255,255,255,0.7); }
.coa-detail {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--r-3);
box-shadow: var(--shadow-1);
padding: 20px;
min-height: 70vh;
}
.coa-detail .empty { color: var(--text-soft); }
/* Period locks table polish */
.period-table { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-3); box-shadow: var(--shadow-1); overflow: hidden; }
.period-table table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--graphite); }
.period-table thead th { background: var(--gray-150); color: var(--gray-600); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); }
.period-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border-soft); color: var(--gray-700); }
.period-table tbody tr:hover { background: var(--cobalt-pale); }
.period-table .badge.open { background: var(--success-pale); color: #14633F; }
.period-table .badge.soft_closed { background: var(--warning-pale); color: #8E5B0F; }
.period-table .badge.hard_closed { background: var(--critical-pale); color: #8B2929; }
.period-table .actions { display: flex; gap: 6px; }
/* ============================================================
SETTINGS WORKSPACE — left tabs + right form (spec §17)
============================================================ */
.settings-layout {
display: grid;
grid-template-columns: 240px 1fr;
gap: var(--space-5);
align-items: start;
}
@media (max-width: 1024px) { .settings-layout { grid-template-columns: 1fr; } }
.settings-nav {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--r-3);
box-shadow: var(--shadow-1);
padding: 8px;
position: sticky; top: 88px;
}
.settings-nav .nav-section {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--text-soft); padding: 12px 12px 6px;
}
.settings-nav .nav-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px; border-radius: var(--r-2);
font-size: 13px; color: var(--gray-700);
cursor: pointer; margin-bottom: 2px;
}
.settings-nav .nav-item:hover { background: var(--cobalt-pale); color: var(--cobalt-deep); }
.settings-nav .nav-item.active { background: var(--cobalt); color: var(--white); }
.settings-nav .nav-item .icon { width: 18px; text-align: center; }
.settings-form {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--r-3);
box-shadow: var(--shadow-1);
overflow: hidden;
}
.settings-form .form-header {
padding: 20px 24px;
border-bottom: 1px solid var(--border-soft);
background: var(--soft-white);
display: flex; align-items: center; justify-content: space-between;
}
.settings-form .form-header h2 { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--graphite); margin: 0; }
.settings-form .form-header .sub { font-size: 13px; color: var(--text-soft); margin-top: 4px; }
.settings-form .form-body { padding: 24px; }
.settings-form .section { margin-bottom: 28px; }
.settings-form .section h3 {
font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--text-soft); margin-bottom: 12px;
padding-bottom: 8px; border-bottom: 1px solid var(--border-soft);
}
.settings-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.settings-form .form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 768px) { .settings-form .form-grid, .settings-form .form-grid-3 { grid-template-columns: 1fr; } }
.settings-form .form-grid .full { grid-column: 1 / -1; }
.settings-form .form-actions {
padding: 16px 24px;
background: var(--soft-white);
border-top: 1px solid var(--border-soft);
display: flex; justify-content: space-between; align-items: center;
}
.settings-form .form-actions .left { color: var(--text-soft); font-size: 12px; }
.settings-form .form-actions .right { display: flex; gap: 8px; }
/* Color swatch picker */
.color-swatch {
display: flex; align-items: center; gap: 8px;
padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--r-2);
background: var(--white);
}
.color-swatch input[type="color"] { width: 28px; height: 28px; border: none; padding: 0; background: none; cursor: pointer; border-radius: 4px; }
.color-swatch .hex { font-family: var(--font-mono); font-size: 12px; color: var(--gray-600); width: 80px; }
/* Currency list */
.currency-list { display: flex; flex-direction: column; gap: 6px; }
.currency-row {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px;
background: var(--soft-white);
border: 1px solid var(--border-soft);
border-radius: var(--r-2);
}
.currency-row .code { font-family: var(--font-mono); font-weight: 700; color: var(--graphite); width: 50px; }
.currency-row .name { flex: 1; color: var(--gray-700); }
.currency-row .rate { font-variant-numeric: tabular-nums; color: var(--graphite); min-width: 100px; text-align: right; }
.currency-row .actions { display: flex; gap: 6px; }
/* Template cards */
.template-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.template-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--r-3);
box-shadow: var(--shadow-1);
overflow: hidden;
transition: all var(--duration-fast) var(--easing-standard);
}
.template-card:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.template-card.selected { border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-pale); }
.template-card .preview {
height: 200px;
background: var(--soft-white);
padding: 16px;
border-bottom: 1px solid var(--border);
position: relative;
overflow: hidden;
}
.template-card .preview .doc {
background: var(--white);
height: 100%;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
padding: 12px;
font-size: 8px;
color: var(--gray-500);
position: relative;
overflow: hidden;
}
.template-card .preview .doc::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: var(--accent, var(--cobalt));
}
.template-card .preview .doc .hdr { font-size: 9px; font-weight: 700; color: var(--primary, var(--graphite)); margin-bottom: 4px; }
.template-card .preview .doc .row { height: 6px; background: var(--gray-150); margin: 3px 0; border-radius: 1px; }
.template-card .preview .doc .row.short { width: 60%; }
.template-card .preview .doc .row.mid { width: 80%; }
.template-card .info { padding: 12px 16px; }
.template-card .info h4 { font-size: 14px; font-weight: 600; color: var(--graphite); margin: 0 0 4px; }
.template-card .info .meta { font-size: 11px; color: var(--text-soft); }
.template-card .actions { padding: 8px 16px; border-top: 1px solid var(--border-soft); display: flex; gap: 6px; justify-content: flex-end; }
/* National address preview */
.addr-preview {
background: var(--soft-white);
border: 1px dashed var(--border);
border-radius: var(--r-2);
padding: 16px;
font-family: var(--font-arabic);
direction: rtl;
margin-top: 12px;
}
.addr-preview .ar-block { font-size: 14px; color: var(--graphite); line-height: 1.8; }
.addr-preview .en-block { font-family: var(--font-sans); direction: ltr; font-size: 12px; color: var(--text-soft); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-soft); }
/* ============================================================
SMART PICKER — Odoo-style type-ahead with inline create
Replaces plain +