/* =============================================================
ERP Cloud 365 — SaaS Premium Aesthetics (Enterprise Edition)
(Inspired by Zoho Books, Xero, and Stripe)
============================================================= */
:root {
--brand-1: #6366f1; /* Indigo 500 - More Xero-like */
--brand-2: #4f46e5; /* Indigo 600 */
--accent: var(--brand-1);
--bg: #f8fafc;
--surface-1: #ffffff;
--surface-2: #f1f5f9;
--surface-3: #e2e8f0;
--text-main: #0f172a;
--text-muted: #475569;
--text-faint: #94a3b8;
--success: #10b981;
--warning: #f59e0b;
--danger: #ef4444;
--info: #3b82f6;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--shadow-soft: 0 1px 2px rgba(0,0,0,0.06);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
--shadow-premium: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
}
/* Base resets for Premium Look */
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--text-main);
background-color: var(--bg);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
margin: 0;
}
/* Modern Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover-disabled { background: var(--text-faint); }
/* =============================================================
Sidebar — Premium Enterprise Edition (v2)
------------------------------------------------------------
Goals (per UX brief):
• Crystal-clear active state (glow + left accent + bold).
• Submenus open DOWNWARD with smooth animation, never clip.
• Active item & its parent group always visible (CSS + JS).
• Consistent spacing, comfortable click areas, premium feel.
• Theme-aware via CSS vars (see [data-theme] blocks).
============================================================= */
/* Sidebar palette — dark by default; overrides via [data-theme="light"]
token block at bottom of this file. */
.sidebar {
--sb-bg-1: #0b1224;
--sb-bg-2: #0f172a;
--sb-fg: #e2e8f0;
--sb-fg-strong: #f8fafc;
--sb-muted: #94a3b8;
--sb-faint: #64748b;
--sb-border: rgba(255, 255, 255, 0.06);
--sb-hairline: rgba(255, 255, 255, 0.04);
--sb-hover: rgba(255, 255, 255, 0.05);
--sb-hover-strong:rgba(255, 255, 255, 0.08);
--sb-active-fg: #ffffff;
--sb-accent: var(--brand-1, #6366f1);
--sb-accent-2: var(--brand-2, #4f46e5);
--sb-accent-glow: rgba(99, 102, 241, 0.45);
--sb-rail: 4px; /* left accent bar width */
background: linear-gradient(180deg, var(--sb-bg-1) 0%, var(--sb-bg-2) 100%);
border-right: 1px solid var(--sb-border);
color: var(--sb-fg);
width: var(--sidebar-width, 268px);
height: 100vh;
position: fixed;
left: 0; top: 0;
z-index: 1000;
display: flex;
flex-direction: column;
overflow: hidden; /* nav-links scrolls; logo/org pinned */
transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
will-change: width, transform;
}
.main-content {
transition: margin-left 0.2s cubic-bezier(0.4, 0, 0.2, 1), margin-right 0.2s cubic-bezier(0.4, 0, 0.2, 1), width 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
will-change: margin-left, margin-right, width;
}
/* Sidebar collapse (icon rail) */
body.sidebar-collapsed .sidebar { width: 76px; }
body.sidebar-collapsed .main-content { margin-left: 76px; }
body.sidebar-collapsed header { left: 76px; }
body.sidebar-collapsed .sidebar .logo span,
body.sidebar-collapsed .sidebar .nav-item span,
body.sidebar-collapsed .sidebar .nav-group-title span,
body.sidebar-collapsed .sidebar .nav-group-title .fa-chevron-down,
body.sidebar-collapsed .sidebar .org-info,
body.sidebar-collapsed .sidebar .org-current i.fa-chevron-down {
display: none;
}
body.sidebar-collapsed .sidebar .nav-group-title {
justify-content: center;
padding: 0.6rem 0;
margin: 0.5rem 0.5rem 0.25rem;
}
body.sidebar-collapsed .sidebar .nav-group-title .group-title-content {
justify-content: center;
}
body.sidebar-collapsed .sidebar .nav-item {
justify-content: center;
padding: 0.7rem 0;
margin: 0.2rem 0.5rem;
border-radius: 10px;
}
body.sidebar-collapsed .sidebar .nav-sub-menu .nav-item {
padding-left: 0;
}
body.sidebar-collapsed .sidebar .nav-item i {
font-size: 1.15rem;
margin: 0;
width: auto;
}
body.sidebar-collapsed .sidebar .nav-item.active::before {
/* hide left rail on icon-rail; rely on background pill */
display: none;
}
body.sidebar-collapsed .sidebar .org-switcher {
padding: 0.75rem 0;
display: flex;
justify-content: center;
}
body.sidebar-collapsed .sidebar .org-current {
padding: 0;
justify-content: center;
}
body.sidebar-collapsed .sidebar .nav-sub-menu {
/* keep submenus visible as flyout strip in collapsed mode */
padding-left: 0;
}
body.sidebar-collapsed .sidebar .nav-sub-menu::before { display: none; }
/* -------- Logo / brand bar (pinned top) -------- */
.sidebar .logo {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.1rem;
height: 64px;
flex-shrink: 0;
border-bottom: 1px solid var(--sb-border);
background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
}
.sidebar .logo span {
font-size: 1.05rem;
font-weight: 800;
letter-spacing: -0.02em;
background: linear-gradient(90deg, var(--sb-fg-strong) 30%, var(--sb-accent));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* -------- Scrollable nav body -------- */
.sidebar .nav-links {
list-style: none;
margin: 0;
padding: 0.5rem 0 0.75rem;
flex: 1 1 auto;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.12) transparent;
scroll-behavior: smooth;
}
.sidebar .nav-links::-webkit-scrollbar { width: 6px; }
.sidebar .nav-links::-webkit-scrollbar-track { background: transparent; }
.sidebar .nav-links::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.10);
border-radius: 10px;
}
.sidebar .nav-links::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.18);
}
/* -------- Group title (parent accordion header) -------- */
.sidebar .nav-group {
margin: 0.1rem 0.5rem;
border-radius: 10px;
}
.sidebar .nav-group-title {
color: var(--sb-muted);
padding: 0.55rem 0.75rem;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.01em;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
user-select: none;
border-radius: 10px;
transition: background 0.18s ease, color 0.18s ease;
}
.sidebar .nav-group-title .group-title-content {
display: flex;
align-items: center;
gap: 0.7rem;
min-width: 0;
flex: 1;
}
.sidebar .nav-group-title .group-icon {
width: 20px;
text-align: center;
font-size: 1rem;
color: var(--sb-faint);
transition: color 0.18s ease;
}
.sidebar .nav-group-title span {
color: var(--sb-muted);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar .nav-group-title:hover {
background: var(--sb-hover);
color: var(--sb-fg-strong);
}
.sidebar .nav-group-title:hover span,
.sidebar .nav-group-title:hover .group-icon {
color: var(--sb-fg-strong);
}
.sidebar .nav-group-title .fa-chevron-down {
font-size: 0.72rem;
color: var(--sb-faint);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Collapsed → chevron points right */
.sidebar .nav-group.collapsed .nav-group-title .fa-chevron-down {
transform: rotate(-90deg);
}
/* Expanded (parent of active page) gets brand-tinted treatment */
.sidebar .nav-group-title.active-parent {
background: rgba(99, 102, 241, 0.10);
}
.sidebar .nav-group-title.active-parent span,
.sidebar .nav-group-title.active-parent .group-icon,
.sidebar .nav-group-title.active-parent .fa-chevron-down {
color: var(--sb-fg-strong);
}
.sidebar .nav-group-title.active-parent .group-icon {
color: var(--sb-accent);
}
/* -------- Submenu (downward expand, smooth, never clips parent) -------- */
.sidebar .nav-sub-menu {
list-style: none;
padding: 0;
margin: 0.15rem 0 0.25rem;
max-height: 1200px; /* generous upper bound — fits any group */
overflow: hidden;
opacity: 1;
transition:
max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.22s ease,
margin 0.25s ease;
position: relative;
}
/* Vertical guide line for the submenu, anchored under the parent icon */
.sidebar .nav-sub-menu::before {
content: '';
position: absolute;
top: 0.15rem;
bottom: 0.15rem;
left: 1.45rem; /* aligns with the group icon centerline */
width: 1px;
background: var(--sb-hairline);
pointer-events: none;
}
.sidebar .nav-group.collapsed .nav-sub-menu {
max-height: 0;
opacity: 0;
margin-top: 0;
margin-bottom: 0;
}
.sidebar .nav-sub-menu .nav-item {
padding: 0.5rem 0.75rem 0.5rem 2.4rem;
font-size: 0.86rem;
color: #cbd5e1;
margin: 0.1rem 0.25rem;
font-weight: 500;
border-radius: 8px;
min-height: 36px;
}
.sidebar .nav-sub-menu .nav-item i {
width: 16px;
font-size: 0.85rem;
color: var(--sb-faint);
transition: color 0.18s ease;
}
.sidebar .nav-sub-menu .nav-item:hover {
background: var(--sb-hover);
color: var(--sb-fg-strong);
}
.sidebar .nav-sub-menu .nav-item:hover i {
color: var(--sb-fg-strong);
}
/* -------- Top-level nav item (Dashboard etc.) -------- */
.sidebar .nav-item {
position: relative;
display: flex;
align-items: center;
gap: 0.7rem;
border-radius: 10px;
padding: 0.6rem 0.85rem;
color: var(--sb-fg);
text-decoration: none;
margin: 0.15rem 0.5rem;
font-weight: 500;
font-size: 0.9rem;
cursor: pointer;
user-select: none;
transition:
background 0.18s ease,
color 0.18s ease,
transform 0.18s ease,
box-shadow 0.22s ease;
/* Keep parent group title visible when scrolled into view via JS */
scroll-margin-top: 80px;
scroll-margin-bottom: 24px;
}
.sidebar .nav-item i {
width: 20px;
text-align: center;
font-size: 1rem;
color: var(--sb-muted);
transition: color 0.18s ease;
}
.sidebar .nav-item span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar .nav-item:hover {
background: var(--sb-hover);
color: var(--sb-fg-strong);
}
.sidebar .nav-item:hover i { color: var(--sb-fg-strong); }
/* === ACTIVE STATE — glow + left rail + brand gradient + bold === */
.sidebar .nav-item.active {
background: linear-gradient(90deg,
rgba(99, 102, 241, 0.22) 0%,
rgba(99, 102, 241, 0.10) 100%);
color: var(--sb-active-fg);
font-weight: 600;
box-shadow:
0 0 0 1px rgba(99, 102, 241, 0.35) inset,
0 8px 20px -10px var(--sb-accent-glow);
}
.sidebar .nav-item.active i {
color: var(--sb-accent);
}
/* Solid brand rail on the left edge */
.sidebar .nav-item.active::before {
content: '';
position: absolute;
left: -0.5rem; /* aligns with the sidebar inner gutter */
top: 8%;
bottom: 8%;
width: var(--sb-rail);
border-radius: 0 4px 4px 0;
background: linear-gradient(180deg, var(--sb-accent), var(--sb-accent-2));
box-shadow: 0 0 12px var(--sb-accent-glow);
}
/* Top-level active gets a slightly stronger fill (no parent group context) */
.sidebar > .nav-links > .nav-item.active {
background: linear-gradient(90deg,
rgba(99, 102, 241, 0.32) 0%,
rgba(99, 102, 241, 0.14) 100%);
}
/* Submenu active item — keep glow + bold but a touch lighter background */
.sidebar .nav-sub-menu .nav-item.active {
background: linear-gradient(90deg,
rgba(99, 102, 241, 0.20) 0%,
rgba(99, 102, 241, 0.04) 100%);
color: var(--sb-active-fg);
font-weight: 600;
}
.sidebar .nav-sub-menu .nav-item.active i { color: var(--sb-accent); }
.sidebar .nav-sub-menu .nav-item.active::before {
/* shorter rail aligned with sub-item gutter */
left: -0.25rem;
}
/* Keyboard focus ring — accessibility */
.sidebar .nav-item:focus-visible,
.sidebar .nav-group-title:focus-visible {
outline: 2px solid var(--sb-accent);
outline-offset: -2px;
}
/* -------- Sidebar toggle (collapse) button -------- */
.sidebar .sidebar-toggle {
background: transparent;
border: none;
color: var(--sb-muted);
cursor: pointer;
width: 30px;
height: 30px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.18s ease, color 0.18s ease, transform 0.25s ease;
}
.sidebar .sidebar-toggle:hover {
background: var(--sb-hover);
color: var(--sb-fg-strong);
}
body.sidebar-collapsed .sidebar .sidebar-toggle i {
transform: rotate(180deg);
}
/* -------- Light theme override (sidebar reads tokens from [data-theme]) --------
Goal: a vivid, interactive, premium light sidebar — not a flat white panel.
Stronger hover wash, brand-tinted icons, accent gradient on the active pill. */
[data-theme="light"] .sidebar {
--sb-bg-1: #f8faff; /* faint indigo-wash top */
--sb-bg-2: #eef1fb; /* soft cool bottom */
--sb-fg: #1e293b;
--sb-fg-strong: #0b1224;
--sb-muted: #475569;
--sb-faint: #64748b;
--sb-border: rgba(15, 23, 42, 0.08);
--sb-hairline: rgba(99, 102, 241, 0.18);
--sb-hover: rgba(99, 102, 241, 0.10);
--sb-hover-strong:rgba(99, 102, 241, 0.16);
--sb-active-fg: #ffffff; /* white text on the indigo pill */
--sb-accent-glow: rgba(99, 102, 241, 0.35);
}
[data-theme="light"] .sidebar .logo {
background: linear-gradient(180deg, rgba(99,102,241,0.05), transparent);
border-bottom-color: rgba(15, 23, 42, 0.08);
}
[data-theme="light"] .sidebar .logo span {
background: linear-gradient(90deg, #0b1224 30%, var(--brand-1));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Scrollbar reads better on the tinted background */
[data-theme="light"] .sidebar .nav-links {
scrollbar-color: rgba(99, 102, 241, 0.30) transparent;
}
[data-theme="light"] .sidebar .nav-links::-webkit-scrollbar-thumb {
background: rgba(99, 102, 241, 0.25);
}
[data-theme="light"] .sidebar .nav-links::-webkit-scrollbar-thumb:hover {
background: rgba(99, 102, 241, 0.45);
}
/* Group title: noticeable hover, vivid active-parent */
[data-theme="light"] .sidebar .nav-group-title .group-icon {
color: #6366f1; /* always brand-tinted in light mode */
opacity: 0.75;
}
[data-theme="light"] .sidebar .nav-group-title:hover .group-icon { opacity: 1; }
[data-theme="light"] .sidebar .nav-group-title.active-parent {
background: linear-gradient(90deg,
rgba(99, 102, 241, 0.14) 0%,
rgba(139, 92, 246, 0.06) 100%);
box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.18);
}
[data-theme="light"] .sidebar .nav-group-title.active-parent .group-icon {
color: var(--brand-1);
opacity: 1;
}
/* Top-level nav-item hover — visible indigo wash, slight icon brightness */
[data-theme="light"] .sidebar .nav-item i { color: #64748b; }
[data-theme="light"] .sidebar .nav-item:hover {
background: var(--sb-hover);
color: #0b1224;
}
[data-theme="light"] .sidebar .nav-item:hover i { color: var(--brand-1); }
/* Submenu item hover — same wash + brand icon */
[data-theme="light"] .sidebar .nav-sub-menu .nav-item {
color: #334155;
}
[data-theme="light"] .sidebar .nav-sub-menu .nav-item:hover {
background: var(--sb-hover);
color: #0b1224;
}
[data-theme="light"] .sidebar .nav-sub-menu .nav-item:hover i { color: var(--brand-1); }
/* === ACTIVE PILL (light theme) — solid brand gradient, white text, glow === */
[data-theme="light"] .sidebar .nav-item.active,
[data-theme="light"] .sidebar > .nav-links > .nav-item.active {
background: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2, #4f46e5) 100%);
color: #ffffff;
font-weight: 600;
box-shadow:
0 6px 16px -6px rgba(99, 102, 241, 0.55),
0 1px 0 rgba(255, 255, 255, 0.35) inset;
}
[data-theme="light"] .sidebar .nav-item.active i { color: #ffffff; }
/* Submenu active variant — softer fill but still clearly highlighted */
[data-theme="light"] .sidebar .nav-sub-menu .nav-item.active {
background: linear-gradient(90deg,
rgba(99, 102, 241, 0.22) 0%,
rgba(139, 92, 246, 0.08) 100%);
color: #0b1224;
font-weight: 600;
box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.28);
}
[data-theme="light"] .sidebar .nav-sub-menu .nav-item.active i { color: var(--brand-1); }
/* Brighter active rail in light mode */
[data-theme="light"] .sidebar .nav-item.active::before {
background: linear-gradient(180deg, var(--brand-1), var(--brand-2, #4f46e5));
box-shadow: 0 0 14px rgba(99, 102, 241, 0.55);
}
/* Sidebar collapse button gets the same wash treatment */
[data-theme="light"] .sidebar .sidebar-toggle:hover {
background: var(--sb-hover-strong);
color: var(--brand-1);
}
/* Org Switcher */
.org-switcher {
padding: 1rem 0.75rem;
position: relative;
border-bottom: 1px solid rgba(255,255,255,0.05);
margin-bottom: 0.5rem;
}
.org-current {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.625rem;
border-radius: var(--radius-md);
cursor: pointer;
transition: background 0.2s;
}
.org-current:hover-disabled { background: rgba(255,255,255,0.05); }
.org-icon {
width: 32px; height: 32px;
background: var(--brand-1);
color: white;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
flex-shrink: 0;
}
.org-info { overflow: hidden; line-height: 1.2; }
.org-name { font-weight: 700; font-size: 0.875rem; color: #f8fafc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-role { font-size: 0.7rem; color: #94a3b8; font-weight: 500; }
.ms-auto { margin-left: auto; }
.org-dropdown {
position: absolute;
top: 100%; left: 0.75rem; right: 0.75rem;
background: #1e293b;
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--radius-md);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
z-index: 1010;
display: none;
padding: 0.5rem;
margin-top: 0.25rem;
}
.org-dropdown.active { display: block; animation: slideInUp 0.2s ease-out; }
@keyframes slideInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.org-list-item {
padding: 0.5rem 0.75rem;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.75rem;
color: #cbd5e1;
transition: all 0.2s;
}
.org-list-item:hover-disabled { background: rgba(255,255,255,0.05); color: #f8fafc; }
.org-list-item.active { color: var(--brand-1); font-weight: 600; }
.org-divider { height: 1px; background: rgba(255,255,255,0.05); margin: 0.5rem 0; }
.org-action-item {
padding: 0.5rem 0.75rem;
border-radius: 6px;
cursor: pointer;
font-size: 0.8rem;
color: #94a3b8;
display: flex;
align-items: center;
gap: 0.5rem;
}
.org-action-item:hover-disabled { color: #f8fafc; }
/* Header / Appbar — sticky, three-zone grid (title | search | actions) */
header,
header.appbar {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--surface-3);
padding: 0.75rem 1.5rem;
position: sticky;
top: 0; z-index: 900;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 520px) minmax(0, 1fr);
align-items: center;
gap: 1rem;
}
.appbar-left { min-width: 0; }
.appbar-center { display: flex; justify-content: center; }
.appbar-right {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.5rem;
}
/* Center search trigger — prominent, command-palette style */
.search-trigger {
width: 100%;
max-width: 300px;
cursor: pointer;
background: var(--surface-2);
border: 1px solid var(--surface-3);
border-radius: 9999px;
padding: 0.55rem 1rem;
display: flex;
align-items: center;
gap: 0.625rem;
font-size: 0.875rem;
color: var(--text-muted);
transition: all 0.15s;
}
.search-trigger:hover-disabled {
background: var(--surface-1);
border-color: var(--brand-1);
color: var(--text-main);
}
.search-trigger .search-placeholder { flex: 1; }
.search-trigger .kbd {
font-size: 0.7rem;
background: var(--surface-1);
border: 1px solid var(--surface-3);
padding: 1px 6px;
border-radius: 4px;
font-family: 'JetBrains Mono', monospace;
color: var(--text-muted);
}
/* Financial Year Selector styling and overrides */
.fy-selector {
background: var(--surface-2) !important;
border: 1px solid var(--surface-3) !important;
color: var(--brand-1) !important;
padding: 0.45rem 1rem !important;
border-radius: 9999px !important;
display: inline-flex !important;
align-items: center !important;
gap: 0.625rem !important;
}
.fy-selector i {
font-size: 1rem !important;
}
.fy-selector select {
background: transparent !important;
border: none !important;
color: var(--text-main) !important;
font-size: 0.95rem !important;
font-weight: 600 !important;
cursor: pointer !important;
width: 75px !important;
min-width: 75px !important;
padding: 0 !important;
padding-right: 1.5rem !important;
margin: 0 !important;
height: auto !important;
line-height: inherit !important;
box-shadow: none !important;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
background-repeat: no-repeat !important;
background-position: right center !important;
background-size: 16px !important;
}
/* Profile button + dropdown */
.profile-menu { position: relative; }
.profile-btn {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--surface-3);
background: var(--surface-1);
color: var(--brand-1);
border-radius: 50%;
cursor: pointer;
transition: all 0.15s;
padding: 0;
}
.profile-btn:hover-disabled {
border-color: var(--brand-1);
background: var(--surface-2);
box-shadow: 0 4px 12px -6px rgba(99, 102, 241, 0.35);
}
.profile-btn .profile-avatar {
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
color: #fff;
font-size: 0.75rem;
}
.profile-dropdown {
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
min-width: 260px;
background: var(--surface-1);
border: 1px solid var(--surface-3);
border-radius: var(--radius-md);
box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.25), 0 4px 8px -4px rgba(15, 23, 42, 0.08);
z-index: 1000;
padding: 0.5rem;
animation: profileDropdownIn 0.15s ease-out;
}
.profile-dropdown[hidden] { display: none; }
@keyframes profileDropdownIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.profile-header {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
}
.profile-avatar-lg {
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.05rem;
flex-shrink: 0;
}
.profile-meta { min-width: 0; flex: 1; }
.profile-name {
font-weight: 700;
color: var(--text-main);
font-size: 0.95rem;
line-height: 1.2;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile-role { font-size: 0.75rem; color: var(--text-muted); }
.profile-company {
font-size: 0.78rem;
color: var(--brand-1);
font-weight: 600;
margin-top: 0.2rem;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile-divider {
height: 1px;
background: var(--surface-3);
margin: 0.35rem 0;
}
.profile-item {
width: 100%;
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.55rem 0.75rem;
background: transparent;
border: none;
border-radius: var(--radius-sm);
text-align: left;
cursor: pointer;
color: var(--text-main);
font-size: 0.875rem;
font-weight: 500;
transition: background 0.12s;
}
.profile-item:hover-disabled { background: var(--surface-2); }
.profile-item i { color: var(--text-muted); width: 1rem; text-align: center; }
.profile-item.profile-item-danger { color: var(--danger); }
.profile-item.profile-item-danger:hover-disabled { background: rgba(239, 68, 68, 0.08); }
.profile-item.profile-item-danger i { color: var(--danger); }
/* Sidebar org switcher pinned at the bottom */
.org-switcher-bottom {
margin-top: auto;
padding: 0.75rem;
border-top: 1px solid var(--sidebar-border, var(--surface-3));
}
/* Mobile: collapse appbar — drop center search to its own line under the title */
@media (max-width: 900px) {
header, header.appbar {
grid-template-columns: 1fr auto;
grid-template-areas:
"title actions"
"search search";
row-gap: 0.5rem;
}
.appbar-left { grid-area: title; }
.appbar-center { grid-area: search; }
.appbar-right { grid-area: actions; }
}
@media (max-width: 540px) {
.search-trigger .kbd { display: none; }
.fy-selector { display: none; }
}
/* Modern Inputs */
input[type="text"], input[type="date"], input[type="number"], select, textarea {
background: var(--surface-1);
border: 1px solid var(--surface-3);
border-radius: var(--radius-sm);
padding: 0.625rem 0.875rem;
font-size: 0.875rem;
color: var(--text-main);
width: 100%;
transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--brand-1);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
/* Premium Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
border-radius: var(--radius-sm);
font-weight: 600;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s;
border: 1px solid transparent;
}
.btn-primary { background: var(--brand-1); color: white; }
.btn-primary:hover-disabled { background: var(--brand-2); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--text-muted); border-color: var(--surface-3); }
.btn-ghost:hover-disabled { background: var(--surface-2); color: var(--text-main); }
/* Badges */
.badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.625rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
text-transform: capitalize;
}
.badge-success { background: #ecfdf5; color: #065f46; }
.badge-danger { background: #fef2f2; color: #991b1b; }
.badge-warning { background: #fffbeb; color: #92400e; }
.badge-info { background: #eff6ff; color: #1e40af; }
/* Modals */
.modal-backdrop {
background: rgba(15, 23, 42, 0.4);
backdrop-filter: blur(4px);
position: fixed;
inset: 0; z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.modal-content {
background: var(--surface-1);
border-radius: var(--radius-lg);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
width: 100%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
position: relative;
animation: modalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modalIn {
from { transform: scale(0.95); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
/* Data Tables */
.table-responsive { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--surface-3); }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { background: var(--surface-2); padding: 1rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
td { padding: 1rem; border-bottom: 1px solid var(--surface-2); }
tr:hover-disabled td { background: #fcfcfd; }
/* Dashboard Cards & KPIs */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.card {
background: var(--surface-1);
border: 1px solid var(--surface-3);
border-radius: var(--radius-lg);
padding: 1.5rem;
box-shadow: var(--shadow-premium);
transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover-disabled { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08); }
.kpi-card {
background: var(--surface-1);
border: 1px solid var(--surface-3);
border-radius: var(--radius-lg);
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-soft);
}
.kpi-card::after {
content: "";
position: absolute;
top: 0; right: 0;
width: 80px; height: 80px;
background: linear-gradient(135deg, transparent, rgba(99, 102, 241, 0.03));
border-radius: 0 0 0 100%;
}
.kpi-label { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: 0.5rem; }
.kpi-value { font-size: 1.75rem; font-weight: 800; color: var(--text-main); font-family: 'Inter', sans-serif; }
.kpi-trend { font-size: 0.75rem; font-weight: 600; display: flex; align-items: center; gap: 0.25rem; }
.kpi-trend.up { color: var(--success); }
.kpi-trend.down { color: var(--danger); }
.kpi-trend.flat { color: var(--text-faint); }
.card h3 { margin-top: 0; font-size: 1rem; color: var(--text-main); font-weight: 700; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem; }
/* Searchable Select Component */
.searchable-select { position: relative; width: 100%; }
.ss-display {
display: flex; align-items: center; justify-content: space-between;
padding: 0.5rem 0.75rem; border: 1px solid var(--surface-3, #e2e8f0);
border-radius: var(--radius-md, 8px); cursor: pointer;
background: var(--surface-1, #fff); min-height: 40px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ss-display:hover { border-color: var(--brand-1, #6366f1); }
.ss-display .ss-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; }
.ss-display i { font-size: 0.7rem; color: var(--text-muted, #94a3b8); margin-left: 0.5rem; transition: transform 0.2s; }
.ss-dropdown {
position: absolute; top: 100%; left: 0; right: 0; z-index: 1000;
background: var(--surface-1, #fff); border: 1px solid var(--surface-3, #e2e8f0);
border-radius: var(--radius-md, 8px); margin-top: 4px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12); max-height: 280px;
display: flex; flex-direction: column; overflow: hidden;
}
.ss-search-wrap { padding: 0.5rem; border-bottom: 1px solid var(--surface-3, #e2e8f0); }
.ss-search-input {
width: 100%; padding: 0.45rem 0.65rem; border: 1px solid var(--surface-3, #e2e8f0);
border-radius: var(--radius-sm, 6px); font-size: 0.85rem; outline: none;
background: var(--bg, #f8fafc);
}
.ss-search-input:focus { border-color: var(--brand-1, #6366f1); box-shadow: 0 0 0 2px rgba(99,102,241,0.15); }
.ss-list { overflow-y: auto; max-height: 220px; padding: 0.25rem 0; }
.ss-item {
padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.85rem;
transition: background 0.1s; border-radius: 4px; margin: 0 0.25rem;
}
.ss-item:hover { background: var(--surface-2, #f1f5f9); }
.ss-item.selected { background: rgba(99,102,241,0.1); color: var(--brand-1, #6366f1); font-weight: 600; }
.ss-no-results { padding: 0.75rem; text-align: center; color: var(--text-muted, #94a3b8); font-size: 0.85rem; }
/* Page Transition */
#app-container {
transition: opacity 0.15s ease;
}
#app-container.page-exit {
opacity: 0;
}
/* Animations */
.fade-in { animation: fadeIn 0.3s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* (Removed the #devtools-block-overlay styles along with the viewport-delta
detection in index.php — it false-fired on browser zoom.) */
/* === Voucher view modal (viewTransaction) — paper-style preview === */
.vp-wrap { padding: 0.25rem; }
.vp-paper {
background: var(--surface-1);
border: 1px solid var(--surface-3);
border-radius: var(--radius-md);
padding: 1.75rem 1.75rem 1.25rem;
position: relative;
overflow: hidden;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}
.vp-paper::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
}
.vp-paper.vp-voided::before {
background: linear-gradient(90deg, #ef4444, #b91c1c);
}
.vp-paper.vp-voided::after {
content: "VOIDED";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 5rem;
font-weight: 900;
color: var(--danger);
opacity: 0.07;
letter-spacing: 0.4em;
pointer-events: none;
transform: rotate(-12deg);
z-index: 0;
}
.vp-paper > * { position: relative; z-index: 1; }
.vp-paper-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1.5rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--surface-3);
margin-bottom: 1.25rem;
}
.vp-company { display: flex; gap: 0.875rem; align-items: flex-start; min-width: 0; }
.vp-logo {
width: 56px; height: 56px;
display: flex; align-items: center; justify-content: center;
background: var(--surface-2);
border-radius: var(--radius-sm);
flex-shrink: 0;
overflow: hidden;
}
.vp-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vp-company-meta { min-width: 0; }
.vp-company-name {
font-size: 1.1rem;
font-weight: 800;
color: var(--text-main);
margin-bottom: 0.25rem;
letter-spacing: -0.01em;
}
.vp-company-meta > div { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; }
.vp-company-chips {
display: flex !important;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.3rem;
font-size: 0.72rem !important;
}
.vp-company-chips span {
display: inline-flex; align-items: center; gap: 0.3rem;
background: var(--surface-2);
border: 1px solid var(--surface-3);
border-radius: 9999px;
padding: 0.15rem 0.5rem;
color: var(--text-main);
}
.vp-company-chips i { color: var(--brand-1); }
.vp-header-right { text-align: right; flex-shrink: 0; }
.vp-type {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
}
.vp-voucher-no {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 1.5rem;
font-weight: 800;
color: var(--brand-1);
letter-spacing: -0.01em;
margin-top: 0.15rem;
line-height: 1.1;
}
.vp-status {
display: inline-flex;
align-items: center;
gap: 0.3rem;
margin-top: 0.5rem;
font-size: 0.72rem;
font-weight: 700;
padding: 0.2rem 0.55rem;
border-radius: 9999px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.vp-status-ok { background: rgba(16, 185, 129, 0.12); color: var(--success); }
.vp-status-danger { background: rgba(239, 68, 68, 0.12); color: var(--danger); }
.vp-info {
display: flex;
flex-wrap: wrap;
gap: 1.25rem 2rem;
margin-bottom: 1.25rem;
padding: 0.875rem 1rem;
background: var(--surface-2);
border-radius: var(--radius-sm);
}
.vp-info-item { display: flex; flex-direction: column; gap: 0.15rem; }
.vp-info-label {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
}
.vp-info-value {
font-size: 0.88rem;
font-weight: 600;
color: var(--text-main);
}
.vp-info-value .muted { font-weight: 500; }
.vp-narration {
margin-bottom: 1.25rem;
padding: 0.75rem 1rem;
border-left: 3px solid var(--brand-1);
background: color-mix(in srgb, var(--brand-1) 4%, var(--surface-1));
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.vp-narration-label {
display: block;
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
margin-bottom: 0.2rem;
}
.vp-narration p { margin: 0; color: var(--text-main); font-size: 0.9rem; line-height: 1.5; }
.vp-table-wrap { margin-bottom: 1.5rem; }
.vp-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.vp-table th {
text-align: left;
background: var(--surface-2);
border-bottom: 2px solid var(--surface-3);
padding: 0.55rem 0.875rem;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
font-weight: 700;
}
.vp-table th.right { text-align: right; }
.vp-table tbody td {
padding: 0.65rem 0.875rem;
border-bottom: 1px solid var(--surface-3);
vertical-align: top;
}
.vp-table tbody tr:last-child td { border-bottom: none; }
.vp-table .amount-cell {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-variant-numeric: tabular-nums;
font-weight: 600;
color: var(--text-main);
white-space: nowrap;
}
.vp-table .right { text-align: right; }
.vp-acc { font-weight: 600; color: var(--text-main); }
.vp-acc-note { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; }
.vp-table tfoot th {
background: var(--surface-1);
border-top: 2px solid var(--surface-3);
padding: 0.7rem 0.875rem;
font-size: 0.78rem;
color: var(--text-main);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.vp-paper-foot {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-top: 2rem;
padding-top: 1.25rem;
border-top: 1px dashed var(--surface-3);
}
.vp-sig { text-align: center; }
.vp-sig-line {
border-bottom: 1px solid var(--text-muted);
height: 28px;
margin-bottom: 0.35rem;
}
.vp-sig-img {
max-height: 48px;
margin-bottom: 0.35rem;
object-fit: contain;
}
.vp-sig-label {
font-size: 0.7rem;
color: var(--text-muted);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.vp-actions {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
margin-top: 1.25rem;
padding-top: 1rem;
border-top: 1px solid var(--surface-3);
}
[data-theme="dark"] .vp-paper { background: rgba(30, 41, 59, 0.6); }
[data-theme="dark"] .vp-info { background: rgba(255, 255, 255, 0.03); }
@media (max-width: 720px) {
.vp-paper-head { flex-direction: column; align-items: stretch; }
.vp-header-right { text-align: left; }
.vp-paper-foot { grid-template-columns: 1fr; gap: 1rem; }
.vp-paper.vp-voided::after { font-size: 3rem; letter-spacing: 0.25em; }
}
/* === Page-level toolbar (sits at the top of a list view) ===
Used by Journal listing for module-level actions (Export / Import / + New). */
.page-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.875rem 1.25rem;
background: var(--surface-1);
border: 1px solid var(--surface-3);
border-radius: var(--radius-md);
margin-bottom: 1rem;
position: sticky;
top: 64px; /* sits under the appbar */
z-index: 10;
}
.page-toolbar-meta { min-width: 0; }
.page-toolbar-title {
margin: 0;
font-size: 1.05rem;
font-weight: 700;
color: var(--text-main);
letter-spacing: -0.01em;
}
.page-toolbar-actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
@media (max-width: 720px) {
.page-toolbar {
flex-direction: column;
align-items: stretch;
gap: 0.625rem;
position: static;
}
.page-toolbar-actions { justify-content: flex-end; }
}
/* Inline validation message — paired with .input-error border tint */
.field-err {
color: var(--danger);
font-size: 0.72rem;
margin-top: 0.25rem;
font-weight: 600;
letter-spacing: 0.01em;
}
/* Make sure the red highlight visibly reaches the combobox + the
form controls inside grid line cells where there is no border by
default. */
.input-error,
input.input-error,
select.input-error,
textarea.input-error,
.voucher-combobox.input-error,
.voucher-combobox.input-error .combobox-search {
border-color: var(--danger) !important;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
}
.voucher-line .voucher-input.input-error,
.voucher-line .combobox-search.input-error {
border: 1px solid var(--danger) !important;
}
/* Hide the browser's up/down spinner buttons on every number input.
Applied globally — voucher lines, setup forms, modals, all of them. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
/* === Journal listing table — fixed column widths + truncation === */
.journal-list-table { table-layout: auto; }
.journal-list-table th, .journal-list-table td { vertical-align: middle; }
.journal-list-table .col-desc {
max-width: 240px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.journal-list-table .col-code {
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.journal-list-table .col-ledger {
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.journal-list-table .mono {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.82rem;
}
/* === Row kebab (3-dot action menu) === */
.row-kebab-wrap { display: inline-flex; }
.row-kebab {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
background: transparent;
color: var(--text-muted);
border-radius: 6px;
cursor: pointer;
transition: all 0.12s;
}
.row-kebab:hover-disabled {
background: var(--surface-2);
color: var(--text-main);
border-color: var(--surface-3);
}
.row-kebab[aria-expanded="true"] {
background: var(--surface-2);
color: var(--brand-1);
border-color: var(--brand-1);
}
.row-actions-popover {
position: fixed;
min-width: 180px;
background: var(--surface-1);
border: 1px solid var(--surface-3);
border-radius: var(--radius-md);
box-shadow: 0 14px 32px -10px rgba(15, 23, 42, 0.22), 0 4px 8px -4px rgba(15, 23, 42, 0.08);
padding: 0.35rem;
z-index: 1100;
animation: popoverIn 0.12s ease-out;
}
@keyframes popoverIn {
from { opacity: 0; transform: scale(0.97); }
to { opacity: 1; transform: scale(1); }
}
.row-actions-popover .rap-item {
width: 100%;
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.5rem 0.7rem;
border: none;
background: transparent;
border-radius: var(--radius-sm);
color: var(--text-main);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
text-align: left;
transition: background 0.1s;
}
.row-actions-popover .rap-item i { width: 1rem; color: var(--text-muted); text-align: center; }
.row-actions-popover .rap-item:hover-disabled { background: var(--surface-2); }
.row-actions-popover .rap-item.rap-danger { color: var(--danger); }
.row-actions-popover .rap-item.rap-danger i { color: var(--danger); }
.row-actions-popover .rap-item.rap-danger:hover-disabled { background: rgba(239, 68, 68, 0.08); }
.row-actions-popover .rap-sep { height: 1px; background: var(--surface-3); margin: 0.3rem 0; }
/* === Bulk Journal Import page === */
.import-page-grid {
display: grid;
grid-template-columns: 340px 1fr;
gap: 1rem;
margin-bottom: 1rem;
}
@media (max-width: 900px) {
.import-page-grid { grid-template-columns: 1fr; }
}
.import-instructions-card, .import-upload-card {
border-radius: var(--radius-md);
padding: 1.125rem 1.25rem;
}
.ipc-head {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.625rem;
color: var(--brand-1);
}
.ipc-head h3 {
margin: 0;
font-size: 0.95rem;
font-weight: 700;
color: var(--text-main);
letter-spacing: -0.01em;
}
.ipc-cols {
list-style: decimal inside;
padding: 0;
margin: 0.75rem 0 1rem;
font-size: 0.85rem;
line-height: 1.65;
color: var(--text-main);
}
.ipc-cols li::marker { color: var(--brand-1); font-weight: 700; }
.ipc-example {
background: var(--surface-2);
border: 1px solid var(--surface-3);
border-radius: var(--radius-sm);
padding: 0.75rem 0.875rem;
margin: 0 0 1rem;
font-size: 0.78rem;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
overflow-x: auto;
color: var(--text-main);
}
.jv-dropzone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 2.25rem 1.25rem;
border: 2px dashed var(--surface-3);
border-radius: var(--radius-md);
background: var(--surface-2);
color: var(--text-muted);
cursor: pointer;
transition: all 0.15s;
text-align: center;
}
.jv-dropzone:hover-disabled,
.jv-dropzone.jv-dropzone-dragover {
border-color: var(--brand-1);
background: color-mix(in srgb, var(--brand-1) 6%, var(--surface-1));
color: var(--brand-1);
}
.jv-dropzone i { font-size: 1.75rem; color: var(--brand-1); }
.jv-dropzone-title { font-size: 0.95rem; font-weight: 700; color: var(--text-main); }
.jv-dropzone-has-file { border-style: solid; border-color: var(--success); background: color-mix(in srgb, var(--success) 6%, var(--surface-1)); }
.jv-dropzone-has-file i { color: var(--success); }
.import-preview { margin-top: 1.25rem; }
.import-preview-summary {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.75rem;
margin-bottom: 1rem;
}
.ips-stat {
padding: 0.75rem;
border: 1px solid var(--surface-3);
border-radius: var(--radius-sm);
text-align: center;
background: var(--surface-2);
}
.ips-stat strong { display: block; font-size: 1.4rem; font-weight: 800; color: var(--text-main); line-height: 1.1; }
.ips-stat small { display: block; margin-top: 0.25rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.ips-stat.ips-ok strong { color: var(--success); }
.ips-stat.ips-err strong { color: var(--danger); }
.ips-stat.ips-skip strong { color: var(--warning); }
.import-preview-table { max-height: 420px; overflow-y: auto; }
.import-preview-table table { font-size: 0.82rem; }
.import-preview-table .amount-cell {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-variant-numeric: tabular-nums;
}
.import-preview-table tr.row-failed td { background: rgba(239, 68, 68, 0.05); }
.import-preview-table tr.row-skipped td { background: rgba(245, 158, 11, 0.05); }
.import-preview-table tfoot th {
background: var(--surface-2);
font-weight: 700;
border-top: 2px solid var(--surface-3);
}
/* === JV Import detail cards — one card per JV, with its lines === */
.jv-import-cards {
display: flex;
flex-direction: column;
gap: 0.75rem;
max-height: 60vh;
overflow-y: auto;
padding-right: 0.25rem;
}
.jv-import-card {
border: 1px solid var(--surface-3);
border-left: 4px solid var(--brand-1);
border-radius: var(--radius-md);
background: var(--surface-1);
padding: 0.875rem 1rem;
}
.jv-import-card.jv-ok { border-left-color: var(--success); }
.jv-import-card.jv-failed { border-left-color: var(--danger); background: rgba(239, 68, 68, 0.03); }
.jv-import-card.jv-skipped { border-left-color: var(--warning); background: rgba(245, 158, 11, 0.03); }
.jv-import-card .jvic-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.jv-import-card .jvic-head-left {
display: flex;
align-items: center;
gap: 0.75rem;
min-width: 0;
}
.jv-import-card .jvic-num {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.78rem;
font-weight: 800;
color: var(--text-muted);
background: var(--surface-2);
border-radius: 6px;
padding: 0.18rem 0.45rem;
flex-shrink: 0;
}
.jv-import-card .jvic-title {
font-size: 0.92rem;
font-weight: 600;
color: var(--text-main);
letter-spacing: -0.01em;
}
.jv-import-card .jvic-sub {
font-size: 0.74rem;
margin-top: 0.1rem;
}
.jv-import-card .jvic-message {
background: var(--surface-2);
border: 1px solid var(--surface-3);
border-radius: var(--radius-sm);
padding: 0.4rem 0.6rem;
margin: 0.25rem 0 0.5rem;
font-size: 0.78rem;
color: var(--text-muted);
}
.jv-import-card.jv-failed .jvic-message {
background: rgba(239, 68, 68, 0.08);
border-color: rgba(239, 68, 68, 0.25);
color: var(--danger);
}
.jv-import-card .jvic-lines table { font-size: 0.82rem; }
.jv-import-card .jvic-lines th {
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 0.7rem;
color: var(--text-muted);
border-bottom: 1px solid var(--surface-3);
padding: 0.35rem 0.55rem;
font-weight: 700;
background: transparent;
}
.jv-import-card .jvic-lines td {
padding: 0.4rem 0.55rem;
border-bottom: 1px dashed var(--surface-3);
}
.jv-import-card .jvic-lines tbody tr:last-child td { border-bottom: none; }
.jv-import-card .jvic-lines tfoot th {
border-top: 2px solid var(--surface-3);
background: var(--surface-2);
font-weight: 700;
}
.jv-import-card .jvic-lines .amount-cell {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-variant-numeric: tabular-nums;
}
.jv-import-card .jvic-lines .mono {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.78rem;
}
/* === Voucher topbar (title + voucher number) === */
.voucher-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.5rem 0;
margin-bottom: 1.5rem;
border-bottom: 1px solid var(--surface-3);
padding-bottom: 1rem;
}
.voucher-topbar .v-title-row {
display: flex;
align-items: center;
gap: 0.875rem;
min-width: 0;
flex: 1;
}
.voucher-topbar .v-back {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--surface-3);
background: var(--surface-1);
border-radius: 50%;
color: var(--text-muted);
cursor: pointer;
transition: all 0.15s;
flex-shrink: 0;
}
.voucher-topbar .v-back:hover-disabled {
border-color: var(--brand-1);
color: var(--brand-1);
background: var(--surface-2);
}
.voucher-topbar .v-title {
margin: 0;
font-size: 1.375rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-main);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.voucher-topbar .v-no-display-wrap {
text-align: right;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.15rem;
flex-shrink: 0;
}
.voucher-topbar .v-no-label {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
}
.voucher-topbar .v-no-display {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 1.125rem;
font-weight: 700;
color: var(--brand-1);
letter-spacing: 0.02em;
}
@media (max-width: 640px) {
.voucher-topbar {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
}
.voucher-topbar .v-no-display-wrap {
align-items: flex-start;
text-align: left;
padding-left: calc(36px + 0.875rem);
}
.voucher-topbar .v-title { font-size: 1.2rem; white-space: normal; }
}
/* === Voucher / Journal form — column layout (accounting-grade) ===
The form-level grids were declared `display:grid` inline in JS but with no
column template, so the form was relying on auto-flow and looked broken.
These rules give it the structural skeleton it was missing. */
/* Header field grid (Date / Project / Ref-No, etc.) */
.voucher-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.voucher-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Header field block — label stacked above control */
.voucher-field {
display: flex;
flex-direction: column;
gap: 0.4rem;
min-width: 0;
}
.voucher-field > label {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
}
.voucher-field .req {
color: var(--danger);
margin-left: 0.15rem;
font-weight: 800;
}
.voucher-field-checkbox > label {
text-transform: none;
letter-spacing: 0;
font-size: 0.875rem;
font-weight: 600;
color: var(--text-main);
}
/* Inputs / selects / textareas — base look */
.voucher-input,
.voucher-select,
.voucher-textarea {
width: 100%;
padding: 0.6rem 0.75rem;
background: var(--surface-1);
border: 1px solid var(--surface-3);
border-radius: var(--radius-sm);
font-size: 0.9rem;
color: var(--text-main);
font-family: inherit;
line-height: 1.3;
}
.voucher-input::placeholder { color: var(--text-faint); }
.voucher-select {
appearance: none;
-webkit-appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
background-position:
calc(100% - 16px) 50%,
calc(100% - 11px) 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
padding-right: 2rem;
}
/* Calendar / search icon overlay */
.voucher-input-icon {
position: relative;
}
.voucher-input-icon .v-icon {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--text-faint);
pointer-events: none;
font-size: 0.85rem;
}
.voucher-input-icon .voucher-input {
padding-left: 2.25rem;
}
/* === Voucher line table === */
.voucher-lines { background: var(--surface-1); }
/* Shared rules for both header row and data rows. The header row has
`display:grid` set inline by the JS; we set it here on data rows too,
and define the column template so header & body align. */
.voucher-line {
display: grid;
align-items: center;
gap: 0.625rem;
padding: 0.5rem 1rem;
border-bottom: 1px solid var(--surface-2);
transition: background 0.15s;
}
.voucher-line:last-child { border-bottom: none; }
.voucher-line:hover-disabled:not(.header) { background: var(--surface-2); }
.voucher-line:focus-within:not(.header) {
background: color-mix(in srgb, var(--brand-1) 6%, transparent);
}
.voucher-line.header > div { display: flex; align-items: center; }
/* Journal: Account | Description | Debit | Credit | Action */
.voucher-line.journal-line {
grid-template-columns: minmax(220px, 2.2fr) minmax(160px, 1.5fr) 140px 140px 64px;
}
/* Numeric (debit/credit) cells — right-align, monospace */
.voucher-line.journal-line > div:nth-child(3) .voucher-input,
.voucher-line.journal-line > div:nth-child(4) .voucher-input {
text-align: right;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
}
/* Compact inputs inside the lines table (header card still has bigger inputs) */
.voucher-line .voucher-input,
.voucher-line .voucher-select {
padding: 0.45rem 0.6rem;
font-size: 0.875rem;
}
/* Line action buttons (Add / Remove) */
.voucher-line-action {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.25rem;
}
.voucher-line-action button {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--surface-3);
background: var(--surface-1);
border-radius: var(--radius-sm);
color: var(--text-muted);
cursor: pointer;
transition: all 0.15s;
font-size: 0.8rem;
}
.voucher-line-action button:hover-disabled {
border-color: var(--brand-1);
color: var(--brand-1);
}
.voucher-line-action .remove-line:hover-disabled {
border-color: var(--danger);
color: var(--danger);
}
/* Voucher breadcrumb / header chrome */
.voucher-breadcrumb { font-size: 0.78rem; line-height: 1.3; }
.voucher-breadcrumb .crumb-sep { margin: 0 0.35rem; color: var(--text-faint); }
/* Mobile: each line becomes a card with labelled cells */
@media (max-width: 820px) {
.voucher-grid-3, .voucher-grid-4 { grid-template-columns: 1fr; }
.voucher-line.header { display: none !important; }
.voucher-line.journal-line {
grid-template-columns: 1fr 1fr;
gap: 0.5rem 0.75rem;
padding: 0.875rem;
border: 1px solid var(--surface-3);
border-radius: var(--radius-md);
margin: 0.5rem;
background: var(--surface-1);
}
.voucher-line.journal-line > div:nth-child(1),
.voucher-line.journal-line > div:nth-child(2) {
grid-column: 1 / -1;
}
.voucher-line.journal-line > div:nth-child(3)::before { content: "Debit"; display:block; font-size: 0.65rem; color: var(--text-muted); margin-bottom: 0.2rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.voucher-line.journal-line > div:nth-child(4)::before { content: "Credit"; display:block; font-size: 0.65rem; color: var(--text-muted); margin-bottom: 0.2rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
}
/* Narration + Totals grid — side by side under the line table */
.voucher-bottom-grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: 1.25rem;
margin-bottom: 1rem;
}
@media (max-width: 900px) {
.voucher-bottom-grid {
grid-template-columns: 1fr;
}
}
/* Narration card */
.voucher-narration-card {
border-radius: var(--radius-md);
padding: 1.125rem 1.25rem;
}
.voucher-narration-card > label {
display: block;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
margin-bottom: 0.5rem;
}
.voucher-narration-card > .voucher-textarea {
min-height: 90px;
border: none;
background: transparent;
padding: 0;
resize: vertical;
font-size: 0.9rem;
width: 100%;
color: var(--text-main);
}
.voucher-narration-card > .voucher-textarea:focus {
outline: none;
box-shadow: none;
}
/* === Interactive Totals card === */
.voucher-totals-card {
position: relative;
padding: 1rem 1.25rem;
border-radius: var(--radius-md);
overflow: hidden;
transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
border: 1px solid var(--surface-3);
}
/* Accent strip along the top — colour driven by balance state */
.voucher-totals-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: var(--text-faint);
transition: background 0.25s;
}
.voucher-totals-card[data-tone="neutral"]::before { background: linear-gradient(90deg, var(--brand-1), var(--brand-2)); }
.voucher-totals-card[data-tone="balanced"]::before { background: linear-gradient(90deg, #10b981, #34d399); }
.voucher-totals-card[data-tone="unbalanced"]::before { background: linear-gradient(90deg, #ef4444, #f87171); }
.voucher-totals-card[data-tone="balanced"] { box-shadow: 0 6px 22px -10px rgba(16, 185, 129, 0.4); }
.voucher-totals-card[data-tone="unbalanced"] { box-shadow: 0 6px 22px -10px rgba(239, 68, 68, 0.4); }
/* Flash animation when balance state changes */
@keyframes toneFlash {
0% { transform: scale(1); }
40% { transform: scale(1.015); }
100% { transform: scale(1); }
}
.voucher-totals-card.tone-flash {
animation: toneFlash 0.5s ease-out;
}
.voucher-totals-head {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
transition: color 0.25s;
}
.voucher-totals-head i { font-size: 0.85rem; }
.voucher-totals-card[data-tone="balanced"] .voucher-totals-head { color: var(--success); }
.voucher-totals-card[data-tone="unbalanced"] .voucher-totals-head { color: var(--danger); }
.voucher-total-block {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.vt-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding: 0.45rem 0;
border-bottom: 1px dashed var(--surface-3);
}
.vt-row:last-child { border-bottom: none; }
.vt-row.vt-primary { padding-bottom: 0.7rem; }
.vt-row .vt-label {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
}
.vt-row .vt-value {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-variant-numeric: tabular-nums;
font-weight: 700;
color: var(--text-main);
transition: color 0.25s;
}
.vt-row.vt-primary .vt-value {
font-size: 1.6rem;
font-weight: 800;
letter-spacing: -0.01em;
}
.vt-row.balanced .vt-label,
.vt-row.balanced .vt-value { color: var(--success); }
.vt-row.balanced .vt-label::before {
content: "\f00c\00a0";
font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
font-weight: 900;
}
.vt-row.unbalanced .vt-label,
.vt-row.unbalanced .vt-value { color: var(--danger); }
.vt-row.unbalanced .vt-label::before {
content: "\f071\00a0";
font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
font-weight: 900;
}
/* Voucher save bar — Submit button anchored to the right */
.voucher-save-bar {
position: sticky;
bottom: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1rem;
margin-top: 0.5rem;
padding: 0.75rem 1.25rem;
background: var(--surface-1);
border: 1px solid var(--surface-3);
border-radius: var(--radius-md);
box-shadow: 0 -8px 24px -12px rgba(15, 23, 42, 0.12), 0 1px 0 rgba(15, 23, 42, 0.04);
-webkit-backdrop-filter: saturate(1.1) blur(8px);
backdrop-filter: saturate(1.1) blur(8px);
}
.voucher-save-bar .v-info {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--text-muted);
font-size: 0.8rem;
min-width: 0;
}
.voucher-save-bar .v-info i { color: var(--brand-1); }
.voucher-save-bar .v-buttons {
display: flex;
align-items: center;
gap: 0.625rem;
flex-shrink: 0;
}
.voucher-save-bar .v-buttons .btn {
min-width: 110px;
padding: 0.625rem 1.25rem;
font-size: 0.9rem;
font-weight: 700;
}
.voucher-save-bar .v-buttons .btn-primary {
box-shadow: 0 4px 12px -4px rgba(99, 102, 241, 0.5);
}
.voucher-save-bar .v-buttons .btn:disabled,
.voucher-save-bar .v-buttons .btn[aria-busy="true"] {
opacity: 0.7;
cursor: not-allowed;
}
@media (max-width: 720px) {
.voucher-save-bar {
flex-direction: column-reverse;
align-items: stretch;
padding: 0.75rem;
}
.voucher-save-bar .v-info {
order: 2;
justify-content: center;
text-align: center;
font-size: 0.72rem;
}
.voucher-save-bar .v-buttons { width: 100%; }
.voucher-save-bar .v-buttons .btn { flex: 1; min-width: 0; }
}
[data-theme="dark"] .voucher-save-bar {
background: rgba(30, 41, 59, 0.85);
border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .voucher-totals-card {
background: rgba(30, 41, 59, 0.85);
border-color: rgba(255, 255, 255, 0.08);
}
/* === Attachments Page === */
.voucher-topbar.attach-topbar {
padding: 0.25rem 0 0.5rem;
margin-bottom: 0.6rem;
}
.attach-page {
display: grid;
gap: 0.75rem;
grid-template-columns: minmax(0, 1fr);
width: 100%;
}
.attach-voucher-card,
.attach-upload-card,
.attach-files-card {
background: var(--surface-1);
border: 1px solid var(--surface-3);
border-radius: 12px;
padding: 1.15rem 1.35rem;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
/* Voucher header card — single-line strip */
.attach-voucher-card {
position: relative;
overflow: hidden;
padding: 0.85rem 1.1rem 0.85rem 1.25rem;
}
.attach-voucher-card::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: linear-gradient(180deg, var(--brand-1, #6366f1), var(--brand-2, #4f46e5));
}
.attach-voucher-line {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.65rem 1.5rem;
}
.attach-voucher-line .avl-item {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.25;
}
.attach-voucher-line .avl-item small {
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
margin-bottom: 0.1rem;
}
.attach-voucher-line .avl-item strong {
font-size: 0.92rem;
color: var(--text-main);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 28ch;
}
.attach-voucher-line .avl-amount strong { color: var(--brand-1, #6366f1); }
.attach-voucher-line .avl-status {
display: inline-flex;
align-items: center;
align-self: center;
}
.attach-voucher-line .avl-narration { flex: 1 1 240px; }
.attach-voucher-line .avl-narration strong { max-width: 100%; }
/* Upload card */
.attach-upload-card { padding: 1rem 1.1rem; }
.attach-upload-zone {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 0.5rem;
padding: 2.25rem 1rem;
border: 2px dashed var(--surface-3);
border-radius: 10px;
background: var(--surface-2);
color: var(--text-muted);
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.attach-upload-zone:hover,
.attach-upload-zone:focus-visible,
.attach-upload-zone.is-dragover {
border-color: var(--brand-1);
background: var(--accent-soft, var(--surface-2));
color: var(--brand-1);
outline: none;
}
.attach-upload-zone.is-dragover { transform: scale(1.01); }
.attach-upload-zone i.fa-cloud-arrow-up {
font-size: 2rem;
color: var(--brand-1);
}
.attach-upload-title {
font-size: 0.95rem;
font-weight: 600;
color: var(--text-main);
}
.attach-upload-zone:hover .attach-upload-title,
.attach-upload-zone.is-dragover .attach-upload-title {
color: var(--brand-1);
}
.attach-upload-hint {
font-size: 0.78rem;
}
/* Staged (ready-to-upload) area */
.attach-staged {
margin-top: 0.9rem;
padding: 0.85rem 0.95rem 0.95rem;
background: var(--surface-2);
border: 1px solid var(--surface-3);
border-radius: 10px;
}
.attach-staged-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.65rem;
font-size: 0.85rem;
}
.attach-staged-head strong { color: var(--text-main); display: inline-flex; align-items: center; gap: 0.4rem; }
.attach-staged-head strong i { color: var(--brand-1); }
.attach-staged-list {
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.attach-staged-row {
display: grid;
grid-template-columns: 32px minmax(0, 1fr) auto auto;
align-items: center;
gap: 0.6rem;
padding: 0.5rem 0.65rem;
background: var(--surface-1);
border: 1px solid var(--surface-3);
border-radius: 8px;
font-size: 0.85rem;
}
.attach-staged-row .attach-file-icon {
width: 32px; height: 32px; font-size: 1rem;
}
.attach-staged-meta { min-width: 0; }
.attach-staged-name {
font-weight: 600;
color: var(--text-main);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.attach-staged-sub {
font-size: 0.72rem;
margin-top: 0.1rem;
}
.attach-staged-status .text-danger { color: var(--danger); }
.attach-staged-remove {
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid transparent;
background: transparent;
color: var(--text-muted);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
}
.attach-staged-remove:hover {
color: var(--danger);
border-color: var(--danger);
background: rgba(239, 68, 68, 0.08);
}
.attach-staged-actions {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
margin-top: 0.85rem;
padding-top: 0.75rem;
border-top: 1px dashed var(--surface-3);
}
.attach-staged-actions .btn-primary {
min-width: 180px;
justify-content: center;
}
.attach-staged-actions .btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Saved-files list */
.attach-files-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.85rem;
padding-bottom: 0.75rem;
border-bottom: 1px dashed var(--surface-3);
}
.attach-files-head h3 {
margin: 0;
font-size: 1rem;
font-weight: 700;
color: var(--text-main);
display: flex;
align-items: center;
gap: 0.5rem;
}
.attach-files-head h3 i { color: var(--brand-1); }
.attach-files-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.attach-file-row {
display: grid;
grid-template-columns: 40px minmax(0, 1fr) auto;
align-items: center;
gap: 0.85rem;
padding: 0.75rem 0.95rem;
border: 1px solid var(--surface-3);
border-radius: 10px;
background: var(--surface-1);
transition: border-color 0.15s ease, background 0.15s ease, transform 0.05s ease;
}
.attach-file-row:hover {
border-color: var(--brand-1);
background: var(--surface-2);
}
.attach-file-icon {
width: 40px;
height: 40px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
background: var(--surface-2);
border: 1px solid var(--surface-3);
}
.attach-file-name {
font-weight: 600;
color: var(--text-main);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.attach-file-sub {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.75rem;
margin-top: 0.15rem;
}
.attach-file-actions {
display: inline-flex;
align-items: center;
gap: 0.35rem;
flex-shrink: 0;
}
.attach-empty {
text-align: center;
padding: 2.75rem 1rem;
color: var(--text-muted);
}
.attach-empty i {
font-size: 2.25rem;
margin-bottom: 0.6rem;
color: var(--text-faint, var(--text-muted));
opacity: 0.6;
}
.attach-empty p { margin: 0 0 0.25rem; font-size: 0.92rem; font-weight: 600; color: var(--text-main); }
.attach-empty small { font-size: 0.8rem; }
@media (max-width: 640px) {
.attach-voucher-card,
.attach-upload-card,
.attach-files-card { padding: 0.95rem; }
.attach-voucher-head { flex-direction: column; gap: 0.5rem; }
.attach-voucher-amount { text-align: left; }
.attach-file-row { grid-template-columns: 36px minmax(0, 1fr); }
.attach-file-actions { grid-column: 1 / -1; justify-content: flex-end; }
.attach-staged-actions { flex-direction: column-reverse; }
.attach-staged-actions .btn { width: 100%; }
}
[data-theme="dark"] .attach-voucher-card,
[data-theme="dark"] .attach-upload-card,
[data-theme="dark"] .attach-files-card,
[data-theme="dark"] .attach-file-row,
[data-theme="dark"] .attach-staged-row {
background: rgba(30, 41, 59, 0.85);
border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .attach-upload-zone,
[data-theme="dark"] .attach-staged,
[data-theme="dark"] .attach-file-icon {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.08);
}
/* === Items page (Item Master + Stock Levels) === */
.items-page { display: flex; flex-direction: column; }
.items-page-body { min-height: 200px; }
.items-toolbar {
display: flex;
/* Two stacked rows: meta block on top, actions row below. Used to be a
single justify-between row, which squeezed the search bar + 2 selects +
New Item button into a too-narrow inline-flex strip on mid widths and
made the New Item button wrap awkwardly. The vertical layout is now
deterministic across all viewport widths. */
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
margin-bottom: 0.85rem;
padding: 0.85rem 1rem;
background: var(--surface-1);
border: 1px solid var(--surface-3);
border-radius: 12px;
}
.items-toolbar-meta { min-width: 0; }
.items-toolbar-title {
margin: 0 0 0.3rem;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.items-toolbar-stats {
display: inline-flex;
align-items: center;
gap: 0.85rem;
flex-wrap: wrap;
font-size: 0.82rem;
}
.items-toolbar-stats i { margin-right: 0.3rem; }
.items-toolbar-stats .items-stat-warn { color: var(--warning); }
.items-toolbar-actions {
display: flex;
align-items: center;
gap: 0.65rem;
flex-wrap: wrap;
width: 100%;
}
/* In the new 2-row toolbar, the search bar grows to fill the row while the
Status / Type selects and the New Item button stay their natural widths
on the right. On narrow viewports everything wraps cleanly. */
.items-toolbar-actions .items-search-wrap {
flex: 1 1 240px;
max-width: none;
min-width: 200px;
}
.items-toolbar-actions > .btn,
.items-toolbar-actions > .items-filter-field {
flex: 0 0 auto;
}
.items-toolbar-actions > .btn { margin-left: auto; }
@media (max-width: 720px) {
.items-toolbar-actions > .btn { margin-left: 0; width: 100%; }
.items-toolbar-actions > .items-filter-field { flex: 1 1 calc(50% - 0.4rem); }
.items-toolbar-actions > .items-filter-field .items-filter-select { width: 100%; min-width: 0; }
}
/* Status chips sit ahead of the type chips with a hairline divider so the
two filter dimensions read as distinct. */
.items-status-chips .chip.is-active[data-status="inactive"] {
background: var(--text-muted);
border-color: var(--text-muted);
color: #fff;
}
/* Each filter dimension (Status, Type, …) gets a labeled group so a layman
can tell which "All / count" belongs to which filter. */
.items-filter-group {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.items-filter-group + .items-filter-group {
padding-left: 0.75rem;
margin-left: 0.1rem;
border-left: 1px solid var(--surface-3);
}
.items-filter-label {
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
}
@media (max-width: 720px) {
.items-filter-group + .items-filter-group {
padding-left: 0;
margin-left: 0;
border-left: none;
}
.items-filter-group { width: 100%; }
}
/* Filter dropdowns — labelled inline, professional accounting look. */
.items-filter-field {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin: 0;
}
.items-filter-select {
appearance: none;
-webkit-appearance: none;
height: 36px;
padding: 0 2.1rem 0 0.8rem;
border: 1px solid var(--surface-3);
border-radius: 8px;
background-color: var(--surface-1);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.7rem center;
color: var(--text-main);
font-size: 0.85rem;
font-weight: 500;
font-family: inherit;
cursor: pointer;
min-width: 180px;
transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.items-filter-select:hover { border-color: var(--brand-1, #6366f1); }
.items-filter-select:focus {
outline: none;
border-color: var(--brand-1, #6366f1);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
/* Universal search bar — sits at the head of the toolbar actions row so it
reads as the primary affordance, ahead of the secondary Status/Type filters
and the New-item button. Stretches to fill spare space on wide screens,
shrinks to its own line on narrow ones. */
.items-search-wrap {
position: relative;
flex: 1 1 280px;
min-width: 220px;
max-width: 380px;
display: inline-flex;
align-items: center;
}
.items-search-input {
width: 100%;
height: 36px;
padding: 0 2.4rem 0 2.15rem;
border: 1px solid var(--surface-3);
border-radius: 8px;
background-color: var(--surface-1);
color: var(--text-main);
font: inherit;
font-size: 0.86rem;
transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
-webkit-appearance: none;
appearance: none;
}
.items-search-input::placeholder { color: var(--text-muted); }
.items-search-input:hover { border-color: var(--brand-1, #6366f1); }
.items-search-input:focus {
outline: none;
border-color: var(--brand-1, #6366f1);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.items-search-input::-webkit-search-cancel-button,
.items-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.items-search-icon {
position: absolute;
top: 50%;
left: 0.75rem;
transform: translateY(-50%);
color: var(--text-muted);
font-size: 0.85rem;
pointer-events: none;
transition: color 0.12s ease;
}
.items-search-wrap:focus-within .items-search-icon,
.items-search-wrap.has-query .items-search-icon { color: var(--brand-1, #6366f1); }
.items-search-clear {
position: absolute;
top: 50%;
right: 0.4rem;
transform: translateY(-50%);
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
background: var(--surface-2);
border: 1px solid var(--surface-3);
border-radius: 999px;
color: var(--text-muted);
cursor: pointer;
font-size: 0.68rem;
line-height: 1;
transition: color 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}
.items-search-clear:hover { color: #fff; background: var(--danger, #ef4444); border-color: var(--danger, #ef4444); }
.items-search-empty-q { color: var(--text-main); }
@media (max-width: 720px) {
.items-search-wrap { flex: 1 1 100%; max-width: none; }
}
[data-theme="dark"] .items-search-input {
background-color: rgba(30, 41, 59, 0.85);
border-color: rgba(255, 255, 255, 0.08);
color: #f8fafc;
}
[data-theme="dark"] .items-search-clear {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.08);
}
/* Legacy chip styling — still used inside Cost-of-Sales sub-tab counters. */
.items-filter-chips {
display: inline-flex;
gap: 0.3rem;
flex-wrap: wrap;
}
.items-filter-chips .chip {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.8rem;
border-radius: 999px;
background: var(--surface-2);
border: 1px solid var(--surface-3);
color: var(--text-muted);
font-size: 0.82rem;
font-weight: 500;
cursor: pointer;
font-family: inherit;
}
.items-filter-chips .chip:hover {
color: var(--text-main);
border-color: var(--brand-1);
}
.items-filter-chips .chip.is-active {
background: var(--brand-1, #6366f1);
color: #fff;
border-color: var(--brand-1, #6366f1);
}
.items-filter-chips .chip-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 18px;
padding: 0 0.4rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 600;
background: rgba(15, 23, 42, 0.06);
color: inherit;
}
.items-filter-chips .chip.is-active .chip-count {
background: rgba(255, 255, 255, 0.22);
}
/* Card / table container */
.items-card {
background: var(--surface-1);
border: 1px solid var(--surface-3);
border-radius: 10px;
padding: 0.5rem 0.25rem 0.25rem;
overflow: hidden;
}
/* Hide the horizontal scrollbar inside the items card — the table fits
the card normally, and if it doesn't users can still swipe/scroll on
touch devices; we just don't paint the scrollbar chrome. */
.items-card .table-responsive {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge legacy */
}
.items-card .table-responsive::-webkit-scrollbar { width: 0; height: 0; display: none; }
.items-card-title {
margin: 0.55rem 1rem 0.6rem;
font-size: 0.95rem;
font-weight: 700;
}
/* Accounting-style table polish */
.items-table {
width: 100%;
border-collapse: collapse;
font-size: 0.88rem;
}
.items-table thead th {
background: var(--surface-2);
color: var(--text-muted);
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0.6rem 0.85rem;
border-bottom: 1px solid var(--surface-3);
}
.items-table tbody td {
padding: 0.7rem 0.85rem;
border-bottom: 1px solid var(--surface-3);
vertical-align: middle;
}
.items-table tbody tr:last-child td { border-bottom: none; }
.items-table .tabular { font-variant-numeric: tabular-nums; }
.items-table .items-name { font-weight: 600; color: var(--text-main); }
.items-table .items-desc { font-size: 0.75rem; margin-top: 0.15rem; }
.items-table .items-stock { font-weight: 600; }
.items-table .items-stock-ok { color: var(--text-main); }
.items-table .items-stock-warning { color: var(--warning); }
.items-table .items-stock-danger { color: var(--danger); }
.items-table .items-actions-col { width: 1%; text-align: right; padding-right: 0.5rem; }
.items-table tbody tr.is-inactive td { opacity: 0.55; }
.items-table tbody tr.is-inactive .items-name { font-weight: 500; }
/* Item Movement: reversed row is subdued and its qty cells are struck
through so the reader sees instantly that it isn't contributing. */
.items-table tbody tr.mv-row-reversed td { color: var(--text-muted); }
.items-table tbody tr.mv-row-reversed .mv-strike { text-decoration: line-through; }
.items-wh {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.18rem 0.55rem;
border-radius: 999px;
background: var(--surface-2);
border: 1px solid var(--surface-3);
font-size: 0.78rem;
color: var(--text-main);
}
.items-wh i { color: var(--brand-1, #6366f1); font-size: 0.78rem; }
/* KPI tone tints for stock-levels page */
.items-kpis { margin-bottom: 0.85rem; }
.items-kpis .kpi-warning .kpi-label,
.items-kpis .kpi-warning .kpi-value { color: var(--warning); }
.items-kpis .kpi-danger .kpi-label,
.items-kpis .kpi-danger .kpi-value { color: var(--danger); }
@media (max-width: 720px) {
.items-toolbar { flex-direction: column; align-items: stretch; }
.items-toolbar-actions { justify-content: flex-start; }
.items-table thead th,
.items-table tbody td { padding: 0.55rem 0.55rem; }
}
[data-theme="dark"] .items-toolbar,
[data-theme="dark"] .items-card {
background: rgba(30, 41, 59, 0.85);
border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .items-table thead th { background: rgba(255, 255, 255, 0.04); }
[data-theme="dark"] .items-filter-chips .chip {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .items-filter-chips .chip-count { background: rgba(255, 255, 255, 0.1); }
[data-theme="dark"] .items-filter-select {
background-color: rgba(30, 41, 59, 0.85);
border-color: rgba(255, 255, 255, 0.08);
color: #f8fafc;
}
/* === Item entry — full page form === */
.item-form-page {
display: grid;
gap: 1rem;
max-width: 980px;
margin: 0 auto;
padding-bottom: 5rem; /* keep content above the save bar */
}
.item-form-card {
background: var(--surface-1);
border: 1px solid var(--surface-3);
border-radius: 10px;
padding: 1.1rem 1.25rem;
}
.item-form-card-title {
margin: 0 0 0.85rem;
font-size: 0.95rem;
font-weight: 700;
color: var(--text-main);
display: flex;
align-items: center;
gap: 0.55rem;
padding-bottom: 0.65rem;
border-bottom: 1px dashed var(--surface-3);
}
.item-form-card-title i { color: var(--brand-1, #6366f1); font-size: 0.95rem; }
.item-form-card .grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
@media (max-width: 640px) {
.item-form-card .grid-2 { grid-template-columns: 1fr; }
.item-form-card { padding: 0.9rem; }
}
[data-theme="dark"] .item-form-card {
background: rgba(30, 41, 59, 0.85);
border-color: rgba(255, 255, 255, 0.08);
}
/* Product image upload — preview + controls side by side. */
.item-image-row {
display: flex;
align-items: flex-start;
gap: 1.1rem;
flex-wrap: wrap;
}
.item-image-preview {
width: 140px;
height: 140px;
border: 1px dashed var(--surface-3);
border-radius: 10px;
background: var(--surface-2);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.item-image-preview img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.item-image-preview i {
font-size: 2.25rem;
color: var(--text-faint, var(--text-muted));
opacity: 0.45;
}
.item-image-controls {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.45rem;
flex: 1 1 200px;
min-width: 0;
}
.item-image-controls small { font-size: 0.78rem; }
[data-theme="dark"] .item-image-preview {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.08);
}
/* === Reports module === */
/* KPI strip sits above each IFRS / table report (P&L, BS, CF, TB, Aging).
Reuses .kpi-card and the tone helpers we already use on Items / VAT /
Purchase Bills so the visual language stays the same across the app. */
.reports-kpis {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.85rem;
margin-bottom: 1rem;
}
.reports-kpis .kpi-card.kpi-success .kpi-label,
.reports-kpis .kpi-card.kpi-success .kpi-value { color: var(--success); }
.reports-kpis .kpi-card.kpi-danger .kpi-label,
.reports-kpis .kpi-card.kpi-danger .kpi-value { color: var(--danger); }
.reports-kpis .kpi-card.kpi-warning .kpi-label,
.reports-kpis .kpi-card.kpi-warning .kpi-value { color: var(--warning); }
@media (max-width: 980px) { .reports-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .reports-kpis { grid-template-columns: 1fr; } }
/* Trial Balance: the search bar + count label live in a thin row above the
table, mirroring the toolbar pattern from Inventory Items. */
.tb-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
padding: 0.4rem 1rem 0.6rem;
border-bottom: 1px solid var(--surface-3);
}
.tb-toolbar .items-search-wrap {
flex: 1 1 280px;
min-width: 220px;
max-width: 480px;
}
/* Aged Receivables / Payables: red-tint the row when there's anything over
90 days; amber when 61-90. Cell-level red on the >90 column itself so the
exposure jumps out at a glance. */
.aging-row-danger td { background: rgba(239, 68, 68, 0.06); }
.aging-row-warning td { background: rgba(245, 158, 11, 0.05); }
.aging-cell-danger { color: var(--danger); font-weight: 600; }
/* === VAT module === */
/* The VAT page is a 2-tab subview. Sub-tabs reuse .subtabs/.subtab from the
Item Report tabs. Most layout pieces below are small composers — they sit
on top of .card / .kpi-card / .items-search-* / .badge-* so we keep visual
parity with the rest of the polished modules. */
.vat-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.vat-kpis .kpi-card.kpi-danger .kpi-label,
.vat-kpis .kpi-card.kpi-danger .kpi-value { color: var(--danger); }
.vat-kpis .kpi-card.kpi-success .kpi-label,
.vat-kpis .kpi-card.kpi-success .kpi-value { color: var(--success); }
@media (max-width: 720px) { .vat-kpis { grid-template-columns: 1fr; } }
.vat-section-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
@media (max-width: 900px) { .vat-section-grid { grid-template-columns: 1fr; } }
.vat-section {
padding: 0.85rem 1rem;
}
.vat-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.6rem;
flex-wrap: wrap;
}
.vat-section-head h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.vat-section-total { font-size: 0.82rem; }
.vat-section-total strong { color: var(--text-main); margin-left: 0.3rem; }
.vat-amount-cell { color: var(--brand-1, #6366f1); font-weight: 600; }
/* Bottom "Save filing" call-to-action — sits below the per-section tables. */
.vat-save-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.25rem;
margin-top: 1.25rem;
background: var(--surface-1);
border: 1px dashed var(--surface-3);
border-radius: 12px;
flex-wrap: wrap;
}
.vat-save-info {
display: flex;
align-items: flex-start;
gap: 0.7rem;
flex: 1 1 320px;
min-width: 0;
}
.vat-save-info i { color: var(--brand-1, #6366f1); font-size: 1.1rem; margin-top: 0.15rem; }
.vat-save-info strong { display: block; font-size: 0.95rem; margin-bottom: 0.15rem; }
.vat-save-info .muted { font-size: 0.82rem; }
/* Save-filing modal: form + summary block + warning. */
.vat-filing-form .modal-footer-actions {
display: flex;
justify-content: flex-end;
gap: 0.6rem;
margin-top: 1.25rem;
padding-top: 0.9rem;
border-top: 1px solid var(--surface-3);
}
.vat-filing-summary {
margin-top: 0.85rem;
padding: 0.75rem 0.9rem;
background: var(--surface-2);
border: 1px solid var(--surface-3);
border-radius: 8px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.55rem 1rem;
font-size: 0.86rem;
}
.vat-filing-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.vat-filing-summary .vat-filing-net { grid-column: span 2; padding-top: 0.55rem; border-top: 1px solid var(--surface-3); font-weight: 700; }
.vat-filing-summary .muted { font-size: 0.78rem; }
.vat-filing-warning {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin-top: 0.85rem;
padding: 0.7rem 0.85rem;
background: rgba(245, 158, 11, 0.08);
border-left: 3px solid var(--warning, #f59e0b);
border-radius: 6px;
font-size: 0.82rem;
color: var(--text-main);
}
.vat-filing-warning i { color: var(--warning, #f59e0b); margin-top: 0.15rem; }
/* History tab: detail modal meta strip + net colour cues. */
.vat-filing-meta {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.75rem 1rem;
padding: 0.85rem 1rem;
background: var(--surface-2);
border: 1px solid var(--surface-3);
border-radius: 8px;
font-size: 0.84rem;
}
.vat-filing-meta > div { display: flex; flex-direction: column; gap: 0.15rem; }
.vat-filing-meta .muted { font-size: 0.74rem; }
@media (max-width: 720px) { .vat-filing-meta { grid-template-columns: 1fr 1fr; } }
.vat-net-payable { color: var(--danger); }
.vat-net-recoverable { color: var(--success); }
.vat-latest-val { font-size: 1.1rem; }
/* === Cross-module list-page primitives === */
/* Inline button row used across modules (sales / purchase / reports
toolbars and per-row action groups). The class previously had no base
style, so buttons stacked vertically and filter-action groups appeared
to be "full width". */
.btn-row {
display: inline-flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
/* Section header above a list table — " …meta… [Export] [New …]".
Used by Sales, Purchase Bills, Quotations etc. Was previously only
hidden on print and had no screen layout, so the title block and the
action buttons stacked vertically. */
.voucher-list-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 1rem;
flex-wrap: wrap;
border-bottom: 1px solid var(--surface-3);
}
.voucher-list-topbar h3 { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.voucher-list-topbar > div:first-child { min-width: 0; }
.voucher-list-topbar small.muted { font-size: 0.78rem; }
/* Prev / Page X / Next pager row at the bottom of list cards. Used to
have only a border-top rule, so the three children sat stacked. */
.pager {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-top: 1px solid var(--surface-3);
}
.pager .muted { font-size: 0.85rem; }
/* "New <thing>" pill button used on every list-page topbar. Was relying
on global .btn-primary styles; this just normalises padding + radius
so it matches the height of the neighbouring .btn-ghost Export button. */
.btn-new-pill {
display: inline-flex;
align-items: center;
gap: 0.45rem;
height: 36px;
padding: 0 0.95rem;
border-radius: 8px;
background: var(--brand-1, #6366f1);
color: #fff;
border: 1px solid var(--brand-1, #6366f1);
font-weight: 600;
cursor: pointer;
font: inherit;
font-weight: 600;
line-height: 1;
transition: background 0.12s ease, box-shadow 0.12s ease;
}
.btn-new-pill:hover { background: var(--brand-2, #4f46e5); border-color: var(--brand-2, #4f46e5); box-shadow: 0 4px 10px rgba(99, 102, 241, 0.25); }
.btn-new-pill i { font-size: 0.8rem; }
/* Mobile-only floating filter button — removed; filter card is always visible. */
.filter-trigger-btn { display: none; }
/* === Purchase Bills page (list view) === */
/* KPI strip: 3-column at desktop, stacks below 720px. Reuses .kpi-card from
the global stylesheet so spacing/typography match Sales / Items / Dashboard
without duplicating tokens. */
.purchase-page { display: flex; flex-direction: column; }
.purchase-kpis {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
margin-bottom: 0.85rem;
}
.purchase-kpis .kpi-card.kpi-danger .kpi-label,
.purchase-kpis .kpi-card.kpi-danger .kpi-value { color: var(--danger); }
@media (max-width: 720px) {
.purchase-kpis { grid-template-columns: 1fr; }
}
/* Filter card foot — bottom row of the filter card holding the "show voided"
toggle and Load/Reset buttons. Keeps the controls visually grouped so the
filter form reads as a single unit. */
.filter-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--surface-3);
}
.filter-toggle {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin: 0;
cursor: pointer;
font-size: 0.875rem;
}
.filter-toggle input { width: 16px; height: 16px; cursor: pointer; }
/* Purchase Bills filter card — single horizontal row at desktop, wraps on
narrow viewports. Layout:
[From] [To] [Search ───────────] [Voided] [Reset] [Load]
The search cell flex-grows so longer placeholders stay visible; everything
else stays at its natural width so the row reads as a single toolbar. */
.purchase-filter-card { padding: 0.85rem 1rem; }
.purchase-filter-row {
display: flex;
align-items: flex-end;
gap: 0.85rem;
flex-wrap: wrap;
}
.purchase-filter-row .form-group { min-width: 140px; }
.purchase-search-cell {
flex: 1 1 280px;
min-width: 220px;
}
.purchase-search-cell .items-search-wrap {
max-width: none;
width: 100%;
flex: 1 1 auto;
}
.purchase-filter-row .filter-toggle {
align-self: center;
margin-bottom: 0.4rem;
white-space: nowrap;
}
.purchase-filter-actions { margin-bottom: 0; align-self: flex-end; }
@media (max-width: 720px) {
.purchase-filter-row .form-group,
.purchase-search-cell { flex: 1 1 100%; min-width: 0; }
.purchase-filter-row .filter-toggle { width: 100%; margin-bottom: 0; }
.purchase-filter-actions { width: 100%; justify-content: stretch; }
.purchase-filter-actions .btn { flex: 1; }
}
/* Dark Mode Overrides */
[data-theme="dark"] {
--bg: #0f172a;
--surface-1: #1e293b;
--surface-2: #334155;
--surface-3: #475569;
--text-main: #f8fafc;
--text-muted: #94a3b8;
header { background: rgba(30, 41, 59, 0.85); border-bottom-color: rgba(255,255,255,0.05); }
input, select, textarea { background: #1e293b; border-color: #334155; color: #f8fafc; }
.card { border-color: rgba(255,255,255,0.05); }
th { background: #1e293b; color: #cbd5e1; }
td { border-bottom-color: #334155; }
.modal-backdrop { background: rgba(0,0,0,0.6); }
}
/* =============================================================
Premium Actions Dropdown (Three Dots Menu)
============================================================= */
.actions-dropdown {
position: relative;
display: inline-block;
}
.actions-dropdown-trigger {
width: 32px;
height: 32px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
border: none;
background: transparent;
cursor: pointer;
transition: all 0.2s ease;
}
.actions-dropdown-trigger:hover {
background: var(--surface-3);
color: var(--text-main);
}
.actions-dropdown-menu {
position: absolute;
right: 0;
top: 100%;
background: var(--surface-1);
border: 1px solid var(--surface-3);
box-shadow: var(--shadow-premium);
border-radius: var(--radius-md);
padding: 6px;
z-index: 1000;
min-width: 150px;
display: none;
flex-direction: column;
gap: 4px;
}
.actions-dropdown-menu.show {
display: flex !important;
}
/* Style the buttons inside the menu to look like menu items */
.actions-dropdown-menu .btn,
.actions-dropdown-menu a.btn {
width: 100% !important;
justify-content: flex-start !important;
text-align: left !important;
padding: 8px 12px !important;
font-size: 0.85rem !important;
border-radius: var(--radius-sm) !important;
border: none !important;
background: transparent !important;
color: var(--text-main) !important;
box-shadow: none !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
cursor: pointer !important;
transition: background 0.15s ease !important;
text-decoration: none !important;
}
.actions-dropdown-menu .btn:hover,
.actions-dropdown-menu a.btn:hover {
background: var(--surface-2) !important;
color: var(--text-main) !important;
}
/* Soft red styles for dangerous actions */
.actions-dropdown-menu .btn.btn-danger,
.actions-dropdown-menu .btn-del-attach {
color: var(--danger) !important;
}
.actions-dropdown-menu .btn.btn-danger:hover,
.actions-dropdown-menu .btn-del-attach:hover {
background: rgba(239, 68, 68, 0.08) !important;
color: var(--danger) !important;
}
/* RTL layout overrides */
[dir="rtl"] .actions-dropdown-menu {
right: auto;
left: 0;
}
[dir="rtl"] .actions-dropdown-menu .btn,
[dir="rtl"] .actions-dropdown-menu a.btn {
text-align: right !important;
justify-content: flex-start !important;
}
/* Slim Top Progress Bar */
.top-progress-bar {
position: fixed;
top: 0;
left: 0;
height: 3px;
background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
z-index: 9999;
width: 0;
opacity: 1;
transition: width 0.4s cubic-bezier(0.1, 0.8, 0.3, 1), opacity 0.2s ease;
pointer-events: none;
}
.top-progress-bar.loading {
width: 70%;
}
.top-progress-bar.finished {
width: 100% !important;
opacity: 0;
}
/* Page Info Tooltip */
.page-info-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 0.5rem;
color: var(--text-muted);
font-size: 1rem;
cursor: help;
position: relative;
transition: color 0.2s;
}
.page-info-trigger:hover {
color: var(--brand-1);
}
.page-info-tooltip {
visibility: hidden;
opacity: 0;
position: absolute;
top: calc(100% + 8px);
left: 0;
background: var(--surface-1);
color: var(--text-main);
padding: 0.75rem 1rem;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 500;
line-height: 1.4;
white-space: nowrap;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
border: 1px solid var(--surface-3);
transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
transform: translateY(-5px);
z-index: 1000;
min-width: max-content;
}
.page-info-trigger:hover .page-info-tooltip {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
[dir="rtl"] .page-info-trigger { margin-left: 0; margin-right: 0.5rem; }
[dir="rtl"] .page-info-tooltip { left: auto; right: 0; }