/* ═══════════════════════════════════════════════════════════════════════
ARTTOP — Companies Management System
Stylesheet (RTL/LTR bilingual)
═══════════════════════════════════════════════════════════════════════ */
:root {
--primary: #014034;
--primary-dark: #013229;
--primary-light: #0d6e5c;
--accent: #f59e0b;
--accent-dark: #d97706;
--success: #10b981;
--warning: #f59e0b;
--danger: #ef4444;
--info: #3b82f6;
--sidebar-bg: linear-gradient(180deg, #014034 0%, #013229 50%, #0a1f1c 100%);
--header-h: 60px;
--copyright-h: 28px;
--sidebar-w: 280px;
--radius: 10px;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
--shadow: 0 4px 12px rgba(0,0,0,0.08);
--shadow-lg: 0 12px 32px rgba(0,0,0,0.12);
--text: #1f2937;
--text-muted: #6b7280;
--border: #e5e7eb;
--bg: #f3f4f6;
--bg-card: #ffffff;
}
/* Base */
* {
font-family: 'Tajawal', 'Inter', sans-serif;
font-feature-settings: "lnum" 1, "tnum" 1;
box-sizing: border-box;
}
html[lang="en"] * {
font-family: 'Inter', 'Tajawal', sans-serif;
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
padding-top: var(--copyright-h);
min-height: 100vh;
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
.hidden { display: none !important; }
.hidden-mobile { display: inline; }
@media (max-width: 768px) {
.hidden-mobile { display: none !important; }
}
/* Numeric / date fields stay LTR even in RTL */
input[type="date"], input[type="time"], input[type="number"],
input[type="tel"], input[type="email"], input[type="url"] {
direction: ltr; unicode-bidi: plaintext;
}
html[dir="rtl"] input[type="date"],
html[dir="rtl"] input[type="time"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"] { text-align: right; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
/* ═════════════════════════════════════════════════════════════════════════
Copyright Bar (Fixed Top)
═════════════════════════════════════════════════════════════════════════ */
.copyright-bar {
position: fixed; top: 0; left: 0; right: 0;
height: var(--copyright-h);
background: linear-gradient(90deg, #0f172a 0%, #1e1b4b 35%, #312e81 65%, #1e1b4b 100%);
color: #fde68a;
font-size: 12px; font-weight: 800; line-height: 28px;
z-index: 200;
box-shadow: 0 2px 8px rgba(0,0,0,0.25), inset 0 -1px 0 rgba(251,191,36,0.45);
border-bottom: 2px solid #fbbf24;
user-select: none;
display: flex; align-items: center; justify-content: center; gap: 10px;
white-space: nowrap; overflow: hidden; padding: 0 12px;
background-size: 200% 100%;
animation: copyrightShine 14s ease-in-out infinite;
}
@keyframes copyrightShine {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.copyright-bar .cr-icon { color: #fbbf24; font-size: 14px; }
.copyright-bar .cr-company { color: #fde047; font-weight: 900; }
.copyright-bar .cr-sep { color: #fbbf24; opacity: 0.65; font-weight: 900; font-size: 14px; }
@media (max-width: 900px) {
.copyright-bar { font-size: 10px; gap: 6px; }
}
@media print {
.copyright-bar { display: none !important; }
body { padding-top: 0 !important; }
}
/* ═════════════════════════════════════════════════════════════════════════
Login Screen
═════════════════════════════════════════════════════════════════════════ */
.login-screen {
min-height: calc(100vh - var(--copyright-h));
display: flex; align-items: center; justify-content: center;
padding: 20px;
background: linear-gradient(135deg, #014034 0%, #0d6e5c 100%);
position: relative; overflow: hidden;
}
.login-bg-anim {
position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 30%, rgba(245,158,11,0.15), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(16,185,129,0.20), transparent 40%);
animation: bgPulse 12s ease-in-out infinite;
}
@keyframes bgPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.7; }
}
.login-card {
position: relative; z-index: 1;
background: white;
border-radius: 20px;
padding: 40px 32px 28px;
width: 100%; max-width: 420px;
box-shadow: 0 25px 60px rgba(0,0,0,0.3);
animation: cardIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes cardIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.lang-toggle-btn {
position: absolute; top: 16px; left: 16px;
background: #f3f4f6; border: 1px solid var(--border);
border-radius: 999px; padding: 6px 14px;
display: flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 700; color: var(--text);
transition: all 0.2s;
}
.lang-toggle-btn:hover { background: var(--primary); color: white; transform: scale(1.05); }
html[dir="ltr"] .lang-toggle-btn { left: auto; right: 16px; }
.login-logo { text-align: center; margin-bottom: 28px; }
.login-logo-circle {
width: 80px; height: 80px;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
border-radius: 24px;
display: inline-flex; align-items: center; justify-content: center;
color: white; font-size: 40px; font-weight: 900;
box-shadow: 0 10px 30px rgba(1,64,52,0.4);
margin-bottom: 12px;
font-family: 'Inter', sans-serif;
}
.login-brand { font-size: 28px; font-weight: 900; color: var(--primary); margin: 4px 0; }
.login-sub { font-size: 13px; color: var(--text-muted); margin: 0; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 13px; font-weight: 700; color: var(--text); }
.input-with-icon {
position: relative;
display: flex; align-items: center;
background: #f9fafb; border: 1.5px solid var(--border);
border-radius: var(--radius); transition: all 0.2s;
}
.input-with-icon:focus-within { border-color: var(--primary); background: white; box-shadow: 0 0 0 3px rgba(1,64,52,0.1); }
.input-with-icon .input-icon { padding: 0 12px; font-size: 16px; }
.input-with-icon input {
flex: 1; border: none; background: transparent;
padding: 12px 0; font-size: 14px; outline: none;
}
.pwd-toggle { background: none; border: none; padding: 0 12px; font-size: 16px; }
.form-row { display: flex; justify-content: space-between; align-items: center; }
.checkbox-inline { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.checkbox-inline input { width: 16px; height: 16px; cursor: pointer; }
.link-muted { color: var(--text-muted); font-size: 13px; text-decoration: none; }
.link-muted:hover { color: var(--primary); text-decoration: underline; }
.btn-primary {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: white; border: none;
padding: 12px 20px; border-radius: var(--radius);
font-weight: 700; font-size: 15px;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
transition: all 0.2s;
box-shadow: 0 4px 12px rgba(1,64,52,0.3);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(1,64,52,0.4); }
.btn-primary:active { transform: translateY(0); }
.btn-block { width: 100%; }
.btn-arrow { transition: transform 0.2s; }
html[dir="ltr"] .btn-arrow { transform: scaleX(-1); }
.btn-primary:hover .btn-arrow { transform: translateX(-4px); }
html[dir="ltr"] .btn-primary:hover .btn-arrow { transform: scaleX(-1) translateX(-4px); }
.login-demo-hint {
background: #fef3c7; border: 1px solid #fcd34d;
border-radius: 8px; padding: 8px 12px;
font-size: 12px; color: #92400e; text-align: center;
}
.login-footer {
text-align: center; margin-top: 20px;
font-size: 11px; color: var(--text-muted);
}
/* ═════════════════════════════════════════════════════════════════════════
App Shell
═════════════════════════════════════════════════════════════════════════ */
.app-shell {
min-height: calc(100vh - var(--copyright-h));
display: grid;
grid-template-columns: var(--sidebar-w) 1fr;
grid-template-rows: var(--header-h) 1fr;
grid-template-areas:
"sidebar header"
"sidebar main";
}
html[dir="ltr"] .app-shell {
grid-template-columns: var(--sidebar-w) 1fr;
}
@media (max-width: 1024px) {
.app-shell {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main";
}
}
/* Header */
.app-header {
grid-area: header;
background: white;
border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: 12px;
padding: 0 16px;
position: sticky;
top: var(--copyright-h);
z-index: 50;
box-shadow: var(--shadow-sm);
}
.icon-btn {
background: none; border: none;
width: 40px; height: 40px;
border-radius: 8px; font-size: 20px;
display: inline-flex; align-items: center; justify-content: center;
transition: background 0.2s;
}
.icon-btn:hover { background: #f3f4f6; }
.brand-mini { display: flex; align-items: center; gap: 10px; }
.brand-mini-logo {
width: 36px; height: 36px;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
border-radius: 10px;
color: white; font-weight: 900; font-size: 18px;
display: flex; align-items: center; justify-content: center;
font-family: 'Inter', sans-serif;
}
.brand-mini-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-mini-title { font-weight: 900; font-size: 14px; color: var(--primary); font-family: 'Inter', sans-serif; }
.brand-mini-sub { font-size: 10px; color: var(--text-muted); }
@media (min-width: 1025px) {
.brand-mini { display: none; }
}
.page-title {
flex: 1;
font-size: 16px; font-weight: 700; color: var(--text);
margin: 0; padding: 0 12px;
display: flex; align-items: center; gap: 10px;
min-width: 0;
}
.page-title #pageTitleIcon { font-size: 24px; flex-shrink: 0; }
.header-actions { display: flex; align-items: center; gap: 6px; }
/* 🟢 Pill-style header badges (status, date) */
.header-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 10px;
border-radius: 8px;
font-size: 12px; font-weight: 800;
white-space: nowrap;
user-select: none;
}
/* 🚪 Header Logout button — bright red, always visible */
.hdr-logout-btn {
display: inline-flex; align-items: center; gap: 6px;
background: linear-gradient(135deg, #dc2626, #b91c1c);
color: #fff; border: 0;
border-radius: 8px;
padding: 7px 14px;
font-size: 12.5px; font-weight: 800;
cursor: pointer;
box-shadow: 0 2px 6px rgba(220,38,38,0.25);
transition: filter 0.15s;
white-space: nowrap;
}
.hdr-logout-btn:hover { filter: brightness(1.07); }
/* 🔔 Notification badge (number) */
.notif-badge {
position: absolute;
top: 2px;
min-width: 18px; height: 18px; padding: 0 5px;
background: #dc2626; color: #fff;
border-radius: 9px;
border: 2px solid #fff;
font-size: 10.5px; font-weight: 900;
display: flex; align-items: center; justify-content: center;
line-height: 1;
}
html[dir="rtl"] .notif-badge { left: 0; }
html[dir="ltr"] .notif-badge { right: 0; }
/* 🔔 Notification dropdown panel */
.notif-dropdown {
position: absolute;
top: calc(100% + 8px);
min-width: 360px;
max-width: 420px;
background: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 12px 36px rgba(15,23,42,0.18);
z-index: 1200;
overflow: hidden;
}
html[dir="rtl"] .notif-dropdown { left: 0; }
html[dir="ltr"] .notif-dropdown { right: 0; }
.notif-header {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 14px;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-bottom: 1px solid #e2e8f0;
font-size: 13px; color: #0f172a;
}
.notif-mark-read {
background: #fff; border: 1px solid #cbd5e1;
border-radius: 6px;
padding: 3px 8px;
font-size: 11px; font-weight: 700;
color: #475569; cursor: pointer;
}
.notif-mark-read:hover { background: #f1f5f9; }
.notif-list {
max-height: 380px;
overflow-y: auto;
}
.notif-item {
display: flex; gap: 10px; align-items: flex-start;
padding: 11px 14px;
border-bottom: 1px solid #f1f5f9;
cursor: pointer;
transition: background 0.12s;
}
.notif-item:hover { background: #f8fafc; }
.notif-item.unread { background: #eff6ff; }
.notif-item.unread:hover { background: #dbeafe; }
.notif-icon {
width: 32px; height: 32px;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 16px;
flex-shrink: 0;
}
.notif-icon.task { background: #fef3c7; }
.notif-icon.note { background: #ede9fe; }
.notif-icon.alert { background: #fee2e2; }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-size: 12.5px; font-weight: 800; color: #0f172a; line-height: 1.4; }
.notif-meta { font-size: 11px; color: #64748b; margin-top: 2px; }
.notif-empty {
text-align: center; padding: 40px 20px;
color: #94a3b8; font-size: 13px; font-weight: 600;
}
.notif-footer {
display: flex; justify-content: space-around; gap: 8px;
padding: 8px 12px;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
}
.notif-footer-link {
font-size: 11.5px; font-weight: 700;
color: #1d4ed8;
text-decoration: none;
padding: 4px 10px; border-radius: 6px;
}
.notif-footer-link:hover { background: #dbeafe; }
/* User card — flip avatar to end for RTL/LTR */
html[dir="rtl"] .user-menu-btn { flex-direction: row; }
html[dir="ltr"] .user-menu-btn { flex-direction: row; }
/* Make header on smaller widths still readable */
@media (max-width: 1100px) {
.header-pill .hidden-mobile,
.hdr-logout-btn .hidden-mobile { display: none !important; }
}
.header-action-btn {
position: relative;
background: none; border: none;
padding: 8px 12px;
border-radius: 8px;
display: inline-flex; align-items: center; gap: 6px;
font-size: 14px; font-weight: 600;
transition: background 0.2s;
}
.header-action-btn:hover { background: #f3f4f6; }
.badge-dot {
position: absolute; top: 6px;
width: 8px; height: 8px;
background: var(--danger); border-radius: 50%;
border: 2px solid white;
}
html[dir="rtl"] .badge-dot { left: 6px; }
html[dir="ltr"] .badge-dot { right: 6px; }
.user-menu { position: relative; }
.user-menu-btn {
background: none; border: none;
display: flex; align-items: center; gap: 8px;
padding: 4px 8px; border-radius: 10px;
transition: background 0.2s;
}
.user-menu-btn:hover { background: #f3f4f6; }
.user-avatar {
width: 36px; height: 36px;
background: linear-gradient(135deg, var(--accent), var(--accent-dark));
border-radius: 50%;
color: white; font-weight: 800;
display: flex; align-items: center; justify-content: center;
font-family: 'Inter', sans-serif;
}
.user-info { text-align: start; line-height: 1.2; }
.user-name { font-size: 13px; font-weight: 700; color: var(--text); }
.user-role { font-size: 11px; color: var(--text-muted); }
.user-dropdown {
position: absolute; top: 100%; margin-top: 8px;
background: white;
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: var(--shadow-lg);
min-width: 200px;
padding: 6px;
z-index: 60;
}
html[dir="rtl"] .user-dropdown { left: 0; }
html[dir="ltr"] .user-dropdown { right: 0; }
.user-dropdown a {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px;
text-decoration: none; color: var(--text);
font-size: 13px; font-weight: 600;
border-radius: 6px;
transition: background 0.15s;
}
.user-dropdown a:hover { background: #f3f4f6; }
.user-dropdown hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; }
/* ═════════════════════════════════════════════════════════════════════════
Sidebar
═════════════════════════════════════════════════════════════════════════ */
.sidebar {
grid-area: sidebar;
background: var(--sidebar-bg);
color: white;
display: flex; flex-direction: column;
overflow: hidden;
position: sticky;
top: var(--copyright-h);
height: calc(100vh - var(--copyright-h));
z-index: 40;
box-shadow: -2px 0 12px rgba(0,0,0,0.05);
}
html[dir="ltr"] .sidebar { box-shadow: 2px 0 12px rgba(0,0,0,0.05); }
@media (max-width: 1024px) {
.sidebar {
position: fixed;
top: var(--copyright-h);
height: calc(100vh - var(--copyright-h));
width: var(--sidebar-w);
transform: translateX(100%);
transition: transform 0.3s;
}
html[dir="ltr"] .sidebar { transform: translateX(-100%); }
.sidebar.open { transform: translateX(0); }
}
.sidebar-header {
padding: 16px 20px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar-brand { display: flex; align-items: center; gap: 12px; }
.sidebar-brand-logo {
width: 44px; height: 44px;
background: linear-gradient(135deg, var(--accent), var(--accent-dark));
border-radius: 12px;
color: white; font-weight: 900; font-size: 22px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 12px rgba(245,158,11,0.4);
font-family: 'Inter', sans-serif;
}
.sidebar-brand-name { font-weight: 900; font-size: 18px; color: white; font-family: 'Inter', sans-serif; }
.sidebar-brand-sub { font-size: 11px; color: rgba(255,255,255,0.7); }
.sidebar-nav {
flex: 1; overflow-y: auto;
padding: 12px 0;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }
.sidebar-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 16px;
margin: 2px 8px;
border-radius: 10px;
color: rgba(255,255,255,0.9);
font-size: 13px; font-weight: 600;
cursor: pointer;
transition: all 0.2s;
position: relative;
}
.sidebar-item:hover {
background: rgba(255,255,255,0.12);
color: white;
}
html[dir="rtl"] .sidebar-item:hover { transform: translateX(-3px); }
html[dir="ltr"] .sidebar-item:hover { transform: translateX(3px); }
.sidebar-item.active {
background: linear-gradient(90deg, rgba(255,255,255,0.22), rgba(255,255,255,0.10));
box-shadow: 0 2px 8px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.15);
color: white;
}
.sidebar-item.active::before {
content: '';
position: absolute; top: 6px; bottom: 6px;
width: 3px;
background: linear-gradient(180deg, #34d399, #10b981);
box-shadow: 0 0 12px rgba(52,211,153,0.6);
border-radius: 3px;
}
html[dir="rtl"] .sidebar-item.active::before { right: 0; border-radius: 3px 0 0 3px; }
html[dir="ltr"] .sidebar-item.active::before { left: 0; border-radius: 0 3px 3px 0; }
/* Sidebar section header */
.sidebar-section {
display: flex; align-items: center; gap: 8px;
font-size: 12px;
color: rgba(255,255,255,0.85);
font-weight: 800;
padding: 6px 14px;
margin: 14px 8px 6px;
border-radius: 6px;
cursor: pointer;
user-select: none;
transition: background 0.15s;
}
.sidebar-section:hover { background: rgba(255,255,255,0.08); }
.sidebar-section::before {
content: ''; width: 8px; height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.55);
flex-shrink: 0;
}
.sidebar-section::after {
content: ''; flex: 1; height: 1px;
background: linear-gradient(90deg, rgba(255,255,255,0.20), transparent);
}
html[dir="ltr"] .sidebar-section::after { background: linear-gradient(-90deg, rgba(255,255,255,0.20), transparent); }
.sidebar-arrow {
color: rgba(255,255,255,0.85);
font-size: 10px;
transition: transform 0.2s;
}
.sidebar-section.collapsed .sidebar-arrow { transform: rotate(-90deg); }
.sidebar-group { transition: all 0.3s; overflow: hidden; }
.sidebar-group.collapsed { max-height: 0 !important; opacity: 0; margin: 0; padding: 0; }
/* Group color coding */
.sidebar-item[data-group="main"] { background: linear-gradient(90deg, rgba(20,184,166,0.25), rgba(20,184,166,0.10)); border-inline-end: 3px solid rgba(20,184,166,0.6); }
.sidebar-item[data-group="main"]:hover { background: linear-gradient(90deg, rgba(20,184,166,0.45), rgba(20,184,166,0.20)); }
.sidebar-item.active[data-group="main"] { background: linear-gradient(90deg, rgba(20,184,166,0.70), rgba(20,184,166,0.40)); }
.sidebar-section[data-group="org"] { background: linear-gradient(90deg, rgba(245,158,11,0.55), rgba(245,158,11,0.25)); border-inline-end: 4px solid #f59e0b; color: white; }
.sidebar-item[data-group="org"] { background: linear-gradient(90deg, rgba(245,158,11,0.22), rgba(245,158,11,0.10)); border-inline-end: 3px solid rgba(245,158,11,0.6); }
.sidebar-item[data-group="org"]:hover { background: linear-gradient(90deg, rgba(245,158,11,0.42), rgba(245,158,11,0.20)); }
.sidebar-item.active[data-group="org"] { background: linear-gradient(90deg, rgba(245,158,11,0.70), rgba(245,158,11,0.40)); }
.sidebar-section[data-group="defs"] { background: linear-gradient(90deg, rgba(14,165,233,0.55), rgba(14,165,233,0.25)); border-inline-end: 4px solid #0ea5e9; color: white; }
.sidebar-item[data-group="defs"] { background: linear-gradient(90deg, rgba(14,165,233,0.22), rgba(14,165,233,0.10)); border-inline-end: 3px solid rgba(14,165,233,0.6); }
.sidebar-item[data-group="defs"]:hover { background: linear-gradient(90deg, rgba(14,165,233,0.42), rgba(14,165,233,0.20)); }
.sidebar-item.active[data-group="defs"] { background: linear-gradient(90deg, rgba(14,165,233,0.70), rgba(14,165,233,0.40)); }
.sidebar-section[data-group="rel"] { background: linear-gradient(90deg, rgba(99,102,241,0.55), rgba(99,102,241,0.25)); border-inline-end: 4px solid #6366f1; color: white; }
.sidebar-item[data-group="rel"] { background: linear-gradient(90deg, rgba(99,102,241,0.22), rgba(99,102,241,0.10)); border-inline-end: 3px solid rgba(99,102,241,0.6); }
.sidebar-item[data-group="rel"]:hover { background: linear-gradient(90deg, rgba(99,102,241,0.42), rgba(99,102,241,0.20)); }
.sidebar-item.active[data-group="rel"] { background: linear-gradient(90deg, rgba(99,102,241,0.70), rgba(99,102,241,0.40)); }
.sidebar-section[data-group="fin"] { background: linear-gradient(90deg, rgba(16,185,129,0.55), rgba(16,185,129,0.25)); border-inline-end: 4px solid #10b981; color: white; }
.sidebar-item[data-group="fin"] { background: linear-gradient(90deg, rgba(16,185,129,0.22), rgba(16,185,129,0.10)); border-inline-end: 3px solid rgba(16,185,129,0.6); }
.sidebar-item[data-group="fin"]:hover { background: linear-gradient(90deg, rgba(16,185,129,0.42), rgba(16,185,129,0.20)); }
.sidebar-item.active[data-group="fin"] { background: linear-gradient(90deg, rgba(16,185,129,0.70), rgba(16,185,129,0.40)); }
.sidebar-section[data-group="hr"] { background: linear-gradient(90deg, rgba(236,72,153,0.55), rgba(236,72,153,0.25)); border-inline-end: 4px solid #ec4899; color: white; }
.sidebar-item[data-group="hr"] { background: linear-gradient(90deg, rgba(236,72,153,0.22), rgba(236,72,153,0.10)); border-inline-end: 3px solid rgba(236,72,153,0.6); }
.sidebar-item[data-group="hr"]:hover { background: linear-gradient(90deg, rgba(236,72,153,0.42), rgba(236,72,153,0.20)); }
.sidebar-item.active[data-group="hr"] { background: linear-gradient(90deg, rgba(236,72,153,0.70), rgba(236,72,153,0.40)); }
.sidebar-section[data-group="rpt"] { background: linear-gradient(90deg, rgba(139,92,246,0.55), rgba(139,92,246,0.25)); border-inline-end: 4px solid #8b5cf6; color: white; }
.sidebar-item[data-group="rpt"] { background: linear-gradient(90deg, rgba(139,92,246,0.22), rgba(139,92,246,0.10)); border-inline-end: 3px solid rgba(139,92,246,0.6); }
.sidebar-item[data-group="rpt"]:hover { background: linear-gradient(90deg, rgba(139,92,246,0.42), rgba(139,92,246,0.20)); }
.sidebar-item.active[data-group="rpt"] { background: linear-gradient(90deg, rgba(139,92,246,0.70), rgba(139,92,246,0.40)); }
/* ───── v0.37.9.453 — Unified navy + gold sidebar (calm, ministerial) ─────
Overrides the loud per-group rainbow above. Group identity now comes from a
single refined GOLD hairline accent — not heavy colored fills. These generic
[data-group] rules sit AFTER the per-group ones, so they win on equal
specificity without needing !important. */
.sidebar-section[data-group] {
background: rgba(255,255,255,0.05);
border-inline-end: 3px solid rgba(251,191,36,0.5);
color: rgba(255,255,255,0.92);
}
.sidebar-section[data-group]:hover { background: rgba(255,255,255,0.10); }
.sidebar-item[data-group] {
background: transparent;
border-inline-end: 0;
}
.sidebar-item[data-group]:hover { background: rgba(255,255,255,0.10); }
.sidebar-item.active[data-group],
.sidebar-item.active {
background: linear-gradient(90deg, rgba(251,191,36,0.26), rgba(251,191,36,0.07));
box-shadow: 0 2px 10px rgba(180,83,9,0.18), inset 0 1px 0 rgba(255,255,255,0.12);
color: #fff;
}
/* Active accent bar → royal gold (was emerald green) */
.sidebar-item.active::before {
background: linear-gradient(180deg, #fbbf24, #b45309);
box-shadow: 0 0 12px rgba(251,191,36,0.55);
}
/* ───── Smoother show/hide dynamics ───── */
.sidebar-group {
max-height: 1600px;
transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease,
padding 0.3s ease, margin 0.3s ease;
}
.sidebar-group.collapsed { max-height: 0 !important; opacity: 0; }
.sidebar-item {
transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.sidebar-arrow { transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); }
/* Full collapse — fade + slide instead of an abrupt cut */
.sidebar { transition: width 0.28s ease, transform 0.28s ease, opacity 0.28s ease; }
body.sidebar-collapsed #sidebar { opacity: 0; }
.sidebar-footer {
padding: 12px 20px;
border-top: 1px solid rgba(255,255,255,0.1);
font-size: 11px; color: rgba(255,255,255,0.5);
text-align: center;
}
.sidebar-backdrop {
position: fixed; inset: 0;
background: rgba(0,0,0,0.5);
z-index: 39;
}
/* ═════════════════════════════════════════════════════════════════════════
Main Content
═════════════════════════════════════════════════════════════════════════ */
.main-content {
grid-area: main;
overflow-y: auto;
padding: 20px;
height: calc(100vh - var(--copyright-h) - var(--header-h));
}
@media (max-width: 640px) { .main-content { padding: 12px; } }
.screen-container { max-width: 1400px; margin: 0 auto; }
/* ═════════════════════════════════════════════════════════════════════════
Screen Common Components
═════════════════════════════════════════════════════════════════════════ */
.screen-header {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: white;
padding: 18px 22px;
border-radius: 14px;
margin-bottom: 18px;
display: flex; align-items: center; gap: 14px;
box-shadow: var(--shadow);
}
.screen-header.amber { background: linear-gradient(135deg, #d97706, #f59e0b); }
.screen-header.sky { background: linear-gradient(135deg, #0369a1, #0ea5e9); }
.screen-header.indigo { background: linear-gradient(135deg, #4f46e5, #6366f1); }
.screen-header.emerald { background: linear-gradient(135deg, #047857, #10b981); }
.screen-header.pink { background: linear-gradient(135deg, #be185d, #ec4899); }
.screen-header.violet { background: linear-gradient(135deg, #6d28d9, #8b5cf6); }
.screen-header.slate { background: linear-gradient(135deg, #334155, #64748b); }
.screen-header-icon {
width: 52px; height: 52px;
background: rgba(255,255,255,0.2);
border-radius: 12px;
font-size: 28px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.screen-header-text h2 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.2; }
.screen-header-text p { margin: 4px 0 0; font-size: 13px; opacity: 0.9; }
.screen-header-actions { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; }
/* Card */
.card {
background: var(--bg-card);
border-radius: 14px;
box-shadow: var(--shadow);
margin-bottom: 16px;
overflow: hidden;
}
.card-header {
padding: 14px 18px;
border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between; gap: 10px;
background: linear-gradient(180deg, #fafafa, #f3f4f6);
}
.card-title { font-weight: 800; font-size: 15px; color: var(--text); margin: 0; }
.card-body { padding: 18px; }
.card-toolbar {
padding: 12px 18px;
background: #f9fafb;
border-bottom: 1px solid var(--border);
display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
/* Buttons */
.btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px;
border-radius: 8px;
font-size: 13px; font-weight: 700;
border: 1px solid transparent;
background: white; color: var(--text);
cursor: pointer;
transition: all 0.15s;
text-decoration: none;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn.btn-lg { padding: 10px 18px; font-size: 14px; }
.btn-primary-action { background: var(--primary); color: white; border-color: var(--primary); }
.btn-primary-action:hover { background: var(--primary-light); border-color: var(--primary-light); }
.btn-success { background: var(--success); color: white; }
.btn-danger { background: var(--danger); color: white; }
.btn-warning { background: var(--warning); color: white; }
.btn-info { background: var(--info); color: white; }
.btn-outline { background: white; border-color: var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-ghost { background: transparent; }
.btn-icon { padding: 6px 8px; min-width: 32px; justify-content: center; }
/* Stat Cards */
.stats-grid {
display: grid; gap: 14px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
margin-bottom: 20px;
}
.stat-card {
background: white;
border-radius: 14px;
padding: 18px;
display: flex; align-items: center; gap: 14px;
box-shadow: var(--shadow);
border-inline-start: 4px solid var(--primary);
transition: transform 0.2s, box-shadow 0.2s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.stat-card.teal { border-color: #14b8a6; }
.stat-card.amber { border-color: #f59e0b; }
.stat-card.sky { border-color: #0ea5e9; }
.stat-card.emerald { border-color: #10b981; }
.stat-card.indigo { border-color: #6366f1; }
.stat-card.pink { border-color: #ec4899; }
.stat-card.violet { border-color: #8b5cf6; }
.stat-card.rose { border-color: #f43f5e; }
.stat-card.slate { border-color: #64748b; }
.stat-icon {
width: 50px; height: 50px;
background: #f3f4f6; border-radius: 12px;
font-size: 26px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.stat-content { flex: 1; line-height: 1.2; }
.stat-label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.stat-value { font-size: 24px; font-weight: 900; color: var(--text); margin: 4px 0; font-feature-settings: "tnum" 1; }
.stat-trend { font-size: 11px; font-weight: 600; }
.stat-trend.up { color: var(--success); }
.stat-trend.down { color: var(--danger); }
/* Tables */
.table-wrapper {
overflow-x: auto;
border-radius: 12px;
background: white;
box-shadow: var(--shadow);
margin-bottom: 16px;
}
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.data-table thead th {
background: linear-gradient(180deg, #f3f4f6, #e5e7eb);
color: var(--text);
font-weight: 800;
padding: 12px 10px;
text-align: start;
border-bottom: 2px solid var(--border);
font-size: 12px;
white-space: nowrap;
}
.data-table tbody td {
padding: 11px 10px;
border-bottom: 1px solid #f3f4f6;
vertical-align: middle;
}
.data-table tbody tr:hover { background: #f9fafb; }
.data-table tbody tr.audited { background: #f0fdf4; }
/* 💳 Payment Methods tree — visual audit lock (root + child) */
.pm-tree-root.audited { background: linear-gradient(135deg,#f0fdf4,#dcfce7) !important; border-color: #22c55e !important; }
.pm-tree-root.audited > div:first-child::after,
.pm-tree-child.audited::after {
content: '🔒'; margin-inline-start: 6px; font-size: 12px;
}
.pm-tree-child.audited { background: #f0fdf4 !important; }
/* 📑 Document Types tree — visual audit lock (root + child) */
.doc-tree-root.audited { background: linear-gradient(135deg,#f0fdf4,#dcfce7) !important; border-color: #22c55e !important; }
.doc-tree-root.audited > div:first-child::after,
.doc-tree-child.audited::after {
content: '🔒'; margin-inline-start: 6px; font-size: 12px;
}
.doc-tree-child.audited { background: #f0fdf4 !important; }
.data-table tbody tr.inactive { opacity: 0.55; background: #fafafa; }
/* ─────────────────────────────────────────────────────────────────────
* 🔒 Audited-record lock — central enforcement
*
* Applies to ANY container marked .audited (table rows, company cards,
* COA / cost-center tree rows, future custom containers via
* [data-audit-container]).
*
* Inside an audited container every interactive element is disabled
* EXCEPT:
* • Buttons inside .rec-actions (RECORD_ACTIONS already filters
* view / history / print / note as the only ones shown after audit)
* • The audit checkbox itself (marked with [data-audit-self])
* • Read-only navigation pills (e.g. "open journal entry")
* ─────────────────────────────────────────────────────────────────────*/
.audited button:not(.rec-actions button):not([data-audit-allow]):not([data-audit-self]):not([data-rec-audit-btn]):not(.modal-close):not([data-modal-close]):not(.pill-info):not([data-jv]):not([data-tpl-pick]):not(.co-attach-btn):not(.emp-attach-btn.view):not([data-co-view-attachments]):not([data-fa-view-attachments]):not([data-jv-view-attachments]):not([data-pv-view-attachments]):not([data-rv-view-attachments]):not([data-pi-view-attachments]):not([data-cli-view-attachments]):not([data-sup-view-attachments]):not([data-att-view]):not([data-co-att-view]):not([data-attach-view]):not([data-jv-att]):not([data-tr-view-attachments]):not([data-si-view-attachments]):not([data-attach-act="view"]),
.audited input:not([data-audit-self]):not([type="hidden"]),
.audited select:not([data-audit-self]),
.audited textarea:not([data-audit-self]),
.audited [role="button"]:not(.rec-actions [role="button"]):not([data-audit-allow]):not([data-audit-self]):not(.modal-close):not(.co-attach-btn):not(.emp-attach-btn) {
opacity: 0.45 !important;
pointer-events: none !important;
cursor: not-allowed !important;
user-select: none;
}
/* 📎 GLOBAL Attachment-view exemption — applies to ALL screens. Attachment
* viewing is a read-only side action so it stays clickable even when the
* row is audited. The buttons live in tables with various data-* prefixes
* (co-/fa-/jv-/pv-/rv-/pi-/cli-/sup-/si-/tr-) and inside modals
* (.emp-attach-btn.view with data-attach-act="view"). */
.audited .co-attach-btn,
.audited .emp-attach-btn.view,
.audited [data-attach-act="view"],
.audited [data-co-view-attachments],
.audited [data-co-att-view],
.audited [data-fa-view-attachments],
.audited [data-jv-view-attachments],
.audited [data-jv-att],
.audited [data-pv-view-attachments],
.audited [data-rv-view-attachments],
.audited [data-pi-view-attachments],
.audited [data-si-view-attachments],
.audited [data-tr-view-attachments],
.audited [data-cli-view-attachments],
.audited [data-sup-view-attachments],
.audited [data-attach-view],
.audited [data-att-view] {
opacity: 1 !important;
pointer-events: auto !important;
cursor: pointer !important;
user-select: auto !important;
}
/* Block the DELETE button on attachments when audited — only viewing is OK */
.audited .emp-attach-btn.delete,
.audited [data-attach-act="delete"] {
opacity: 0.45 !important;
pointer-events: none !important;
cursor: not-allowed !important;
}
/* 🆕 v0.37.9.356 — UNIVERSAL SAFE-ZONE EXEMPTION
*
* Any element marked [data-rec-allow] (or any descendant of such an element)
* is fully interactive even when its modal carries the .audited / .view-only
* lock. This lets screen authors carve out a "safe zone" — e.g. an extra
* attachments uploader on an approved receipt — without having to remember
* every CSS exemption attribute (data-audit-self / data-audit-allow / etc).
*
* The JS layer in record_actions.js already exempts [data-rec-allow] from
* the click filter, keyboard guard, and hard-lock; this CSS rule closes the
* matching visual gap so the elements don't appear dimmed/disabled. */
.audited [data-rec-allow],
.audited [data-rec-allow] *,
.modal-backdrop.view-only [data-rec-allow],
.modal-backdrop.view-only [data-rec-allow] * {
opacity: 1 !important;
pointer-events: auto !important;
user-select: auto !important;
}
.audited [data-rec-allow] input,
.audited [data-rec-allow] textarea,
.audited [data-rec-allow] select,
.modal-backdrop.view-only [data-rec-allow] input,
.modal-backdrop.view-only [data-rec-allow] textarea,
.modal-backdrop.view-only [data-rec-allow] select {
cursor: text !important;
}
.audited [data-rec-allow] button,
.audited [data-rec-allow] label,
.audited [data-rec-allow] [role="button"],
.modal-backdrop.view-only [data-rec-allow] button,
.modal-backdrop.view-only [data-rec-allow] label,
.modal-backdrop.view-only [data-rec-allow] [role="button"] {
cursor: pointer !important;
}
/* 🆕 Modal-wide Read-Only Mode — strong visual distinction
* Applied when modal opens with __viewOnly or for audited records.
* All inputs/selects/textareas are visually locked + native attribute-locked. */
.modal-readonly form[data-viewonly] input:not([type="hidden"]),
.modal-readonly form[data-viewonly] select,
.modal-readonly form[data-viewonly] textarea {
background: #f1f5f9 !important;
color: #475569 !important;
border-color: #cbd5e1 !important;
cursor: not-allowed !important;
pointer-events: none !important;
user-select: text !important;
}
.modal-readonly form[data-viewonly] input[type="checkbox"],
.modal-readonly form[data-viewonly] input[type="radio"] {
opacity: 0.6;
pointer-events: none !important;
}
.modal-readonly form[data-viewonly] label {
color: #475569 !important;
}
.modal-readonly form[data-viewonly] button:not([data-audit-allow]):not(.modal-close):not(.co-attach-btn):not(.emp-attach-btn.view):not([data-attach-act="view"]) {
opacity: 0.45 !important;
pointer-events: none !important;
cursor: not-allowed !important;
}
.modal-readonly form[data-viewonly] *[data-attach-act="delete"],
.modal-readonly form[data-viewonly] .emp-attach-btn.delete {
display: none !important;
}
/* Visual top-bar accent strip on the modal */
.modal-readonly { position: relative; }
.modal-readonly::before {
content: ''; position: absolute; top: 0; inset-inline: 0; height: 4px;
background: linear-gradient(90deg, #dc2626, #f97316, #eab308, #f97316, #dc2626);
background-size: 200% 100%;
animation: ro-pulse 3s linear infinite;
z-index: 10; border-radius: 12px 12px 0 0;
}
@keyframes ro-pulse {
0% { background-position: 0% 0; }
100% { background-position: 200% 0; }
}
/* 🆕 Customer 360° audit-lock badge */
.cli-audit-lock-badge {
display: inline-flex; align-items: center; gap: 4px;
background: linear-gradient(135deg, #dc2626, #f87171);
color: #fff; padding: 4px 10px; border-radius: 999px;
font-size: 11px; font-weight: 800;
box-shadow: 0 2px 6px rgba(220,38,38,0.25);
}
/* 🔓 Close (✕) and Cancel buttons stay interactive in view-only mode.
*
* ⚠️ The `.audited button:not(…):not(…):not(…)…` rule above has 8 :not()
* clauses → effective specificity ~ 0,9,1. To override it via CSS
* we need an equal-or-higher specificity. We use compound selectors
* on the same backdrop (.modal-backdrop.audited.view-only) plus the
* fully-qualified button selector to reach roughly 0,10,1 — winning
* by a hair. The JS in `_forceEnableClose` is the bulletproof
* fallback (inline-style !important).
*/
.modal-backdrop.view-only button.modal-close,
.modal-backdrop.audited.view-only button.modal-close,
.modal-backdrop.audited.view-only .modal-header button.modal-close,
.modal-backdrop.audited.view-only .modal-footer button.btn.btn-outline,
.modal-backdrop.audited.view-only [data-modal-cancel],
.audited .modal-header button.modal-close,
.audited .modal-footer button.btn.btn-outline {
opacity: 1 !important;
pointer-events: auto !important;
cursor: pointer !important;
filter: none !important;
user-select: auto !important;
}
/* Pills that are pure navigation (e.g., "📖 القيد", attachments viewer)
* should remain clickable so the user can still NAVIGATE from an audited
* record — they don't modify the record. */
.audited .pill.pill-info,
.audited .pill.pill-purple,
.audited .co-attach-btn,
.audited [data-audit-allow="nav"] {
opacity: 1 !important;
pointer-events: auto !important;
cursor: pointer !important;
}
/* The audit checkbox itself must remain interactive (so the user can
* un-audit later if they hold the permission — gating to be enforced by
* the future Settings → Roles screen). */
.audited [data-audit-self],
.audited [data-rec-audit-btn] {
opacity: 1 !important;
pointer-events: auto !important;
cursor: pointer !important;
}
/* Visual cue for audited company cards (soft yellow tint) */
.co-card.audited { background: #fffbeb; box-shadow: inset 0 0 0 2px #fcd34d; }
/* 🚀 INSTANT lock for RECORD_ACTIONS buttons — when the audit checkbox
* is toggled, these buttons swap IMMEDIATELY without re-rendering the row.
* Three lock modes:
* data-rec-lock="hide" → visible by default, hidden when audited
* data-rec-lock="show-when-audited" → hidden by default, visible when audited
* data-rec-always → always visible (used for navigation extras)
*
* The View ↔ Edit swap is implemented this way: the Edit button carries
* "hide" and the View button carries "show-when-audited", so they occupy
* the SAME slot in the action grid — one disappears the moment the other
* appears, with no re-render. They are mutually exclusive by design. */
.audited [data-rec-lock="hide"] {
display: none !important;
}
[data-rec-lock="show-when-audited"] {
display: none !important;
}
.audited [data-rec-lock="show-when-audited"] {
display: inline-flex !important;
}
/* 🆕 v0.37.9.20 — UNCONDITIONAL Duplicate visibility (defense-in-depth).
* Any action button whose title contains "Duplicate" / "تكرار" / "نسخ"
* stays visible even when the row is audited. This is a CSS-level safety
* net in case a screen forgets the `alwaysShow` flag or uses a mutating
* cls (e.g. cls:'edit') for visual styling. Duplicate creates a NEW
* draft record and never mutates the source. */
.audited [title*="تكرار"],
.audited [title*="نسخ"],
.audited [title*="Duplicate" i],
.audited [title*="Copy" i] {
display: inline-flex !important;
}
/* ─── 🔒 View-only modal — opened when clicking 👁️ on an audited record ─
*
* The modal backdrop carries `.audited.view-only` so existing audit-lock
* rules disable the inputs. We also need to:
* 1) Hide the save / submit buttons (the user is just viewing)
* 2) Hide DELETE buttons inside the modal
* 3) Show a clear "Read-only" badge in the header
*
* Save-button detection rules — covers all primary actions across screens:
* - button[type="submit"]
* - .btn-primary-action
* - [data-action="save"] / [data-action="save-settings"]
* - Buttons whose explicit attribute marks them as save / submit
* Buttons explicitly marked safe with [data-rec-allow] are kept visible
* (so screens can opt-in: e.g., a "📋 Copy" action, a tab switch button).
* ──────────────────────────────────────────────────────────────────── */
.modal-backdrop.view-only button[type="submit"],
.modal-backdrop.view-only .btn-primary-action,
.modal-backdrop.view-only [data-action="save"],
.modal-backdrop.view-only [data-action="save-settings"],
.modal-backdrop.view-only .btn-primary[type="submit"],
.modal-backdrop.view-only .btn-success[type="submit"] {
display: none !important;
}
.modal-backdrop.view-only [data-rec-allow] {
display: inline-flex !important;
}
/* 🔒 Visual cue for fields that were programmatically locked when the
* modal opened in view-only mode. They look frozen (light gray fill,
* dashed border) so the user immediately sees they're not editable. */
.modal-backdrop.view-only [data-arttop-locked],
.modal-backdrop.view-only [data-arttop-locked-ce] {
background: #f8fafc !important;
border-color: #cbd5e1 !important;
color: #475569 !important;
cursor: not-allowed !important;
user-select: text;
}
.modal-backdrop.view-only [data-arttop-locked]:focus,
.modal-backdrop.view-only [data-arttop-locked-ce]:focus {
outline: 2px dashed #94a3b8 !important;
outline-offset: 1px;
}
/* ═══════════════════════════════════════════════════════════════════════
NOTES — Card-style conversation view (matches reference design)
═══════════════════════════════════════════════════════════════════════ */
/* Smart stats dashboard grid */
.nt-stats-grid {
display: grid;
grid-template-columns: 1.1fr 1.2fr 1.4fr 1.3fr;
gap: 10px;
margin-bottom: 14px;
}
.nt-stats-card {
background: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 12px;
padding: 12px 14px;
box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
.nt-stats-title {
font-size: 12px; font-weight: 800; color: #475569;
margin-bottom: 10px; letter-spacing: 0.2px;
}
.nt-mini-stat {
display: flex; align-items: center; gap: 6px;
border: 1.5px solid;
border-radius: 8px;
padding: 6px 8px;
font-size: 11px;
}
.nt-mini-stat .ic { font-size: 18px; }
.nt-mini-stat .v { font-size: 14px; font-weight: 900; color: #0f172a; line-height: 1.05; font-family: 'SF Mono', Menlo, monospace; }
.nt-mini-stat .l { font-size: 10px; color: #475569; font-weight: 700; margin-top: 1px; }
/* Smart subtab bar */
.nt-subtabs-bar {
display: flex; gap: 6px; flex-wrap: wrap;
background: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 12px;
padding: 6px;
margin-bottom: 12px;
box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
.nt-subtab {
display: inline-flex; align-items: center; gap: 6px;
background: #f8fafc;
border: 1.5px solid transparent;
border-radius: 9px;
padding: 8px 14px;
font-size: 12.5px; font-weight: 800;
color: #475569; cursor: pointer;
transition: all 0.18s;
font-family: inherit;
}
.nt-subtab:hover { background: #e2e8f0; color: #0f172a; transform: translateY(-1px); }
.nt-subtab.active { background: linear-gradient(135deg, #ea580c, #f97316); color: #fff; box-shadow: 0 4px 12px rgba(234,88,12,0.25); }
.nt-subtab-count {
background: rgba(255,255,255,0.85);
color: inherit;
font-size: 10.5px; font-weight: 900;
padding: 2px 7px;
border-radius: 999px;
min-width: 20px; text-align: center;
font-family: 'SF Mono', Menlo, monospace;
}
.nt-subtab:not(.active) .nt-subtab-count {
background: #e2e8f0; color: #475569;
}
/* View switch */
.nt-view-switch {
display: inline-flex; background: #f1f5f9;
border: 1.5px solid #cbd5e1; border-radius: 8px;
padding: 2px;
}
.nt-view-switch button {
background: transparent; border: 0;
padding: 6px 12px; border-radius: 6px;
font-size: 14px; cursor: pointer; color: #64748b;
}
.nt-view-switch button.active { background: #fff; color: #0f172a; box-shadow: 0 2px 6px rgba(15,23,42,0.1); }
/* Avatars */
.nt-avatar {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px;
border-radius: 50%;
color: #fff; font-weight: 900; font-size: 12px;
border: 2px solid #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
font-family: 'Inter', sans-serif;
}
.nt-avatar-more { background: #94a3b8; font-size: 10px; }
.nt-avatar-group { display: inline-flex; }
.nt-avatar-group .nt-avatar:not(:first-child) {
margin-inline-start: -8px;
}
/* 👁 View (full viewer) button */
.nt-view-btn {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
border: 0;
border-radius: 50%;
width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 14px;
cursor: pointer;
transition: all 0.15s;
color: #fff;
box-shadow: 0 2px 6px rgba(245,158,11,0.3);
}
.nt-view-btn:hover { transform: scale(1.08); box-shadow: 0 4px 10px rgba(245,158,11,0.45); }
/* Full Note Viewer Modal */
.nt-view-route {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
background: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 10px;
padding: 10px 14px;
margin-bottom: 12px;
}
.nt-view-content {
background: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 12px;
padding: 16px 20px;
font-size: 14.5px; line-height: 1.75;
color: #0f172a;
white-space: pre-wrap;
box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
.nt-view-section { margin-top: 16px; }
.nt-view-section-title {
font-size: 12.5px; font-weight: 800; color: #475569;
text-transform: uppercase; letter-spacing: 0.3px;
margin-bottom: 8px;
padding-bottom: 4px;
border-bottom: 1.5px solid #e2e8f0;
}
.nt-view-att-list { display: flex; flex-direction: column; gap: 6px; }
.nt-view-att {
display: flex; align-items: center; gap: 10px;
background: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 8px;
padding: 8px 12px;
text-decoration: none;
transition: all 0.15s;
}
.nt-view-att:hover { border-color: #3b82f6; background: #eff6ff; transform: translateY(-1px); }
.nt-view-thread {
background: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 12px;
padding: 12px;
display: flex; flex-direction: column; gap: 10px;
}
.nt-view-reply {
background: linear-gradient(135deg, #f0fdfa, #ccfbf1);
border-inline-start: 4px solid #14b8a6;
border-radius: 8px;
padding: 10px 14px;
}
.nt-view-reply.nt-reply-system {
background: #f1f5f9;
border-inline-start-color: #94a3b8;
font-style: italic;
opacity: 0.85;
}
.nt-view-reply-head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 6px; flex-wrap: wrap; gap: 6px;
}
.nt-view-reply-body {
font-size: 13px; color: #134e4a; line-height: 1.7;
white-space: pre-wrap;
}
.nt-view-meta { background: #f8fafc; border-radius: 10px; padding: 12px 14px; }
.nt-view-meta-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 8px;
}
.nt-view-meta-grid > div {
display: flex; justify-content: space-between; align-items: center;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 6px 10px;
font-size: 11.5px;
}
.nt-view-meta-grid span { color: #64748b; font-weight: 700; }
.nt-view-meta-grid strong { color: #0f172a; font-weight: 800; }
/* Pin button */
.nt-pin-btn {
background: #f1f5f9; border: 1.5px solid #cbd5e1;
border-radius: 50%;
width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 14px;
cursor: pointer;
transition: all 0.15s;
opacity: 0.5;
filter: grayscale(0.6);
}
.nt-pin-btn:hover { opacity: 0.95; transform: scale(1.08); }
.nt-pin-btn.active {
background: linear-gradient(135deg, #fde68a, #fcd34d);
border-color: #d97706;
opacity: 1;
filter: none;
transform: rotate(-12deg);
}
/* Flag strip (Pinned / Needs reply / Stale) */
.nt-card-flags {
display: flex; gap: 6px; flex-wrap: wrap;
margin-bottom: 8px;
}
.nt-flag {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px; font-weight: 800;
}
.nt-flag-pin { background: linear-gradient(135deg, #fde68a, #fcd34d); color: #92400e; }
.nt-flag-needs { background: linear-gradient(135deg, #fee2e2, #fca5a5); color: #991b1b; animation: nt-pulse 2s infinite; }
.nt-flag-stale { background: linear-gradient(135deg, #fed7aa, #fdba74); color: #9a3412; }
@keyframes nt-pulse {
0%,100% { opacity: 1; }
50% { opacity: 0.6; }
}
/* Pinned card highlight */
.nt-card.nt-pinned {
border-color: #fcd34d;
background: linear-gradient(135deg, #fffbeb, #fef3c7);
box-shadow: 0 4px 12px rgba(217,119,6,0.15);
}
/* Stale card highlight */
.nt-card.nt-stale:not(.nt-closed) {
border-inline-start-color: #ea580c;
}
.nt-card.nt-needs-reply:not(.nt-closed) {
border-inline-start-color: #dc2626;
box-shadow: 0 0 0 1px #fca5a5;
}
/* Compact view */
.nt-card.nt-compact { padding: 10px 14px; }
.nt-card.nt-compact .nt-card-body { display: none; }
.nt-card.nt-compact .nt-replies { display: none; }
.nt-card.nt-compact .nt-card-attach { display: none; }
.nt-card.nt-compact .nt-card-actions { padding-top: 6px; margin-top: 4px; }
/* Stats responsive */
@media (max-width: 1100px) {
.nt-stats-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
.nt-stats-grid { grid-template-columns: 1fr; }
}
/* 🔍 Search highlight */
.nt-mark {
background: #fef08a;
color: #713f12;
padding: 0 2px;
border-radius: 2px;
font-weight: 800;
}
/* 🗺️ Conversation network graph */
.nt-node:hover circle { stroke-width: 4; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25)); }
.nt-node:hover text { font-size: 14px; }
/* 🗺️ Ownership network nodes */
.co-net-node { cursor: pointer; }
.co-net-node:hover circle,
.co-net-node:hover rect { stroke-width: 4; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25)); }
/* 🌡️ Activity heatmap grid */
.nt-heat-grid {
display: grid;
grid-template-columns: repeat(24, 1fr);
grid-template-rows: repeat(7, 12px);
gap: 1px;
}
.nt-heat-cell { border-radius: 2px; transition: transform 0.15s; }
.nt-heat-cell:hover { transform: scale(1.4); z-index: 2; outline: 1px solid #fff; }
.nt-heat-day {
height: 12px; display: flex; align-items: center;
font-size: 9px; font-weight: 700; color: #94a3b8;
}
/* 🔔 Read receipts row */
.nt-read-receipts {
display: flex; align-items: center; gap: 6px;
padding: 6px 10px;
background: #f0f9ff;
border: 1px dashed #bae6fd;
border-radius: 8px;
font-size: 11px;
color: #075985;
margin-top: 8px;
flex-wrap: wrap;
}
.nt-read-receipts .nt-avatar { width: 22px; height: 22px; font-size: 10px; border-width: 1.5px; }
.nt-read-receipts .nt-avatar:not(:first-of-type) { margin-inline-start: -7px; }
.nt-seen-label { font-weight: 700; margin-inline-end: 2px; }
/* 📩 Quick reply inline */
.nt-quick-reply {
margin-top: 10px;
background: #f8fafc;
border: 1px dashed #cbd5e1;
border-radius: 10px;
padding: 4px 10px;
transition: all 0.15s;
}
.nt-quick-reply details[open] { padding: 10px 12px; background: #fff; border-color: #93c5fd; border-style: solid; box-shadow: 0 4px 12px rgba(15,23,42,0.06); }
.nt-quick-reply summary {
font-size: 12px;
font-weight: 800;
color: #1d4ed8;
cursor: pointer;
list-style: none;
padding: 4px 0;
user-select: none;
}
.nt-quick-reply summary::-webkit-details-marker { display: none; }
.nt-quick-reply summary:hover { color: #1e3a8a; }
.nt-quick-text {
width: 100%;
border: 1.5px solid #cbd5e1;
border-radius: 8px;
padding: 8px 10px;
font-size: 12.5px;
font-family: inherit;
resize: vertical;
min-height: 56px;
margin-top: 6px;
}
.nt-quick-text:focus { outline: 2px solid #93c5fd; outline-offset: 1px; border-color: #3b82f6; }
/* 🎯 Smart template chips */
.nt-quick-templates {
display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 4px;
}
.nt-template-chip {
background: #fff;
border: 1.5px solid #cbd5e1;
color: #475569;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
white-space: nowrap;
}
.nt-template-chip:hover { background: #dbeafe; border-color: #3b82f6; color: #1e40af; transform: translateY(-1px); }
/* @ Mention dropdown */
.nt-mention-wrap { position: relative; }
.nt-mention-dropdown {
position: absolute;
inset-block-start: 100%; inset-inline-start: 0;
background: #fff;
border: 1.5px solid #cbd5e1;
border-radius: 10px;
box-shadow: 0 8px 24px rgba(15,23,42,0.15);
z-index: 1100;
min-width: 240px;
max-height: 260px;
overflow-y: auto;
margin-top: 4px;
}
.nt-mention-item {
display: flex; align-items: center; gap: 8px;
padding: 7px 10px;
cursor: pointer;
font-size: 12.5px;
border-bottom: 1px solid #f1f5f9;
}
.nt-mention-item:hover { background: #eff6ff; }
.nt-mention-item .nt-avatar { width: 22px; height: 22px; font-size: 10px; border-width: 0; }
/* ☁️ Tag cloud */
.nt-tag-cloud {
display: flex; flex-wrap: wrap; gap: 6px 10px;
padding: 6px 0;
line-height: 1.6;
}
.nt-cloud-word {
color: #1d4ed8;
font-weight: 700;
cursor: default;
transition: all 0.15s;
}
.nt-cloud-word:hover { color: #ea580c; transform: scale(1.1); }
/* 🤖 Smart AI summary */
.nt-ai-summary {
background: linear-gradient(135deg, #ede9fe, #f3e8ff);
border: 1px dashed #c4b5fd;
border-radius: 8px;
padding: 6px 12px;
margin: 8px 0;
}
.nt-ai-summary summary {
font-weight: 800; color: #5b21b6;
cursor: pointer; font-size: 11.5px;
list-style: none;
}
.nt-ai-summary summary::-webkit-details-marker { display: none; }
.nt-ai-pill {
background: rgba(139,92,246,0.18); color: #5b21b6;
padding: 1px 7px; border-radius: 999px;
font-size: 10px; font-weight: 800;
margin-inline-start: 6px;
}
.nt-ai-body {
margin-top: 6px;
font-size: 11.5px; color: #312e81;
line-height: 1.6;
display: flex; flex-direction: column; gap: 6px;
}
.nt-ai-bullet {
display: flex; gap: 8px; align-items: flex-start;
background: rgba(255,255,255,0.55);
border-radius: 6px;
padding: 6px 10px;
}
.nt-ai-bullet .nt-ai-ic { font-size: 16px; flex-shrink: 0; }
.nt-ai-bullet strong { color: #5b21b6; }
/* 🎯 Active filter chips bar */
.nt-active-filters {
display: flex; align-items: center; gap: 10px;
background: #fff7ed;
border: 1.5px solid #fdba74;
border-radius: 10px;
padding: 10px 14px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.nt-filter-chip {
display: inline-flex; align-items: center; gap: 4px;
background: #fff;
border: 1.5px solid #fcd34d;
color: #9a3412;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px; font-weight: 700;
cursor: pointer;
transition: all 0.15s;
}
.nt-filter-chip:hover { background: #fef3c7; }
.nt-filter-chip .x { color: #dc2626; font-weight: 900; font-size: 14px; margin-inline-start: 2px; }
.nt-clear-all {
background: linear-gradient(135deg, #dc2626, #b91c1c);
color: #fff; border: 0;
padding: 4px 10px; border-radius: 8px;
font-size: 11px; font-weight: 800;
cursor: pointer;
}
.nt-stats-mode {
background: transparent; border: 0;
padding: 4px 10px; border-radius: 6px;
font-size: 11px; font-weight: 800; color: #64748b;
cursor: pointer;
}
.nt-stats-mode.active { background: linear-gradient(135deg, #ea580c, #f97316); color: #fff; }
/* Date range filter */
.nt-date-range {
display: inline-flex; align-items: center; gap: 4px;
background: #fff; border: 1.5px solid #cbd5e1;
border-radius: 8px; padding: 4px 8px;
font-size: 11px; color: #475569; font-weight: 700;
}
.nt-date-range input { border: 0; font-size: 12px; font-family: inherit; outline: 0; }
/* 📊 Poll widget on a note card */
.nt-poll {
background: linear-gradient(135deg, #faf5ff, #f3e8ff);
border: 1.5px solid #c4b5fd;
border-radius: 10px;
padding: 10px 12px;
margin: 8px 0;
}
.nt-poll-q {
font-size: 12.5px; font-weight: 800; color: #5b21b6;
margin-bottom: 8px;
}
.nt-poll-opt {
position: relative;
display: flex; align-items: center; justify-content: space-between;
background: #fff;
border: 1.5px solid #ddd6fe;
border-radius: 8px;
padding: 8px 10px;
margin-bottom: 4px;
cursor: pointer;
font-family: inherit;
width: 100%;
font-size: 12px;
color: #312e81;
transition: all 0.15s;
overflow: hidden;
}
.nt-poll-opt:hover { border-color: #8b5cf6; }
.nt-poll-opt.voted {
border-color: #7c3aed; background: #ede9fe;
font-weight: 800;
}
.nt-poll-bar {
position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
background: rgba(139,92,246,0.18);
transition: width 0.4s;
}
.nt-poll-opt.voted .nt-poll-bar { background: rgba(124,58,237,0.32); }
.nt-poll-label { position: relative; z-index: 1; flex: 1; text-align: start; }
.nt-poll-meta { position: relative; z-index: 1; color: #5b21b6; font-weight: 800; }
.nt-poll-foot { font-size: 10.5px; color: #6d28d9; margin-top: 6px; text-align: center; }
/* Voice button when active */
.nt-voice-btn { transition: all 0.15s; }
.nt-voice-btn:hover { background: #fecaca !important; }
/* 🎤 Voice wave animation for the reply modal */
@keyframes ntpulse {
0%,100% { transform: scaleY(1); opacity: 0.6; }
50% { transform: scaleY(0.5); opacity: 1; }
}
.nt-list { display: flex; flex-direction: column; gap: 12px; }
.nt-card {
background: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 12px;
padding: 16px 18px;
box-shadow: 0 1px 3px rgba(15,23,42,0.04);
transition: all 0.18s;
position: relative;
}
.nt-card:hover { box-shadow: 0 6px 18px rgba(15,23,42,0.08); border-color: #cbd5e1; }
.nt-card.nt-open {
border-inline-start: 4px solid #16a34a;
}
.nt-card.nt-closed {
border-inline-start: 4px solid #64748b;
opacity: 0.85;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
}
.nt-card.audited { background: #fffbeb; box-shadow: inset 0 0 0 2px #fcd34d; }
.nt-card-top {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
.nt-card-route {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; color: #334155;
flex-wrap: wrap;
}
.nt-card-route .nt-label { color: #64748b; font-weight: 600; font-size: 12px; }
.nt-card-route strong { color: #0f172a; font-weight: 800; }
.nt-card-route .nt-arrow { color: #94a3b8; margin: 0 4px; font-weight: 800; }
.nt-status-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 12px; border-radius: 999px;
font-size: 11.5px; font-weight: 800;
white-space: nowrap;
}
.nt-status-pill.open { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.nt-status-pill.closed { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.nt-card-meta {
display: flex; align-items: center; gap: 8px;
font-size: 11.5px; color: #64748b;
margin-bottom: 8px; flex-wrap: wrap;
}
.nt-pin { font-size: 14px; }
.nt-type { font-weight: 700; color: #475569; }
.nt-date { margin-inline-start: auto; font-family: 'SF Mono', Menlo, monospace; color: #64748b; }
.nt-prio { font-weight: 800; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; }
.nt-prio-high { background: #fee2e2; color: #991b1b; }
.nt-prio-low { background: #dbeafe; color: #1e40af; }
.nt-replies-badge {
background: #ede9fe; color: #5b21b6;
font-weight: 800; padding: 2px 8px; border-radius: 999px;
font-size: 10.5px;
}
.nt-card-title { font-size: 14.5px; color: #0f172a; margin-bottom: 4px; }
.nt-card-body {
font-size: 13.5px; color: #1e293b;
line-height: 1.65; white-space: pre-wrap;
margin-bottom: 8px;
}
.nt-card-attach {
display: inline-block; background: #ede9fe; color: #5b21b6;
padding: 3px 10px; border-radius: 999px;
font-size: 11px; font-weight: 700;
margin-bottom: 8px;
}
/* Replies thread */
.nt-replies {
margin: 12px 0 6px;
display: flex; flex-direction: column; gap: 8px;
}
.nt-reply {
background: #f0fdfa;
border-inline-start: 3px solid #14b8a6;
border-radius: 8px;
padding: 10px 12px;
}
.nt-reply-meta {
display: flex; justify-content: space-between;
font-size: 11.5px; color: #0f766e; font-weight: 700;
margin-bottom: 4px;
}
.nt-reply-body { font-size: 12.5px; color: #134e4a; white-space: pre-wrap; line-height: 1.55; }
.nt-reply-att { font-size: 10.5px; color: #0f766e; margin-top: 4px; font-weight: 700; }
/* Action buttons row */
.nt-card-actions {
display: flex; gap: 8px; flex-wrap: wrap;
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed #e2e8f0;
}
.nt-act {
display: inline-flex; align-items: center; gap: 6px;
background: #fff;
border: 1.5px solid transparent;
border-radius: 10px;
padding: 8px 14px;
font-size: 12.5px; font-weight: 800;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
white-space: nowrap;
}
.nt-act:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,23,42,0.12); }
.nt-act:disabled { opacity: 0.45; cursor: not-allowed; }
.nt-act-reply { background: linear-gradient(135deg, #0d9488, #14b8a6); color: #fff; }
.nt-act-close { background: linear-gradient(135deg, #15803d, #16a34a); color: #fff; }
.nt-act-assign { background: linear-gradient(135deg, #6d28d9, #8b5cf6); color: #fff; }
.nt-act-delete { background: linear-gradient(135deg, #dc2626, #ef4444); color: #fff; }
.nt-act-reopen {
background: linear-gradient(135deg, #c2410c, #ea580c);
color: #fff;
position: relative;
}
.nt-act-reopen.perm-locked {
background: linear-gradient(135deg, #94a3b8, #64748b);
cursor: not-allowed;
}
.nt-act-reopen.perm-locked:hover { transform: none; box-shadow: none; filter: brightness(1.04); }
.nt-perm-badge {
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.22);
border: 1px solid rgba(255,255,255,0.32);
border-radius: 999px;
padding: 1px 6px;
font-size: 11px; font-weight: 800;
margin-inline-start: 4px;
}
/* Choice cards in the reply modal */
.nt-choice-card:hover { transform: translateY(-2px); filter: brightness(1.05); }
/* "🔒 Read-only" badge inserted into the modal header */
.rec-view-badge {
display: inline-flex; align-items: center;
background: rgba(255,255,255,0.22);
color: #fff;
border: 1px solid rgba(255,255,255,0.32);
padding: 4px 10px;
border-radius: 999px;
font-size: 11.5px; font-weight: 800;
letter-spacing: 0.2px;
margin-inline-start: auto;
margin-inline-end: 12px;
backdrop-filter: blur(6px);
white-space: nowrap;
}
.data-table .col-actions { white-space: nowrap; text-align: center; }
.data-table .col-num { font-feature-settings: "tnum" 1; text-align: center; width: 50px; color: var(--text-muted); font-weight: 700; }
.data-table .col-check { text-align: center; width: 40px; }
/* Status Pills */
.pill {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px; font-weight: 700;
white-space: nowrap;
}
.pill-success { background: #d1fae5; color: #065f46; }
.pill-warning { background: #fef3c7; color: #92400e; }
.pill-danger { background: #fee2e2; color: #991b1b; }
.pill-info { background: #dbeafe; color: #1e40af; }
.pill-gray { background: #f3f4f6; color: #374151; }
.pill-purple { background: #ede9fe; color: #5b21b6; }
/* ────────────────────────────────────────────────────────────────────
Work-locations modal — interactive Leaflet/OSM map with draggable pin
──────────────────────────────────────────────────────────────────── */
.loc-map {
height: 360px;
width: 100%;
border: 1.5px solid #cbd5e1;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
background: #e5f2f5;
margin-top: 4px;
}
.loc-map-hint {
margin-top: 8px;
padding: 8px 12px;
background: #ecfeff;
border: 1px dashed #67e8f9;
border-radius: 8px;
font-size: 12px;
color: #155e75;
font-weight: 600;
line-height: 1.5;
}
/* Leaflet's marker shadow looks slightly broken in RTL flow — clip it cleanly */
.loc-map .leaflet-marker-shadow { opacity: 0.55; }
.loc-map .leaflet-control-attribution { font-size: 9px; }
/* ────────────────────────────────────────────────────────────────────
Currency Symbol — new official Saudi Riyal symbol (2025 SAMA design)
For SAR, CURRENCY_SYMBOL_HTML emits an inline SVG using this class.
For other ISOs, the helper emits plain 3-letter text in English.
──────────────────────────────────────────────────────────────────── */
.sar-sym {
display: inline-block;
width: 0.95em;
height: 0.95em;
vertical-align: -0.16em;
fill: currentColor;
margin-inline: 1px;
}
.cur-sym {
display: inline-flex;
align-items: center;
gap: 2px;
font-weight: 700;
letter-spacing: 0.3px;
}
.cur-sym .sar-sym { color: inherit; }
/* In print: keep currency a bit smaller / aligned with numbers */
@media print {
.sar-sym { width: 0.9em; height: 0.9em; vertical-align: -0.14em; }
}
/* 🆕 v0.37.9.157 — Action Buttons: single-line elegant inline-flex layout */
.action-btn {
background: #f8fafc;
border: 1px solid #e2e8f0;
padding: 0;
cursor: pointer;
font-size: 13px;
border-radius: 6px;
transition: all 0.15s ease;
margin: 0;
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.action-btn:hover {
background: #fff;
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(0,0,0,0.10);
border-color: #cbd5e1;
}
.action-btn.edit:hover { background: #dbeafe; border-color: #93c5fd; }
.action-btn.delete:hover { background: #fee2e2; border-color: #fca5a5; }
.action-btn.print:hover { background: #f3e8ff; border-color: #d8b4fe; }
.action-btn.note:hover { background: #fef3c7; border-color: #fcd34d; }
.action-btn.toggle:hover { background: #d1fae5; border-color: #6ee7b7; }
.action-btn.history:hover { background: #e0e7ff; border-color: #a5b4fc; }
.action-btn.view:hover { background: #cffafe; border-color: #67e8f9; }
/* 🆕 v0.37.9.158 — 3-icons-per-ROW grid (back to multi-row).
Keeps the actions column narrow so the table fits the viewport. */
.rec-actions,
.row-actions,
td > div:has(> .action-btn) {
display: inline-grid !important;
grid-template-columns: repeat(3, 28px) !important;
gap: 3px;
align-items: center;
justify-items: center;
justify-content: center;
vertical-align: middle;
white-space: normal !important;
width: max-content;
margin: 0 auto;
}
/* Table column hint — narrow actions column */
td:has(> .rec-actions),
td:has(> .row-actions),
td:has(> div > .action-btn) {
width: 1%;
white-space: nowrap;
padding-inline: 6px !important;
}
/* Forms */
.form-grid {
display: grid;
gap: 14px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.form-field { display: flex; flex-direction: column; gap: 5px; }
.form-field label { font-size: 12px; font-weight: 700; color: var(--text); }
/* v0.37.9.515 — required-field marker + invalid highlight */
.defs-req { color: #dc2626; font-weight: 900; margin-inline-start: 2px; }
.field-invalid { outline: 2px solid #dc2626 !important; outline-offset: 1px; border-color: #dc2626 !important; background: #fef2f2 !important; }
/* v0.37.9.518 — live duplicate-finder suggestion box under the Name field */
.dup-suggest { margin-top: 4px; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.07); max-height: 220px; overflow-y: auto; background: #fff; }
.dup-suggest-head { font-size: 11px; font-weight: 800; padding: 5px 9px; }
.dup-suggest-head.warn { background: #fef2f2; color: #991b1b; }
.dup-suggest-head.info { background: #eff6ff; color: #1d4ed8; }
.dup-suggest-item { display: flex; align-items: center; gap: 6px; width: 100%; text-align: start; border: none; border-top: 1px solid #f1f5f9; background: #fff; padding: 7px 9px; font-size: 12px; color: #334155; cursor: pointer; }
.dup-suggest-item:hover { background: #f8fafc; }
.dup-open-hint { margin-inline-start: auto; font-size: 10px; font-weight: 800; color: #0369a1; white-space: nowrap; }
/* v0.37.9.525 — professional modal section quick-nav (sticky chip bar) */
.defs-secnav { display: flex; gap: 6px; overflow-x: auto; padding: 8px 14px; background: #f8fafc; border-bottom: 1px solid #e5e7eb; flex: 0 0 auto; }
.defs-secnav::-webkit-scrollbar { height: 5px; }
.defs-secnav::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
.defs-secnav-chip { flex: 0 0 auto; border: 1px solid #e2e8f0; background: #fff; color: #475569; border-radius: 999px; padding: 5px 13px; font-size: 11.5px; font-weight: 800; cursor: pointer; white-space: nowrap; transition: all .15s; }
.defs-secnav-chip:hover { border-color: #94a3b8; color: #1e293b; }
.defs-secnav-chip.active { background: var(--primary, #0d6e5c); color: #fff; border-color: var(--primary, #0d6e5c); box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.form-field input,
.form-field select,
.form-field textarea {
border: 1.5px solid var(--border);
border-radius: 8px;
padding: 9px 12px;
font-size: 13px;
background: white;
outline: none;
transition: border-color 0.2s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(1,64,52,0.1);
}
.form-field.full { grid-column: 1 / -1; }
.form-help { font-size: 11px; color: var(--text-muted); }
/* Modals */
.modal-backdrop {
position: fixed; inset: 0;
background: rgba(15,23,42,0.65);
backdrop-filter: blur(4px);
display: flex; align-items: center; justify-content: center;
z-index: 100;
padding: 20px;
animation: fadeIn 0.2s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
background: white;
border-radius: 16px;
max-width: 700px; width: 100%;
max-height: 90vh;
overflow: hidden;
display: flex; flex-direction: column;
box-shadow: 0 25px 80px rgba(0,0,0,0.3);
animation: modalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal.modal-lg { max-width: 900px; }
.modal.modal-xl { max-width: 1100px; }
.modal.modal-sm { max-width: 460px; }
@keyframes modalIn {
from { opacity: 0; transform: translateY(20px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-header {
padding: 16px 20px;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: white;
display: flex; align-items: center; gap: 12px;
}
.modal-header h3 { margin: 0; font-size: 16px; font-weight: 800; flex: 1; }
.modal-close {
background: rgba(255,255,255,0.2);
border: none; color: white;
width: 32px; height: 32px;
border-radius: 8px;
font-size: 18px; font-weight: 700;
cursor: pointer;
transition: background 0.2s;
}
.modal-close:hover { background: rgba(255,255,255,0.3); }
.modal-body {
padding: 22px;
overflow-y: auto;
flex: 1;
/* Soft neutral canvas with subtle radial highlight so white section cards pop */
background:
radial-gradient(circle at 20% 0%, #f8fafc 0%, transparent 55%),
radial-gradient(circle at 80% 100%, #eff6ff 0%, transparent 55%),
#ffffff !important;
}
/* ─────────────────────────────────────────────────────────────────────────
Add-modal section cards — uniform crisp-white "card" look across:
Chart of Accounts, Journals, Treasury Transfer, Receipts, Payments,
Sales Invoices, Credit Notes, Fixed Assets, Companies, Employees, etc.
The original modules apply inline coloured backgrounds — these rules
override them with !important so users always see a clean white card.
─────────────────────────────────────────────────────────────────────── */
.modal .modal-body,
.modal form.modal-body { background: transparent; }
.modal-body .form-section,
.modal-body .form-section-body,
.modal-body .emp-section,
.modal-body section,
.modal-body fieldset {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 14px !important;
padding: 14px 16px 12px !important;
margin-bottom: 14px !important;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
position: relative;
overflow: visible;
}
/* Accent left bar — a thin gradient strip differentiates each card without
tinting the whole background (keeps body crisp white per user request). */
.modal-body .form-section::before,
.modal-body .emp-section::before {
content: '';
position: absolute;
inset-inline-start: 0;
top: 12px;
bottom: 12px;
width: 3px;
border-start-end-radius: 3px;
border-end-end-radius: 3px;
background: linear-gradient(180deg, var(--section-accent, var(--primary, #0d6e5c)), var(--section-accent2, #3b82f6));
}
.modal-body .form-section > h4,
.modal-body .emp-section > h4 {
margin: 0 0 12px !important;
padding: 0 0 10px 8px !important;
border-bottom: 1px dashed #e2e8f0 !important;
font-size: 13.5px;
font-weight: 800;
letter-spacing: 0.2px;
display: flex;
align-items: center;
gap: 8px;
}
/* Inputs inside white cards — light grey so they stand out on white */
.modal-body .form-field input[type="text"],
.modal-body .form-field input[type="number"],
.modal-body .form-field input[type="date"],
.modal-body .form-field input[type="email"],
.modal-body .form-field input[type="tel"],
.modal-body .form-field select,
.modal-body .form-field textarea {
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.modal-body .form-field input:focus,
.modal-body .form-field select:focus,
.modal-body .form-field textarea:focus {
background: #ffffff !important;
border-color: #3b82f6 !important;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
outline: none;
}
/* Read-only / disabled inputs keep a clear "computed" tint */
.modal-body .form-field input[readonly],
.modal-body .form-field input:disabled,
.modal-body .form-field select:disabled,
.modal-body .form-field textarea:disabled {
background: #f1f5f9 !important;
color: #475569 !important;
cursor: not-allowed;
}
/* Form section body wrapper (used by some modules) — fully transparent so it
inherits the white card from .form-section/.emp-section above */
.modal-body .form-section-body { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.modal-footer {
padding: 14px 20px;
border-top: 1px solid var(--border);
background: #f9fafb;
display: flex; justify-content: flex-end; gap: 8px;
}
/* Toasts */
.toast-container {
position: fixed;
top: calc(var(--copyright-h) + 80px);
z-index: 300;
display: flex; flex-direction: column; gap: 8px;
pointer-events: none;
}
html[dir="rtl"] .toast-container { left: 20px; }
html[dir="ltr"] .toast-container { right: 20px; }
.toast {
background: white;
border-radius: 10px;
padding: 12px 16px;
box-shadow: var(--shadow-lg);
border-inline-start: 4px solid var(--info);
font-size: 13px; font-weight: 600;
display: flex; align-items: center; gap: 10px;
min-width: 280px; max-width: 400px;
pointer-events: all;
animation: toastIn 0.3s;
}
@keyframes toastIn {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
.toast.success { border-color: var(--success); }
.toast.error { border-color: var(--danger); }
.toast.warning { border-color: var(--warning); }
.toast .toast-icon { font-size: 20px; }
.toast .toast-msg { flex: 1; }
/* Tabs */
.tabs {
display: flex; gap: 4px;
border-bottom: 2px solid var(--border);
margin-bottom: 16px;
overflow-x: auto;
scrollbar-width: thin;
}
.tab {
padding: 10px 16px;
font-size: 13px; font-weight: 700;
color: var(--text-muted);
background: transparent;
border: none;
border-bottom: 3px solid transparent;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s;
margin-bottom: -2px;
}
.tab:hover { color: var(--primary); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }
/* Empty state */
.empty-state {
text-align: center;
padding: 40px 20px;
color: var(--text-muted);
}
.empty-state .empty-icon { font-size: 50px; margin-bottom: 12px; }
.empty-state .empty-text { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.empty-state .empty-sub { font-size: 12px; }
/* Misc */
.search-box {
position: relative;
display: flex; align-items: center;
background: white;
border: 1.5px solid var(--border);
border-radius: 8px;
flex: 1; min-width: 200px; max-width: 400px;
}
.search-box:focus-within { border-color: var(--primary); }
.search-box input {
flex: 1;
border: none; background: transparent;
padding: 8px 12px;
font-size: 13px;
outline: none;
}
.search-box .search-icon { padding: 0 10px; color: var(--text-muted); }
.checkbox-cell {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: #2563eb; /* Bold blue ✓ (Companies-screen match) */
vertical-align: middle;
/* 🆕 v0.37.9.201 — Keep full opacity even when row is .audited
(data-audit-self also exempts it from the disable rule). */
opacity: 1 !important;
}
/* Force the checkbox to stay fully clickable and colored even inside
.audited rows (defense-in-depth alongside data-audit-self). */
.audited .checkbox-cell,
tr.audited .checkbox-cell {
opacity: 1 !important;
pointer-events: auto !important;
cursor: pointer !important;
accent-color: #2563eb !important;
}
/* ═══════════════════════════════════════════════════════════════════════
📅 v0.37.9.190 — Force English (dd/mm/yyyy) display on all date inputs
───────────────────────────────────────────────────────────────────────
The page is lang="ar", which makes browsers render
placeholders as "يوم/شهر/سنة". We want clean "dd/mm/yyyy" everywhere.
The JS in app.js adds lang="en-GB" on every such input; these CSS rules
provide the LTR alignment so the field reads naturally.
═══════════════════════════════════════════════════════════════════════ */
/* v0.37.9.213 — Hardened: force LTR on attribute + element + every webkit
datetime sub-field. This breaks the inherited dir="rtl" cascade. */
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="date"][dir="ltr"],
input[type="datetime-local"][dir="ltr"],
html[dir="rtl"] input[type="date"],
html[dir="rtl"] input[type="datetime-local"],
html[dir="rtl"] input[type="month"],
html[dir="rtl"] input[type="time"],
html[dir="rtl"] input[type="week"] {
direction: ltr !important;
text-align: left !important;
unicode-bidi: isolate !important;
}
/* Force LTR on every webkit datetime sub-field so segments order as dd/mm/yyyy */
input[type="date"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="month"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit,
input[type="week"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-text,
input[type="datetime-local"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="datetime-local"]::-webkit-datetime-edit-day-field,
input[type="datetime-local"]::-webkit-datetime-edit-month-field,
input[type="datetime-local"]::-webkit-datetime-edit-year-field {
direction: ltr !important;
unicode-bidi: isolate !important;
text-align: left !important;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
cursor: pointer;
}
/* ═══════════════════════════════════════════════════════════════════════
🛠️ v0.37.9.186 — RED PULSING "Quick Edit" — attention-grabbing
───────────────────────────────────────────────────────────────────────
Hot-red gradient + continuous pulse animation so the user can't miss
it on an audited row. Distinct from blue (regular edit) and yellow
(warnings) — only appears on locked records and grabs the eye.
═══════════════════════════════════════════════════════════════════════ */
@keyframes qeRedPulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.85),
0 3px 10px rgba(220, 38, 38, 0.55);
transform: scale(1);
}
50% {
box-shadow: 0 0 0 6px rgba(220, 38, 38, 0),
0 5px 14px rgba(220, 38, 38, 0.75);
transform: scale(1.06);
}
}
.action-btn.qe-red-pulse {
background: linear-gradient(135deg, #b91c1c 0%, #dc2626 45%, #ef4444 100%) !important;
color: #fff !important;
border: 1.5px solid #fca5a5 !important;
font-weight: 800 !important;
box-shadow: 0 3px 10px rgba(220, 38, 38, 0.55) !important;
animation: qeRedPulse 1.6s ease-in-out infinite !important;
position: relative;
}
.action-btn.qe-red-pulse:hover {
background: linear-gradient(135deg, #991b1b, #dc2626) !important;
box-shadow: 0 4px 16px rgba(220, 38, 38, 0.85) !important;
animation-play-state: paused !important;
transform: scale(1.12) !important;
}
/* Critical: keep it interactive on audit-locked rows */
.audited .action-btn.qe-red-pulse,
.row-auditable.audited .action-btn.qe-red-pulse {
opacity: 1 !important;
pointer-events: auto !important;
cursor: pointer !important;
filter: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════
🔵 v0.37.9.184 — Central-lock checkbox: NATIVE browser checkbox styled
───────────────────────────────────────────────────────────────────────
The OLD rec-lock-check rules were REMOVED — they applied appearance:none
which killed accent-color and prevented the browser from rendering the
default ✓ check inside the box. Now we let the browser render natively
with accent-color (set inline in record_actions.js), exactly like the
Companies screen does. This guarantees the blue ✓ matches everywhere.
═══════════════════════════════════════════════════════════════════════ */
.print-area { padding: 16px; }
/* RTL/LTR specific tweaks */
html[dir="ltr"] body { text-align: left; }
html[dir="ltr"] .copyright-bar { flex-direction: row-reverse; }
/* ═══════════════════════════════════════════════════════════════════════
EMPLOYEES SCREEN — Specific styles
═══════════════════════════════════════════════════════════════════════ */
.emp-hero {
background: linear-gradient(90deg, #d97706, #f59e0b 50%, #ef4444);
border-radius: 16px;
color: white;
margin-bottom: 14px;
overflow: hidden;
box-shadow: var(--shadow);
}
.emp-hero-row {
padding: 16px 20px;
display: flex; flex-wrap: wrap;
align-items: center; justify-content: space-between;
gap: 12px;
}
.emp-hero-title { display: flex; align-items: center; gap: 12px; }
.emp-hero-icon {
width: 48px; height: 48px;
background: rgba(255,255,255,0.2);
border-radius: 12px;
font-size: 24px;
display: flex; align-items: center; justify-content: center;
backdrop-filter: blur(4px);
}
.emp-hero-title h2 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.2; }
.emp-hero-title p { margin: 4px 0 0; font-size: 12px; opacity: 0.9; }
.emp-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-emp-action {
background: rgba(255,255,255,0.15);
border: none; color: white;
padding: 8px 14px; border-radius: 8px;
font-weight: 600; font-size: 13px;
backdrop-filter: blur(4px);
cursor: pointer;
transition: background 0.2s;
}
.btn-emp-action:hover { background: rgba(255,255,255,0.25); }
.btn-emp-add {
background: white; color: #9a3412;
border: none; padding: 9px 16px;
border-radius: 8px; font-weight: 800; font-size: 13px;
cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
transition: all 0.2s;
}
.btn-emp-add:hover { background: #fff7ed; transform: translateY(-1px); }
.emp-kpi-bar {
background: rgba(0,0,0,0.15);
backdrop-filter: blur(4px);
border-top: 1px solid rgba(255,255,255,0.15);
padding: 10px 20px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
text-align: center;
}
@media (min-width: 640px) { .emp-kpi-bar { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .emp-kpi-bar { grid-template-columns: repeat(8, 1fr); } }
.emp-kpi { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.emp-kpi-icon { font-size: 16px; }
.emp-kpi-label { font-size: 10px; opacity: 0.85; }
.emp-kpi-value { font-size: 14px; font-weight: 800; }
/* Pill tabs */
.emp-tabs-card {
background: white;
border-radius: 12px;
box-shadow: var(--shadow-sm);
padding: 6px;
margin-bottom: 14px;
}
.emp-tabs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px;
}
@media (min-width: 640px) { .emp-tabs { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .emp-tabs { grid-template-columns: repeat(8, 1fr); } }
.emp-tab-btn {
background: transparent;
border: none; color: #6b7280;
padding: 9px 8px; border-radius: 8px;
font-weight: 700; font-size: 11px;
cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 4px;
transition: all 0.2s;
white-space: nowrap;
}
.emp-tab-btn:hover { background: #f3f4f6; color: var(--text); }
.emp-tab-btn.active {
background: linear-gradient(90deg, #d97706, #f59e0b);
color: white;
box-shadow: 0 2px 8px rgba(217,119,6,0.3);
}
@media (max-width: 480px) {
.emp-tab-btn .hidden-xs { display: none; }
}
/* Filters card */
.emp-filters-card {
background: white;
border-radius: 12px;
box-shadow: var(--shadow-sm);
padding: 14px;
margin-bottom: 14px;
}
.emp-filters-row {
display: flex; gap: 10px; align-items: center;
margin-bottom: 0; flex-wrap: wrap;
}
.emp-filters-grid {
display: grid;
gap: 10px; margin-top: 12px;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
padding-top: 12px;
border-top: 1px dashed var(--border);
}
.emp-filters-grid.hidden { display: none; }
.emp-filter-field { display: flex; flex-direction: column; gap: 4px; }
.emp-filter-field label { font-size: 11px; color: #6b7280; font-weight: 700; }
.emp-filter-field select {
padding: 7px 10px; font-size: 12px;
border: 1px solid var(--border); border-radius: 6px;
background: #fff; outline: none;
}
.emp-filter-field select:focus { border-color: #f59e0b; }
/* Employees data table */
.emp-table { font-size: 12px; }
.emp-table thead th { font-size: 11px; padding: 9px 8px; }
.emp-table tbody td { padding: 9px 8px; }
.emp-table .mono { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 11px; }
.emp-table .small { font-size: 11px; }
.emp-table .num { font-feature-settings: "tnum" 1; text-align: end; }
/* Column highlights matching reference */
.emp-table .hl-blue { background: #eff6ff; }
.emp-table .hl-rose { background: #fff1f2; }
.emp-table .hl-amber { background: #fffbeb; }
.emp-table .hl-indigo { background: #eef2ff; }
.emp-table .hl-emerald { background: #ecfdf5; }
.emp-table .hl-purple { background: #faf5ff; }
.emp-table .hl-cyan { background: #ecfeff; }
.emp-table .hl-pink { background: #fdf2f8; }
.emp-table .hl-teal { background: #f0fdfa; }
.emp-table .hl-orange { background: #fff7ed; }
.emp-table-footer td {
background: #f0fdfa !important;
color: #0d6e5c !important;
font-weight: 800;
padding: 11px 8px;
border-top: 2px solid #5eead4;
}
/* Modal form sections */
.emp-section {
border-radius: 10px;
padding: 14px;
margin-bottom: 14px;
}
.emp-section h4 {
margin: 0 0 12px;
font-size: 13px; font-weight: 800;
display: flex; align-items: center; gap: 6px;
}
.emp-section .form-grid {
gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.emp-section .form-field label { font-size: 11px; }
.emp-section .form-field input,
.emp-section .form-field select,
.emp-section .form-field textarea {
padding: 7px 10px; font-size: 12px;
}
.emp-section .form-help { font-size: 10px; line-height: 1.4; }
/* Summary grid */
.emp-summary-grid {
display: grid;
gap: 14px;
grid-template-columns: 1fr;
}
@media (min-width: 1024px) { .emp-summary-grid { grid-template-columns: 1fr 1fr; } }
.emp-summary-grid .data-table { font-size: 12px; }
.emp-summary-grid .num { font-feature-settings: "tnum" 1; text-align: end; }
/* ───── Delegation Box (inside Org Structure) ───── */
.emp-delegation-box {
background: #fffbeb;
border: 1.5px solid #fcd34d;
border-radius: 10px;
padding: 12px;
margin-top: 12px;
}
.emp-delegation-title {
margin: 0 0 10px;
font-size: 12px; font-weight: 800;
color: #92400e;
display: flex; align-items: center; gap: 6px;
}
.emp-check-row {
display: flex; align-items: center; gap: 8px;
background: white;
border: 2px solid #fcd34d;
border-radius: 8px;
padding: 8px 10px;
cursor: pointer;
font-size: 12px;
color: #78350f;
transition: background 0.15s;
}
.emp-check-row:hover { background: #fef3c7; }
.emp-delegation-hint {
margin: 10px 0 0;
font-size: 11px;
color: #92400e;
line-height: 1.4;
}
/* ───── Attachments ───── */
.emp-attach-uploader { margin-bottom: 12px; }
.emp-attach-drop {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 8px;
padding: 22px 16px;
border: 2.5px dashed #cbd5e1;
border-radius: 12px;
background: #f8fafc;
cursor: pointer;
transition: all 0.2s;
text-align: center;
}
.emp-attach-drop:hover {
border-color: #6366f1;
background: #eef2ff;
transform: translateY(-1px);
}
.emp-attach-drop.dragging {
border-color: #10b981;
background: #ecfdf5;
transform: scale(1.02);
}
.emp-attach-drop-icon {
font-size: 32px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.emp-attach-drop-text {
display: flex; flex-direction: column; gap: 2px;
}
.emp-attach-drop-text strong {
font-size: 13px; color: #334155;
}
.emp-attach-drop-text span {
font-size: 11px; color: #64748b;
}
.emp-attach-drop-meta {
font-size: 10px;
color: #94a3b8;
background: white;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid #e2e8f0;
}
.emp-attach-empty {
padding: 14px;
text-align: center;
color: #94a3b8;
font-size: 12px;
background: #f8fafc;
border-radius: 8px;
border: 1px dashed #cbd5e1;
}
.emp-attach-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.emp-attach-item {
display: flex; align-items: center; gap: 10px;
background: white;
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 12px;
transition: all 0.15s;
}
.emp-attach-item:hover {
border-color: #6366f1;
box-shadow: 0 2px 8px rgba(99,102,241,0.1);
}
.emp-attach-icon {
font-size: 22px;
flex-shrink: 0;
width: 36px;
height: 36px;
display: flex; align-items: center; justify-content: center;
background: #f3f4f6;
border-radius: 8px;
}
.emp-attach-meta {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.emp-attach-name {
font-size: 12px;
font-weight: 700;
color: #1f2937;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.emp-attach-size {
font-size: 10px;
color: #6b7280;
}
.emp-attach-actions {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.emp-attach-btn {
background: none;
border: none;
padding: 6px 8px;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
transition: all 0.15s;
}
.emp-attach-btn:hover { background: #f3f4f6; transform: scale(1.1); }
.emp-attach-btn.view:hover { background: #dbeafe; }
.emp-attach-btn.delete:hover { background: #fee2e2; }
/* ═══════════════════════════════════════════════════════════════════════
v0.37.9.370 — Compact inline attachment chip
Used for "Additional Attachments" rows in JV + Receipts + Payments
modals. Replaces the tall card layout — multiple files fit on one
elegant horizontal line, wrap to next line if needed.
═══════════════════════════════════════════════════════════════════════ */
.att-chip-row { line-height: 1.5; }
.att-chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 999px;
padding: 3px 4px 3px 10px;
font-size: 11.5px;
max-width: 100%;
transition: all 0.15s;
}
.att-chip:hover {
border-color: #a78bfa;
box-shadow: 0 1px 4px rgba(124,58,237,0.15);
}
.att-chip-icon { font-size: 14px; flex-shrink: 0; }
.att-chip-name {
font-weight: 700;
color: #1f2937;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.att-chip-size {
color: #6b7280;
font-size: 10px;
background: #f3f4f6;
padding: 1px 7px;
border-radius: 999px;
flex-shrink: 0;
}
.att-chip-btn {
background: transparent;
border: 0;
padding: 3px 6px;
border-radius: 999px;
font-size: 12.5px;
cursor: pointer;
transition: all 0.15s;
line-height: 1;
}
.att-chip-btn:hover { background: #ede9fe; transform: scale(1.12); }
.att-chip-btn.att-chip-del:hover { background: #fee2e2; }
.att-chip-btn.att-chip-arch:hover { background: #fde68a; }
.att-chip-btn.att-chip-view { background: #dbeafe; color: #1e40af; }
.att-chip-btn.att-chip-view:hover { background: #bfdbfe; }
[dir="rtl"] .att-chip { padding: 3px 10px 3px 4px; }
/* ═══════════════════════════════════════════════════════════════════════
v0.37.9.372 — Smart Completion Bar (Receipts + Journal modals)
───────────────────────────────────────────────────────────────────────
A compact, elegant header that shows the user how complete their
record is, lists missing required fields as clickable chips, and
marks each empty required field with a pulsing red dot.
═══════════════════════════════════════════════════════════════════════ */
.smart-completion {
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border: 1.5px solid #e2e8f0;
border-radius: 14px;
padding: 12px 14px 10px;
margin-bottom: 14px;
position: relative;
overflow: hidden;
transition: all 0.3s;
}
.smart-completion.is-complete {
background: linear-gradient(135deg, #ecfdf5, #d1fae5);
border-color: #10b981;
box-shadow: 0 2px 12px rgba(16,185,129,0.15);
}
.smart-completion.is-warning {
background: linear-gradient(135deg, #fffbeb, #fef3c7);
border-color: #f59e0b;
}
.smart-completion-head {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-bottom: 8px;
}
.smart-completion-title {
display: flex; align-items: center; gap: 7px;
font-weight: 800; font-size: 13.5px; color: #0f172a;
}
.smart-completion-title .sc-icon { font-size: 18px; }
.smart-completion-percent {
margin-inline-start: auto;
background: #fff; border: 1.5px solid #cbd5e1;
border-radius: 999px; padding: 3px 11px;
font-family: monospace; font-weight: 800; font-size: 12.5px;
color: #0f172a; min-width: 56px; text-align: center;
}
.smart-completion.is-complete .smart-completion-percent {
background: #10b981; color: #fff; border-color: #059669;
}
.smart-completion.is-warning .smart-completion-percent {
background: #f59e0b; color: #fff; border-color: #d97706;
}
.smart-completion-progress {
height: 6px; background: #e2e8f0; border-radius: 999px;
overflow: hidden; margin-bottom: 10px;
}
.smart-completion-progress-fill {
height: 100%; background: linear-gradient(90deg, #f59e0b, #10b981);
border-radius: 999px;
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 0 8px rgba(16,185,129,0.4);
}
.smart-completion.is-complete .smart-completion-progress-fill {
background: linear-gradient(90deg, #10b981, #34d399);
}
.smart-completion-missing {
display: flex; flex-wrap: wrap; gap: 6px;
align-items: center;
}
.smart-completion-missing-label {
font-size: 11.5px; font-weight: 700; color: #92400e;
display: inline-flex; align-items: center; gap: 5px;
margin-inline-end: 4px;
}
.smart-completion-chip {
display: inline-flex; align-items: center; gap: 5px;
background: #fff;
border: 1.5px solid #fbbf24;
color: #92400e;
border-radius: 999px;
padding: 4px 10px;
font-size: 11.5px;
font-weight: 700;
cursor: pointer;
transition: all 0.15s;
position: relative;
}
.smart-completion-chip::before {
content: '';
width: 7px; height: 7px;
border-radius: 50%;
background: #ef4444;
animation: scPulse 1.8s ease-in-out infinite;
}
@keyframes scPulse {
0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }
50% { opacity: 0.8; transform: scale(1.15); box-shadow: 0 0 0 4px rgba(239,68,68,0); }
}
.smart-completion-chip:hover {
background: #fef3c7;
border-color: #f59e0b;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(245,158,11,0.25);
}
.smart-completion-complete-msg {
display: flex; align-items: center; gap: 8px;
font-size: 12.5px; font-weight: 700; color: #065f46;
}
.smart-completion-complete-msg .check {
font-size: 18px;
}
.smart-completion-tip {
margin-top: 8px;
padding: 6px 10px;
background: rgba(255,255,255,0.6);
border-radius: 8px;
font-size: 11px;
color: #475569;
font-weight: 500;
border-inline-start: 3px solid #f59e0b;
}
.smart-completion.is-complete .smart-completion-tip {
border-inline-start-color: #10b981;
color: #065f46;
}
/* ═══════════════════════════════════════════════════════════════════════
v0.37.9.376 — Journal Entry Modal: Smart Completion Bar + Pro View
───────────────────────────────────────────────────────────────────────
The smart completion bar lives at the top of the journal modal in
edit/create mode. It surfaces: header field completeness, line stats
(valid / total), debit/credit balance, and smart warnings (lines
without note, lines with missing party where required, duplicate
accounts, missing CC distribution).
═══════════════════════════════════════════════════════════════════════ */
.jv-smart-bar {
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border: 1.5px solid #e2e8f0;
border-radius: 14px;
padding: 12px 14px 10px;
margin-bottom: 14px;
transition: all 0.3s;
}
.jv-smart-bar.is-balanced { background: linear-gradient(135deg, #ecfdf5, #d1fae5); border-color: #10b981; }
.jv-smart-bar.is-warning { background: linear-gradient(135deg, #fffbeb, #fef3c7); border-color: #f59e0b; }
.jv-smart-bar.is-error { background: linear-gradient(135deg, #fef2f2, #fee2e2); border-color: #ef4444; }
.jv-smart-head {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-bottom: 8px;
}
.jv-smart-title {
display: flex; align-items: center; gap: 7px;
font-weight: 800; font-size: 13.5px; color: #0f172a;
}
.jv-smart-stats {
display: flex; gap: 8px; flex-wrap: wrap;
margin-inline-start: auto;
align-items: center;
}
.jv-smart-stat {
background: #fff; border: 1.5px solid #cbd5e1;
border-radius: 999px; padding: 3px 11px;
font-family: monospace; font-weight: 700; font-size: 11.5px;
color: #0f172a;
display: inline-flex; align-items: center; gap: 4px;
}
.jv-smart-stat strong { font-weight: 800; color: #1e40af; }
.jv-smart-stat.stat-debit { border-color: #93c5fd; background: #eff6ff; }
.jv-smart-stat.stat-debit strong { color: #1d4ed8; }
.jv-smart-stat.stat-credit { border-color: #c4b5fd; background: #f5f3ff; }
.jv-smart-stat.stat-credit strong { color: #6d28d9; }
.jv-smart-stat.stat-balanced { background: #10b981; color: #fff; border-color: #059669; }
.jv-smart-stat.stat-diff-bad { background: #ef4444; color: #fff; border-color: #dc2626; animation: jvDiffPulse 1.6s ease-in-out infinite; }
@keyframes jvDiffPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
50% { box-shadow: 0 0 0 5px rgba(239,68,68,0); }
}
.jv-smart-progress {
height: 6px; background: #e2e8f0; border-radius: 999px;
overflow: hidden; margin-bottom: 10px;
}
.jv-smart-progress-fill {
height: 100%;
background: linear-gradient(90deg, #f59e0b, #10b981);
border-radius: 999px;
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.jv-smart-bar.is-balanced .jv-smart-progress-fill {
background: linear-gradient(90deg, #10b981, #34d399);
}
.jv-smart-chips {
display: flex; flex-wrap: wrap; gap: 6px;
align-items: center;
}
.jv-smart-chips-label {
font-size: 11px; font-weight: 700; color: #475569;
margin-inline-end: 4px;
}
.jv-smart-chip {
display: inline-flex; align-items: center; gap: 5px;
background: #fff;
border: 1.5px solid #fbbf24;
color: #92400e;
border-radius: 999px;
padding: 4px 10px;
font-size: 11px;
font-weight: 700;
cursor: pointer;
transition: all 0.15s;
position: relative;
}
.jv-smart-chip::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: #ef4444;
animation: jvDiffPulse 1.6s ease-in-out infinite;
}
.jv-smart-chip:hover {
background: #fef3c7;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(245,158,11,0.25);
}
.jv-smart-chip.chip-info {
border-color: #93c5fd; color: #1d4ed8;
}
.jv-smart-chip.chip-info::before { background: #3b82f6; }
.jv-smart-chip.chip-cc {
border-color: #c4b5fd; color: #6d28d9;
}
.jv-smart-chip.chip-cc::before { background: #8b5cf6; }
.jv-smart-tip {
margin-top: 8px;
padding: 6px 10px;
background: rgba(255,255,255,0.6);
border-radius: 8px;
font-size: 11px;
color: #475569;
font-weight: 500;
border-inline-start: 3px solid #f59e0b;
}
.jv-smart-bar.is-balanced .jv-smart-tip {
border-inline-start-color: #10b981;
color: #065f46;
}
/* ═══════════════════════════════════════════════════════════════════════
Journal Entry — Form View is now the universal style across screens.
🆕 v0.37.9.400 — Summary card is no longer rendered. Form-edit-zone
stays visible in view mode (fields are disabled via openJournalModal
wireModalReadOnly + form[data-readonly] semantics).
═══════════════════════════════════════════════════════════════════════ */
.jv-view-summary { display: none !important; }
/* Form-edit-zone is ALWAYS shown — no hiding in view-only mode anymore. */
.jv-view-hero {
background: linear-gradient(135deg, #1e3a8a, #3b82f6);
color: #fff;
border-radius: 14px;
padding: 18px 22px;
display: grid;
grid-template-columns: 1fr auto;
gap: 18px;
margin-bottom: 14px;
box-shadow: 0 4px 18px rgba(0,0,0,0.12);
position: relative;
overflow: hidden;
}
.jv-view-hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at top right, rgba(255,255,255,0.18), transparent 60%);
pointer-events: none;
}
.jv-view-hero-left { display: flex; flex-direction: column; gap: 8px; z-index: 1; min-width: 0; }
.jv-view-source-pill {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(255,255,255,0.22);
border: 1px solid rgba(255,255,255,0.35);
padding: 4px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
width: fit-content;
}
.jv-view-doc-no {
font-family: monospace;
font-size: 19px;
font-weight: 800;
letter-spacing: 0.4px;
}
.jv-view-meta {
display: flex; gap: 16px; flex-wrap: wrap;
font-size: 12.5px;
opacity: 0.95;
}
.jv-view-meta-item { display: inline-flex; align-items: center; gap: 5px; }
.jv-view-hero-right { text-align: end; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.jv-view-totals { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.jv-view-total-block {
background: rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.3);
border-radius: 10px;
padding: 6px 12px;
text-align: end;
min-width: 120px;
}
.jv-view-total-label {
font-size: 10px;
opacity: 0.85;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.jv-view-total-value {
font-family: monospace;
font-size: 18px;
font-weight: 800;
direction: ltr;
}
.jv-view-balance-badge {
background: #10b981; color: #fff;
padding: 4px 12px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 800;
margin-top: 4px;
align-self: flex-end;
}
.jv-view-balance-badge.is-bad { background: #ef4444; }
.jv-view-status-line {
display: flex; gap: 6px;
flex-wrap: wrap;
margin-top: 6px;
justify-content: flex-end;
}
.jv-view-status-badge {
background: rgba(255,255,255,0.22);
border: 1px solid rgba(255,255,255,0.4);
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
}
.jv-view-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.jv-view-tile {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 11px 14px;
display: flex; flex-direction: column; gap: 4px;
}
.jv-view-tile-label {
font-size: 10.5px; font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.jv-view-tile-value {
font-size: 13.5px;
font-weight: 700;
color: #0f172a;
}
.jv-view-tile-sub {
font-size: 11px;
font-weight: 600;
color: #64748b;
font-family: monospace;
}
.jv-view-desc {
background: linear-gradient(135deg, #eff6ff, #dbeafe);
border: 1px solid #93c5fd;
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 14px;
}
.jv-view-desc-label {
font-size: 10.5px;
font-weight: 700;
color: #1e40af;
margin-bottom: 4px;
text-transform: uppercase;
}
.jv-view-desc-value {
font-size: 14px;
color: #0f172a;
line-height: 1.6;
font-weight: 600;
}
.jv-view-lines-wrap {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
overflow: hidden;
margin-bottom: 14px;
}
.jv-view-lines-head {
background: linear-gradient(135deg, #1e3a8a, #3b82f6);
color: #fff;
padding: 10px 14px;
font-weight: 800;
font-size: 13px;
display: flex;
align-items: center;
gap: 8px;
}
.jv-view-lines-table {
width: 100%; border-collapse: collapse;
font-size: 12.5px;
}
.jv-view-lines-table thead {
background: #f8fafc;
}
.jv-view-lines-table th {
padding: 8px 10px;
text-align: start;
font-size: 11px;
font-weight: 800;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.3px;
border-bottom: 2px solid #e2e8f0;
}
.jv-view-lines-table td {
padding: 8px 10px;
border-bottom: 1px solid #f1f5f9;
vertical-align: top;
}
.jv-view-lines-table tr:last-child td { border-bottom: none; }
.jv-view-lines-table .col-acct { width: 30%; }
.jv-view-lines-table .col-party { width: 18%; }
.jv-view-lines-table .col-debit, .jv-view-lines-table .col-credit { width: 12%; text-align: end; font-family: monospace; }
.jv-view-lines-table .col-note { width: 28%; color: #475569; }
.jv-view-lines-table .acct-code { font-family: monospace; font-weight: 800; color: #1e40af; font-size: 11px; display: block; }
.jv-view-lines-table .acct-name { font-weight: 700; color: #0f172a; }
.jv-view-lines-table .party-pill {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
}
.jv-view-lines-table .party-pill.party-customer { background: #dbeafe; color: #1e40af; }
.jv-view-lines-table .party-pill.party-supplier { background: #fef3c7; color: #92400e; }
.jv-view-lines-table .party-pill.party-treasury { background: #d1fae5; color: #065f46; }
.jv-view-lines-table .party-pill.party-tax { background: #ede9fe; color: #6d28d9; }
.jv-view-lines-table .debit-val { color: #1d4ed8; font-weight: 800; }
.jv-view-lines-table .credit-val { color: #6d28d9; font-weight: 800; }
.jv-view-lines-table tfoot td {
background: #f8fafc;
font-weight: 800;
padding: 10px;
border-top: 2px solid #cbd5e1;
}
.jv-view-lines-table tfoot .grand-total { font-size: 14px; font-family: monospace; }
/* CC distribution chips below each line */
.jv-view-cc-row {
display: flex; flex-wrap: wrap; gap: 5px;
margin-top: 6px;
padding-top: 6px;
border-top: 1px dashed #e2e8f0;
}
.jv-view-cc-chip {
display: inline-flex; align-items: center; gap: 4px;
background: #f5f3ff;
border: 1px solid #c4b5fd;
color: #5b21b6;
border-radius: 999px;
padding: 2px 8px;
font-size: 10.5px;
font-weight: 700;
}
.jv-view-cc-chip .cc-pct {
background: #6d28d9; color: #fff;
padding: 0 6px;
border-radius: 999px;
font-size: 9.5px;
font-family: monospace;
}
.jv-view-cc-chip.is-ok { background: #ecfdf5; border-color: #6ee7b7; color: #047857; }
.jv-view-cc-chip.is-ok .cc-pct { background: #059669; }
.jv-view-cc-chip.is-partial { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.jv-view-cc-chip.is-partial .cc-pct { background: #b45309; }
.jv-view-cc-chip .cc-code-mono {
font-family: monospace; font-weight: 800;
background: rgba(0,0,0,0.06);
padding: 0 4px; border-radius: 3px;
margin-inline-end: 2px;
}
.jv-view-cc-warn {
display: inline-block;
padding: 2px 8px;
border-radius: 6px;
background: #fee2e2;
color: #991b1b;
font-size: 10px;
font-weight: 700;
}
.jv-view-cc-missing {
display: inline-block;
padding: 4px 10px;
border-radius: 8px;
background: linear-gradient(135deg, #fef2f2, #fee2e2);
border: 1px dashed #fca5a5;
color: #991b1b;
font-size: 10.5px;
font-weight: 700;
}
/* v0.37.9.389 — Account column layout + Cost-Center edit button (view mode) */
.jv-view-lines-table .acct-line {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 6px;
}
.jv-view-lines-table .acct-text { flex: 1; min-width: 0; }
.jv-view-cc-btn {
flex-shrink: 0;
background: linear-gradient(135deg, #f5f3ff, #ede9fe);
border: 1.5px solid #c4b5fd;
color: #6d28d9;
width: 26px; height: 26px;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
transition: all 0.15s;
}
.jv-view-cc-btn:hover {
background: linear-gradient(135deg, #ede9fe, #ddd6fe);
border-color: #8b5cf6;
transform: scale(1.05);
box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25);
}
/* ═══════════════════════════════════════════════════════════════════════
v0.37.9.377 — CC % badge on the 🎯 button in journal line table.
Shows allocation status at a glance:
• pct-zero → light grey (no distribution)
• pct-partial → amber (some distribution but < 100%)
• pct-full → green (100% allocated)
• pct-over → red (over-distributed, error)
═══════════════════════════════════════════════════════════════════════ */
.cc-jv-dist {
position: relative;
}
.cc-pct-badge {
position: absolute;
bottom: -4px;
inset-inline-end: -6px;
background: #fff;
color: #475569;
border: 1.5px solid #cbd5e1;
border-radius: 999px;
padding: 0 4px;
font-size: 9px;
font-family: monospace;
font-weight: 800;
line-height: 13px;
min-width: 22px;
text-align: center;
pointer-events: none;
}
.cc-pct-badge.pct-full {
background: #10b981; color: #fff; border-color: #059669;
}
.cc-pct-badge.pct-partial {
background: #f59e0b; color: #fff; border-color: #d97706;
}
.cc-pct-badge.pct-over {
background: #ef4444; color: #fff; border-color: #dc2626;
animation: jvDiffPulse 1.6s ease-in-out infinite;
}
.cc-pct-badge.pct-zero {
background: #f1f5f9; color: #94a3b8; border-color: #cbd5e1;
}
/* v0.37.9.394 — Force 🎯 cost-center button to stay visible + clickable
in ALL audit/view-only states. The user explicitly wants to edit CC
distribution even when the JV is locked (CC is analytical, not GL). */
.modal-backdrop.audited .cc-jv-dist,
.modal-backdrop.view-only .cc-jv-dist,
.modal-backdrop[data-readonly] .cc-jv-dist,
button.cc-jv-dist[data-audit-allow],
button.cc-jv-dist[data-rec-allow] {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
cursor: pointer !important;
filter: none !important;
}
.modal-backdrop.audited .cc-pct-badge,
.modal-backdrop.view-only .cc-pct-badge {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* ═══════════════════════════════════════════════════════════════════════
v0.37.9.375 — Receipt Modal: Professional View-Only Document Layout
───────────────────────────────────────────────────────────────────────
In view/approval mode we hide the form sections (which are visually
disabled greyscale inputs) and show a beautiful read-only document
card instead. The JV preview + attachments + notes remain visible
because they're useful side-info even in view-mode.
═══════════════════════════════════════════════════════════════════════ */
.rv-view-summary { display: none; }
.modal-backdrop.view-only .rv-view-summary { display: block; }
.modal-backdrop.view-only .rv-form-edit-zone { display: none !important; }
.rv-view-hero {
background: linear-gradient(135deg, var(--rv-color, #15803d), var(--rv-color-2, #22c55e));
color: #fff;
border-radius: 14px;
padding: 18px 22px;
display: grid;
grid-template-columns: 1fr auto;
gap: 18px;
margin-bottom: 14px;
box-shadow: 0 4px 18px rgba(0,0,0,0.12);
position: relative;
overflow: hidden;
}
.rv-view-hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at top right, rgba(255,255,255,0.18), transparent 60%);
pointer-events: none;
}
.rv-view-hero-left { display: flex; flex-direction: column; gap: 8px; z-index: 1; min-width: 0; }
.rv-view-doc-no {
font-family: monospace;
font-size: 19px;
font-weight: 800;
letter-spacing: 0.4px;
}
.rv-view-type-pill {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(255,255,255,0.22);
border: 1px solid rgba(255,255,255,0.35);
padding: 4px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
width: fit-content;
}
.rv-view-meta {
display: flex; gap: 16px; flex-wrap: wrap;
font-size: 12.5px;
opacity: 0.95;
}
.rv-view-meta-item { display: inline-flex; align-items: center; gap: 5px; }
.rv-view-hero-right { text-align: end; z-index: 1; }
.rv-view-amount-label {
font-size: 11px; opacity: 0.85;
text-transform: uppercase; letter-spacing: 0.5px;
margin-bottom: 4px;
}
.rv-view-amount {
font-family: monospace;
font-size: 30px;
font-weight: 800;
line-height: 1.05;
direction: ltr;
}
.rv-view-amount-currency {
font-size: 14px;
opacity: 0.9;
margin-inline-start: 4px;
}
.rv-view-status-line {
display: flex; justify-content: flex-end;
gap: 6px;
margin-top: 8px;
flex-wrap: wrap;
}
.rv-view-status-badge {
background: rgba(255,255,255,0.22);
border: 1px solid rgba(255,255,255,0.4);
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
}
.rv-view-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.rv-view-tile {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 11px 14px;
display: flex; flex-direction: column; gap: 4px;
transition: all .15s;
}
.rv-view-tile:hover {
border-color: #94a3b8;
box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.rv-view-tile-label {
font-size: 10.5px; font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.3px;
display: inline-flex; align-items: center; gap: 4px;
}
.rv-view-tile-value {
font-size: 13.5px;
font-weight: 700;
color: #0f172a;
line-height: 1.4;
word-break: break-word;
}
.rv-view-tile-sub {
font-size: 11px;
font-weight: 600;
color: #64748b;
font-family: monospace;
}
.rv-view-tile.tile-empty .rv-view-tile-value {
color: #94a3b8;
font-weight: 500;
font-style: italic;
}
.rv-view-desc {
background: linear-gradient(135deg, #fffbeb, #fef3c7);
border: 1px solid #fcd34d;
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 14px;
}
.rv-view-desc-label {
font-size: 10.5px;
font-weight: 700;
color: #92400e;
margin-bottom: 4px;
text-transform: uppercase;
display: inline-flex; align-items: center; gap: 4px;
}
.rv-view-desc-value {
font-size: 14px;
color: #0f172a;
line-height: 1.6;
font-weight: 600;
}
.rv-view-reference {
background: #f8fafc;
border: 1px dashed #cbd5e1;
border-radius: 8px;
padding: 8px 12px;
display: flex; align-items: center; gap: 8px;
font-size: 12.5px;
color: #475569;
margin-bottom: 14px;
}
.rv-view-reference strong { color: #0f172a; font-family: monospace; }
/* Field-level required indicator: red pulsing dot on the label */
.form-field.field-missing > label::after {
content: '';
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: #ef4444;
margin-inline-start: 6px;
vertical-align: middle;
animation: scPulse 1.8s ease-in-out infinite;
}
.form-field.field-missing > label {
color: #b91c1c;
}
.form-field.field-missing input,
.form-field.field-missing select,
.form-field.field-missing textarea {
border-color: #fca5a5 !important;
background: #fffbfb;
box-shadow: 0 0 0 1px #fecaca inset;
}
.form-field.field-ok > label::after {
content: '✓';
display: inline-block;
color: #10b981;
font-weight: 800;
margin-inline-start: 6px;
font-size: 13px;
animation: scFadeCheck 0.6s ease-out;
}
@keyframes scFadeCheck {
0% { opacity: 0; transform: scale(0.5); }
60% { opacity: 1; transform: scale(1.2); }
100% { opacity: 1; transform: scale(1); }
}
.form-field.field-ok input,
.form-field.field-ok select,
.form-field.field-ok textarea {
border-color: #86efac !important;
}
/* 🆕 v0.37.9.371 — Hard-override the .audited dimming for attachment chips.
* The high-specificity `.audited button:not(...)` rule dims any non-listed
* button. Even with [data-audit-allow] on each chip button, we want a belt-
* and-suspenders rule that's both specific AND tagged !important so the
* chip buttons stay fully bright + interactive in view-mode. */
.audited .att-chip-btn,
.audited .att-chip-btn[data-rec-allow],
.audited .att-chip-btn[data-audit-allow],
.modal-backdrop.view-only .att-chip-btn {
opacity: 1 !important;
pointer-events: auto !important;
cursor: pointer !important;
filter: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════
COMPANIES — Owners table (dynamic)
═══════════════════════════════════════════════════════════════════════ */
.co-owners-toolbar {
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
background: white;
border: 1.5px solid #c4b5fd;
border-radius: 10px;
padding: 10px 12px;
}
.co-share-summary {
margin-inline-start: auto;
background: #f3f4f6;
border-radius: 999px;
padding: 5px 14px;
font-size: 12px; font-weight: 700;
color: #374151;
transition: all 0.2s;
}
.co-share-summary.ok { background: #d1fae5; color: #065f46; }
.co-share-summary.under { background: #fef3c7; color: #92400e; }
.co-share-summary.over { background: #fee2e2; color: #991b1b; }
.co-share-summary strong { font-feature-settings: "tnum" 1; }
.co-owners-table { font-size: 12px; }
.co-owners-table thead th {
background: #f5f3ff; color: #5b21b6;
padding: 8px 6px; font-size: 11px;
}
.co-owners-table tbody td { padding: 5px 6px; vertical-align: middle; }
.owner-input {
width: 100%;
padding: 6px 8px;
border: 1px solid var(--border);
border-radius: 6px;
font-size: 12px;
background: white;
outline: none;
font-family: inherit;
transition: border-color 0.15s;
}
.owner-input:focus { border-color: #8b5cf6; box-shadow: 0 0 0 2px rgba(139,92,246,0.15); }
.owner-share {
text-align: end;
font-weight: 700;
background: #faf5ff;
}
.co-owners-hint {
margin: 10px 0 0;
font-size: 12px;
font-weight: 700;
text-align: center;
}
/* Owner ID hint below the field */
.owner-id-hint {
display: block;
font-size: 9px;
color: #94a3b8;
margin-top: 2px;
text-align: center;
}
/* Owner row visual cue for individual vs entity */
.owner-row.is-individual td:nth-child(3) { background: linear-gradient(90deg, rgba(99,102,241,0.06), transparent); }
.owner-row.is-entity td:nth-child(3) { background: linear-gradient(90deg, rgba(217,119,6,0.10), transparent); }
.owner-type-select { font-weight: 700; }
/* ═══════════════════════════════════════════════════════════════════════
COMPANIES — Hero banner & KPI bar
═══════════════════════════════════════════════════════════════════════ */
.co-hero {
background: linear-gradient(135deg, #b45309 0%, #d97706 40%, #f59e0b 80%, #fbbf24 100%);
border-radius: 18px;
color: white;
margin-bottom: 16px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(217,119,6,0.25);
position: relative;
}
.co-hero::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.18), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(0,0,0,0.10), transparent 40%);
pointer-events: none;
}
.co-hero-row {
position: relative;
padding: 18px 22px;
display: flex; flex-wrap: wrap;
align-items: center; justify-content: space-between;
gap: 14px;
}
.co-hero-title { display: flex; align-items: center; gap: 14px; }
.co-hero-icon {
width: 56px; height: 56px;
background: rgba(255,255,255,0.22);
border-radius: 14px;
font-size: 28px;
display: flex; align-items: center; justify-content: center;
backdrop-filter: blur(6px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.co-hero-title h2 { margin: 0; font-size: 20px; font-weight: 900; line-height: 1.2; }
.co-hero-title p { margin: 4px 0 0; font-size: 13px; opacity: 0.92; }
.co-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-co-action {
background: rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.25);
color: white;
padding: 9px 16px; border-radius: 10px;
font-weight: 700; font-size: 13px;
backdrop-filter: blur(4px);
cursor: pointer;
transition: all 0.2s;
}
.btn-co-action:hover { background: rgba(255,255,255,0.28); transform: translateY(-1px); }
.btn-co-add {
background: white; color: #9a3412;
border: none; padding: 10px 20px;
border-radius: 10px; font-weight: 900; font-size: 14px;
cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,0.20);
transition: all 0.2s;
}
.btn-co-add:hover { background: #fff7ed; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,0.25); }
.co-kpi-bar {
position: relative;
background: rgba(0,0,0,0.18);
backdrop-filter: blur(6px);
border-top: 1px solid rgba(255,255,255,0.18);
padding: 12px 22px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
text-align: center;
}
@media (min-width: 640px) { .co-kpi-bar { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .co-kpi-bar { grid-template-columns: repeat(8, 1fr); } }
.co-kpi {
display: flex; flex-direction: column;
align-items: center; gap: 3px;
padding: 6px 4px;
border-radius: 8px;
transition: background 0.15s;
}
.co-kpi:hover { background: rgba(255,255,255,0.08); }
.co-kpi-icon { font-size: 18px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }
.co-kpi-label { font-size: 10px; opacity: 0.88; font-weight: 600; }
.co-kpi-value {
font-size: 16px; font-weight: 900;
font-feature-settings: "tnum" 1;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
/* Companies list table — refined */
.co-list-table { font-size: 12px; }
.co-list-table thead th {
background: linear-gradient(180deg, #fff7ed, #fed7aa);
color: #9a3412;
font-size: 11px;
padding: 10px 8px;
border-bottom: 2px solid #fdba74;
white-space: nowrap;
}
.co-list-table tbody td { padding: 10px 8px; }
.co-list-table tbody tr.audited { background: #fffbeb; }
.co-list-table tbody tr.audited:hover { background: #fef3c7; }
.co-list-table .mono { font-family: 'SF Mono', Menlo, Consolas, monospace; }
.co-list-table .small { font-size: 11px; }
/* Company name cell with avatar */
.co-name-cell {
display: flex; align-items: center; gap: 10px;
}
.co-name-avatar {
width: 36px; height: 36px;
flex-shrink: 0;
background: linear-gradient(135deg, #d97706, #f59e0b);
color: white;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-weight: 900; font-size: 16px;
box-shadow: 0 3px 8px rgba(217,119,6,0.3);
font-family: 'Inter', sans-serif;
}
.co-name-en {
font-size: 10px; color: #6b7280;
margin-top: 2px;
}
.co-name-avatar.has-logo {
background: white;
border: 1.5px solid #fed7aa;
padding: 3px;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.co-name-avatar.has-logo img {
width: 100%; height: 100%;
object-fit: contain;
border-radius: 6px;
}
/* ─── Logo Uploader (in modal) ─── */
.co-logo-row {
display: flex; gap: 16px;
align-items: center; justify-content: center;
background: white;
border: 1.5px dashed #5eead4;
border-radius: 12px;
padding: 14px;
flex-wrap: wrap;
}
.co-logo-preview {
width: 100px; height: 100px;
border-radius: 16px;
border: 2px solid #cbd5e1;
background: #f8fafc;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
flex-shrink: 0;
transition: all 0.2s;
}
.co-logo-preview:hover { border-color: #0d6e5c; }
.co-logo-preview img {
width: 100%; height: 100%;
object-fit: contain;
}
.co-logo-placeholder {
font-size: 48px;
opacity: 0.4;
}
.co-logo-controls {
display: flex; flex-direction: column;
gap: 8px;
align-items: flex-start;
min-width: 200px;
}
.co-logo-help {
font-size: 10px;
color: #6b7280;
line-height: 1.4;
margin-top: 4px;
}
/* ═══════════════════════════════════════════════════════════════════════
DEFS module (Clients, Suppliers, Shareholders, Holidays) hero
═══════════════════════════════════════════════════════════════════════ */
.defs-hero {
border-radius: 18px;
color: white;
margin-bottom: 16px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
position: relative;
}
.defs-hero::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.18), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(0,0,0,0.10), transparent 40%);
pointer-events: none;
}
.defs-hero-row {
position: relative;
padding: 18px 22px;
display: flex; flex-wrap: wrap;
align-items: center; justify-content: space-between;
gap: 14px;
}
.defs-hero-title { display: flex; align-items: center; gap: 14px; }
.defs-hero-icon {
width: 56px; height: 56px;
background: rgba(255,255,255,0.22);
border-radius: 14px;
font-size: 28px;
display: flex; align-items: center; justify-content: center;
backdrop-filter: blur(6px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.defs-hero-title h2 { margin: 0; font-size: 20px; font-weight: 900; line-height: 1.2; }
.defs-hero-title p { margin: 4px 0 0; font-size: 13px; opacity: 0.92; }
.defs-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* ─────────────────────────────────────────────────────────────────────────
Primary "New X" buttons on every screen hero (Receipts, Payments,
Transfers, Sales Invoices, Credit Notes, Fixed Assets, etc.)
Clean white pill that stands out crisp against the colored hero strip.
The bilingual icon (+) is tinted to match the hero theme automatically
via currentColor on a small gradient chip — works for any hero gradient.
─────────────────────────────────────────────────────────────────────── */
.defs-hero-btn,
.tr-hero-actions .defs-hero-btn,
.fa-hero-actions .defs-hero-btn {
background: #ffffff;
color: #0f172a;
border: 1.5px solid rgba(255,255,255,0.55);
padding: 9px 16px 9px 14px;
border-radius: 12px;
font-weight: 800;
font-size: 13px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
letter-spacing: 0.2px;
box-shadow: 0 4px 12px rgba(0,0,0,0.16), inset 0 -2px 0 rgba(0,0,0,0.03);
transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.defs-hero-btn:hover {
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(0,0,0,0.22), inset 0 -2px 0 rgba(0,0,0,0.03);
background: #f8fafc;
}
.defs-hero-btn:active { transform: translateY(0); }
/* The PRIMARY variant — the "main" CTA on each screen. Coloured chip on
the leading "+" + subtle gradient ring around the button to make it pop. */
.defs-hero-btn-primary {
background: linear-gradient(135deg, #ffffff 0%, #ffffff 70%, #f0fdf4 100%);
color: #0f172a;
border: 0;
position: relative;
padding-inline-start: 12px;
font-weight: 900;
box-shadow:
0 0 0 2px rgba(255,255,255,0.85),
0 8px 22px rgba(0,0,0,0.22),
inset 0 -2px 0 rgba(0,0,0,0.04);
}
/* Replace the leading "+" character (if present in label) with a custom
coloured pill so it stays vibrant against the white background.
The button label still reads naturally; we just style the first char. */
.defs-hero-btn-primary::first-letter,
.defs-hero-btn-primary::first-line { color: inherit; }
.defs-hero-btn-primary:hover {
background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%);
transform: translateY(-2px);
box-shadow:
0 0 0 2px rgba(255,255,255,1),
0 12px 28px rgba(0,0,0,0.28),
inset 0 -2px 0 rgba(0,0,0,0.04);
}
.defs-hero-btn-primary:active { transform: translateY(0); }
/* Secondary (non-primary) hero buttons — slightly translucent so they read
as supporting actions next to the bright primary. Keep them readable. */
.defs-hero-btn:not(.defs-hero-btn-primary) {
background: rgba(255,255,255,0.92);
color: #0f172a;
}
.defs-hero-btn:not(.defs-hero-btn-primary):hover {
background: #ffffff;
}
.defs-kpi-bar {
position: relative;
background: rgba(0,0,0,0.18);
backdrop-filter: blur(6px);
border-top: 1px solid rgba(255,255,255,0.18);
padding: 12px 22px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
text-align: center;
}
@media (min-width: 640px) { .defs-kpi-bar { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .defs-kpi-bar { grid-template-columns: repeat(8, 1fr); } }
.defs-kpi {
display: flex; flex-direction: column;
align-items: center; gap: 3px;
padding: 6px 4px;
border-radius: 8px;
}
.defs-kpi:hover { background: rgba(255,255,255,0.08); }
.defs-kpi-icon { font-size: 18px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }
.defs-kpi-label { font-size: 10px; opacity: 0.88; font-weight: 600; }
.defs-kpi-value {
font-size: 16px; font-weight: 900;
font-feature-settings: "tnum" 1;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
/* ─── Recipients list (used by Notes & Tasks) ─── */
.nt-recipients-list {
background: white;
border: 1px solid var(--border);
border-radius: 10px;
padding: 4px;
max-height: 220px;
overflow-y: auto;
display: grid;
grid-template-columns: 1fr;
gap: 2px;
}
@media (min-width: 640px) { .nt-recipients-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .nt-recipients-list { grid-template-columns: 1fr 1fr 1fr; } }
.nt-recipient-row {
display: flex; align-items: center; gap: 8px;
padding: 7px 10px;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
transition: background 0.12s;
}
.nt-recipient-row:hover { background: #f5f3ff; }
.nt-recipient-row input { width: 16px; height: 16px; accent-color: #8b5cf6; cursor: pointer; }
.nt-recipient-name { font-weight: 700; color: #1f2937; }
.nt-recipient-meta { color: #6b7280; font-size: 10px; margin-inline-start: auto; }
/* ═══════════════════════════════════════════════════════════════════════
HOLIDAYS — Tabs, Calendar, Stats, Circular cards
═══════════════════════════════════════════════════════════════════════ */
.h-tabs-card {
background: white;
border-radius: 12px;
box-shadow: var(--shadow-sm);
padding: 6px;
margin-bottom: 14px;
}
.h-tabs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px;
}
@media (min-width: 768px) { .h-tabs { grid-template-columns: repeat(4, 1fr); } }
.h-tab-btn {
background: transparent;
border: none; color: #6b7280;
padding: 11px 10px; border-radius: 8px;
font-weight: 700; font-size: 13px;
cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 8px;
transition: all 0.2s;
}
.h-tab-btn:hover { background: #fff1f2; color: #9f1239; }
.h-tab-btn.active {
background: linear-gradient(90deg, #be123c, #e11d48);
color: white;
box-shadow: 0 4px 12px rgba(225,29,72,0.3);
}
.h-filters-toolbar { gap: 8px; flex-wrap: wrap; }
.h-filter-select {
padding: 7px 10px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 12px;
background: white;
cursor: pointer;
}
/* Year selector */
.h-year-btn {
background: white;
border: 1.5px solid var(--border);
color: var(--text);
padding: 7px 16px;
border-radius: 8px;
font-weight: 800;
font-size: 14px;
cursor: pointer;
font-family: 'Inter', monospace;
transition: all 0.15s;
}
.h-year-btn:hover { border-color: #e11d48; color: #be123c; }
.h-year-btn.active {
background: linear-gradient(135deg, #be123c, #e11d48);
color: white;
border-color: #be123c;
box-shadow: 0 4px 12px rgba(225,29,72,0.3);
}
/* Yearly calendar grid */
.h-calendar-grid {
display: grid;
gap: 10px;
grid-template-columns: 1fr;
margin-bottom: 16px;
}
@media (min-width: 640px) { .h-calendar-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .h-calendar-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 1280px) { .h-calendar-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }
.h-month-card {
background: white;
border-radius: 12px;
border: 1.5px solid var(--border);
overflow: hidden;
transition: all 0.2s;
}
.h-month-card.has-holiday {
border-color: #fda4af;
box-shadow: 0 4px 14px rgba(244,63,94,0.10);
}
.h-month-header {
background: linear-gradient(90deg, #f3f4f6, #e5e7eb);
padding: 8px 12px;
display: flex; justify-content: space-between; align-items: center;
}
.h-month-card.has-holiday .h-month-header {
background: linear-gradient(90deg, #fff1f2, #ffe4e6);
}
.h-month-name {
font-weight: 800; font-size: 13px;
color: var(--text);
}
.h-month-card.has-holiday .h-month-name { color: #9f1239; }
.h-month-num {
background: rgba(0,0,0,0.05);
color: var(--text-muted);
font-size: 11px; font-weight: 700;
padding: 2px 8px; border-radius: 999px;
font-family: 'Inter', monospace;
}
.h-month-card.has-holiday .h-month-num {
background: #fda4af; color: white;
}
.h-month-body {
padding: 10px;
min-height: 80px;
display: flex; flex-direction: column; gap: 6px;
}
.h-month-empty {
flex: 1;
display: flex; align-items: center; justify-content: center;
color: #cbd5e1;
font-size: 11px;
text-align: center;
}
.h-month-holiday {
background: #fef2f2;
border: 1px solid #fda4af;
border-radius: 8px;
padding: 7px 9px;
font-size: 11px;
cursor: pointer;
transition: all 0.15s;
}
.h-month-holiday:hover { transform: translateX(-2px); box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.h-month-holiday.past { opacity: 0.55; background: #f3f4f6; border-color: #d1d5db; }
.h-month-holiday.ongoing { background: linear-gradient(90deg, #dcfce7, #bbf7d0); border-color: #4ade80; box-shadow: 0 0 0 2px rgba(74,222,128,0.2); }
.h-month-holiday.upcoming { background: #fef2f2; border-color: #fda4af; }
.h-mh-name { font-weight: 800; color: #9f1239; margin-bottom: 3px; }
.h-month-holiday.past .h-mh-name { color: #6b7280; }
.h-month-holiday.ongoing .h-mh-name { color: #065f46; }
.h-mh-meta {
display: flex; justify-content: space-between;
font-size: 10px; color: #7c2d12;
}
.h-month-holiday.past .h-mh-meta { color: #94a3b8; }
.h-month-holiday.ongoing .h-mh-meta { color: #065f46; }
.h-mh-days {
background: rgba(255,255,255,0.7);
padding: 1px 6px;
border-radius: 999px;
font-weight: 800;
font-family: 'Inter', monospace;
}
/* Stats — month bars */
.h-month-bars {
display: flex; flex-direction: column;
gap: 8px;
}
.h-month-bar-row {
display: flex; align-items: center; gap: 12px;
}
.h-month-bar-label {
width: 80px;
font-size: 12px; font-weight: 700;
color: var(--text);
}
.h-month-bar-wrap {
flex: 1;
height: 24px;
background: #f3f4f6;
border-radius: 6px;
position: relative;
overflow: hidden;
}
.h-month-bar {
height: 100%;
background: linear-gradient(90deg, #be123c, #e11d48);
border-radius: 6px;
transition: width 0.5s ease;
}
.h-month-bar-val {
position: absolute;
inset: 0;
display: flex; align-items: center;
padding: 0 10px;
font-size: 11px; font-weight: 800;
color: #1f2937;
font-family: 'Inter', monospace;
}
/* Circular cards (selectable) */
.h-circular-grid {
display: grid;
gap: 10px;
grid-template-columns: 1fr;
}
@media (min-width: 640px) { .h-circular-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .h-circular-grid { grid-template-columns: 1fr 1fr 1fr; } }
.h-circular-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: white;
border: 2px solid var(--border);
border-radius: 12px;
cursor: pointer;
transition: all 0.2s;
}
.h-circular-card:hover { border-color: #fda4af; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.h-circular-card.checked {
border-color: #e11d48;
background: linear-gradient(135deg, #fff1f2, #ffe4e6);
box-shadow: 0 4px 14px rgba(225,29,72,0.18);
}
.h-circular-card input[type="checkbox"] {
width: 20px; height: 20px;
accent-color: #e11d48;
cursor: pointer;
flex-shrink: 0;
}
.h-circ-content { flex: 1; min-width: 0; }
.h-circ-emoji {
font-size: 22px;
position: absolute;
margin-top: -4px;
}
.h-circ-name {
font-size: 14px; font-weight: 800;
color: #9f1239;
padding-inline-start: 30px;
margin-bottom: 4px;
}
.h-circ-dates {
font-size: 11px;
color: #6b7280;
padding-inline-start: 30px;
}
.h-circ-days {
display: inline-block;
background: #be123c;
color: white;
padding: 1px 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
margin-top: 4px;
margin-inline-start: 30px;
}
.h-circ-status {
font-size: 10px;
color: #92400e;
font-weight: 700;
margin-top: 4px;
padding-inline-start: 30px;
}
/* Greeting cards */
.h-greeting-grid {
display: grid;
gap: 12px;
grid-template-columns: 1fr;
}
@media (min-width: 640px) { .h-greeting-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .h-greeting-grid { grid-template-columns: 1fr 1fr 1fr; } }
.h-greeting-card {
background: white;
border: none;
border-radius: 14px;
padding: 20px;
cursor: pointer;
color: white;
text-align: center;
transition: all 0.25s;
box-shadow: 0 6px 16px rgba(0,0,0,0.10);
position: relative;
overflow: hidden;
}
.h-greeting-card::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), transparent 60%);
pointer-events: none;
}
.h-greeting-card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 14px 28px rgba(0,0,0,0.18);
}
.h-grt-emoji { font-size: 40px; margin-bottom: 8px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2)); }
.h-grt-name { font-size: 18px; font-weight: 900; margin-bottom: 6px; text-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.h-grt-date { font-size: 11px; opacity: 0.9; margin-bottom: 10px; font-family: 'Inter', monospace; }
.h-grt-cta {
font-size: 12px; font-weight: 800;
background: rgba(255,255,255,0.25);
padding: 6px 14px;
border-radius: 999px;
display: inline-block;
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.3);
}
/* ───── Auto-Generate Year Picker (single year, grid radios) ───── */
.hg-year-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
@media (min-width: 640px) { .hg-year-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .hg-year-grid { grid-template-columns: repeat(6, 1fr); } }
.hg-year-option {
position: relative;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 4px;
background: white;
border: 2px solid #fdba74;
border-radius: 12px;
padding: 14px 8px;
cursor: pointer;
transition: all 0.18s;
font-family: 'Inter', sans-serif;
user-select: none;
}
.hg-year-option:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(217,119,6,0.20);
border-color: #f59e0b;
}
.hg-year-option input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.hg-year-option:has(input:checked) {
background: linear-gradient(135deg, #d97706, #f59e0b);
border-color: #b45309;
box-shadow: 0 8px 20px rgba(217,119,6,0.35);
transform: translateY(-2px);
}
.hg-year-option:has(input:checked) .hg-year-label {
color: white;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.hg-year-option:has(input:checked) .hg-year-tag {
background: rgba(255,255,255,0.3);
color: white;
border-color: rgba(255,255,255,0.4);
}
.hg-year-label {
font-size: 18px;
font-weight: 900;
color: #9a3412;
letter-spacing: -0.5px;
font-feature-settings: "tnum" 1;
}
.hg-year-tag {
font-size: 9px;
font-weight: 700;
background: #fef3c7;
color: #92400e;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid #fcd34d;
}
.hg-year-option.is-current {
border-color: #d97706;
background: linear-gradient(135deg, #fff7ed, #fed7aa);
}
.hg-year-option.is-current:hover {
background: linear-gradient(135deg, #ffedd5, #fdba74);
}
/* ═══════════════════════════════════════════════════════════════════════
HR — Punch Clock (Check-In/Out) & Tab Badges
═══════════════════════════════════════════════════════════════════════ */
.h-punch-clock {
background: linear-gradient(135deg, #0d9488 0%, #059669 60%, #10b981 100%);
color: white;
border-radius: 16px;
padding: 26px 20px;
margin: 0 auto 24px;
max-width: 480px;
text-align: center;
box-shadow: 0 12px 30px rgba(13,148,136,0.25);
position: relative;
overflow: hidden;
}
.h-punch-clock::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), transparent 60%);
pointer-events: none;
}
.h-punch-time {
font-family: 'Inter', 'SF Mono', monospace;
font-size: 64px;
font-weight: 900;
line-height: 1;
letter-spacing: -2px;
text-shadow: 0 4px 20px rgba(0,0,0,0.3);
margin-bottom: 6px;
}
.h-punch-date {
font-size: 14px;
font-weight: 600;
opacity: 0.95;
}
.h-punch-actions {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
max-width: 600px;
margin: 0 auto;
}
.h-punch-btn {
flex: 1;
min-width: 180px;
background: white;
border: 2px solid #e5e7eb;
border-radius: 14px;
padding: 22px 18px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 16px;
font-weight: 800;
color: #1f2937;
transition: all 0.2s;
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.h-punch-btn:not(:disabled):hover {
transform: translateY(-3px);
box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}
.h-punch-btn span:first-child { font-size: 36px; }
.h-punch-btn.checkin:not(.done):not(:disabled):hover {
background: linear-gradient(135deg, #d1fae5, #a7f3d0);
border-color: #10b981;
color: #065f46;
}
.h-punch-btn.checkout:not(.done):not(:disabled):hover {
background: linear-gradient(135deg, #fee2e2, #fecaca);
border-color: #ef4444;
color: #991b1b;
}
.h-punch-btn.done {
opacity: 0.55;
background: #f3f4f6;
}
.h-punch-btn.done.checkin { background: linear-gradient(135deg, #d1fae5, #ecfdf5); color: #065f46; border-color: #6ee7b7; }
.h-punch-btn.done.checkout { background: linear-gradient(135deg, #fee2e2, #fef2f2); color: #991b1b; border-color: #fda4af; }
.h-punch-btn:disabled { cursor: not-allowed; }
.h-punch-summary {
margin-top: 22px;
font-size: 15px;
font-weight: 700;
color: #1f2937;
background: linear-gradient(135deg, #f0fdfa, #ecfdf5);
border: 1.5px solid #5eead4;
border-radius: 12px;
padding: 14px 18px;
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
/* Badge inside tab button */
.h-tab-badge {
background: #ef4444;
color: white;
font-size: 10px;
font-weight: 800;
padding: 1px 7px;
border-radius: 999px;
min-width: 18px;
text-align: center;
font-family: 'Inter', monospace;
}
.h-tab-btn.active .h-tab-badge { background: white; color: #be123c; }
/* ═══════════════════════════════════════════════════════════════════════
GENERAL DEFINITIONS — Custom tab design matching original program
═══════════════════════════════════════════════════════════════════════ */
/* Outer Hero (violet/indigo/blue gradient) */
.gd-outer-hero {
background: linear-gradient(135deg, #6d28d9 0%, #4f46e5 50%, #1d4ed8 100%);
border-radius: 16px;
color: white;
margin-bottom: 14px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(79,70,229,0.18);
position: relative;
}
.gd-outer-hero::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.18), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(0,0,0,0.08), transparent 40%);
pointer-events: none;
}
.gd-outer-hero-row {
position: relative;
padding: 18px 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.gd-outer-hero-title { display: flex; align-items: center; gap: 14px; }
.gd-outer-hero-icon {
width: 50px; height: 50px;
background: rgba(255,255,255,0.20);
backdrop-filter: blur(6px);
border-radius: 14px;
font-size: 26px;
display: flex; align-items: center; justify-content: center;
}
.gd-outer-hero-title h2 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.2; }
.gd-outer-hero-title p { margin: 4px 0 0; font-size: 12px; opacity: 0.92; }
.gd-outer-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gd-outer-btn {
background: rgba(255,255,255,0.15);
border: none; color: white;
padding: 8px 14px;
border-radius: 8px;
font-weight: 600; font-size: 13px;
cursor: pointer;
backdrop-filter: blur(4px);
transition: background 0.2s;
}
.gd-outer-btn:hover { background: rgba(255,255,255,0.25); }
.gd-outer-btn-primary {
background: white !important;
color: #6d28d9 !important;
font-weight: 800;
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.gd-outer-btn-primary:hover { background: #f5f3ff !important; transform: translateY(-1px); }
/* Flat Tab Bar (white card with border-bottom indicator) */
.gd-flat-tabs-bar {
background: white;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
margin-bottom: 16px;
overflow: hidden;
}
.gd-flat-tabs-inner {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
border-bottom: 1px solid #e5e7eb;
background: #f3f4f6;
}
.gd-flat-tab-btn {
background: white;
border: none;
padding: 12px 14px;
font-weight: 600;
font-size: 12.5px;
color: #4b5563;
cursor: pointer;
white-space: nowrap;
border-bottom: 3px solid transparent;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: all 0.18s;
font-family: inherit;
position: relative;
min-height: 50px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
}
.gd-flat-tab-btn:hover {
background: #f9fafb;
color: #374151;
}
.gd-flat-tab-btn.active {
color: #7c3aed;
border-bottom-color: #7c3aed;
background: linear-gradient(180deg, transparent 70%, rgba(124,58,237,0.06) 100%);
}
.gd-flat-tab-count {
background: #e5e7eb;
color: #4b5563;
font-size: 11px;
font-weight: 800;
padding: 1px 9px;
border-radius: 999px;
font-family: 'Inter', monospace;
}
.gd-flat-tab-btn.active .gd-flat-tab-count {
background: #7c3aed;
color: white;
box-shadow: 0 2px 4px rgba(124,58,237,0.3);
}
/* Two-rows layout: 8 tabs split into 4×2 */
@media (max-width: 1100px) {
.gd-flat-tabs-inner { grid-template-columns: repeat(3, 1fr); }
.gd-flat-tab-btn { font-size: 12px; padding: 11px 10px; }
}
@media (max-width: 720px) {
.gd-flat-tabs-inner { grid-template-columns: repeat(2, 1fr); }
.gd-flat-tab-btn { font-size: 11.5px; padding: 10px 8px; }
}
@media (max-width: 420px) {
.gd-flat-tabs-inner { grid-template-columns: 1fr; }
}
/* Inner Hero per tab (matches original program) */
.gd-inner-hero {
border-radius: 16px;
color: white;
margin-bottom: 16px;
overflow: hidden;
box-shadow: 0 6px 16px rgba(0,0,0,0.12);
position: relative;
}
.gd-inner-hero::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(circle at 15% 25%, rgba(255,255,255,0.16), transparent 45%),
radial-gradient(circle at 85% 75%, rgba(0,0,0,0.08), transparent 40%);
pointer-events: none;
}
.gd-inner-hero-row {
position: relative;
padding: 16px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.gd-inner-hero-title { display: flex; align-items: center; gap: 14px; }
.gd-inner-hero-icon {
width: 50px; height: 50px;
background: rgba(255,255,255,0.22);
backdrop-filter: blur(6px);
border-radius: 14px;
font-size: 24px;
display: flex; align-items: center; justify-content: center;
}
.gd-inner-hero-title h2 { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.2; }
.gd-inner-hero-title p { margin: 4px 0 0; font-size: 12px; opacity: 0.94; max-width: 600px; }
/* "+ Add" button (white pill with colored text) */
.gd-inner-add-btn {
background: white;
border: none;
padding: 10px 18px;
border-radius: 10px;
font-weight: 800;
font-size: 13px;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
transition: all 0.18s;
white-space: nowrap;
}
.gd-inner-add-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(0,0,0,0.20);
background: #fafafa;
}
/* Per-tab colored table headers (matches reference) */
.gd-tab-table thead tr {
font-size: 12.5px;
font-weight: 700;
}
.gd-tab-table thead th {
padding: 12px 14px !important;
}
.gd-tab-table tbody td {
padding: 12px 14px;
}
/* Color variants */
.gd-sky-table thead tr { background: #f0f9ff; color: #075985; }
.gd-emerald-table thead tr { background: #ecfdf5; color: #064e3b; }
.gd-teal-table thead tr { background: #f0fdfa; color: #134e4a; }
.gd-green-table thead tr { background: #f0fdf4; color: #14532d; }
.gd-rose-table thead tr { background: #fff1f2; color: #881337; }
.gd-orange-table thead tr { background: #fff7ed; color: #7c2d12; }
.gd-lime-table thead tr { background: #f7fee7; color: #365314; }
.gd-amber-table thead tr { background: #fffbeb; color: #78350f; }
/* ─── Company Multi-Picker (used in GD modals + CoA) ─── */
.co-multi-picker {
background: white;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 10px 12px;
}
.co-multi-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 8px;
border-bottom: 1px dashed #cbd5e1;
margin-bottom: 10px;
}
.co-multi-all {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 13px;
color: #0f172a;
}
.co-multi-all input { width: 18px; height: 18px; cursor: pointer; }
.co-multi-count {
background: #1e40af;
color: white;
font-size: 11px;
font-weight: 800;
padding: 3px 10px;
border-radius: 999px;
}
.co-multi-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 6px;
}
.co-multi-chip {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 10px;
background: #f8fafc;
border: 1.5px solid transparent;
border-radius: 8px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
color: #475569;
transition: all 0.15s;
}
.co-multi-chip:hover {
background: #f1f5f9;
border-color: #cbd5e1;
}
.co-multi-chip input {
width: 16px; height: 16px; cursor: pointer;
}
.co-multi-chip:has(input:checked) {
background: #dbeafe;
border-color: #1e40af;
color: #1e3a8a;
}
.co-picker-section {
margin-top: 12px;
}
/* ─── Per-tab KPI strip in General Definitions ─── */
.gd-kpi-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
margin-bottom: 12px;
padding: 12px;
background: white;
border-radius: 12px;
border: 1px solid #e2e8f0;
}
.gd-kpi-strip.sky { background: linear-gradient(135deg, #f0f9ff, white); border-color: #bae6fd; }
.gd-kpi-strip.emerald { background: linear-gradient(135deg, #ecfdf5, white); border-color: #a7f3d0; }
.gd-kpi-strip.teal { background: linear-gradient(135deg, #f0fdfa, white); border-color: #99f6e4; }
.gd-kpi-strip.green { background: linear-gradient(135deg, #f0fdf4, white); border-color: #bbf7d0; }
.gd-kpi-strip.amber { background: linear-gradient(135deg, #fffbeb, white); border-color: #fde68a; }
.gd-kpi-strip.orange { background: linear-gradient(135deg, #fff7ed, white); border-color: #fed7aa; }
.gd-kpi {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: white;
border: 1px solid #e2e8f0;
border-radius: 10px;
transition: all 0.15s;
}
.gd-kpi:hover {
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
border-color: #cbd5e1;
}
.gd-kpi-ic {
font-size: 22px;
width: 38px; height: 38px;
border-radius: 10px;
background: #f8fafc;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.gd-kpi-num {
font-size: 18px;
font-weight: 900;
font-family: 'SF Mono', Menlo, monospace;
color: #0f172a;
line-height: 1.1;
}
.gd-kpi-lbl {
font-size: 11px;
color: #64748b;
font-weight: 600;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gd-kpi.success { background: linear-gradient(135deg, #f0fdf4, white); border-color: #bbf7d0; }
.gd-kpi.success .gd-kpi-ic { background: #dcfce7; }
.gd-kpi.success .gd-kpi-num { color: #166534; }
.gd-kpi.warning { background: linear-gradient(135deg, #fef3c7, white); border-color: #fde68a; }
.gd-kpi.warning .gd-kpi-ic { background: #fef3c7; }
.gd-kpi.warning .gd-kpi-num { color: #92400e; }
.gd-kpi.gray { background: #f8fafc; border-color: #e2e8f0; }
.gd-kpi.gray .gd-kpi-num { color: #64748b; }
@media (max-width: 720px) {
.gd-kpi-strip { grid-template-columns: repeat(2, 1fr); }
}
/* ─── Revenue Tree (شجرة الإيرادات) ─── */
.rv-summary-pill {
background: #f7fee7; border: 1px solid #d9f99d;
padding: 4px 10px; border-radius: 999px;
font-size: 12px; color: #365314; font-weight: 600;
display: inline-flex; align-items: center; gap: 4px;
}
.rv-summary-pill strong { color: #4d7c0f; font-family: 'SF Mono', Menlo, monospace; }
.rv-tree {
padding: 8px 14px;
background: #fafafa;
background-image:
linear-gradient(rgba(101, 163, 13, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(101, 163, 13, 0.02) 1px, transparent 1px);
background-size: 30px 30px;
}
.rv-tree-node {
margin-bottom: 4px;
}
.rv-tree-node.main {
background: white;
border: 1.5px solid #d9f99d;
border-radius: 12px;
overflow: hidden;
margin-bottom: 8px;
box-shadow: 0 1px 3px rgba(101, 163, 13, 0.05);
transition: all 0.2s;
}
.rv-tree-node.main:hover {
border-color: #84cc16;
box-shadow: 0 4px 10px rgba(101, 163, 13, 0.12);
}
.rv-tree-node.main.inactive { opacity: 0.55; }
.rv-tree-node.main.orphan {
border-color: #fecaca; background: #fef2f2;
}
.rv-tree-node.sub {
background: white;
border: 1px solid #f1f5f9;
border-radius: 8px;
margin-bottom: 4px;
transition: all 0.15s;
}
.rv-tree-node.sub:hover {
border-color: #cbd5e1;
background: #f8fafc;
}
.rv-tree-node.sub.inactive { opacity: 0.55; }
.rv-tree-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
}
.rv-tree-node.main > .rv-tree-row {
background: linear-gradient(90deg, #f7fee7 0%, white 60%);
}
.rv-tree-node.main.orphan > .rv-tree-row {
background: linear-gradient(90deg, #fef2f2 0%, white 60%);
}
.rv-tree-toggle {
background: linear-gradient(135deg, #65a30d, #84cc16);
color: white;
border: none;
width: 24px; height: 24px;
border-radius: 6px;
cursor: pointer;
font-size: 10px;
display: flex; align-items: center; justify-content: center;
font-weight: 800;
transition: transform 0.15s;
flex-shrink: 0;
}
.rv-tree-toggle.open { background: linear-gradient(135deg, #4d7c0f, #65a30d); }
.rv-tree-toggle:hover { transform: scale(1.1); }
.rv-tree-leaf {
width: 24px; height: 24px;
display: flex; align-items: center; justify-content: center;
color: #cbd5e1; font-size: 14px;
flex-shrink: 0;
}
.rv-tree-leaf-line {
width: 24px; height: 1px;
background: linear-gradient(90deg, transparent, #cbd5e1, transparent);
flex-shrink: 0;
}
.rv-tree-icon {
font-size: 20px;
width: 36px; height: 36px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.rv-tree-icon.main { background: #ecfccb; }
.rv-tree-icon.sub.product { background: #ecfdf5; }
.rv-tree-icon.sub.service { background: #e0f2fe; }
.rv-tree-icon.orphan { background: #fee2e2; }
.rv-tree-info { flex: 1; min-width: 0; }
.rv-tree-name {
font-weight: 700;
color: #0f172a;
font-size: 13.5px;
line-height: 1.3;
}
.rv-tree-node.main .rv-tree-name {
font-size: 14.5px;
color: #1a2e05;
font-weight: 800;
}
.rv-tree-name-en {
color: #64748b;
font-weight: 500;
font-size: 11px;
}
.rv-tree-meta {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 4px;
font-size: 11px;
color: #64748b;
}
.rv-pill-meta {
background: #f1f5f9;
color: #475569;
padding: 2px 8px;
border-radius: 6px;
font-size: 10px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 3px;
}
.rv-pill-meta.price {
background: #fef3c7;
color: #78350f;
}
.rv-tree-stats {
display: flex;
gap: 6px;
align-items: center;
flex-shrink: 0;
}
.rv-tree-stat {
background: white;
border: 1px solid #e2e8f0;
padding: 3px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
color: #475569;
}
.rv-tree-stat.empty { background: transparent; border-style: dashed; color: #94a3b8; }
.rv-tree-actions {
display: flex;
gap: 3px;
flex-shrink: 0;
}
.rv-tree-children {
padding: 6px 22px 12px 56px;
border-${"inline-start"}: 2px dashed #d9f99d;
margin-${"inline-start"}: 32px;
margin-top: 0;
background: #fdfdf8;
}
[dir="rtl"] .rv-tree-children {
border-left: 0;
border-right: 2px dashed #d9f99d;
padding-left: 22px;
padding-right: 56px;
margin-left: 0;
margin-right: 32px;
}
.rv-tree-child-add {
margin-top: 6px;
padding: 6px;
text-align: center;
}
@media (max-width: 900px) {
.rv-tree-children { padding-${"inline-start"}: 24px; margin-${"inline-start"}: 16px; }
.rv-tree-stats { display: none; }
.rv-tree-icon { width: 28px; height: 28px; font-size: 16px; }
}
/* ─── Expense Tree (شجرة المصروفات) — same skeleton, rose palette ─── */
.ex-summary-pill {
background: #fff1f2; border: 1px solid #fecdd3;
padding: 4px 10px; border-radius: 999px;
font-size: 12px; color: #881337; font-weight: 600;
display: inline-flex; align-items: center; gap: 4px;
}
.ex-summary-pill strong { color: #be123c; font-family: 'SF Mono', Menlo, monospace; }
.ex-summary-pill.warn { background: #fef3c7; border-color: #fbbf24; color: #78350f; }
.ex-summary-pill.warn strong { color: #92400e; }
.ex-tree {
padding: 8px 14px;
background: #fafafa;
background-image:
linear-gradient(rgba(225, 29, 72, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(225, 29, 72, 0.02) 1px, transparent 1px);
background-size: 30px 30px;
}
.ex-tree-node { margin-bottom: 4px; }
.ex-tree-node.main {
background: white;
border: 1.5px solid #fecdd3;
border-radius: 12px;
overflow: hidden;
margin-bottom: 8px;
box-shadow: 0 1px 3px rgba(225, 29, 72, 0.05);
transition: all 0.2s;
}
.ex-tree-node.main:hover {
border-color: #e11d48;
box-shadow: 0 4px 10px rgba(225, 29, 72, 0.12);
}
.ex-tree-node.main.inactive { opacity: 0.55; }
.ex-tree-node.main.orphan {
border-color: #fecaca; background: #fef2f2;
}
.ex-tree-node.sub {
background: white;
border: 1px solid #f1f5f9;
border-radius: 8px;
margin-bottom: 4px;
transition: all 0.15s;
}
.ex-tree-node.sub:hover { border-color: #cbd5e1; background: #f8fafc; }
.ex-tree-node.sub.inactive { opacity: 0.55; }
.ex-tree-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px;
}
.ex-tree-node.main > .ex-tree-row {
background: linear-gradient(90deg, #fff1f2 0%, white 60%);
}
.ex-tree-node.main.orphan > .ex-tree-row {
background: linear-gradient(90deg, #fef2f2 0%, white 60%);
}
.ex-tree-toggle {
background: linear-gradient(135deg, #be123c, #e11d48);
color: white; border: none;
width: 24px; height: 24px; border-radius: 6px;
cursor: pointer; font-size: 10px;
display: flex; align-items: center; justify-content: center;
font-weight: 800; transition: transform 0.15s;
flex-shrink: 0;
}
.ex-tree-toggle.open { background: linear-gradient(135deg, #9f1239, #be123c); }
.ex-tree-toggle:hover { transform: scale(1.1); }
.ex-tree-leaf {
width: 24px; height: 24px;
display: flex; align-items: center; justify-content: center;
color: #cbd5e1; font-size: 14px;
flex-shrink: 0;
}
.ex-tree-leaf-line {
width: 24px; height: 1px;
background: linear-gradient(90deg, transparent, #cbd5e1, transparent);
flex-shrink: 0;
}
.ex-tree-icon {
font-size: 20px;
width: 36px; height: 36px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.ex-tree-icon.main { background: #ffe4e6; }
.ex-tree-icon.sub { background: #fff7ed; }
.ex-tree-icon.orphan { background: #fee2e2; }
.ex-tree-info { flex: 1; min-width: 0; }
.ex-tree-name {
font-weight: 700; color: #0f172a;
font-size: 13.5px; line-height: 1.3;
}
.ex-tree-node.main .ex-tree-name {
font-size: 14.5px; color: #4a0f1a; font-weight: 800;
}
.ex-tree-name-en {
color: #64748b; font-weight: 500; font-size: 11px;
}
.ex-tree-meta {
display: flex; gap: 6px; flex-wrap: wrap;
margin-top: 4px; font-size: 11px; color: #64748b;
}
.ex-tree-stats {
display: flex; gap: 6px; align-items: center; flex-shrink: 0;
}
.ex-tree-stat {
background: white; border: 1px solid #e2e8f0;
padding: 3px 8px; border-radius: 999px;
font-size: 11px; font-weight: 700; color: #475569;
}
.ex-tree-stat.empty {
background: transparent; border-style: dashed; color: #94a3b8;
}
.ex-tree-actions {
display: flex; gap: 3px; flex-shrink: 0;
}
.ex-tree-children {
padding: 6px 22px 12px 56px;
border-${"inline-start"}: 2px dashed #fecdd3;
margin-${"inline-start"}: 32px;
background: #fdf9f9;
}
[dir="rtl"] .ex-tree-children {
border-left: 0;
border-right: 2px dashed #fecdd3;
padding-left: 22px;
padding-right: 56px;
margin-left: 0;
margin-right: 32px;
}
.ex-tree-child-add {
margin-top: 6px; padding: 6px; text-align: center;
}
@media (max-width: 900px) {
.ex-tree-children { padding-${"inline-start"}: 24px; margin-${"inline-start"}: 16px; }
.ex-tree-stats { display: none; }
.ex-tree-icon { width: 28px; height: 28px; font-size: 16px; }
}
/* Export toolbar (used in general_defs.js between tabs and content) */
.gd-export-toolbar {
background: white;
border-radius: 10px;
padding: 10px 14px;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
box-shadow: var(--shadow-sm);
}
.gd-export-toolbar-label {
font-size: 12px;
font-weight: 700;
color: #6b7280;
margin-inline-end: 6px;
}
/* Clickable 📎 attachments pill in tables */
.co-attach-btn {
transition: all 0.15s;
position: relative;
}
.co-attach-btn:hover {
background: #6d28d9 !important;
color: white !important;
transform: scale(1.08);
box-shadow: 0 3px 8px rgba(124,58,237,0.35);
}
.co-attach-btn:active { transform: scale(0.96); }
/* Attachments viewer modal */
.co-att-header {
display: flex;
align-items: center;
gap: 14px;
padding: 14px;
background: linear-gradient(135deg, #faf5ff, #fff7ed);
border: 1.5px solid #e9d5ff;
border-radius: 12px;
margin-bottom: 16px;
}
.co-att-list {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 60vh;
overflow-y: auto;
}
.co-att-item {
display: flex;
align-items: center;
gap: 12px;
background: white;
border: 1.5px solid var(--border);
border-radius: 10px;
padding: 12px 14px;
transition: all 0.18s;
}
.co-att-item:hover {
border-color: #a855f7;
box-shadow: 0 4px 12px rgba(168,85,247,0.10);
transform: translateY(-1px);
}
.co-att-icon {
font-size: 32px;
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #faf5ff, #fef3c7);
border-radius: 10px;
border: 1px solid #e5e7eb;
}
.co-att-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.co-att-name {
font-size: 13px;
font-weight: 800;
color: #1f2937;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.co-att-meta {
font-size: 11px;
color: #6b7280;
font-feature-settings: "tnum" 1;
}
.co-att-actions {
display: flex;
gap: 6px;
flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════════════════════
Chart of Accounts (CoA) — Tree & Modal
═══════════════════════════════════════════════════════════════════════ */
/* View mode toggle */
.coa-view-toggle {
display: flex;
gap: 4px;
background: #f3f4f6;
border-radius: 8px;
padding: 3px;
}
/* Tree container */
.coa-tree {
background: white;
padding: 8px;
margin: 0;
border-radius: 0 0 14px 14px;
font-size: 13px;
}
.coa-tree-node { margin: 0; }
.coa-tree-row {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid transparent;
margin-bottom: 2px;
transition: all 0.15s;
cursor: default;
}
.coa-tree-row:hover {
background: #f9fafb;
border-color: #e5e7eb;
}
.coa-tree-indent { flex-shrink: 0; }
.coa-tree-toggle {
background: white;
border: 1.5px solid var(--type-color, #cbd5e1);
color: var(--type-color, #6b7280);
width: 22px; height: 22px;
border-radius: 6px;
font-size: 10px;
font-weight: 800;
cursor: pointer;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
}
.coa-tree-toggle:hover {
background: var(--type-color, #cbd5e1);
color: white;
}
.coa-tree-leaf {
width: 22px;
text-align: center;
color: #d1d5db;
font-size: 10px;
flex-shrink: 0;
}
.coa-tree-icon {
width: 28px; height: 28px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
.coa-tree-code {
font-family: 'SF Mono', Menlo, Consolas, monospace;
font-weight: 800;
color: #374151;
background: #f3f4f6;
padding: 3px 9px;
border-radius: 6px;
font-size: 12px;
flex-shrink: 0;
min-width: 60px;
text-align: center;
}
.coa-tree-name {
flex: 1;
font-weight: 700;
color: #1f2937;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.coa-tree-type {
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
border: 1.5px solid;
flex-shrink: 0;
}
.coa-tree-count {
background: #6366f1;
color: white;
font-size: 10px;
font-weight: 800;
padding: 2px 8px;
border-radius: 999px;
font-family: 'Inter', monospace;
flex-shrink: 0;
}
.coa-tree-company {
font-size: 11px;
color: #6b7280;
flex-shrink: 0;
background: #f9fafb;
padding: 2px 8px;
border-radius: 6px;
border: 1px solid #e5e7eb;
}
.coa-tree-actions {
display: flex;
gap: 2px;
flex-shrink: 0;
}
.coa-tree-children {
position: relative;
margin-inline-start: 16px;
border-inline-start: 2px dashed #e5e7eb;
padding-inline-start: 8px;
margin-top: 2px;
}
/* Account Level Picker (in modal) */
.coa-level-picker {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 640px) { .coa-level-picker { grid-template-columns: 1fr; } }
.coa-level-option {
position: relative;
display: flex;
align-items: center;
gap: 12px;
background: white;
border: 2px solid #cbd5e1;
border-radius: 12px;
padding: 14px;
cursor: pointer;
transition: all 0.2s;
user-select: none;
}
.coa-level-option input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.coa-level-option:hover {
border-color: #10b981;
background: #f0fdfa;
transform: translateY(-2px);
}
.coa-level-option.selected {
background: linear-gradient(135deg, #d1fae5, #ecfdf5);
border-color: #10b981;
box-shadow: 0 6px 16px rgba(16,185,129,0.20);
}
.coa-level-icon {
font-size: 36px;
width: 56px; height: 56px;
display: flex; align-items: center; justify-content: center;
background: white;
border-radius: 12px;
border: 1px solid #e5e7eb;
flex-shrink: 0;
}
.coa-level-option.selected .coa-level-icon {
background: linear-gradient(135deg, #10b981, #047857);
border-color: #047857;
filter: grayscale(0);
}
.coa-level-info {
flex: 1;
}
.coa-level-title {
font-size: 14px;
font-weight: 800;
color: #1f2937;
margin-bottom: 3px;
}
.coa-level-option.selected .coa-level-title { color: #047857; }
.coa-level-desc {
font-size: 11px;
color: #6b7280;
line-height: 1.4;
}
/* Parent select (with hierarchical indented options) */
#coa_parentId {
font-family: 'SF Mono', Menlo, monospace;
font-size: 13px;
}
/* ═══════════════════════════════════════════════════════════════════════
Journal Entries — Multi-line entry table
═══════════════════════════════════════════════════════════════════════ */
.jv-lines-container {
background: white;
border: 1.5px solid #93c5fd;
border-radius: 12px;
overflow: hidden;
}
.jv-lines-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.jv-lines-table thead th {
background: linear-gradient(180deg, #dbeafe, #bfdbfe);
color: #1e40af;
padding: 10px 8px;
text-align: start;
font-size: 12px;
font-weight: 800;
border-bottom: 2px solid #93c5fd;
white-space: nowrap;
}
.jv-lines-table tbody td {
padding: 6px 8px;
border-bottom: 1px solid #eff6ff;
vertical-align: middle;
}
.jv-lines-table tbody tr:hover {
background: #f0f9ff;
}
.jv-lines-table input[type="text"],
.jv-lines-table input[type="number"] {
width: 100%;
padding: 6px 10px;
border: 1.5px solid #e5e7eb;
border-radius: 6px;
font-size: 13px;
font-family: inherit;
background: white;
outline: none;
transition: border-color 0.15s;
}
.jv-lines-table input[type="number"] {
font-family: 'SF Mono', Menlo, monospace;
text-align: end;
font-weight: 700;
}
.jv-lines-table input:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.jv-lines-table .jv-debit-input { background: #fef2f2; }
.jv-lines-table .jv-credit-input { background: #f0fdf4; }
.jv-lines-table .jv-debit-input:focus { background: white; border-color: #ef4444; }
.jv-lines-table .jv-credit-input:focus { background: white; border-color: #10b981; }
/* Customer / Supplier dropdowns inside each journal line */
.jv-lines-table .jv-party-cell {
padding: 4px 6px;
}
.jv-lines-table .jv-client-input,
.jv-lines-table .jv-supplier-input {
width: 100%;
font-size: 11px;
padding: 5px 4px;
border: 1px solid #cbd5e1;
border-radius: 5px;
background: #f8fafc;
}
.jv-lines-table .jv-client-input { background: #eff6ff; border-color: #93c5fd; color: #1e40af; }
.jv-lines-table .jv-supplier-input { background: #fff7ed; border-color: #fdba74; color: #9a3412; }
.jv-lines-table .jv-client-input:focus,
.jv-lines-table .jv-supplier-input:focus { background: white; outline: none; }
.jv-lines-table .jv-party-na {
display: inline-block;
width: 100%;
text-align: center;
font-size: 16px;
color: #cbd5e1;
cursor: help;
}
/* Account search dropdown */
.jv-account-cell {
position: relative;
}
.jv-account-dropdown {
/* Positioning is set by JS (position:fixed) so the dropdown is never
clipped by the modal's scrollable container. CSS only handles visuals. */
z-index: 10100;
background: white;
border: 1.5px solid #3b82f6;
border-radius: 10px;
box-shadow: 0 16px 48px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.06);
}
.jv-account-dropdown.hidden { display: none; }
.jv-account-option {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 12px;
background: white;
border: none;
border-bottom: 1px solid #f3f4f6;
text-align: start;
cursor: pointer;
font-size: 12px;
font-family: inherit;
transition: background 0.12s;
}
.jv-account-option:hover {
background: #eff6ff;
}
.jv-account-option:last-child { border-bottom: none; }
.jv-account-no-match {
padding: 14px;
text-align: center;
color: #9ca3af;
font-size: 12px;
}
/* ═══════════════════════════════════════════════════════════════════════
Purchase Invoices — Hero / Toolbar / Table / Type picker
═══════════════════════════════════════════════════════════════════════ */
.pi-hero { background: linear-gradient(135deg, #7c3aed, #5b21b6); color: #fff; padding: 16px 20px; border-radius: 14px; margin-bottom: 14px; box-shadow: 0 4px 12px rgba(124,58,237,0.18); }
.pi-hero-row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.pi-hero-title { display: flex; align-items: center; gap: 12px; flex: 1; }
.pi-hero-icon { font-size: 38px; background: rgba(255,255,255,0.18); border-radius: 14px; padding: 8px 12px; }
.pi-hero-title h1 { margin: 0; font-size: 22px; font-weight: 900; }
.pi-hero-title p { margin: 2px 0 0; font-size: 12px; opacity: 0.92; }
.pi-hero-actions { display: flex; gap: 8px; }
.pi-hero-btn { background: #facc15; color: #422006; border: 0; border-radius: 10px; padding: 9px 16px; font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.pi-hero-btn:hover { background: #fde047; }
.pi-hero-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 10px; }
.pi-hero-kpi { background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.24); border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.pi-hero-kpi-ic { font-size: 22px; }
.pi-hero-kpi-val { font-size: 16px; font-weight: 900; font-family: 'Inter', monospace; }
.pi-hero-kpi-lbl { font-size: 11px; opacity: 0.88; font-weight: 700; }
.pi-toolbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 12px; }
.pi-input { padding: 8px 12px; border: 1.5px solid #cbd5e1; border-radius: 8px; font-size: 12.5px; background: #fff; min-width: 150px; flex: 1; }
.pi-reset { cursor: pointer; background: #f1f5f9; font-weight: 700; flex: 0; }
.pi-table-wrap { background: #fff; border-radius: 12px; border: 1px solid #e2e8f0; overflow-x: auto; }
.pi-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pi-table th { background: linear-gradient(135deg, #7c3aed, #5b21b6); color: #fff; padding: 10px 8px; font-weight: 800; font-size: 11.5px; white-space: nowrap; }
.pi-table td { padding: 9px 8px; border-bottom: 1px solid #e2e8f0; }
.pi-table td.num { font-family: monospace; font-weight: 700; text-align: end; }
.pi-table tr:hover { background: #faf5ff; }
.pi-table .mono { font-family: monospace; }
.pi-empty { text-align: center; padding: 60px 20px; color: #94a3b8; font-size: 14px; }
.pi-type-badge { padding: 3px 9px; border-radius: 6px; font-size: 10.5px; font-weight: 800; }
.pi-type-badge.goods { background: #ede9fe; color: #5b21b6; border: 1px solid #c4b5fd; }
.pi-type-badge.fa { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
/* Lines table inside modal */
.pi-lines-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pi-lines-table th { background: #f3e8ff; color: #5b21b6; padding: 8px 6px; font-weight: 800; }
.pi-lines-table td { padding: 6px 4px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.pi-lines-table td.num { font-family: monospace; font-weight: 700; text-align: end; }
.pi-lines-table input, .pi-lines-table select { padding: 5px 8px; border: 1.5px solid #cbd5e1; border-radius: 6px; font-size: 12px; background: #fff; }
.pi-mode-pill { background: rgba(255,255,255,0.18); padding: 2px 10px; border-radius: 8px; font-size: 11px; font-weight: 800; margin-inline-start: 8px; }
/* Type picker grid */
.pi-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .pi-type-grid { grid-template-columns: 1fr; } }
.pi-type-card { position: relative; text-align: start; padding: 18px; border: 2px solid #cbd5e1; border-radius: 14px; background: linear-gradient(135deg, #faf5ff, #ffffff); cursor: pointer; transition: all 0.18s; display: flex; flex-direction: column; gap: 8px; }
.pi-type-card:hover { border-color: #7c3aed; background: linear-gradient(135deg, #f5f3ff, #ede9fe); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(124,58,237,0.18); }
.pi-type-card-asset { background: linear-gradient(135deg, #fffbeb, #fef3c7); border-color: #fcd34d; }
.pi-type-card-asset:hover { background: linear-gradient(135deg, #fef3c7, #fde68a); border-color: #f59e0b; }
.pi-type-ic { font-size: 36px; }
.pi-type-title { font-size: 15px; font-weight: 800; color: #0f172a; }
.pi-type-sub { font-size: 12px; color: #64748b; line-height: 1.5; }
.pi-type-arrow { position: absolute; top: 14px; inset-inline-end: 14px; font-size: 20px; color: #7c3aed; }
.pi-type-card-asset .pi-type-arrow { color: #b45309; }
/* ═══════════════════════════════════════════════════════════════════════
Sales Invoice — Invoice Type Picker (goods vs. fixed-asset)
═══════════════════════════════════════════════════════════════════════ */
.si-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .si-type-grid { grid-template-columns: 1fr; } }
.si-type-card {
position: relative;
text-align: start;
padding: 18px;
border: 2px solid #cbd5e1;
border-radius: 14px;
background: linear-gradient(135deg, #f8fafc, #ffffff);
cursor: pointer;
transition: all 0.18s;
display: flex;
flex-direction: column;
gap: 8px;
}
.si-type-card:hover {
border-color: #0e7490;
background: linear-gradient(135deg, #f0f9ff, #ecfeff);
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(14,116,144,0.18);
}
.si-type-card-soon { background: linear-gradient(135deg, #fffbeb, #fef3c7); border-color: #fcd34d; }
.si-type-card-soon:hover { background: linear-gradient(135deg, #fef3c7, #fde68a); border-color: #f59e0b; box-shadow: 0 8px 22px rgba(245,158,11,0.18); }
.si-type-ic { font-size: 36px; }
.si-type-title { font-size: 15px; font-weight: 800; color: #0f172a; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.si-type-sub { font-size: 12px; color: #64748b; line-height: 1.5; }
.si-type-arrow { position: absolute; top: 14px; inset-inline-end: 14px; font-size: 20px; color: #0e7490; }
.si-type-card-soon .si-type-arrow { color: #b45309; }
.si-type-soon-badge { background: #f59e0b; color: #fff; font-size: 9.5px; padding: 2px 8px; border-radius: 8px; font-weight: 800; }
/* ═══════════════════════════════════════════════════════════════════════
Sales Invoice — Prepaid (unused receipts) section
═══════════════════════════════════════════════════════════════════════ */
.si-prepaid-empty {
background: linear-gradient(135deg, #fff7ed, #ffedd5);
border: 1.5px dashed #fdba74;
border-radius: 10px;
padding: 18px;
text-align: center;
font-size: 13px;
font-weight: 700;
color: #9a3412;
}
.si-prepaid-info {
background: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: 8px;
padding: 10px 14px;
font-size: 12.5px;
color: #1e3a8a;
margin-bottom: 12px;
}
.si-prepaid-toolbar {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: linear-gradient(135deg, #ecfeff, #cffafe);
border: 1.5px solid #67e8f9;
border-radius: 10px 10px 0 0;
border-bottom: 0;
font-size: 13px;
color: #155e75;
flex-wrap: wrap;
}
.si-prepaid-toolbar .si-prepaid-hint {
font-size: 11.5px;
color: #075985;
font-style: italic;
margin-inline-start: auto;
}
.si-prepaid-info .mono { font-family: 'Inter', monospace; font-weight: 800; }
.si-prepaid-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; font-size: 12.5px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.si-prepaid-table th { background: linear-gradient(135deg, #0e7490, #0891b2); color: #fff; padding: 10px 8px; font-weight: 800; font-size: 11.5px; white-space: nowrap; }
.si-prepaid-table td { padding: 8px 8px; border-bottom: 1px solid #e2e8f0; vertical-align: middle; }
.si-prepaid-table td.num { font-family: monospace; font-weight: 700; text-align: end; }
.si-prepaid-table tr:hover { background: #f8fafc; }
.si-prepaid-table input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: #0891b2; }
.si-prepaid-table input[type="number"] { width: 110px; padding: 6px 8px; border: 1.5px solid #cbd5e1; border-radius: 6px; font-family: monospace; font-weight: 700; text-align: end; }
.si-prepaid-table input[type="number"]:disabled { background: #f1f5f9; color: #94a3b8; cursor: not-allowed; }
.si-prepaid-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
/* ═══════════════════════════════════════════════════════════════════════
Auto-generated codes (doc numbers, asset codes, etc.) — visual lock
═══════════════════════════════════════════════════════════════════════ */
.auto-code-lock {
display: inline-block;
font-size: 11px;
background: #fef3c7;
color: #92400e;
border: 1px solid #fcd34d;
padding: 1px 7px;
border-radius: 6px;
margin-inline-start: 6px;
font-weight: 800;
vertical-align: middle;
}
input.auto-code-locked {
background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
color: #0f172a !important;
cursor: not-allowed !important;
border-color: #cbd5e1 !important;
font-weight: 800 !important;
letter-spacing: 0.3px;
}
input.auto-code-locked:focus {
outline: none;
border-color: #94a3b8 !important;
box-shadow: 0 0 0 2px rgba(148,163,184,0.18) !important;
}
/* ═══════════════════════════════════════════════════════════════════════
JV Account Picker — TREE-style dropdown
═══════════════════════════════════════════════════════════════════════ */
.jv-account-dropdown { max-height: 360px; }
.jv-account-tree-hint {
padding: 7px 12px;
background: linear-gradient(135deg, #eff6ff, #dbeafe);
border-bottom: 1.5px solid #93c5fd;
font-size: 11px;
color: #1e3a8a;
font-weight: 700;
position: sticky; top: 0; z-index: 2;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.jv-acc-scope-chip {
margin-inline-start: auto;
background: #0891b2;
color: #fff;
padding: 2px 9px;
border-radius: 8px;
font-size: 10px;
font-weight: 800;
white-space: nowrap;
}
.jv-acc-scope-chip.warn { background: #f59e0b; color: #422006; }
.jv-account-tree-body {
padding: 4px 0;
}
.jv-account-tree-empty {
padding: 18px;
text-align: center;
color: #94a3b8;
font-size: 12.5px;
font-style: italic;
}
.jv-account-tree-trunc {
padding: 7px 12px;
background: #fff7ed;
border-top: 1px dashed #fdba74;
font-size: 11px;
color: #9a3412;
text-align: center;
font-weight: 700;
position: sticky; bottom: 0;
}
/* Parent rows — display-only, not clickable */
.jv-account-tree-parent {
display: flex;
align-items: center;
gap: 7px;
padding: 7px 10px;
background: linear-gradient(90deg, #f8fafc, #f1f5f9);
border-bottom: 1px dashed #cbd5e1;
font-size: 11.5px;
color: #475569;
cursor: default;
user-select: none;
opacity: 0.85;
}
.jv-account-tree-parent .jv-acc-name {
font-weight: 800;
color: #334155;
}
.jv-account-tree-parent .jv-acc-parent-pill {
margin-inline-start: auto;
background: #e0e7ff;
color: #3730a3;
padding: 2px 8px;
border-radius: 6px;
font-size: 9.5px;
font-weight: 800;
}
/* Leaf rows — clickable buttons */
.jv-account-tree-leaf {
display: flex;
align-items: center;
gap: 7px;
width: 100%;
padding: 8px 10px;
background: white;
border: none;
border-bottom: 1px solid #f1f5f9;
text-align: start;
font-size: 12px;
font-family: inherit;
cursor: pointer;
transition: all 0.12s;
color: #1e293b;
}
.jv-account-tree-leaf:hover {
background: linear-gradient(90deg, #ecfdf5, #d1fae5);
transform: translateX(2px);
box-shadow: inset 3px 0 0 #10b981;
}
[dir="rtl"] .jv-account-tree-leaf:hover {
transform: translateX(-2px);
box-shadow: inset -3px 0 0 #10b981;
}
.jv-account-tree-leaf.is-match {
background: linear-gradient(90deg, #fef3c7, #fde68a);
}
.jv-account-tree-leaf.is-match:hover {
background: linear-gradient(90deg, #fde68a, #fcd34d);
}
.jv-acc-bullet {
width: 18px;
text-align: center;
font-size: 12px;
flex-shrink: 0;
}
.jv-acc-typeic {
padding: 2px 7px;
border-radius: 6px;
font-weight: 800;
font-size: 10.5px;
flex-shrink: 0;
}
.jv-acc-code {
font-weight: 800;
color: #374151;
font-size: 11px;
flex-shrink: 0;
}
.jv-acc-name {
flex: 1;
font-weight: 600;
}
.jv-acc-type-pill {
padding: 2px 7px;
border-radius: 5px;
font-size: 9.5px;
font-weight: 800;
flex-shrink: 0;
}
/* Totals row */
.jv-line-totals td {
background: linear-gradient(180deg, #fef3c7, #fde68a) !important;
color: #78350f !important;
font-weight: 800 !important;
padding: 10px 8px !important;
border-top: 2px solid #fcd34d !important;
}
.jv-total-value {
font-family: 'SF Mono', Menlo, monospace;
font-size: 14px;
font-weight: 900;
color: #78350f;
}
.jv-balance-status {
text-align: center;
font-weight: 800;
font-size: 12px;
padding: 6px 14px !important;
border-radius: 8px;
}
.jv-balance-status.balanced {
background: linear-gradient(135deg, #10b981, #047857) !important;
color: white !important;
}
.jv-balance-status.unbalanced {
background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
color: white !important;
animation: pulse-warn 2s ease-in-out infinite;
}
@keyframes pulse-warn {
0%, 100% { opacity: 1; }
50% { opacity: 0.85; }
}
/* Status picker option cards */
.jv-status-opt {
user-select: none;
}
.jv-status-opt:not(.is-current):hover {
border-color: #93c5fd !important;
background: #f0f9ff !important;
transform: translateY(-1px);
}
/* ═══════════════════════════════════════════════════════════════════════
Treasury Transfers — Pro Dashboard
═══════════════════════════════════════════════════════════════════════ */
/* Hero */
.tr-hero {
background: linear-gradient(135deg, #0e7490 0%, #0891b2 40%, #06b6d4 100%);
border-radius: 20px;
padding: 22px 26px;
color: white;
margin-bottom: 14px;
box-shadow: 0 10px 30px rgba(8, 145, 178, 0.25);
}
.tr-hero-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.tr-hero-title {
display: flex;
align-items: center;
gap: 14px;
}
.tr-hero-title h2 {
margin: 0;
font-size: 22px;
font-weight: 900;
}
.tr-hero-title p {
margin: 2px 0 0;
font-size: 13px;
opacity: 0.92;
}
.tr-hero-icon {
font-size: 36px;
background: rgba(255, 255, 255, 0.18);
width: 60px;
height: 60px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(8px);
}
.tr-hero-actions {
display: flex;
gap: 8px;
}
/* Period chips */
.tr-period-bar {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.tr-period-label {
font-size: 12px;
font-weight: 700;
opacity: 0.85;
margin-inline-end: 4px;
}
.tr-period-chip {
background: rgba(255, 255, 255, 0.15);
border: 1.5px solid rgba(255, 255, 255, 0.25);
color: white;
padding: 6px 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
backdrop-filter: blur(4px);
}
.tr-period-chip:hover {
background: rgba(255, 255, 255, 0.28);
transform: translateY(-1px);
}
.tr-period-chip.active {
background: white;
color: #0891b2;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border-color: white;
}
/* 4 big headline KPIs */
.tr-hero-headline {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 10px;
}
.tr-kpi-big {
background: rgba(255, 255, 255, 0.16);
border: 1.5px solid rgba(255, 255, 255, 0.22);
border-radius: 14px;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
backdrop-filter: blur(8px);
transition: all 0.2s;
}
.tr-kpi-big:hover {
background: rgba(255, 255, 255, 0.22);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.tr-kpi-big-icon {
font-size: 28px;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.2);
width: 52px;
height: 52px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.tr-kpi-big-body { flex: 1; min-width: 0; }
.tr-kpi-big-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
opacity: 0.88;
letter-spacing: 0.4px;
margin-bottom: 2px;
}
.tr-kpi-big-value {
font-size: 22px;
font-weight: 900;
font-family: 'SF Mono', Menlo, monospace;
line-height: 1.1;
margin-bottom: 2px;
}
.tr-kpi-big-sub {
font-size: 11px;
opacity: 0.85;
font-weight: 500;
}
.tr-kpi-big.primary { border-color: rgba(167, 243, 208, 0.4); }
.tr-kpi-big.success { border-color: rgba(110, 231, 183, 0.5); background: rgba(16, 185, 129, 0.18); }
.tr-kpi-big.info { border-color: rgba(147, 197, 253, 0.5); background: rgba(59, 130, 246, 0.18); }
.tr-kpi-big.warning { border-color: rgba(252, 211, 77, 0.5); background: rgba(245, 158, 11, 0.18); }
/* Mini KPIs */
.tr-hero-mini {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}
.tr-mini-kpi {
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 10px;
padding: 8px 12px;
display: flex;
align-items: center;
gap: 8px;
backdrop-filter: blur(4px);
}
.tr-mini-icon { font-size: 22px; opacity: 0.95; }
.tr-mini-num {
font-size: 16px;
font-weight: 800;
font-family: 'SF Mono', Menlo, monospace;
line-height: 1;
}
.tr-mini-lbl {
font-size: 10px;
font-weight: 600;
opacity: 0.85;
margin-top: 2px;
}
/* Alerts */
.tr-alert {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-radius: 12px;
margin-bottom: 12px;
font-size: 13px;
}
.tr-alert-warning {
background: #fef3c7;
border: 1.5px solid #fbbf24;
color: #78350f;
}
/* Treasury Balance Strip */
.tr-balance-card {
background: white;
border-radius: 14px;
border: 1.5px solid #e0f2fe;
padding: 16px 18px;
margin-bottom: 12px;
box-shadow: 0 2px 8px rgba(8, 145, 178, 0.06);
}
.tr-balance-header {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 800;
font-size: 14px;
color: #0e7490;
margin-bottom: 12px;
}
.tr-balance-hint {
font-size: 11px;
color: #94a3b8;
font-weight: 500;
}
.tr-balance-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 10px;
}
.tr-balance-tile {
background: #f0f9ff;
border: 1.5px solid #bae6fd;
border-radius: 12px;
padding: 12px;
cursor: pointer;
transition: all 0.2s;
text-align: start;
font-family: inherit;
}
.tr-balance-tile:hover {
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(8, 145, 178, 0.15);
border-color: #0891b2;
}
.tr-balance-tile.positive { border-${"left"}-width: 4px; border-${"left"}-color: #10b981; }
.tr-balance-tile.negative { border-${"left"}-width: 4px; border-${"left"}-color: #ef4444; }
.tr-balance-tile.neutral { border-${"left"}-width: 4px; border-${"left"}-color: #94a3b8; }
[dir="rtl"] .tr-balance-tile.positive { border-left: 1.5px solid #bae6fd; border-right: 4px solid #10b981; }
[dir="rtl"] .tr-balance-tile.negative { border-left: 1.5px solid #bae6fd; border-right: 4px solid #ef4444; }
[dir="rtl"] .tr-balance-tile.neutral { border-left: 1.5px solid #bae6fd; border-right: 4px solid #94a3b8; }
.tr-balance-tile-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.tr-balance-tile-icon { font-size: 22px; }
.tr-balance-tile-name {
flex: 1;
font-weight: 800;
font-size: 13px;
color: #0e7490;
}
.tr-balance-tile-count {
background: #0891b2;
color: white;
font-size: 10px;
font-weight: 800;
padding: 2px 8px;
border-radius: 999px;
}
.tr-balance-tile-acct {
font-size: 10px;
color: #64748b;
font-family: 'SF Mono', Menlo, monospace;
margin-bottom: 8px;
}
.tr-balance-tile-flows { display: flex; flex-direction: column; gap: 5px; }
.tr-balance-flow {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
}
.tr-balance-flow.in strong { color: #10b981; }
.tr-balance-flow.out strong { color: #ef4444; }
.tr-balance-flow-bar {
background: #e0f2fe;
height: 5px;
border-radius: 3px;
overflow: hidden;
grid-column: 1 / -1;
margin-bottom: 2px;
}
.tr-balance-flow.in .tr-balance-flow-bar > div { background: linear-gradient(90deg, #10b981, #34d399); height: 100%; }
.tr-balance-flow.out .tr-balance-flow-bar > div { background: linear-gradient(90deg, #ef4444, #f87171); height: 100%; }
.tr-balance-tile-net {
display: flex;
justify-content: space-between;
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed #cbd5e1;
font-size: 12px;
font-weight: 800;
}
.tr-balance-tile.positive .tr-balance-tile-net strong { color: #10b981; }
.tr-balance-tile.negative .tr-balance-tile-net strong { color: #ef4444; }
.tr-balance-tile.neutral .tr-balance-tile-net strong { color: #64748b; }
/* Top Routes */
.tr-routes-card {
background: white;
border-radius: 14px;
border: 1.5px solid #e0e7ff;
padding: 14px 18px;
margin-bottom: 12px;
}
.tr-routes-header {
font-weight: 800;
font-size: 14px;
color: #4338ca;
margin-bottom: 10px;
}
.tr-routes-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 8px;
}
.tr-route-tile {
background: #eef2ff;
border: 1.5px solid #c7d2fe;
border-radius: 10px;
padding: 8px 12px;
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
text-align: start;
flex-wrap: wrap;
}
.tr-route-tile:hover {
background: #e0e7ff;
border-color: #6366f1;
transform: translateY(-1px);
}
.tr-route-from, .tr-route-to {
font-weight: 700;
font-size: 12px;
color: #312e81;
}
.tr-route-arrow {
font-size: 14px;
color: #6366f1;
font-weight: 800;
}
.tr-route-meta {
margin-${"inline-start"}: auto;
font-size: 11px;
color: #4338ca;
font-weight: 700;
font-family: 'SF Mono', Menlo, monospace;
background: white;
padding: 2px 8px;
border-radius: 6px;
}
/* Responsive */
@media (max-width: 1100px) {
.tr-hero-headline { grid-template-columns: repeat(2, 1fr); }
.tr-hero-mini { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
.tr-hero-headline { grid-template-columns: 1fr; }
.tr-hero-mini { grid-template-columns: repeat(2, 1fr); }
}
/* Treasury Transfer: JV preview + account info */
.tr-acct-info {
margin-top: 4px;
min-height: 18px;
}
.tr-jv-preview {
background: #f0f9ff;
border: 1.5px dashed #7dd3fc;
border-radius: 10px;
padding: 12px;
}
.tr-jv-table {
width: 100%;
border-collapse: collapse;
background: white;
border-radius: 8px;
overflow: hidden;
font-size: 12px;
}
.tr-jv-table th {
background: linear-gradient(135deg, #0891b2, #06b6d4);
color: white;
padding: 8px 10px;
text-align: start;
font-weight: 700;
}
.tr-jv-table td {
padding: 6px 10px;
border-bottom: 1px solid #e0f2fe;
}
.tr-jv-table tfoot td {
background: #ecfeff;
font-weight: 800;
border-top: 2px solid #06b6d4;
border-bottom: none;
}
.tr-jv-table .mono {
font-family: 'SF Mono', Menlo, monospace;
}
/* ═══════════════════════════════════════════════════════════════════════
Companies V3 — Corporate Navy/Slate Palette
═══════════════════════════════════════════════════════════════════════ */
.co-hero-v2 {
/* v0.37.9.453 — Aligned to the ministerial navy palette (was near-black).
Lighter, more formal, and consistent with the rest of the system. The
inset bottom shadow draws a gold hairline that respects the corner radius. */
background: linear-gradient(135deg, #0c4a6e 0%, #075985 50%, #0c4a6e 100%);
border-radius: 18px;
padding: 24px 28px;
color: white;
margin-bottom: 14px;
box-shadow: 0 12px 32px rgba(12, 74, 110, 0.32), inset 0 -3px 0 rgba(251, 191, 36, 0.6);
position: relative;
overflow: hidden;
}
.co-hero-v2::before {
content:'';
position:absolute; inset:0;
background:
radial-gradient(circle at 92% 5%, rgba(251,191,36,0.22) 0%, transparent 45%),
radial-gradient(circle at 8% 95%, rgba(14,165,233,0.20) 0%, transparent 45%),
radial-gradient(circle at 50% 50%, rgba(251,191,36,0.08) 0%, transparent 60%);
pointer-events: none;
}
.co-hero-v2::after {
content:'';
position:absolute; inset:0;
background-image:
linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 75%);
pointer-events:none;
}
.co-hero-v2 > * { position: relative; z-index: 1; }
.co-hero-v2-row {
display: flex; justify-content: space-between; align-items: center;
gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.co-hero-v2-title { display: flex; align-items: center; gap: 16px; }
.co-hero-v2-title h2 { margin: 0; font-size: 23px; font-weight: 900; letter-spacing: 0;
color: #ffffff; }
.co-hero-v2-title p { margin: 4px 0 0; font-size: 13px; opacity: 0.85; font-weight: 500; }
.co-hero-v2-icon {
font-size: 38px; background: linear-gradient(135deg, rgba(59,130,246,0.35), rgba(14,165,233,0.2));
width: 64px; height: 64px; border-radius: 18px;
display: flex; align-items: center; justify-content: center;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.18);
box-shadow: 0 6px 16px rgba(59,130,246,0.18);
}
.co-hero-v2-headline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.co-kpi-big {
background: rgba(255,255,255,0.06);
border: 1.5px solid rgba(255,255,255,0.12);
border-radius: 16px; padding: 16px 18px;
display: flex; align-items: stretch; gap: 14px;
backdrop-filter: blur(10px);
transition: all 0.25s;
position: relative;
overflow: hidden;
}
.co-kpi-big::before {
content:''; position:absolute; inset:0;
background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent 70%);
pointer-events:none;
}
.co-kpi-big:hover { background: rgba(255,255,255,0.10); transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,0,0,0.22); border-color: rgba(255,255,255,0.22); }
.co-kpi-big-ic {
font-size: 26px; flex-shrink: 0;
width: 56px; height: 56px;
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.16);
}
.co-kpi-big > div:last-child { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:2px; }
.co-kpi-big-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; opacity: 0.78; letter-spacing: 0.6px; }
.co-kpi-big-val {
font-size: 26px; font-weight: 900;
font-family: 'SF Mono', Menlo, monospace; line-height: 1.08;
background: linear-gradient(135deg, #fff 0%, #e2e8f0 100%);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.co-kpi-big-sub { font-size: 11px; opacity: 0.78; margin-top: 2px; display: inline-flex; align-items:center; gap:5px; flex-wrap:wrap; }
.co-kpi-big-sub .chip-trend {
display:inline-flex; align-items:center; gap:3px;
background: rgba(255,255,255,0.10);
border:1px solid rgba(255,255,255,0.14);
padding: 1px 7px; border-radius: 999px;
font-size: 10px; font-weight: 800;
}
.co-kpi-big-sub .chip-trend.up { color:#86efac; background:rgba(34,197,94,0.16); border-color:rgba(34,197,94,0.3); }
.co-kpi-big-sub .chip-trend.down { color:#fca5a5; background:rgba(239,68,68,0.16); border-color:rgba(239,68,68,0.3); }
.co-kpi-big-sub .chip-trend.warn { color:#fcd34d; background:rgba(234,179,8,0.16); border-color:rgba(234,179,8,0.3); }
.co-kpi-big.total { background: linear-gradient(135deg, rgba(59,130,246,0.22), rgba(59,130,246,0.04)); border-color: rgba(147,197,253,0.32); }
.co-kpi-big.total .co-kpi-big-ic { background: linear-gradient(135deg, rgba(59,130,246,0.35), rgba(29,78,216,0.2)); }
.co-kpi-big.capital { background: linear-gradient(135deg, rgba(16,185,129,0.22), rgba(16,185,129,0.04)); border-color: rgba(110,231,183,0.32); }
.co-kpi-big.capital .co-kpi-big-ic { background: linear-gradient(135deg, rgba(16,185,129,0.35), rgba(5,150,105,0.2)); }
.co-kpi-big.owners { background: linear-gradient(135deg, rgba(168,85,247,0.22), rgba(168,85,247,0.04)); border-color: rgba(196,181,253,0.32); }
.co-kpi-big.owners .co-kpi-big-ic { background: linear-gradient(135deg, rgba(168,85,247,0.35), rgba(124,58,237,0.2)); }
.co-kpi-big.lic { background: linear-gradient(135deg, rgba(245,158,11,0.22), rgba(245,158,11,0.04)); border-color: rgba(252,211,77,0.32); }
.co-kpi-big.lic .co-kpi-big-ic { background: linear-gradient(135deg, rgba(245,158,11,0.35), rgba(217,119,6,0.2)); }
/* Mini progress bar inside KPI cards */
.co-kpi-progress {
height: 4px; background: rgba(255,255,255,0.08);
border-radius: 2px; overflow:hidden; margin-top: 8px;
}
.co-kpi-progress > i {
display:block; height:100%;
background: linear-gradient(90deg, #38bdf8, #818cf8);
border-radius: 2px;
}
.co-hero-v2-mini { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.co-mini-kpi {
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 12px; padding: 9px 12px;
display: flex; align-items: center; gap: 9px;
backdrop-filter: blur(6px);
transition: all 0.18s;
position:relative;
overflow:hidden;
}
.co-mini-kpi:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.22); transform: translateY(-1px); }
.co-mini-kpi::before {
content:''; position:absolute; inset-inline-start:0; top:10%; bottom:10%; width:3px;
background: linear-gradient(180deg, #38bdf8, #818cf8); border-radius:2px;
}
.co-mini-ic {
font-size: 20px;
width: 32px; height: 32px;
background: rgba(255,255,255,0.10);
border-radius: 8px;
display:flex; align-items:center; justify-content:center;
flex-shrink: 0;
}
.co-mini-num { font-size: 17px; font-weight: 900; font-family: 'SF Mono', Menlo, monospace; line-height: 1.05; color:#fff; }
.co-mini-lbl { font-size: 10px; font-weight: 700; opacity: 0.78; margin-top: 2px; }
.co-alert {
display: flex; align-items: center; gap: 10px;
padding: 12px 16px; border-radius: 12px; margin-bottom: 10px; font-size: 13px;
}
.co-alert-warning { background: #fef3c7; border: 1.5px solid #fbbf24; color: #78350f; }
.co-alert-danger { background: #fee2e2; border: 1.5px solid #f87171; color: #991b1b; }
/* Cards View — Corporate */
.co-cards-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 14px; padding: 16px;
}
.co-card {
background: white; border: 1px solid #e2e8f0; border-radius: 14px;
overflow: hidden; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
transition: all 0.2s; display: flex; flex-direction: column;
}
.co-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12); border-color: #1e40af; }
.co-card-banner {
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
padding: 10px 12px; border-bottom: 1px solid #e2e8f0;
min-height: 70px; display: flex; align-items: center;
}
.co-card-lh {
display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 8px;
width: 100%; align-items: center;
}
.co-card-lh-cell {
display: flex; align-items: center; justify-content: center;
height: 56px;
}
.co-card-lh-cell:first-child { justify-content: flex-end; }
.co-card-lh-cell:last-child { justify-content: flex-start; }
.co-card-lh-cell img { max-height: 56px; max-width: 100%; object-fit: contain; }
.co-card-banner-empty {
font-size: 12px; color: #64748b; display: flex; align-items: center;
justify-content: center; gap: 8px; width: 100%; font-weight: 600;
}
.co-card-body { padding: 14px; flex: 1; }
.co-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.co-card-logo {
width: 56px; height: 56px; border-radius: 12px; border: 1px solid #e2e8f0;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
display: flex; align-items: center; justify-content: center;
overflow: hidden; flex-shrink: 0; font-weight: 900; font-size: 22px; color: #1e40af;
}
.co-card-logo img { width: 100%; height: 100%; object-fit: contain; }
.co-card-name { font-weight: 800; font-size: 15px; color: #0f172a; line-height: 1.3; }
.co-card-name-en { font-size: 11px; color: #64748b; }
.co-card-type { margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; }
.co-card-meta {
display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
background: #f8fafc; padding: 10px; border-radius: 10px; margin-bottom: 8px;
border: 1px solid #f1f5f9;
}
.co-card-meta > div { display: flex; flex-direction: column; }
.co-card-meta span { font-size: 10px; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.co-card-meta strong { font-size: 12px; color: #0f172a; font-family: 'SF Mono', Menlo, monospace; margin-top: 1px; }
.co-card-extras { display: flex; flex-wrap: wrap; gap: 4px; }
.co-card-pill {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; padding: 4px 8px; background: #f1f5f9; border-radius: 999px;
color: #475569; font-weight: 700; border: 1px solid #e2e8f0;
}
.co-card-foot {
display: flex; justify-content: center; gap: 6px; padding: 10px;
background: #f8fafc; border-top: 1px solid #e2e8f0;
}
/* Stats Dashboard (Corporate / Pro) */
.co-stats-pro { padding: 16px; }
.co-stats-snapshot {
display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
margin-bottom: 14px;
}
.co-snap {
background: white; border: 1px solid #e2e8f0; border-radius: 12px;
padding: 12px 14px; display: flex; align-items: center; gap: 10px;
transition: all 0.15s;
}
.co-snap:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15,23,42,0.08); border-color: #cbd5e1; }
.co-snap-ic {
width: 38px; height: 38px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 18px; flex-shrink: 0;
}
.co-snap-num { font-size: 18px; font-weight: 900; font-family: 'SF Mono', Menlo, monospace; color: #0f172a; line-height: 1.1; }
.co-snap-lbl { font-size: 10px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px; }
.co-stats-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
margin-bottom: 14px;
}
.co-stats-panel {
background: white; border: 1px solid #e2e8f0; border-radius: 14px;
overflow: hidden;
}
.co-stats-panel.co-stats-full { margin-bottom: 14px; }
.co-stats-panel-head {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 18px; background: linear-gradient(180deg, #f8fafc, white);
border-bottom: 1px solid #e2e8f0;
}
.co-stats-panel-head h4 { margin: 0; font-size: 14px; color: #0f172a; font-weight: 800; }
.co-stats-panel-meta { font-size: 12px; color: #64748b; font-weight: 600; }
.co-stats-panel-body { padding: 16px 18px; }
.co-stats-donut-wrap {
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.co-donut { flex-shrink: 0; }
.co-donut-seg { transition: opacity 0.15s, transform 0.15s; transform-origin: center; }
.co-donut-seg:hover { opacity: 0.85; }
.co-stats-legend { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
.co-stats-legend-row {
display: flex; align-items: center; gap: 8px; font-size: 12px;
padding: 6px 10px; background: #f8fafc; border-radius: 8px;
border: 1px solid #f1f5f9;
}
.co-stats-legend-dot {
width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.co-stats-legend-row strong { color: #0f172a; font-size: 12px; }
.co-stats-legend-row .mono { color: #475569; font-size: 11px; font-family: 'SF Mono', Menlo, monospace; }
.co-timeline { width: 100%; height: auto; max-height: 220px; }
.co-fill-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
}
.co-fill-tile {
background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
padding: 10px 12px; display: flex; align-items: center; gap: 10px;
}
.co-fill-tile strong { font-size: 13px; color: #0f172a; font-weight: 700; display: block; }
.co-fill-tile-sub { font-size: 11px; color: #64748b; font-family: 'SF Mono', Menlo, monospace; margin-top: 2px; }
/* Legacy stats cards (kept for compatibility) */
.co-stats-card {
background: white; border: 1px solid #e2e8f0; border-radius: 12px;
padding: 16px 18px; margin-bottom: 14px;
}
.co-stats-card h4 {
margin: 0 0 12px; font-size: 14px; color: #0f172a; font-weight: 800;
}
.co-stats-types { display: flex; flex-direction: column; gap: 8px; }
.co-stats-type-row { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.co-stats-type-bar {
flex: 1; background: #fef3c7; height: 14px; border-radius: 7px; overflow: hidden;
}
.co-stats-type-bar > div { height: 100%; border-radius: 7px; transition: width 0.3s; }
.co-lic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.co-lic-tile {
display: flex; align-items: center; gap: 10px; padding: 12px;
border-radius: 10px; border: 1.5px solid;
}
.co-lic-tile.valid { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }
.co-lic-tile.expiring { background: #fef3c7; border-color: #fbbf24; color: #92400e; }
.co-lic-tile.expired { background: #fee2e2; border-color: #f87171; color: #991b1b; }
.co-lic-tile.none { background: #f1f5f9; border-color: #cbd5e1; color: #475569; }
.co-lic-tile-ic { font-size: 26px; }
.co-lic-tile-lbl { font-size: 11px; font-weight: 700; opacity: 0.85; }
.co-lic-tile-val { font-size: 22px; font-weight: 900; font-family: 'SF Mono', Menlo, monospace; }
.co-stats-cap-row {
display: flex; align-items: center; gap: 10px;
padding: 8px 0; border-bottom: 1px dashed #fde68a; font-size: 13px;
}
.co-stats-cap-row:last-child { border-bottom: none; }
.co-stats-rank {
background: linear-gradient(135deg, #d97706, #f59e0b); color: white;
width: 26px; height: 26px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 12px;
}
.co-stats-cap-bar {
flex: 1; min-width: 80px; background: #fef3c7;
height: 8px; border-radius: 4px; overflow: hidden;
}
.co-stats-cap-bar > div { background: linear-gradient(90deg, #f59e0b, #d97706); height: 100%; }
/* ═══════════════════════════════════════════════════════════════════════
Chart of Accounts — Pro Hero with KPIs (2 rows)
═══════════════════════════════════════════════════════════════════════ */
.coa-hero {
background: linear-gradient(135deg, #064e3b 0%, #065f46 35%, #047857 65%, #065f46 100%);
border-radius: 18px;
padding: 18px 22px;
color: white;
margin-bottom: 14px;
box-shadow: 0 8px 28px rgba(6, 78, 59, 0.25);
position: relative;
overflow: hidden;
}
.coa-hero::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(circle at 100% 0%, rgba(16,185,129,0.25) 0%, transparent 50%),
radial-gradient(circle at 0% 100%, rgba(20,184,166,0.18) 0%, transparent 50%);
pointer-events: none;
}
.coa-hero > * { position: relative; z-index: 1; }
.coa-hero-row {
display: flex; justify-content: space-between; align-items: center;
gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.coa-hero-title { display: flex; align-items: center; gap: 12px; }
.coa-hero-title h2 { margin: 0; font-size: 20px; font-weight: 900; }
.coa-hero-title p { margin: 2px 0 0; font-size: 12px; opacity: 0.92; }
.coa-hero-icon {
font-size: 32px;
background: rgba(255,255,255,0.2);
width: 56px; height: 56px;
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
backdrop-filter: blur(8px);
}
.coa-hero-actions {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.coa-hero-company {
padding: 8px 14px;
border-radius: 10px;
border: 1.5px solid rgba(255,255,255,0.3);
background: rgba(255,255,255,0.15);
color: white;
font-weight: 700;
font-size: 13px;
cursor: pointer;
min-width: 200px;
font-family: inherit;
backdrop-filter: blur(8px);
}
.coa-hero-company option { background: #064e3b; color: white; }
.coa-hero-btn {
background: linear-gradient(135deg, #ffffff 0%, #ffffff 70%, #ecfdf5 100%);
color: #064e3b;
border: 0;
padding: 9px 16px;
border-radius: 12px;
font-weight: 900;
font-size: 13px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
letter-spacing: 0.2px;
transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
box-shadow:
0 0 0 2px rgba(255,255,255,0.85),
0 8px 22px rgba(0,0,0,0.22),
inset 0 -2px 0 rgba(0,0,0,0.04);
}
.coa-hero-btn:hover {
background: linear-gradient(135deg, #ffffff, #d1fae5);
transform: translateY(-2px);
box-shadow:
0 0 0 2px rgba(255,255,255,1),
0 12px 28px rgba(0,0,0,0.26),
inset 0 -2px 0 rgba(0,0,0,0.04);
}
.coa-active-filter {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(251, 191, 36, 0.95);
color: #78350f;
font-weight: 800;
font-size: 12px;
padding: 5px 10px 5px 12px;
border-radius: 999px;
border: 1.5px solid #fbbf24;
}
.coa-active-filter-x {
background: rgba(120,53,15,0.15);
border: none;
width: 20px; height: 20px;
border-radius: 50%;
cursor: pointer;
color: #78350f;
font-weight: 900;
display: flex; align-items: center; justify-content: center;
font-size: 10px;
}
.coa-active-filter-x:hover { background: rgba(120,53,15,0.3); }
/* Row 1: 4 headline big KPIs */
.coa-kpi-row-headline {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 10px;
}
.coa-kpi-big {
background: rgba(255,255,255,0.14);
border: 1.5px solid rgba(255,255,255,0.22);
border-radius: 12px;
padding: 12px 14px;
display: flex; align-items: center; gap: 12px;
backdrop-filter: blur(8px);
transition: all 0.2s;
}
.coa-kpi-big:hover {
background: rgba(255,255,255,0.22);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
.coa-kpi-big-ic {
font-size: 26px;
flex-shrink: 0;
background: rgba(255,255,255,0.22);
width: 48px; height: 48px;
border-radius: 11px;
display: flex; align-items: center; justify-content: center;
}
.coa-kpi-big-body { flex: 1; min-width: 0; }
.coa-kpi-big-lbl { font-size: 11px; font-weight: 700; opacity: 0.88; text-transform: uppercase; letter-spacing: 0.4px; }
.coa-kpi-big-val { font-size: 22px; font-weight: 900; font-family: 'SF Mono', Menlo, monospace; line-height: 1.1; margin-top: 2px; }
.coa-kpi-big-sub { font-size: 11px; opacity: 0.85; margin-top: 2px; }
.coa-kpi-big.primary { border-color: rgba(167, 243, 208, 0.5); }
.coa-kpi-big.info { background: rgba(59,130,246,0.18); border-color: rgba(147,197,253,0.5); }
.coa-kpi-big.success { background: rgba(16,185,129,0.22); border-color: rgba(110,231,183,0.5); }
.coa-kpi-big.warning { background: rgba(245,158,11,0.18); border-color: rgba(252,211,77,0.5); }
.coa-jump-bal {
background: rgba(255,255,255,0.2);
border: none;
color: white;
padding: 4px 10px;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
cursor: pointer;
transition: all 0.15s;
margin-top: 2px;
}
.coa-jump-bal:hover { background: rgba(255,255,255,0.35); }
/* Row 2: type chips + level chips strip */
.coa-kpi-row-types {
display: flex; flex-wrap: wrap; gap: 6px;
background: rgba(0,0,0,0.15);
padding: 8px;
border-radius: 12px;
backdrop-filter: blur(4px);
}
.coa-type-chip {
flex: 1; min-width: 140px;
display: flex; align-items: center; gap: 8px;
padding: 6px 10px;
background: rgba(255,255,255,0.12);
border: 1.5px solid rgba(255,255,255,0.18);
border-radius: 10px;
cursor: pointer;
color: white;
transition: all 0.18s;
font-family: inherit;
}
.coa-type-chip:hover {
background: rgba(255,255,255,0.22);
border-color: var(--type-color, white);
transform: translateY(-1px);
}
.coa-type-chip.active {
background: white;
color: #064e3b;
border-color: var(--type-color, white);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.coa-type-chip.active .coa-type-chip-name { color: var(--type-color, #064e3b); }
.coa-type-chip-ic {
font-size: 18px;
width: 32px; height: 32px;
border-radius: 8px;
background: rgba(255,255,255,0.2);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.coa-type-chip.active .coa-type-chip-ic { background: var(--type-color, #064e3b)33; }
.coa-type-chip-name { font-size: 11px; font-weight: 700; opacity: 0.92; }
.coa-type-chip-num { font-size: 14px; font-weight: 900; font-family: 'SF Mono', Menlo, monospace; }
.coa-type-chip-num small { font-size: 10px; opacity: 0.7; }
.coa-levels-strip {
display: flex; align-items: center; gap: 4px;
padding: 6px 10px;
background: rgba(0,0,0,0.2);
border-radius: 10px;
border: 1.5px solid rgba(255,255,255,0.15);
}
.coa-levels-title { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.85); margin-${"inline-end"}: 4px; }
.coa-level-chip {
background: rgba(255,255,255,0.15);
border: 1.5px solid transparent;
color: white;
padding: 4px 10px;
border-radius: 8px;
font-weight: 800;
font-size: 13px;
cursor: pointer;
font-family: 'SF Mono', Menlo, monospace;
transition: all 0.15s;
display: inline-flex; align-items: baseline; gap: 4px;
}
.coa-level-chip small { font-size: 10px; opacity: 0.75; font-weight: 600; }
.coa-level-chip:hover { background: rgba(255,255,255,0.25); transform: translateY(-1px); }
.coa-level-chip.l1.active { background: white; color: #1e3a8a; border-color: white; }
.coa-level-chip.l2.active { background: white; color: #4338ca; border-color: white; }
.coa-level-chip.l3.active { background: white; color: #7c3aed; border-color: white; }
.coa-level-chip.l4.active { background: white; color: #db2777; border-color: white; }
.coa-level-chip.l5.active { background: white; color: #c2410c; border-color: white; }
@media (max-width: 1100px) {
.coa-kpi-row-headline { grid-template-columns: repeat(2, 1fr); }
.coa-hero-company { min-width: 160px; }
}
@media (max-width: 640px) {
.coa-kpi-row-headline { grid-template-columns: 1fr; }
.coa-type-chip { min-width: calc(50% - 6px); }
}
/* ─── Journal Locked Banner (JV linked to a source screen) ─── */
.jv-locked-banner {
display: flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, #fef3c7, #fde68a);
border: 1.5px solid #fbbf24;
border-radius: 12px;
padding: 12px 16px;
margin-bottom: 14px;
box-shadow: 0 2px 6px rgba(251, 191, 36, 0.15);
}
.jv-locked-banner button {
flex-shrink: 0;
background: white;
color: #78350f;
border: 1.5px solid #fbbf24;
font-weight: 800;
}
.jv-locked-banner button:hover {
background: #fef3c7;
transform: translateY(-1px);
}
/* ─── CoA Balances View (Trial Balance) ─── */
.coa-bal-strip {
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 12px;
padding: 12px 18px; background: #f0fdf4;
border-top: 1px solid #bbf7d0; border-bottom: 1px solid #bbf7d0;
}
.coa-bal-period {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
font-size: 12px; color: #166534; font-weight: 600;
}
.coa-bal-period input[type="date"] {
padding: 6px 10px;
border: 1.5px solid #86efac;
border-radius: 8px;
font-size: 12px;
background: white;
}
.coa-bal-status {
font-weight: 800;
padding: 8px 16px;
border-radius: 10px;
font-size: 13px;
}
.coa-bal-status.balanced {
background: linear-gradient(135deg, #10b981, #059669);
color: white;
box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}
.coa-bal-status.unbalanced {
background: linear-gradient(135deg, #f59e0b, #dc2626);
color: white;
box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
animation: pulse-warn 2s ease-in-out infinite;
}
.coa-bal-summary {
padding: 16px 18px;
background: white;
border-bottom: 1px solid #e5e7eb;
}
.coa-bal-summary h4 {
margin: 0 0 10px;
font-size: 14px;
color: #065f46;
font-weight: 800;
}
.coa-bal-summary-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.coa-bal-summary-table th {
background: #ecfdf5;
color: #065f46;
padding: 8px 12px;
border: 1px solid #d1fae5;
font-weight: 800;
text-align: start;
}
.coa-bal-summary-table td {
padding: 8px 12px;
border: 1px solid #f0fdf4;
font-family: 'SF Mono', Menlo, monospace;
}
.coa-bal-summary-table tfoot td { padding: 10px 12px; }
.coa-bal-table {
width: 100%;
border-collapse: collapse;
}
.coa-bal-table thead th {
background: linear-gradient(135deg, #065f46, #047857);
color: white;
padding: 10px 12px;
font-weight: 700;
font-size: 12px;
text-align: start;
}
.coa-bal-table tbody tr.parent-row {
background: #f0fdf4;
}
.coa-bal-table tbody tr.parent-row td { font-weight: 800; }
.coa-bal-table tbody tr.leaf:hover { background: #f8fafc; }
.coa-bal-table td { padding: 8px 12px; border-bottom: 1px solid #f1f5f9; font-size: 12px; }
.coa-bal-table .mono { font-family: 'SF Mono', Menlo, monospace; }
/* Level pills (L1-L5) for trial balance */
.coa-bal-level-pill {
display: inline-block;
padding: 3px 8px;
border-radius: 6px;
font-weight: 800;
font-size: 11px;
font-family: 'SF Mono', Menlo, monospace;
color: white;
text-align: center;
min-width: 32px;
}
.coa-bal-level-pill.l1 { background: linear-gradient(135deg, #1e3a8a, #1d4ed8); }
.coa-bal-level-pill.l2 { background: linear-gradient(135deg, #4338ca, #6366f1); }
.coa-bal-level-pill.l3 { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.coa-bal-level-pill.l4 { background: linear-gradient(135deg, #db2777, #ec4899); }
.coa-bal-level-pill.l5 { background: linear-gradient(135deg, #c2410c, #ea580c); }
/* Grand total row */
.coa-bal-grand-total {
background: linear-gradient(90deg, #0f172a, #1e293b) !important;
color: white;
font-weight: 800;
}
.coa-bal-grand-total td { color: white; padding: 12px 12px !important; }
.coa-bal-grand-total td strong { color: white; }
/* Header rows with rowspan and colspan styling */
.coa-bal-table thead th { color: white; }
.coa-bal-table thead tr:nth-child(2) th { font-size: 11px; padding: 6px 10px; }
/* ─── Companies Inner Tabs (Corporate, 4×2 grid) ─── */
.co-tabs-bar {
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
border-radius: 16px;
padding: 8px;
margin-bottom: 14px;
border: 1.5px solid #e2e8f0;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07), inset 0 1px 0 rgba(255,255,255,0.7);
}
.co-tabs-inner {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
.co-tab-btn {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 13px 10px;
border: 1.5px solid transparent;
border-radius: 11px;
background: linear-gradient(180deg, #fff, #f8fafc);
color: #475569;
font-size: 12.5px;
font-weight: 800;
cursor: pointer;
transition: all 0.22s ease;
font-family: inherit;
position: relative;
min-height: 58px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.co-tab-btn::before {
content:''; position:absolute; inset:0;
border-radius:11px;
background: linear-gradient(135deg, rgba(255,255,255,0.5), transparent);
opacity:0; transition: opacity 0.22s;
pointer-events:none;
}
.co-tab-btn:hover {
background: linear-gradient(180deg, #f1f5f9, #e2e8f0);
color: #0f172a;
transform: translateY(-2px);
border-color: #cbd5e1;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.co-tab-btn.active {
background: linear-gradient(135deg, #0f172a, #1e293b);
color: white;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.35), inset 0 1px 0 rgba(255,255,255,0.18);
transform: translateY(-2px);
border-color: transparent;
}
.co-tab-btn.active::before { opacity:1; }
.co-tab-btn.active::after {
content: '';
position: absolute;
bottom: -8px; left: 50%;
transform: translateX(-50%);
width: 36px; height: 4px;
background: inherit;
border-radius: 2px;
box-shadow: 0 2px 8px currentColor;
}
.co-tab-btn.active[data-color="blue"] { background: linear-gradient(135deg, #1e3a8a, #1d4ed8); }
.co-tab-btn.active[data-color="indigo"] { background: linear-gradient(135deg, #312e81, #4338ca); }
.co-tab-btn.active[data-color="emerald"] { background: linear-gradient(135deg, #064e3b, #047857); }
.co-tab-btn.active[data-color="violet"] { background: linear-gradient(135deg, #4c1d95, #6d28d9); }
.co-tab-btn.active[data-color="rose"] { background: linear-gradient(135deg, #881337, #9f1239); }
.co-tab-btn.active[data-color="teal"] { background: linear-gradient(135deg, #134e4a, #0f766e); }
.co-tab-btn.active[data-color="orange"] { background: linear-gradient(135deg, #7c2d12, #9a3412); }
.co-tab-count {
background: rgba(255,255,255,0.22);
color: inherit;
font-size: 10.5px;
font-weight: 900;
padding: 2px 8px;
border-radius: 999px;
margin-inline-start: 4px;
border: 1px solid rgba(255,255,255,0.14);
font-family: 'SF Mono', Menlo, monospace;
min-width: 22px;
display: inline-flex;
justify-content: center;
}
.co-tab-btn:not(.active) .co-tab-count {
background: #f1f5f9;
color: #475569;
border-color: #cbd5e1;
}
/* ── Tab clusters: data views (brand teal) + tools/analytics (amber) ── */
.co-tabs-group { margin-bottom: 10px; }
.co-tabs-group:last-child { margin-bottom: 0; }
.co-tabs-group-lbl {
font-size: 10.5px; font-weight: 800; color: #94a3b8;
text-transform: uppercase; letter-spacing: 0.7px;
padding: 2px 6px 7px; display: flex; align-items: center; gap: 6px;
}
.co-tabs-bar .co-tabs-inner-data,
.co-tabs-bar .co-tabs-inner-tools { grid-template-columns: repeat(5, 1fr); }
/* Unified active colours by GROUP (replaces the per-tab rainbow) */
.co-tab-btn.active[data-group="data"] { background: linear-gradient(135deg, #0c4a6e, #075985); }
.co-tab-btn.active[data-group="tool"] { background: linear-gradient(135deg, #b45309, #d97706); }
/* Meaningful badge tones */
.co-tab-count.warn { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.co-tab-count.good { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.co-tab-btn.active .co-tab-count.warn { background: rgba(251,191,36,0.28); color: #fde68a; border-color: rgba(251,191,36,0.45); }
.co-tab-btn.active .co-tab-count.good { background: rgba(16,185,129,0.28); color: #a7f3d0; border-color: rgba(16,185,129,0.45); }
/* Inner hero for each tab — refined with inline metric chips */
.co-inner-hero {
margin: 0 -1px;
padding: 16px 22px;
color: white;
border-radius: 14px 14px 0 0;
display: flex; align-items: center; justify-content: space-between;
gap: 14px;
position: relative;
overflow: hidden;
}
.co-inner-hero::before {
content:''; position:absolute; inset:0;
background:
radial-gradient(circle at 85% 10%, rgba(255,255,255,0.18) 0%, transparent 50%),
radial-gradient(circle at 15% 90%, rgba(0,0,0,0.18) 0%, transparent 55%);
pointer-events:none;
}
.co-inner-hero > * { position: relative; z-index: 1; }
.co-inner-hero-row {
display: flex; align-items: center; justify-content: space-between;
gap: 14px; width: 100%; flex-wrap: wrap;
}
.co-inner-hero-title { display: flex; align-items: center; gap: 14px; }
.co-inner-hero-icon {
font-size: 30px;
background: rgba(255,255,255,0.22);
width: 56px; height: 56px;
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
border: 1px solid rgba(255,255,255,0.22);
backdrop-filter: blur(6px);
box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
.co-inner-hero-title h2 { margin: 0; font-size: 18px; font-weight: 900; letter-spacing:-0.2px; }
.co-inner-hero-title p { margin: 3px 0 0; font-size: 12px; opacity: 0.92; font-weight: 600; }
/* Inline metric chips inside tab inner hero */
.co-inner-hero-chips {
display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
.co-hero-chip {
display:inline-flex; align-items:center; gap:6px;
background: rgba(255,255,255,0.18);
border:1px solid rgba(255,255,255,0.22);
padding: 6px 12px; border-radius: 999px;
font-size: 12px; font-weight: 800;
backdrop-filter: blur(6px);
white-space:nowrap;
transition: all 0.18s;
}
.co-hero-chip:hover { background: rgba(255,255,255,0.28); transform: translateY(-1px); }
.co-hero-chip .ic { font-size: 14px; }
.co-hero-chip .val { font-family:'SF Mono',Menlo,monospace; font-weight:900; }
.co-hero-chip.success { background: rgba(34,197,94,0.28); border-color: rgba(110,231,183,0.36); }
.co-hero-chip.warning { background: rgba(234,179,8,0.28); border-color: rgba(253,224,71,0.36); }
.co-hero-chip.danger { background: rgba(239,68,68,0.28); border-color: rgba(252,165,165,0.36); }
.co-inner-add-btn {
background: linear-gradient(180deg, #fff, #f1f5f9);
border: none;
padding: 10px 20px;
border-radius: 10px;
font-weight: 900;
font-size: 13px;
cursor: pointer;
color: #0f172a;
box-shadow: 0 4px 12px rgba(0,0,0,0.18);
transition: all 0.18s;
}
.co-inner-add-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
/* ─── Tab KPI strip — premium card design ──────────────────────────── */
.co-tab-kpi-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
padding: 14px 18px;
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
border-bottom: 1px solid #e2e8f0;
}
.co-tab-kpi {
display: flex; align-items: center; gap: 10px;
background: white;
border: 1.5px solid #e2e8f0;
padding: 11px 14px;
border-radius: 12px;
transition: all 0.18s;
position: relative;
overflow: hidden;
}
.co-tab-kpi::before {
content:''; position:absolute;
inset-inline-start: 0; top: 14%; bottom: 14%;
width: 4px;
background: linear-gradient(180deg, #cbd5e1, #94a3b8);
border-radius: 0 4px 4px 0;
}
.co-tab-kpi:hover {
border-color: #94a3b8;
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(15,23,42,0.09);
}
.co-tab-kpi span:first-child {
font-size: 22px;
width: 38px; height: 38px;
background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
border-radius: 10px;
display:flex; align-items:center; justify-content:center;
flex-shrink: 0;
}
.co-tab-kpi > div { display:flex; flex-direction:column; gap:1px; }
.co-tab-kpi strong {
font-size: 18px; font-weight: 900;
font-family: 'SF Mono', Menlo, monospace;
color: #0f172a; line-height: 1.05;
}
.co-tab-kpi small {
font-size: 11px; color: #64748b; font-weight: 700;
letter-spacing: 0.2px;
}
.co-tab-kpi.success { border-color: #6ee7b7; background: linear-gradient(135deg, #ecfdf5, #d1fae5); }
.co-tab-kpi.success::before { background: linear-gradient(180deg, #34d399, #059669); }
.co-tab-kpi.success span:first-child { background: linear-gradient(135deg, #bbf7d0, #86efac); }
.co-tab-kpi.success strong { color: #065f46; }
.co-tab-kpi.success small { color: #047857; }
.co-tab-kpi.warning { border-color: #fbbf24; background: linear-gradient(135deg, #fef3c7, #fde68a); }
.co-tab-kpi.warning::before { background: linear-gradient(180deg, #fbbf24, #d97706); }
.co-tab-kpi.warning span:first-child { background: linear-gradient(135deg, #fde68a, #fcd34d); }
.co-tab-kpi.warning strong { color: #78350f; }
.co-tab-kpi.warning small { color: #92400e; }
.co-tab-kpi.danger { border-color: #f87171; background: linear-gradient(135deg, #fee2e2, #fecaca); }
.co-tab-kpi.danger::before { background: linear-gradient(180deg, #f87171, #dc2626); }
.co-tab-kpi.danger span:first-child { background: linear-gradient(135deg, #fecaca, #fca5a5); }
.co-tab-kpi.danger strong { color: #991b1b; }
.co-tab-kpi.danger small { color: #b91c1c; }
.co-tab-kpi.gray { border-color: #cbd5e1; background: linear-gradient(135deg, #f8fafc, #f1f5f9); }
.co-tab-kpi.gray::before { background: linear-gradient(180deg, #94a3b8, #64748b); }
.co-tab-kpi.gray strong { color: #475569; }
/* Quick Insights strip — between hero and tabs */
.co-insights {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.co-insight {
background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
border: 1.5px solid #e2e8f0;
border-radius: 14px;
padding: 12px 14px;
display: flex; gap: 12px;
position: relative;
overflow: hidden;
transition: all 0.18s;
}
.co-insight::before {
content:''; position:absolute;
inset-inline-start: 0; top: 0; bottom: 0;
width: 4px;
}
.co-insight:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15,23,42,0.08); }
.co-insight-ic {
font-size: 22px;
width: 42px; height: 42px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.co-insight-body { flex: 1; min-width: 0; }
.co-insight-ttl { font-size: 11.5px; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; }
.co-insight-val { font-size: 17px; font-weight: 900; color: #0f172a; line-height: 1.15; font-family: 'SF Mono', Menlo, monospace; }
.co-insight-sub { font-size: 11px; color: #64748b; margin-top: 3px; font-weight: 600; }
.co-insight.info { border-color: #93c5fd; }
.co-insight.info::before { background: linear-gradient(180deg, #3b82f6, #1d4ed8); }
.co-insight.info .co-insight-ic { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1e40af; }
.co-insight.success { border-color: #6ee7b7; }
.co-insight.success::before { background: linear-gradient(180deg, #10b981, #047857); }
.co-insight.success .co-insight-ic { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; }
.co-insight.warning { border-color: #fcd34d; }
.co-insight.warning::before { background: linear-gradient(180deg, #f59e0b, #b45309); }
.co-insight.warning .co-insight-ic { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }
.co-insight.danger { border-color: #fca5a5; }
.co-insight.danger::before { background: linear-gradient(180deg, #ef4444, #b91c1c); }
.co-insight.danger .co-insight-ic { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #991b1b; }
.co-insight.violet { border-color: #c4b5fd; }
.co-insight.violet::before { background: linear-gradient(180deg, #8b5cf6, #6d28d9); }
.co-insight.violet .co-insight-ic { background: linear-gradient(135deg, #ede9fe, #ddd6fe); color: #5b21b6; }
/* Tab-specific table headers */
.co-tab-table.tab-blue thead th { background: linear-gradient(135deg, #1d4ed8, #3b82f6); color: white; }
.co-tab-table.tab-indigo thead th { background: linear-gradient(135deg, #4338ca, #6366f1); color: white; }
.co-tab-table.tab-emerald thead th { background: linear-gradient(135deg, #047857, #10b981); color: white; }
.co-tab-table.tab-violet thead th { background: linear-gradient(135deg, #7c3aed, #a855f7); color: white; }
.co-tab-table.tab-rose thead th { background: linear-gradient(135deg, #be123c, #e11d48); color: white; }
.co-tab-table.tab-teal thead th { background: linear-gradient(135deg, #0f766e, #14b8a6); color: white; }
/* Letterheads Grid Tab */
.co-lh-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
gap: 14px;
padding: 18px;
}
.co-lh-card {
background: white;
border: 1.5px solid #99f6e4;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(20, 184, 166, 0.08);
}
.co-lh-card:hover { box-shadow: 0 12px 22px rgba(20, 184, 166, 0.18); border-color: #14b8a6; }
.co-lh-card-head {
background: linear-gradient(135deg, #ccfbf1, #99f6e4);
padding: 10px 14px;
display: flex; justify-content: space-between; align-items: center;
font-size: 13px; color: #134e4a;
}
.co-lh-card-preview {
padding: 12px;
background: linear-gradient(180deg, white, #f0fdfa);
min-height: 160px;
}
.co-lh-card-hdr {
display: grid; grid-template-columns: 1fr 1.5fr 1fr;
gap: 6px; align-items: center; padding-bottom: 8px;
border-bottom: 1.5px dashed #ccfbf1; margin-bottom: 10px;
}
.co-lh-card-cell {
height: 50px; display: flex; align-items: center; justify-content: center;
}
.co-lh-card-cell.right { justify-content: flex-end; }
.co-lh-card-cell.left { justify-content: flex-start; }
.co-lh-card-cell img { max-height: 50px; max-width: 100%; object-fit: contain; }
.co-lh-empty { font-size: 20px; opacity: 0.5; }
.co-lh-card-stub { height: 5px; background: #ccfbf1; border-radius: 3px; margin: 4px 0; }
.co-lh-card-ftr { text-align: center; margin-top: 10px; padding-top: 8px; border-top: 1.5px dashed #ccfbf1; }
.co-lh-card-ftr img { max-height: 36px; max-width: 100%; }
.co-lh-card-empty {
text-align: center; padding: 28px 12px; color: #94a3b8; font-size: 32px;
display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.co-lh-card-empty span { font-size: 12px; font-weight: 700; }
.co-lh-card-actions {
padding: 10px 12px;
background: #f0fdfa; border-top: 1px solid #ccfbf1;
display: flex; gap: 6px; flex-wrap: wrap;
}
@media (max-width: 1100px) {
.co-tabs-inner,
.co-tabs-bar .co-tabs-inner-data,
.co-tabs-bar .co-tabs-inner-tools { grid-template-columns: repeat(2, 1fr); }
.co-tab-btn { padding: 11px 8px; font-size: 12px; min-height: 50px; }
}
@media (max-width: 600px) {
.co-tabs-inner,
.co-tabs-bar .co-tabs-inner-data,
.co-tabs-bar .co-tabs-inner-tools { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.co-tab-btn { padding: 10px 8px; font-size: 11.5px; min-height: 50px; }
.co-lh-grid { grid-template-columns: 1fr; }
}
/* Letterhead Alignment classes — apply justify-content to flex */
.lh-align-left { justify-content: flex-start !important; text-align: left !important; }
.lh-align-center { justify-content: center !important; text-align: center !important; }
.lh-align-right { justify-content: flex-end !important; text-align: right !important; }
/* Alignment bar in modal */
.lh-align-bar {
display: flex; align-items: center; gap: 4px;
margin: 4px 0; padding: 4px;
background: #f8fafc; border: 1px solid #e2e8f0;
border-radius: 8px; font-size: 11px;
}
.lh-align-lbl { color: #64748b; font-weight: 700; padding: 0 6px; }
.lh-align-btn {
flex: 1; padding: 4px 6px;
border: 1px solid transparent; background: transparent;
border-radius: 6px; cursor: pointer; font-size: 13px;
color: #475569; transition: all 0.12s;
font-family: inherit;
}
.lh-align-btn:hover { background: white; border-color: #cbd5e1; }
.lh-align-btn.active {
background: linear-gradient(135deg, #0f172a, #1e293b); color: white;
border-color: #0f172a;
}
/* Letterhead in Modal */
.lh-info {
background: #f0f9ff; border: 1px solid #7dd3fc; border-radius: 10px;
padding: 10px 14px; margin-bottom: 12px; font-size: 12px; color: #075985;
}
.lh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.lh-slot {
background: white; border: 1px solid #e2e8f0; border-radius: 12px;
padding: 12px; display: flex; flex-direction: column; gap: 8px;
}
.lh-slot-head { display: flex; align-items: center; gap: 8px; }
.lh-slot-icon { font-size: 22px; }
.lh-slot-head strong { font-size: 13px; color: #0f172a; }
.lh-slot-desc { font-size: 10px; color: #64748b; }
.lh-slot-preview {
background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 8px;
height: 90px; display: flex; align-items: center; padding: 8px;
overflow: hidden;
}
.lh-slot-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lh-slot-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lh-slot-empty-text { font-size: 11px; color: #94a3b8; }
.lh-slot-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lh-preview-wrap { background: #f1f5f9; border-radius: 12px; padding: 14px; margin-top: 8px; }
.lh-preview-label { font-size: 12px; font-weight: 700; color: #475569; margin-bottom: 8px; }
.lh-a4 {
background: white; box-shadow: 0 4px 16px rgba(0,0,0,0.1);
width: 100%; max-width: 600px; margin: 0 auto;
aspect-ratio: 210 / 297; padding: 18px;
display: flex; flex-direction: column; gap: 10px;
}
.lh-a4-header {
display: grid; grid-template-columns: 1fr 1.5fr 1fr;
gap: 8px; align-items: center;
border-bottom: 2px solid #e2e8f0; padding-bottom: 8px;
}
.lh-a4-slot {
height: 50px; display: flex; align-items: center;
justify-content: center;
}
.lh-a4-slot img { max-height: 50px; max-width: 100%; object-fit: contain; }
.lh-a4-body { flex: 1; padding: 10px 0; }
.lh-a4-title {
font-size: 14px; font-weight: 800; color: #d97706; margin-bottom: 10px;
}
.lh-a4-stub {
height: 6px; background: #e2e8f0; border-radius: 3px; margin: 6px 0;
}
.lh-footer-block {
background: white; border: 1px solid #e2e8f0; border-radius: 12px;
padding: 12px; margin-top: 12px;
}
.lh-footer-label {
font-size: 12px; font-weight: 700; color: #0f172a; margin-bottom: 8px;
}
.lh-footer-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lh-footer-preview {
background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 8px;
height: 60px; flex: 1; max-width: 240px; padding: 6px;
display: flex; align-items: center; overflow: hidden;
}
.lh-footer-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Responsive */
@media (max-width: 1200px) {
.co-stats-snapshot { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
.co-hero-v2-headline { grid-template-columns: repeat(2, 1fr); }
.co-hero-v2-mini { grid-template-columns: repeat(3, 1fr); }
.lh-grid { grid-template-columns: 1fr; }
.co-lic-grid { grid-template-columns: repeat(2, 1fr); }
.co-stats-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.co-hero-v2-headline { grid-template-columns: 1fr; }
.co-hero-v2-mini { grid-template-columns: repeat(2, 1fr); }
.co-cards-grid { grid-template-columns: 1fr; }
.co-stats-snapshot { grid-template-columns: repeat(2, 1fr); }
}
/* ═══════════════════════════════════════════════════════════════════════
Fixed Assets — Pro Dashboard
═══════════════════════════════════════════════════════════════════════ */
.fa-hero {
background: linear-gradient(135deg, #7c2d12 0%, #ea580c 50%, #f59e0b 100%);
border-radius: 20px;
padding: 22px 26px;
color: white;
margin-bottom: 14px;
box-shadow: 0 10px 30px rgba(234, 88, 12, 0.25);
}
.fa-hero-row {
display: flex; justify-content: space-between; align-items: center;
gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.fa-hero-title { display: flex; align-items: center; gap: 14px; }
.fa-hero-title h2 { margin: 0; font-size: 22px; font-weight: 900; }
.fa-hero-title p { margin: 2px 0 0; font-size: 13px; opacity: 0.92; }
.fa-hero-icon {
font-size: 36px; background: rgba(255,255,255,0.18);
width: 60px; height: 60px; border-radius: 16px;
display: flex; align-items: center; justify-content: center;
backdrop-filter: blur(8px);
}
.fa-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fa-period-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.fa-period-label { font-size: 12px; font-weight: 700; opacity: 0.85; }
.fa-period-chip {
background: rgba(255,255,255,0.15); border: 1.5px solid rgba(255,255,255,0.25);
color: white; padding: 6px 14px; border-radius: 999px;
font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s;
}
.fa-period-chip:hover { background: rgba(255,255,255,0.28); transform: translateY(-1px); }
.fa-period-chip.active { background: white; color: #ea580c; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-color: white; }
.fa-hero-headline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; }
.fa-kpi-big {
background: rgba(255,255,255,0.16); border: 1.5px solid rgba(255,255,255,0.22);
border-radius: 14px; padding: 14px 16px; display: flex; align-items: center; gap: 12px;
backdrop-filter: blur(8px); transition: all 0.2s;
}
.fa-kpi-big:hover { background: rgba(255,255,255,0.22); transform: translateY(-2px); }
.fa-kpi-big-icon {
font-size: 28px; flex-shrink: 0;
background: rgba(255,255,255,0.2); width: 52px; height: 52px;
border-radius: 12px; display: flex; align-items: center; justify-content: center;
}
.fa-kpi-big-body { flex: 1; min-width: 0; }
.fa-kpi-big-label { font-size: 11px; font-weight: 700; text-transform: uppercase; opacity: 0.88; letter-spacing: 0.4px; margin-bottom: 2px; }
.fa-kpi-big-value { font-size: 22px; font-weight: 900; font-family: 'SF Mono', Menlo, monospace; line-height: 1.1; margin-bottom: 2px; }
.fa-kpi-big-sub { font-size: 11px; opacity: 0.85; }
.fa-kpi-big.primary { border-color: rgba(167, 243, 208, 0.4); }
.fa-kpi-big.success { background: rgba(16,185,129,0.22); border-color: rgba(110,231,183,0.5); }
.fa-kpi-big.info { background: rgba(59,130,246,0.22); border-color: rgba(147,197,253,0.5); }
.fa-kpi-big.warning { background: rgba(220,38,38,0.22); border-color: rgba(252,165,165,0.5); }
.fa-hero-mini { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.fa-mini-kpi {
background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18);
border-radius: 10px; padding: 8px 12px; display: flex; align-items: center; gap: 8px;
backdrop-filter: blur(4px);
}
.fa-mini-icon { font-size: 22px; }
.fa-mini-num { font-size: 16px; font-weight: 800; font-family: 'SF Mono', Menlo, monospace; line-height: 1; }
.fa-mini-lbl { font-size: 10px; font-weight: 600; opacity: 0.85; margin-top: 2px; }
.fa-alert {
display: flex; align-items: center; gap: 10px;
padding: 12px 16px; border-radius: 12px; margin-bottom: 12px; font-size: 13px;
}
.fa-alert-warning { background: #fef3c7; border: 1.5px solid #fbbf24; color: #78350f; }
/* Categories strip */
.fa-cats-card {
background: white; border-radius: 14px; border: 1.5px solid #fde68a;
padding: 16px 18px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(234, 88, 12, 0.06);
}
.fa-cats-header {
display: flex; justify-content: space-between; align-items: center;
font-weight: 800; font-size: 14px; color: #92400e; margin-bottom: 12px;
}
.fa-cats-hint { font-size: 11px; color: #94a3b8; font-weight: 500; }
.fa-cats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.fa-cat-tile {
background: #fffbeb; border: 1.5px solid #fde68a; border-radius: 12px;
padding: 12px; cursor: pointer; transition: all 0.2s;
text-align: start; font-family: inherit;
border-${"left"}-width: 4px;
border-${"left"}-color: var(--cat-color, #f59e0b);
}
[dir="rtl"] .fa-cat-tile { border-left: 1.5px solid #fde68a; border-right: 4px solid var(--cat-color, #f59e0b); }
.fa-cat-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(234, 88, 12, 0.15); }
.fa-cat-tile.active { background: #ffedd5; border-color: var(--cat-color, #f59e0b); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); }
.fa-cat-tile-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fa-cat-tile-icon { font-size: 22px; }
.fa-cat-tile-name { flex: 1; font-weight: 800; font-size: 13px; color: #7c2d12; }
.fa-cat-tile-count { background: var(--cat-color, #f59e0b); color: white; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.fa-cat-tile-row { display: flex; justify-content: space-between; font-size: 11px; padding: 2px 0; }
.fa-cat-tile-row span { color: #78716c; }
.fa-cat-tile-row strong { font-family: 'SF Mono', Menlo, monospace; }
.fa-cat-tile-row.nbv { padding-top: 6px; border-top: 1px dashed #fde68a; margin-top: 4px; font-size: 12px; }
.fa-cat-tile-progress { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.fa-cat-tile-bar { background: #fef3c7; height: 5px; border-radius: 3px; overflow: hidden; }
.fa-cat-tile-bar > div { background: linear-gradient(90deg, #f59e0b, #dc2626); height: 100%; }
.fa-cat-tile-progress span { font-size: 10px; color: #92400e; font-weight: 700; text-align: end; }
/* Cost & VAT block */
.fa-cost-wrap { background: #f0fdf4; border: 1.5px solid #86efac; border-radius: 10px; padding: 12px; }
.fa-cost-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.fa-cost-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #86efac; }
/* JV preview in modal */
.fa-jv-preview { background: white; border: 1.5px dashed #93c5fd; border-radius: 10px; padding: 10px; }
.fa-jv-preview-header { font-weight: 800; color: #1d4ed8; font-size: 13px; margin-bottom: 6px; }
.fa-jv-preview-table { width: 100%; border-collapse: collapse; font-size: 12px; background: white; border-radius: 6px; overflow: hidden; }
.fa-jv-preview-table th { background: linear-gradient(135deg, #1e40af, #3b82f6); color: white; padding: 6px 10px; text-align: start; font-weight: 700; }
.fa-jv-preview-table td { padding: 5px 10px; border-bottom: 1px solid #dbeafe; }
.fa-jv-preview-table tfoot td { background: #dbeafe; font-weight: 800; border-top: 2px solid #3b82f6; }
.fa-jv-preview-table .mono { font-family: 'SF Mono', Menlo, monospace; }
@media (max-width: 900px) {
.fa-cost-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Depreciation preview box */
.fa-dep-preview-box {
background: #fef3c7; border: 1.5px dashed #fbbf24; border-radius: 10px; padding: 12px;
font-size: 12px; color: #78350f;
}
.fa-dep-preview-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.fa-dep-preview-grid > div { display: flex; flex-direction: column; }
.fa-dep-preview-lbl { font-size: 10px; color: #92400e; font-weight: 700; }
/* Schedule modal */
.fa-sched-summary {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
background: #fff7ed; padding: 12px; border-radius: 10px; border: 1.5px solid #fed7aa;
}
.fa-sched-summary > div { display: flex; flex-direction: column; font-size: 12px; }
.fa-sched-summary span { color: #78716c; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.fa-sched-summary strong { font-size: 14px; font-family: 'SF Mono', Menlo, monospace; color: #7c2d12; margin-top: 2px; }
.fa-sched-table th { background: linear-gradient(135deg, #ea580c, #f59e0b); color: white; }
.fa-sched-table tr.fa-sched-posted { background: #ecfdf5; }
.fa-sched-table tr.fa-sched-due { background: #fef3c7; }
/* Disposal modal */
.fa-disp-summary {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
background: #fef2f2; padding: 12px; border-radius: 10px; border: 1.5px solid #fecaca;
}
.fa-disp-summary > div { display: flex; flex-direction: column; font-size: 12px; }
.fa-disp-summary span { color: #78716c; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.fa-disp-summary strong { font-size: 14px; font-family: 'SF Mono', Menlo, monospace; color: #991b1b; margin-top: 2px; }
.fa-disp-preview {
background: #f0f9ff; border: 1.5px dashed #7dd3fc; border-radius: 10px; padding: 12px;
}
.fa-disp-preview-header {
display: flex; justify-content: space-between; align-items: center;
font-weight: 800; margin-bottom: 8px; color: #0e7490;
}
.fa-disp-preview-table { width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden; font-size: 12px; }
.fa-disp-preview-table th { background: linear-gradient(135deg, #dc2626, #ef4444); color: white; padding: 6px 10px; text-align: start; }
.fa-disp-preview-table td { padding: 5px 10px; border-bottom: 1px solid #fee2e2; }
.fa-disp-preview-table .mono { font-family: 'SF Mono', Menlo, monospace; }
/* Responsive */
@media (max-width: 1100px) {
.fa-hero-headline { grid-template-columns: repeat(2, 1fr); }
.fa-hero-mini { grid-template-columns: repeat(3, 1fr); }
.fa-sched-summary, .fa-disp-summary { grid-template-columns: repeat(2, 1fr); }
.fa-dep-preview-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.fa-hero-headline { grid-template-columns: 1fr; }
.fa-hero-mini { grid-template-columns: repeat(2, 1fr); }
}
/* Payment method direction radio options */
.gd-dir-opt {
transition: all 0.2s;
}
.gd-dir-opt:has(input[type=radio]:checked) {
border-color: #10b981 !important;
background: #ecfdf5 !important;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.gd-dir-opt:hover {
border-color: #6ee7b7 !important;
background: #f0fdf4 !important;
}
.jv-lines-actions {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: #f8fafc;
border-top: 1px solid #e5e7eb;
}
.jv-shortcut-hint {
margin-inline-start: auto;
font-size: 11px;
color: #6b7280;
}
.mono { font-family: 'SF Mono', Menlo, monospace; }
/* HR export toolbar (used at top of each hr.js screen, after hero) */
.hr-export-toolbar {
background: white;
border-radius: 10px;
padding: 8px 14px;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
box-shadow: var(--shadow-sm);
}
/* ─── Receipt Voucher type tabs ───────────────────────────────────── */
.rv-rtype-tabs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
padding: 4px 0;
}
.rv-rtype-tab {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: white;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-weight: 700;
font-size: 13px;
color: #475569;
cursor: pointer;
transition: all .18s ease;
}
.rv-rtype-tab:hover:not(:disabled) {
border-color: #94a3b8;
background: #f8fafc;
transform: translateY(-1px);
}
.rv-rtype-tab.active {
box-shadow: 0 4px 14px rgba(22,163,74,0.25);
transform: translateY(-1px);
}
.rv-rtype-tab:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* ─── Sales Invoices tab strip ─────────────────────────────────────── */
.si-tab-strip {
display: flex;
gap: 8px;
padding: 12px 4px 0;
margin-bottom: 8px;
border-bottom: 2px solid #e2e8f0;
flex-wrap: wrap;
}
.si-tab {
padding: 10px 20px;
background: white;
border: 2px solid #e2e8f0;
border-bottom: none;
border-radius: 10px 10px 0 0;
font-weight: 800;
font-size: 14px;
color: #475569;
cursor: pointer;
transition: all .18s ease;
margin-bottom: -2px;
}
.si-tab:hover { background: #f1f5f9; color: #1e293b; transform: translateY(-1px); }
.si-tab.active {
background: linear-gradient(135deg, #0e7490, #0891b2);
color: white;
border-color: #0891b2;
box-shadow: 0 -2px 8px rgba(8,145,178,0.18);
}
/* ─── Journal Entries tab strip ─────────────────────────────────────── */
.jv-tab-strip {
display: flex;
gap: 6px;
padding: 8px 4px 4px;
margin-bottom: 6px;
border-bottom: 2px solid #e2e8f0;
flex-wrap: wrap;
}
.jv-tab {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: white;
border: 1.5px solid #e2e8f0;
border-bottom: none;
border-radius: 8px 8px 0 0;
font-weight: 800;
font-size: 12px;
color: #475569;
cursor: pointer;
transition: all .18s ease;
margin-bottom: -2px;
}
.jv-tab:hover { background: #f1f5f9; color: #1e293b; transform: translateY(-1px); }
.jv-tab.active { box-shadow: 0 -2px 8px rgba(30,58,138,0.18); }
.jv-tab-icon { font-size: 14px }
.jv-tab-count {
background: #e2e8f0;
color: #475569;
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 800;
min-width: 22px;
text-align: center;
}
/* ─── Print theme picker (in company modal) ──────────────────────────── */
.theme-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
margin-top: 8px;
}
.theme-card {
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px;
background: white;
border: 2px solid #e2e8f0;
border-radius: 10px;
cursor: pointer;
transition: all .18s ease;
}
.theme-card:hover { border-color: #94a3b8; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.06); }
.theme-card.active {
border-color: #0891b2;
background: #ecfeff;
box-shadow: 0 0 0 3px rgba(8,145,178,0.18);
}
.theme-swatches { display: flex; gap: 4px }
.theme-sw {
flex: 1;
height: 28px;
border-radius: 4px;
}
.theme-name {
font-weight: 800;
font-size: 13px;
color: #1e293b;
text-align: center;
}
.theme-preview {
padding: 6px 10px;
border-radius: 6px;
text-align: center;
line-height: 1.2;
}
/* ═══════════════════════════════════════════════════════════════════
JOURNALS PRO — Elegant tabs, KPIs, filters, list view
═══════════════════════════════════════════════════════════════════ */
/* Tab strip — 4-column grid (forces 4+3 layout for 7 tabs) */
.jv-tabs-wrap {
background: linear-gradient(to bottom, #f8fafc, #ffffff);
padding: 10px 12px;
border-radius: 12px;
margin-bottom: 8px;
border: 1px solid #e2e8f0;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.jv-tabs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
align-items: stretch;
}
@media (max-width: 1100px) {
.jv-tabs { grid-template-columns: repeat(3, 1fr) }
}
@media (max-width: 720px) {
.jv-tabs { grid-template-columns: repeat(2, 1fr) }
}
.jv-tab {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 14px;
background: white;
border: 1.5px solid #e2e8f0;
border-radius: 10px;
font-weight: 700;
font-size: 12.5px;
color: #475569;
cursor: pointer;
transition: all .18s ease;
position: relative;
margin-bottom: -1px;
white-space: nowrap;
}
.jv-tab:hover {
background: #f1f5f9;
color: #1e293b;
border-color: var(--tab-color, #94a3b8);
transform: translateY(-1px);
}
.jv-tab.active {
font-weight: 900;
box-shadow: 0 -3px 10px rgba(0,0,0,0.12);
z-index: 2;
}
.jv-tab-ic { font-size: 15px }
.jv-tab-lbl { letter-spacing: -0.2px }
.jv-tab-cnt {
background: #e2e8f0;
color: #475569;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
min-width: 22px;
text-align: center;
}
/* Pro Hero */
.jv-hero-pro {
color: white;
padding: 16px 20px 12px;
border-radius: 0 0 14px 14px;
position: relative;
overflow: hidden;
box-shadow: 0 4px 14px rgba(0,0,0,0.12);
margin-bottom: 12px;
}
.jv-hero-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
gap: 14px;
flex-wrap: wrap;
}
.jv-hero-title { display: flex; align-items: center; gap: 14px }
.jv-hero-icon {
font-size: 38px;
width: 60px; height: 60px;
border-radius: 14px;
background: rgba(255,255,255,0.18);
backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.jv-hero-title h2 { margin: 0; font-size: 22px; font-weight: 900; line-height: 1.1 }
.jv-hero-title p { margin: 3px 0 0; font-size: 12px; opacity: 0.92; line-height: 1.3; max-width: 600px }
.jv-hero-btn {
padding: 9px 16px;
background: #ffffff;
color: #0f172a;
border: 0;
border-radius: 12px;
font-weight: 800;
font-size: 13px;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
box-shadow: 0 4px 12px rgba(0,0,0,0.16), inset 0 -2px 0 rgba(0,0,0,0.03);
display: inline-flex;
align-items: center;
gap: 8px;
letter-spacing: 0.2px;
}
.jv-hero-btn:hover { transform: translateY(-1px); background:#f8fafc; box-shadow: 0 8px 18px rgba(0,0,0,0.22), inset 0 -2px 0 rgba(0,0,0,0.03) }
.jv-hero-btn.primary {
background: linear-gradient(135deg, #ffffff 0%, #ffffff 70%, #eff6ff 100%);
font-weight: 900;
box-shadow: 0 0 0 2px rgba(255,255,255,0.85), 0 8px 22px rgba(0,0,0,0.22), inset 0 -2px 0 rgba(0,0,0,0.04);
}
.jv-hero-btn.primary:hover { background: linear-gradient(135deg, #ffffff, #dbeafe); transform: translateY(-2px); }
/* 4 big headline KPIs */
.jv-kpi-headline {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
margin-bottom: 10px;
}
.jv-kpi-big {
background: rgba(255,255,255,0.16);
backdrop-filter: blur(10px);
border: 1.5px solid rgba(255,255,255,0.25);
border-radius: 12px;
padding: 12px 14px;
display: flex;
align-items: center;
gap: 12px;
transition: transform .18s ease;
}
.jv-kpi-big:hover { transform: translateY(-2px); background: rgba(255,255,255,0.22) }
.jv-kpi-big-icon { font-size: 28px; line-height: 1; flex-shrink: 0 }
.jv-kpi-big-body { flex: 1; min-width: 0 }
.jv-kpi-big-label { font-size: 11px; opacity: 0.85; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px }
.jv-kpi-big-value { font-size: 22px; font-weight: 900; line-height: 1.1; margin: 2px 0; font-family: 'SF Mono', monospace }
.jv-kpi-big-sub { font-size: 10.5px; opacity: 0.85 }
.jv-kpi-big-sub strong { font-weight: 800 }
/* Mini KPI strip */
.jv-kpi-mini-strip {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.jv-kpi-mini {
flex: 1;
min-width: 130px;
background: rgba(255,255,255,0.12);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 9px;
padding: 7px 11px;
display: flex;
align-items: center;
gap: 8px;
}
.jv-kpi-mini-ic { font-size: 16px; flex-shrink: 0 }
.jv-kpi-mini-num { font-size: 16px; font-weight: 800; line-height: 1; font-family: 'SF Mono', monospace }
.jv-kpi-mini-lbl { font-size: 10px; opacity: 0.85; margin-top: 1px }
/* Toolbar */
.jv-toolbar {
display: flex;
gap: 8px;
align-items: center;
padding: 10px 14px;
flex-wrap: wrap;
background: #ffffff;
border-bottom: 1px solid #e2e8f0;
}
.jv-search-box {
flex: 1;
min-width: 220px;
position: relative;
}
.jv-search-box .jv-search-ic {
position: absolute;
top: 50%;
[dir="rtl"] & { right: 10px }
transform: translateY(-50%);
pointer-events: none;
font-size: 14px;
}
[dir="rtl"] .jv-search-box .jv-search-ic { right: 10px; left: auto }
[dir="ltr"] .jv-search-box .jv-search-ic { left: 10px; right: auto }
.jv-search-box input {
width: 100%;
padding: 8px 34px;
border: 1.5px solid #cbd5e1;
border-radius: 8px;
font-size: 13px;
background: white;
transition: border-color .15s;
}
.jv-search-box input:focus { outline: none; border-color: #3b82f6 }
.jv-tb-btn { padding: 7px 12px; font-size: 12px }
.jv-view-toggle {
display: flex;
border: 1.5px solid #cbd5e1;
border-radius: 8px;
overflow: hidden;
}
.jv-vt-btn {
padding: 7px 14px;
background: white;
border: none;
font-weight: 700;
font-size: 12px;
color: #64748b;
cursor: pointer;
transition: all .15s;
}
.jv-vt-btn:hover { background: #f1f5f9 }
.jv-vt-btn.active { background: linear-gradient(135deg, #3b82f6, #2563eb); color: white }
.jv-export-grp {
margin-${'inline'}-start: auto;
display: flex;
gap: 6px;
}
/* Filters panel */
.jv-filters-panel {
background: #f8fafc;
border-top: 1px dashed #cbd5e1;
padding: 12px 14px;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.jv-filter-input {
padding: 7px 10px;
border: 1.5px solid #cbd5e1;
border-radius: 8px;
font-size: 12px;
background: white;
min-width: 130px;
transition: border-color .15s;
}
.jv-filter-input:focus { outline: none; border-color: #3b82f6 }
.jv-filter-input[type="date"] { width: 145px }
.jv-active-chips {
display: flex;
gap: 5px;
flex-wrap: wrap;
flex-basis: 100%;
padding-top: 6px;
border-top: 1px dotted #cbd5e1;
margin-top: 4px;
}
.jv-chip {
background: #3b82f6;
color: white;
border: none;
padding: 4px 9px;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
cursor: pointer;
transition: all .15s;
}
.jv-chip:hover { background: #2563eb; transform: translateY(-1px) }
/* Result info bar */
.jv-result-info {
padding: 8px 14px;
background: #f0f9ff;
border-bottom: 1px solid #bae6fd;
font-size: 12px;
color: #075985;
}
.jv-result-info strong { font-weight: 800 }
/* List rows: full-text description that wraps onto multiple lines */
.jv-desc-cell {
min-width: 220px;
max-width: 360px;
white-space: normal !important; /* override .data-table td white-space:nowrap */
vertical-align: top;
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.jv-desc-main {
font-weight: 700;
font-size: 12px;
color: #1e293b;
line-height: 1.4;
white-space: normal;
word-break: break-word;
overflow-wrap: break-word;
margin-bottom: 3px;
}
.jv-desc-sub {
font-size: 10px;
color: #64748b;
font-family: 'SF Mono', monospace;
background: #f1f5f9;
padding: 2px 6px;
border-radius: 4px;
display: inline-block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
}
.jv-lines-badge {
display: inline-block;
background: #e0f2fe;
color: #0369a1;
font-weight: 800;
font-size: 11px;
padding: 2px 9px;
border-radius: 999px;
min-width: 22px;
text-align: center;
}
/* Make journal list rows pop on hover */
.co-list-table tbody tr:hover { background: #f0f9ff }
/* ═══════════════════════════════════════════════════════════════════
Quick Add FAB — Global floating "+" button on every screen
═══════════════════════════════════════════════════════════════════ */
.quick-add-fab {
position: fixed;
bottom: 24px;
left: 24px;
z-index: 950;
font-family: 'Tajawal', Arial, sans-serif;
}
[dir="ltr"] .quick-add-fab { left: auto; right: 24px }
/* 🆕 v0.37.9.172 — In-topbar mode: small inline pill instead of bottom FAB */
.quick-add-fab.in-topbar {
position: relative;
bottom: auto;
left: auto;
right: auto;
display: inline-flex;
align-items: center;
z-index: 100;
}
[dir="ltr"] .quick-add-fab.in-topbar { left: auto; right: auto }
.quick-add-toggle {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #0e7490, #0891b2, #06b6d4);
color: white;
border: 3px solid white;
font-size: 30px;
cursor: pointer;
box-shadow: 0 6px 24px rgba(8,145,178,0.45), 0 2px 8px rgba(0,0,0,0.18);
transition: all .2s cubic-bezier(.4,0,.2,1);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.quick-add-toggle:hover {
transform: scale(1.08);
box-shadow: 0 8px 30px rgba(8,145,178,0.6), 0 4px 12px rgba(0,0,0,0.22);
}
/* 🆕 v0.37.9.172 — Compact "+" pill when in topbar (matches header buttons) */
.quick-add-fab.in-topbar .quick-add-toggle {
width: 34px;
height: 34px;
border-width: 2px;
font-size: 20px;
box-shadow: 0 2px 6px rgba(8,145,178,0.32);
}
.quick-add-fab.in-topbar .quick-add-toggle:hover {
transform: scale(1.1);
}
.quick-add-toggle .qa-plus {
font-weight: 300;
line-height: 1;
transition: transform .25s ease;
}
.quick-add-fab.open .quick-add-toggle .qa-plus {
transform: rotate(135deg);
}
.quick-add-fab.open .quick-add-toggle {
background: linear-gradient(135deg, #dc2626, #ef4444);
}
.quick-add-menu {
position: absolute;
bottom: 76px;
left: 0;
background: white;
border-radius: 14px;
box-shadow: 0 12px 40px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08);
padding: 8px;
min-width: 240px;
display: flex;
flex-direction: column;
gap: 4px;
animation: qa-menu-pop .2s cubic-bezier(.4,0,.2,1);
border: 1.5px solid #e2e8f0;
z-index: 1000;
}
[dir="ltr"] .quick-add-menu { left: auto; right: 0 }
.quick-add-menu.hidden { display: none }
/* 🆕 v0.37.9.172 — In-topbar mode: drop the menu BELOW the "+" button */
.quick-add-fab.in-topbar .quick-add-menu {
bottom: auto;
top: 44px;
right: 0;
left: auto;
}
[dir="ltr"] .quick-add-fab.in-topbar .quick-add-menu {
right: auto;
left: 0;
}
@keyframes qa-menu-pop {
from { opacity: 0; transform: translateY(10px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.quick-add-menu-hdr {
padding: 8px 12px 6px;
font-weight: 800;
font-size: 12px;
color: #475569;
border-bottom: 1.5px solid #e2e8f0;
margin-bottom: 4px;
letter-spacing: 0.3px;
}
.quick-add-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
background: white;
border: 1.5px solid transparent;
text-align: start;
font-weight: 700;
font-size: 13px;
color: #1e293b;
border-radius: 9px;
cursor: pointer;
transition: all .15s ease;
}
.quick-add-item:hover {
background: #f0f9ff;
border-color: #93c5fd;
transform: translateX(2px);
}
[dir="rtl"] .quick-add-item:hover { transform: translateX(-2px) }
.quick-add-item .qa-ic {
width: 36px;
height: 36px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: white;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
/* Hide FAB on login page if any */
body.login-page .quick-add-fab { display: none }
/* ═══════════════════════════════════════════════════════════════════════
Login screen — Dual login tabs (System User / Employee)
═══════════════════════════════════════════════════════════════════════ */
.login-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
background: #f1f5f9;
padding: 6px;
border-radius: 14px;
margin: 0 0 18px;
}
.login-tab {
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 10px 8px;
background: transparent;
border: 0;
border-radius: 10px;
cursor: pointer;
color: #64748b;
font-weight: 700;
transition: all 0.2s;
}
.login-tab .login-tab-icon { font-size: 22px; line-height: 1; }
.login-tab .login-tab-label { font-size: 13px; font-weight: 800; }
.login-tab .login-tab-label-en { font-size: 10px; opacity: 0.7; letter-spacing: 0.3px; }
.login-tab:hover { background: #ffffff; color: #1e293b; }
.login-tab.active {
background: linear-gradient(135deg, #014034, #0d6e5c);
color: #ffffff;
box-shadow: 0 4px 12px rgba(1,64,52,0.25);
}
.login-tab.active .login-tab-label-en { opacity: 0.85; color: #d1fae5; }
.login-helper {
margin-top: 14px;
text-align: center;
font-size: 12px;
color: #475569;
padding: 10px;
background: #f8fafc;
border: 1px dashed #cbd5e1;
border-radius: 10px;
}
.login-helper a { color: #0e7490; margin-inline-start: 6px; }
.emp-reg-hint {
background: #ecfeff;
border: 1px dashed #67e8f9;
border-radius: 10px;
padding: 10px 14px;
font-size: 12.5px;
color: #155e75;
line-height: 1.6;
}
/* ═══════════════════════════════════════════════════════════════════════
Employee Portal — mobile-first layout (480px max)
Designed to translate directly to a Capacitor/RN mobile app later
═══════════════════════════════════════════════════════════════════════ */
.emp-portal {
display: flex;
flex-direction: column;
min-height: 100vh;
background: linear-gradient(180deg, #f0fdfa 0%, #ecfeff 50%, #f5f3ff 100%);
}
.emp-portal-header {
position: sticky; top: 0; z-index: 10;
display: flex; align-items: center; gap: 12px;
padding: 12px 16px;
background: linear-gradient(135deg, #014034, #0d6e5c);
color: #ffffff;
box-shadow: 0 4px 14px rgba(1, 64, 52, 0.18);
}
.emp-portal-brand { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.emp-portal-logo {
width: 44px; height: 44px; object-fit: contain;
background: rgba(255,255,255,0.9);
border-radius: 10px;
padding: 4px;
flex-shrink: 0;
}
.emp-portal-company {
font-size: 15px; font-weight: 900; line-height: 1.2;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.emp-portal-tagline { font-size: 10.5px; opacity: 0.85; line-height: 1.2; letter-spacing: 0.3px; }
.emp-portal-actions { display: flex; gap: 6px; }
.emp-portal-icon-btn {
background: rgba(255,255,255,0.18);
border: 0;
color: #ffffff;
width: 38px; height: 38px;
border-radius: 10px;
cursor: pointer;
font-size: 18px;
transition: background 0.15s;
}
.emp-portal-icon-btn:hover { background: rgba(255,255,255,0.28); }
.emp-portal-content {
flex: 1;
padding: 14px;
max-width: 480px;
width: 100%;
margin: 0 auto;
}
@media (min-width: 768px) {
.emp-portal-content { max-width: 540px; padding: 22px; }
}
.emp-portal-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 18px 16px;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
margin-bottom: 14px;
}
.emp-portal-card h2 { margin: 0 0 8px; font-size: 18px; font-weight: 900; color: #0f172a; }
.emp-portal-card p { margin: 0 0 12px; font-size: 13px; color: #475569; line-height: 1.6; }
.emp-portal-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.emp-portal-tile {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 16px 8px;
background: linear-gradient(135deg, #f0fdfa, #ecfeff);
border: 1.5px solid #67e8f9;
border-radius: 14px;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
color: #0f172a;
text-align: center;
}
.emp-portal-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(8, 145, 178, 0.18); background: linear-gradient(135deg, #ecfeff, #f0fdfa); }
.emp-portal-tile > span:first-child { font-size: 30px; line-height: 1; }
.emp-portal-tile strong { font-size: 13px; font-weight: 900; }
.emp-portal-tile small { font-size: 10.5px; color: #475569; }
.emp-portal-nav {
position: sticky; bottom: 0; z-index: 10;
display: grid;
grid-template-columns: repeat(7, 1fr);
background: #ffffff;
border-top: 1px solid #e2e8f0;
box-shadow: 0 -4px 14px rgba(15, 23, 42, 0.06);
padding: 6px;
gap: 4px;
}
.emp-portal-nav-btn {
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 6px 2px;
background: transparent;
border: 0;
border-radius: 10px;
cursor: pointer;
color: #64748b;
transition: all 0.15s;
}
.emp-portal-nav-btn > span { font-size: 18px; line-height: 1; }
.emp-portal-nav-btn > small { font-size: 9.5px; font-weight: 700; }
.emp-portal-nav-btn.active {
background: linear-gradient(135deg, #014034, #0d6e5c);
color: #ffffff;
}
@media (max-width: 420px) {
.emp-portal-nav-btn > small { display: none; }
.emp-portal-nav-btn { padding: 10px 2px; }
}
/* Employee Portal — Home: welcome strip + profile summary + leave balances */
.emp-home-welcome {
background: linear-gradient(135deg, #ecfeff, #f0fdfa);
border: 1px solid #67e8f9;
border-radius: 16px;
padding: 16px 18px;
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 14px;
box-shadow: 0 4px 12px rgba(8, 145, 178, 0.08);
}
.emp-home-greet-wrap { flex: 1; min-width: 0; }
.emp-home-greet { font-size: 12px; color: #475569; font-weight: 700; }
.emp-home-name { font-size: 19px; font-weight: 900; color: #0f172a; line-height: 1.2; margin-top: 2px; }
.emp-home-job { font-size: 12px; color: #475569; margin-top: 4px; }
.emp-home-status-pill {
background: #dcfce7;
color: #15803d;
font-size: 11px;
font-weight: 800;
padding: 6px 10px;
border-radius: 999px;
white-space: nowrap;
border: 1px solid #86efac;
}
.emp-card-title {
margin: 0 0 12px;
font-size: 14px;
font-weight: 900;
color: #0f172a;
padding-bottom: 8px;
border-bottom: 1px dashed #e2e8f0;
display: flex;
align-items: center;
gap: 6px;
}
/* Profile info grid */
.emp-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
@media (max-width: 360px) { .emp-info-grid { grid-template-columns: 1fr; } }
.emp-info-row {
display: flex;
align-items: flex-start;
gap: 8px;
background: #f8fafc;
padding: 8px 10px;
border-radius: 10px;
border: 1px solid #e2e8f0;
}
.emp-info-icon { font-size: 18px; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.emp-info-text { flex: 1; min-width: 0; }
.emp-info-lbl { font-size: 10.5px; color: #64748b; font-weight: 700; }
.emp-info-val {
font-size: 12.5px;
color: #0f172a;
font-weight: 700;
margin-top: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Leave balances */
.emp-leave-headline {
background: linear-gradient(135deg, #d1fae5, #ecfdf5);
border: 1.5px solid #6ee7b7;
border-radius: 14px;
padding: 14px;
text-align: center;
margin-bottom: 12px;
}
.emp-leave-headline-val {
font-size: 36px;
font-weight: 900;
color: #065f46;
font-family: 'Inter', monospace;
line-height: 1;
}
.emp-leave-headline-lbl { font-size: 12px; color: #047857; font-weight: 700; margin-top: 4px; }
.emp-leave-headline-sub { font-size: 11px; color: #047857; margin-top: 6px; opacity: 0.85; }
.emp-leave-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
@media (min-width: 480px) { .emp-leave-grid { grid-template-columns: repeat(4, 1fr); } }
.emp-leave-tile {
border-radius: 12px;
padding: 12px 8px;
text-align: center;
border: 1px solid;
display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.emp-leave-tile .emp-leave-icon { font-size: 20px; }
.emp-leave-tile .emp-leave-val { font-size: 18px; font-weight: 900; font-family: 'Inter', monospace; line-height: 1; }
.emp-leave-tile .emp-leave-lbl { font-size: 10px; font-weight: 700; }
.emp-leave-tile.blue { background: #eff6ff; border-color: #93c5fd; color: #1e40af; }
.emp-leave-tile.rose { background: #fff1f2; border-color: #fda4af; color: #9f1239; }
.emp-leave-tile.amber { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.emp-leave-tile.red { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
/* ═══════════════════════════════════════════════════════════════════════
Employee Portal Phase 2 — Punch, Attendance, Payroll, Requests, Tasks, Account
═══════════════════════════════════════════════════════════════════════ */
.punch-gate {
background: #fef2f2;
border: 1.5px solid #fca5a5;
border-radius: 12px;
padding: 16px;
color: #991b1b;
font-size: 13px;
font-weight: 700;
line-height: 1.7;
text-align: center;
}
.punch-gate.err { background: #fef2f2; border-color: #fca5a5; color: #7f1d1d; }
.punch-site-card {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 12px 14px;
margin-bottom: 14px;
}
.punch-site-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 13px; color: #475569; }
.punch-site-row strong { color: #0f172a; }
.punch-status-pill {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px;
border: 1.5px solid;
border-radius: 999px;
font-size: 12.5px;
font-weight: 800;
margin-top: 10px;
}
.punch-status-dot { width: 10px; height: 10px; border-radius: 999px; animation: punchPulse 2s ease-in-out infinite; }
@keyframes punchPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.15);opacity:0.7} }
.punch-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 14px 0;
}
.punch-btn {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
min-height: 110px;
padding: 14px;
border: 0;
border-radius: 16px;
font-weight: 800;
cursor: pointer;
transition: all 0.15s;
box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}
.punch-btn.in { background: linear-gradient(135deg, #16a34a, #22c55e); color: #ffffff; }
.punch-btn.out { background: linear-gradient(135deg, #dc2626, #ef4444); color: #ffffff; }
.punch-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.3); }
.punch-btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.18); }
.punch-btn.used { background: linear-gradient(135deg, #d4d4d8, #a1a1aa); color: #18181b; }
.punch-btn-icon { font-size: 30px; line-height: 1; }
.punch-btn-label { font-size: 14px; font-weight: 900; }
.punch-btn-time { font-size: 11px; background: rgba(255,255,255,0.25); padding: 4px 8px; border-radius: 999px; }
.punch-foot-hint {
font-size: 11.5px;
color: #64748b;
text-align: center;
background: #f8fafc;
border: 1px dashed #e2e8f0;
border-radius: 8px;
padding: 8px;
line-height: 1.7;
}
/* Attendance / Tasks KPIs (shared) */
.emp-att-kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
margin-bottom: 12px;
}
@media (max-width: 420px) { .emp-att-kpis { grid-template-columns: repeat(2, 1fr); } }
.emp-att-kpi {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 10px 6px;
text-align: center;
}
.emp-att-kpi strong { display: block; font-size: 20px; font-weight: 900; font-family: 'Inter', monospace; line-height: 1; }
.emp-att-kpi small { font-size: 10px; font-weight: 700; color: #64748b; }
.emp-att-kpi.success { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }
.emp-att-kpi.info { background: #eff6ff; border-color: #93c5fd; color: #1e40af; }
.emp-att-kpi.warn { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.emp-att-kpi.danger { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
/* Attendance table */
.emp-att-table-wrap { overflow-x: auto; }
.emp-att-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.emp-att-table th, .emp-att-table td { border-bottom: 1px solid #e2e8f0; padding: 8px 6px; text-align: start; }
.emp-att-table th { background: #f1f5f9; color: #334155; font-size: 11px; font-weight: 800; }
.emp-att-table .muted { color: #94a3b8; font-size: 10px; }
/* Payroll cards */
.emp-pay-list { display: flex; flex-direction: column; gap: 8px; }
.emp-pay-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; }
.emp-pay-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #475569; flex-wrap: wrap; }
.emp-pay-row.top { justify-content: space-between; margin-bottom: 6px; }
.emp-pay-period { font-weight: 800; color: #0f172a; }
.emp-pay-net { font-size: 18px; font-weight: 900; color: #15803d; font-family: 'Inter', monospace; }
/* Requests cards */
.emp-req-list, .emp-task-list { display: flex; flex-direction: column; gap: 10px; }
.emp-req-card, .emp-task-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; }
.emp-req-head, .emp-task-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.emp-req-type { font-size: 14px; font-weight: 900; color: #0f172a; }
.emp-req-body, .emp-task-body { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #475569; }
.emp-req-body strong, .emp-task-body strong { color: #0f172a; }
.emp-task-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: 11px; }
.emp-task-actions { display: flex; gap: 6px; margin-top: 8px; }
.emp-empty {
text-align: center;
padding: 30px 14px;
background: #f8fafc;
border: 1.5px dashed #e2e8f0;
border-radius: 12px;
font-size: 13px;
color: #64748b;
line-height: 1.7;
}
/* Portal-wide buttons */
.emp-portal-btn {
display: inline-flex; align-items: center; gap: 6px;
background: #ffffff;
border: 1.5px solid #e2e8f0;
color: #0f172a;
border-radius: 10px;
padding: 8px 14px;
font-size: 13px;
font-weight: 800;
cursor: pointer;
transition: all 0.15s;
}
.emp-portal-btn:hover { background: #f8fafc; transform: translateY(-1px); }
.emp-portal-btn.primary { background: linear-gradient(135deg, #014034, #0d6e5c); color: #ffffff; border-color: #014034; }
.emp-portal-btn.primary:hover { background: linear-gradient(135deg, #0d6e5c, #14a085); }
.emp-portal-btn.small { padding: 6px 10px; font-size: 11.5px; }
/* Auto-translate trigger button — inline styles take precedence in JS,
this is only a fallback. Direction is shown via text label "ترجم → EN" etc. */
.tr-trigger-btn {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 4px;
padding: 5px 11px;
font-size: 11.5px;
font-weight: 700;
line-height: 1.2;
color: #fff;
background: #0e7490;
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
}
.tr-trigger-btn:hover { opacity: 0.9; }
.tr-trigger-btn:active { transform: scale(0.97); }
.tr-trigger-btn:disabled { opacity: 0.6; cursor: wait; }
input[data-tr-busy="1"], textarea[data-tr-busy="1"] { background: #fffbeb !important; }
/* Journal lines: VAT label (when account is mapped to VAT category) */
.jv-lines-table .jv-vat-label {
display: inline-block;
padding: 6px 10px;
font-size: 11.5px;
font-weight: 800;
color: #6b21a8;
background: #f3e8ff;
border: 1px solid #c084fc;
border-radius: 6px;
}
/* Lock badge on Chart-of-Accounts rows that are linked in Accounting Linkage */
.coa-lock-badge {
display: inline-flex;
align-items: center;
margin-inline-start: 6px;
background: #fef3c7;
border: 1px solid #fbbf24;
color: #92400e;
border-radius: 999px;
padding: 1px 8px;
font-size: 11px;
font-weight: 800;
cursor: help;
}
/* ═══════════════════════════════════════════════════════════════════════
ATTENDANCE LOG — Phase A
═══════════════════════════════════════════════════════════════════════ */
.atl-hero {
background: linear-gradient(135deg,#0d9488 0%,#10b981 50%,#059669 100%);
color: #fff;
border-radius: 18px;
margin-bottom: 14px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(13,148,136,0.18);
}
.atl-hero-row { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; gap: 14px; flex-wrap: wrap; }
.atl-hero-title { display: flex; align-items: center; gap: 12px; }
.atl-hero-icon { width: 50px; height: 50px; background: rgba(255,255,255,0.22); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.atl-hero-title h2 { margin: 0; font-size: 19px; font-weight: 900; }
.atl-hero-title p { margin: 3px 0 0; font-size: 12px; opacity: 0.92; }
.atl-hero-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.atl-hero-btn { background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.3); color: #fff; padding: 7px 14px; border-radius: 10px; font-weight: 800; font-size: 12.5px; cursor: pointer; transition: all 0.15s; }
.atl-hero-btn:hover { background: rgba(255,255,255,0.28); }
.atl-hero-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; padding: 12px 22px; background: rgba(0,0,0,0.12); border-top: 1px solid rgba(255,255,255,0.15); }
.atl-hero-kpi { background: rgba(255,255,255,0.12); border-radius: 10px; padding: 8px 12px; display: flex; align-items: center; gap: 10px; }
.atl-hero-kpi-ic { font-size: 22px; }
.atl-hero-kpi-lbl { font-size: 10.5px; opacity: 0.9; }
.atl-hero-kpi-val { font-size: 16px; font-weight: 900; }
.atl-tabs-card { background: #fff; padding: 8px; border-radius: 12px; box-shadow: 0 2px 6px rgba(15,23,42,0.05); margin-bottom: 14px; }
.atl-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; }
.atl-tab-btn { background: transparent; border: 0; padding: 10px 14px; border-radius: 10px; cursor: pointer; font-weight: 800; font-size: 12.5px; color: #64748b; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.15s; }
.atl-tab-btn:hover { background: #f1f5f9; color: #0f172a; }
.atl-tab-btn.active { background: linear-gradient(135deg,#10b981,#0d9488); color: #fff; box-shadow: 0 4px 10px rgba(13,148,136,0.25); }
.atl-empty { background: #fff; border-radius: 14px; padding: 30px; text-align: center; color: #64748b; }
.atl-empty.err { background: #fef2f2; border: 2px solid #fca5a5; color: #7f1d1d; }
.atl-empty-ic { font-size: 50px; margin-bottom: 10px; }
.atl-empty h3 { margin: 0 0 6px; font-size: 17px; font-weight: 900; }
/* ─── Tab: My Today (kiosk-style card) ─── */
.atl-mytoday-card { background: linear-gradient(135deg,#ecfdf5,#f0fdfa,#ecfeff); border: 2px solid #6ee7b7; border-radius: 18px; overflow: hidden; box-shadow: 0 8px 20px rgba(16,185,129,0.12); }
.atl-mytoday-head { background: linear-gradient(135deg,#10b981,#0d9488); color: #fff; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.atl-mytoday-greet { font-size: 11px; opacity: 0.92; }
.atl-mytoday-name { font-size: 22px; font-weight: 900; }
.atl-mytoday-sub { font-size: 11px; opacity: 0.9; margin-top: 4px; }
.atl-mytoday-clock { text-align: end; }
.atl-mytoday-time { font-size: 28px; font-weight: 900; font-family: 'Inter', monospace; }
.atl-mytoday-date { font-size: 11px; opacity: 0.92; }
.atl-mytoday-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 20px; }
@media (max-width: 640px) { .atl-mytoday-buttons { grid-template-columns: 1fr; } }
.atl-mytoday-btn-wrap { background: #fff; border: 2px solid; border-radius: 14px; padding: 18px; text-align: center; }
.atl-mytoday-btn-wrap.in { border-color: #6ee7b7; }
.atl-mytoday-btn-wrap.out { border-color: #93c5fd; }
.atl-mytoday-big-ic { font-size: 42px; margin-bottom: 6px; }
.atl-mytoday-lbl { font-size: 12px; font-weight: 800; color: #475569; }
.atl-mytoday-big-val { font-size: 28px; font-weight: 900; color: #0f172a; margin: 6px 0 14px; }
.atl-mytoday-action { width: 100%; border: 0; border-radius: 10px; padding: 12px 14px; font-size: 14px; font-weight: 900; color: #fff; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.12); transition: transform 0.15s, box-shadow 0.15s; }
.atl-mytoday-action.in { background: linear-gradient(135deg,#10b981,#0d9488); }
.atl-mytoday-action.out { background: linear-gradient(135deg,#3b82f6,#6366f1); }
.atl-mytoday-action:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.18); }
.atl-mytoday-note { padding: 8px; border-radius: 8px; font-size: 11.5px; font-weight: 700; color: #475569; background: #f1f5f9; border: 1px solid #cbd5e1; }
.atl-mytoday-note.warn { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.atl-mytoday-note.ok { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }
.atl-mytoday-metrics { padding: 0 20px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.atl-mm { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px; text-align: center; }
.atl-mm-lbl { font-size: 10.5px; color: #64748b; font-weight: 700; }
.atl-mm-val { font-size: 17px; font-weight: 900; color: #0f172a; }
.atl-mm-val.bad { color: #b91c1c; }
.atl-mm-val.warn { color: #c2410c; }
.atl-mm-val.good { color: #1d4ed8; }
/* ─── Shared table cell tints ─── */
.atl-table { font-size: 11.5px; table-layout: auto; border-collapse: separate; border-spacing: 0; }
.atl-table th, .atl-table td { padding: 6px 7px; vertical-align: middle; }
.atl-table th { font-size: 11px; white-space: nowrap; }
/* 🧊 Sticky table header — stays at top while body scrolls.
Stats strip + filters scroll away normally; only the column header pinned.
── CRITICAL: position:sticky sticks to the nearest scrolling ancestor.
In Arttop the scroll container is .main-content (overflow-y:auto).
But .card has overflow:hidden, and .table-wrapper has overflow-x:auto —
both create new containing blocks that TRAP sticky.
Override them for cards/wrappers that hold an .atl-table, so sticky
bubbles up to .main-content as intended. */
.card:has(.atl-table) { overflow: visible !important; }
.table-wrapper:has(.atl-table) { overflow: visible !important; background: transparent; box-shadow: none; margin-bottom: 0; }
.atl-table thead th {
position: sticky;
top: 0;
z-index: 10;
background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
color: #0f172a;
font-weight: 800;
border-bottom: 2px solid #94a3b8;
box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
/* Ensure the cell paints solid so rows underneath don't bleed through */
background-clip: padding-box;
}
.atl-table thead th:first-child { border-start-start-radius: 6px; }
.atl-table thead th:last-child { border-start-end-radius: 6px; }
.atl-table .atl-cell-emerald { background: #ecfdf5; color: #065f46; font-weight: 700; text-align: center; }
.atl-table .atl-cell-blue { background: #eff6ff; color: #1e40af; font-weight: 700; text-align: center; }
.atl-table .atl-cell-purple { background: #f5f3ff; color: #6b21a8; font-weight: 700; text-align: center; }
.atl-table .atl-cell-amber { background: #fffbeb; color: #92400e; font-weight: 700; text-align: center; }
.atl-table .atl-cell-orange { background: #fff7ed; color: #9a3412; font-weight: 700; text-align: center; }
.atl-table .atl-cell-cyan { background: #ecfeff; color: #155e75; font-weight: 700; text-align: center; }
.atl-table .atl-cell-rose { background: #fff1f2; color: #9f1239; font-weight: 700; text-align: center; }
.atl-table .atl-foot td { background: #ecfdf5; color: #065f46; font-weight: 800; padding: 10px; }
/* Employee identity cell */
.atl-emp { line-height: 1.35; }
.atl-emp-name { font-weight: 800; color: #0f172a; font-size: 12px; }
.atl-emp-code { font-family: 'Courier New', monospace; font-size: 10px; color: #0e7490; font-weight: 700; margin-top: 1px; }
.atl-emp-co { font-size: 10px; color: #7c2d12; margin-top: 1px; font-weight: 600; }
/* Date cell — date + day stacked */
.atl-date { line-height: 1.3; text-align: center; }
.atl-date-d { font-family: 'Courier New', monospace; font-weight: 700; font-size: 11.5px; color: #0f172a; }
.atl-date-w { font-size: 10px; color: #64748b; font-weight: 600; margin-top: 1px; }
/* Note column — 2-line clamp */
.atl-note {
font-size: 10.5px; color: #475569; line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; text-overflow: ellipsis;
max-width: 180px; word-break: break-word;
}
/* Compact time cells */
.atl-table td.atl-cell-emerald,
.atl-table td.atl-cell-blue,
.atl-table td.atl-cell-purple,
.atl-table td.atl-cell-amber,
.atl-table td.atl-cell-orange,
.atl-table td.atl-cell-cyan,
.atl-table td.atl-cell-rose { font-family: 'Courier New', monospace; font-size: 11px; padding: 4px 6px; }
.atl-input { padding: 6px 10px; border: 1.5px solid #cbd5e1; border-radius: 6px; font-size: 12px; background: #fff; }
/* ─── Stats KPIs ─── */
.atl-stats-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 10px; margin-bottom: 14px; }
.atl-stat-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 2px 6px rgba(15,23,42,0.04); }
.atl-stat-ic { font-size: 28px; }
.atl-stat-val { font-size: 22px; font-weight: 900; color: #0f172a; font-family: 'Inter', monospace; }
.atl-stat-lbl { font-size: 11px; color: #64748b; font-weight: 700; }
.atl-stat-card.success { background: #ecfdf5; border-color: #6ee7b7; }
.atl-stat-card.danger { background: #fef2f2; border-color: #fca5a5; }
.atl-stat-card.warn { background: #fffbeb; border-color: #fcd34d; }
.atl-stat-card.info { background: #eff6ff; border-color: #93c5fd; }
/* ═══════════════════════════════════════════════════════════════════
ATTENDANCE SUMMARY (ملخص الحضور الشهري) — Phase B
═══════════════════════════════════════════════════════════════════ */
.atsum-hero {
background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 60%, #8b5cf6 100%);
color: #fff; border-radius: 18px; padding: 22px 24px; margin-bottom: 18px;
box-shadow: 0 14px 38px rgba(99,102,241,0.28);
}
.atsum-hero-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.atsum-hero-title { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 240px; }
.atsum-hero-icon { font-size: 38px; background: rgba(255,255,255,0.18); border-radius: 14px; padding: 8px 12px; backdrop-filter: blur(8px); }
.atsum-hero-title h1 { margin: 0; font-size: 22px; font-weight: 900; }
.atsum-hero-title p { margin: 2px 0 0; font-size: 12px; opacity: 0.9; }
.atsum-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.atsum-hero-btn {
background: rgba(255,255,255,0.92); color: #0f172a; border: 0;
border-radius: 10px; padding: 9px 16px; font-size: 12px; font-weight: 800;
cursor: pointer; transition: all 0.15s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.atsum-hero-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.atsum-hero-btn.primary { background: #facc15; color: #422006; }
.atsum-hero-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 10px; }
.atsum-hero-kpi { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22); border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; backdrop-filter: blur(6px); }
.atsum-hero-kpi-ic { font-size: 22px; opacity: 0.95; }
.atsum-hero-kpi-val { font-size: 18px; font-weight: 900; font-family: 'Inter', monospace; line-height: 1.1; }
.atsum-hero-kpi-lbl { font-size: 10.5px; opacity: 0.88; font-weight: 700; margin-top: 2px; }
.atsum-tabs-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 4px 12px rgba(15,23,42,0.04); margin-bottom: 14px; }
.atsum-tabs { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid #e2e8f0; overflow-x: auto; }
.atsum-tab-btn {
background: transparent; border: 0; padding: 10px 16px;
font-size: 13px; font-weight: 700; color: #64748b; cursor: pointer;
border-radius: 8px; white-space: nowrap; transition: all 0.15s ease;
}
.atsum-tab-btn:hover { background: #f1f5f9; color: #0f172a; }
.atsum-tab-btn.active { background: linear-gradient(135deg, #0ea5e9, #6366f1); color: #fff; box-shadow: 0 2px 6px rgba(99,102,241,0.25); }
.atsum-tab { padding: 18px; }
.atsum-analytics-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 12px; margin-bottom: 14px; }
.atsum-kpi-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 2px 6px rgba(15,23,42,0.04); }
.atsum-kpi-ic { font-size: 28px; }
.atsum-kpi-val { font-size: 20px; font-weight: 900; color: #0f172a; font-family: 'Inter', monospace; }
.atsum-kpi-lbl { font-size: 11px; color: #64748b; font-weight: 700; }
.atsum-table { width: 100%; border-collapse: collapse; font-size: 12.5px; background: #fff; }
.atsum-table th { background: linear-gradient(135deg, #1e293b, #334155); color: #fff; padding: 11px 9px; font-weight: 800; font-size: 11.5px; white-space: nowrap; border-bottom: 2px solid #0f172a; }
.atsum-table td { padding: 9px 9px; border-bottom: 1px solid #e2e8f0; vertical-align: middle; }
.atsum-table tbody tr:hover { background: #f8fafc; }
.atsum-table .atsum-cell-emerald { background: #ecfdf5; color: #065f46; font-weight: 700; text-align: center; }
.atsum-table .atsum-cell-blue { background: #eff6ff; color: #1e40af; font-weight: 700; text-align: center; }
.atsum-table .atsum-cell-indigo { background: #eef2ff; color: #3730a3; font-weight: 700; text-align: center; }
.atsum-table .atsum-cell-amber { background: #fffbeb; color: #92400e; font-weight: 700; text-align: center; }
.atsum-table .atsum-cell-orange { background: #fff7ed; color: #9a3412; font-weight: 700; text-align: center; }
.atsum-table .atsum-cell-cyan { background: #ecfeff; color: #155e75; font-weight: 700; text-align: center; }
.atsum-table .atsum-cell-rose { background: #fff1f2; color: #9f1239; font-weight: 700; text-align: center; }
.atsum-table .atsum-cell-red { background: #fef2f2; color: #991b1b; font-weight: 800; text-align: center; }
.atsum-table .atsum-cell-period { background: #f5f3ff; color: #5b21b6; font-weight: 800; text-align: center; }
.atsum-table .atsum-cell-override { box-shadow: inset 0 0 0 2px #f59e0b; position: relative; }
.atsum-table .atsum-cell-override::after { content: '✏️'; position: absolute; top: 1px; left: 2px; font-size: 9px; }
.atsum-table .atsum-foot td { background: #ecfdf5; color: #065f46; font-weight: 800; padding: 11px 9px; border-top: 2px solid #10b981; }
.atsum-auto-val { display: inline-block; font-size: 10px; color: #64748b; margin-inline-start: 4px; opacity: 0.7; }
.atsum-row-input { width: 64px; padding: 5px 7px; border: 1.5px solid #cbd5e1; border-radius: 6px; font-size: 12px; text-align: center; background: #fff; font-family: 'Inter', monospace; font-weight: 700; }
.atsum-row-input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
.atsum-act { display: inline-flex; gap: 4px; }
.atsum-editor-info { background: linear-gradient(135deg, #eff6ff, #ede9fe); border: 1px solid #c7d2fe; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: #1e293b; }
.atsum-editor-table { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 10px; }
/* Mobile ≤ 480px */
@media (max-width: 480px) {
.atsum-hero { padding: 16px; border-radius: 14px; }
.atsum-hero-title h1 { font-size: 18px; }
.atsum-hero-actions { width: 100%; }
.atsum-hero-btn { flex: 1; padding: 8px 10px; font-size: 11.5px; }
.atsum-hero-kpis { grid-template-columns: repeat(2, 1fr); }
.atsum-tabs { padding: 6px; }
.atsum-tab-btn { padding: 8px 11px; font-size: 11.5px; }
.atsum-tab { padding: 12px; }
.atsum-table { font-size: 11px; }
.atsum-table th, .atsum-table td { padding: 7px 5px; }
.atsum-row-input { width: 52px; padding: 4px 5px; font-size: 11px; }
}
/* ═══════════════════════════════════════════════════════════════════
PAYROLL (مسير الرواتب) — Phase C
═══════════════════════════════════════════════════════════════════ */
.pay-hero {
background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 60%, #4c1d95 100%);
color: #fff; border-radius: 18px; padding: 22px 24px; margin-bottom: 18px;
box-shadow: 0 14px 38px rgba(124,58,237,0.32);
}
.pay-hero-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.pay-hero-title { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 240px; }
.pay-hero-icon { font-size: 38px; background: rgba(255,255,255,0.18); border-radius: 14px; padding: 8px 12px; backdrop-filter: blur(8px); }
.pay-hero-title h1 { margin: 0; font-size: 22px; font-weight: 900; }
.pay-hero-title p { margin: 2px 0 0; font-size: 12px; opacity: 0.9; }
.pay-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pay-hero-btn {
background: rgba(255,255,255,0.92); color: #0f172a; border: 0;
border-radius: 10px; padding: 9px 16px; font-size: 12px; font-weight: 800;
cursor: pointer; transition: all 0.15s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.pay-hero-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.pay-hero-btn.primary { background: #facc15; color: #422006; }
.pay-hero-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 10px; }
.pay-hero-kpi { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22); border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; backdrop-filter: blur(6px); }
.pay-hero-kpi-ic { font-size: 22px; opacity: 0.95; }
.pay-hero-kpi-val { font-size: 18px; font-weight: 900; font-family: 'Inter', monospace; line-height: 1.1; }
.pay-hero-kpi-lbl { font-size: 10.5px; opacity: 0.88; font-weight: 700; margin-top: 2px; }
.pay-tabs-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 4px 12px rgba(15,23,42,0.04); margin-bottom: 14px; }
.pay-tabs { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid #e2e8f0; overflow-x: auto; }
.pay-tab-btn {
background: transparent; border: 0; padding: 10px 16px;
font-size: 13px; font-weight: 700; color: #64748b; cursor: pointer;
border-radius: 8px; white-space: nowrap; transition: all 0.15s ease;
}
.pay-tab-btn:hover { background: #f1f5f9; color: #0f172a; }
.pay-tab-btn.active { background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff; box-shadow: 0 2px 6px rgba(124,58,237,0.30); }
.pay-tab { padding: 18px; }
.pay-filter-bar { display: flex; gap: 8px; padding: 12px 18px; border-bottom: 1px solid #f1f5f9; flex-wrap: wrap; }
.pay-input { padding: 8px 12px; border: 1.5px solid #cbd5e1; border-radius: 8px; font-size: 12.5px; background: #fff; min-width: 140px; }
.pay-input:focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }
.pay-search { flex: 1; min-width: 200px; }
.pay-reset-btn { background: #f1f5f9; cursor: pointer; font-weight: 700; }
.pay-reset-btn:hover { background: #e2e8f0; }
.pay-info-banner { background: linear-gradient(135deg, #f5f3ff, #ede9fe); border: 1px solid #c4b5fd; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 12.5px; color: #5b21b6; }
.pay-empty { text-align: center; padding: 60px 20px; color: #94a3b8; font-size: 14px; }
/* Tables */
.pay-table { width: 100%; border-collapse: collapse; font-size: 12.5px; background: #fff; }
.pay-table th { background: linear-gradient(135deg, #1e293b, #334155); color: #fff; padding: 11px 9px; font-weight: 800; font-size: 11.5px; white-space: nowrap; border-bottom: 2px solid #0f172a; }
.pay-table td { padding: 9px 9px; border-bottom: 1px solid #e2e8f0; vertical-align: middle; }
.pay-table tbody tr:hover { background: #f8fafc; }
.pay-table .pay-foot td { background: #f5f3ff; color: #5b21b6; font-weight: 800; padding: 11px 9px; border-top: 2px solid #a78bfa; }
.pay-table-sm { font-size: 11.5px; }
.pay-table-sm th, .pay-table-sm td { padding: 7px 8px; }
.pay-audited { background: #fffbeb !important; }
/* Cell colors */
.pay-cell-emerald { background: #ecfdf5; color: #065f46; font-weight: 700; text-align: center; }
.pay-cell-blue { background: #eff6ff; color: #1e40af; font-weight: 700; text-align: center; }
.pay-cell-indigo { background: #eef2ff; color: #3730a3; font-weight: 700; text-align: center; }
.pay-cell-purple { background: #f5f3ff; color: #6b21a8; font-weight: 700; text-align: center; }
.pay-cell-cyan { background: #ecfeff; color: #155e75; font-weight: 700; text-align: center; }
.pay-cell-amber { background: #fffbeb; color: #92400e; font-weight: 700; text-align: center; }
.pay-cell-orange { background: #fff7ed; color: #9a3412; font-weight: 700; text-align: center; }
.pay-cell-rose { background: #fff1f2; color: #9f1239; font-weight: 700; text-align: center; }
.pay-cell-red { background: #fef2f2; color: #991b1b; font-weight: 700; text-align: center; }
.pay-cell-override { box-shadow: inset 0 0 0 2px #f59e0b; position: relative; }
/* Header color hints */
.pay-th-blue { background: linear-gradient(135deg, #1e40af, #3730a3) !important; }
.pay-th-emerald { background: linear-gradient(135deg, #065f46, #047857) !important; }
.pay-th-purple { background: linear-gradient(135deg, #6b21a8, #7c3aed) !important; }
.pay-th-rose { background: linear-gradient(135deg, #9f1239, #be123c) !important; }
.pay-th-cyan { background: linear-gradient(135deg, #155e75, #0891b2) !important; }
.pay-th-amber { background: linear-gradient(135deg, #92400e, #b45309) !important; }
.pay-th-orange { background: linear-gradient(135deg, #9a3412, #c2410c) !important; }
.pay-th-red { background: linear-gradient(135deg, #991b1b, #b91c1c) !important; }
.pay-th-teal { background: linear-gradient(135deg, #115e59, #0d9488) !important; }
.pay-th-violet { background: linear-gradient(135deg, #5b21b6, #7c3aed) !important; }
.pay-cell-violet { background: #f5f3ff; color: #5b21b6; font-weight: 700; text-align: center; }
/* Actions */
.pay-act { white-space: nowrap; }
.pay-act-btn { background: transparent; border: 0; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; margin: 0 1px; transition: all 0.12s; }
.pay-act-edit { color: #3b82f6; } .pay-act-edit:hover { background: #dbeafe; }
.pay-act-print { color: #6366f1; } .pay-act-print:hover { background: #e0e7ff; }
.pay-act-del { color: #ef4444; } .pay-act-del:hover { background: #fee2e2; }
.pay-audit-btn { background: transparent; border: 1.5px solid #cbd5e1; padding: 4px 8px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.pay-audit-btn.on { background: #fef3c7; border-color: #f59e0b; }
/* KPIs in summary tab */
.pay-summary-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 10px; margin-bottom: 14px; }
.pay-kpi { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; text-align: center; box-shadow: 0 2px 4px rgba(15,23,42,0.04); }
.pay-kpi-ic { font-size: 22px; margin-bottom: 4px; }
.pay-kpi-val { font-size: 16px; font-weight: 900; color: #0f172a; font-family: 'Inter', monospace; }
.pay-kpi-lbl { font-size: 10.5px; color: #64748b; font-weight: 700; margin-top: 2px; }
.pay-kpi-blue { border-top: 3px solid #3b82f6; }
.pay-kpi-cyan { border-top: 3px solid #06b6d4; }
.pay-kpi-emerald { border-top: 3px solid #10b981; }
.pay-kpi-green { border-top: 3px solid #22c55e; }
.pay-kpi-purple { border-top: 3px solid #7c3aed; }
.pay-kpi-teal { border-top: 3px solid #14b8a6; }
.pay-kpi-rose { border-top: 3px solid #f43f5e; }
.pay-kpi-amber { border-top: 3px solid #f59e0b; }
.pay-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px,1fr)); gap: 14px; }
.pay-summary-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.pay-summary-h { padding: 12px 16px; color: #fff; font-weight: 800; font-size: 13px; }
.pay-h-emerald { background: linear-gradient(135deg, #059669, #14b8a6); }
.pay-h-rose { background: linear-gradient(135deg, #be123c, #ef4444); }
/* Editor modal */
.pay-editor-info { background: linear-gradient(135deg, #ecfeff, #f5f3ff); border-bottom: 1px solid #c4b5fd; padding: 10px 16px; display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: #1e293b; }
.pay-editor-body { flex: 1; overflow: auto; padding: 12px; background: #f8fafc; }
.pay-editor-table { width: 100%; border-collapse: collapse; min-width: 2400px; font-size: 11.5px; background: #fff; }
.pay-editor-table th { padding: 8px 6px; color: #fff; font-weight: 800; font-size: 11px; white-space: nowrap; position: sticky; top: 0; z-index: 5; background: linear-gradient(135deg, #1e293b, #334155); }
.pay-editor-table td { padding: 5px 4px; border-bottom: 1px solid #e2e8f0; vertical-align: middle; text-align: center; font-size: 11.5px; }
.pay-editor-table tbody tr:hover { background: #f8fafc; }
.pay-row-input { width: 80px; padding: 4px 6px; border: 1.5px solid #cbd5e1; border-radius: 5px; font-size: 11.5px; text-align: center; background: #fff; font-family: 'Inter', monospace; font-weight: 700; }
.pay-row-input:focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 2px rgba(124,58,237,0.15); }
.pay-cell-meta { display: flex; gap: 2px; justify-content: center; margin-top: 2px; }
.pay-auto-badge { display: inline-block; font-size: 9px; padding: 1px 4px; border-radius: 4px; font-weight: 700; }
.pay-auto-bot { background: #d1fae5; color: #065f46; }
.pay-auto-edit { background: #fef3c7; color: #92400e; }
.pay-reset-mini { background: #dbeafe; color: #1e40af; border: 0; border-radius: 4px; padding: 1px 4px; font-size: 9px; cursor: pointer; font-weight: 800; }
.pay-row-audited { background: #fffbeb !important; }
.pay-editor-table .pay-foot td { background: #f5f3ff; color: #5b21b6; font-weight: 800; border-top: 2px solid #a78bfa; padding: 9px 5px; position: sticky; bottom: 0; }
/* Mobile ≤ 480px */
@media (max-width: 480px) {
.pay-hero { padding: 16px; border-radius: 14px; }
.pay-hero-title h1 { font-size: 18px; }
.pay-hero-actions { width: 100%; }
.pay-hero-btn { flex: 1; padding: 8px 10px; font-size: 11.5px; }
.pay-hero-kpis { grid-template-columns: repeat(2, 1fr); }
.pay-tabs { padding: 6px; }
.pay-tab-btn { padding: 8px 11px; font-size: 11.5px; }
.pay-tab { padding: 12px; }
.pay-table { font-size: 11px; }
.pay-table th, .pay-table td { padding: 7px 5px; }
.pay-input { min-width: unset; flex: 1; }
}
/* Employees screen — Dynamic filter KPI highlight */
.emp-kpi { transition: all 0.2s ease; }
.emp-kpi.filter { background: rgba(252, 211, 77, 0.22); border-radius: 8px; padding: 6px 4px; box-shadow: 0 0 0 2px rgba(252, 211, 77, 0.45) inset; }
.emp-kpi.filter .emp-kpi-icon { animation: empKpiPulse 1.6s ease-in-out infinite; }
@keyframes empKpiPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
/* ═══════════════════════════════════════════════════════════════════
Collapsible Sidebar — RTL/LTR aware, mobile drawer preserved
═══════════════════════════════════════════════════════════════════ */
:root { --sidebar-w-collapsed: 72px; }
body.sidebar-collapsed { --sidebar-w: var(--sidebar-w-collapsed); }
body.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); }
/* When collapsed: hide all text labels — keep icons visible */
body.sidebar-collapsed .sidebar-brand-name,
body.sidebar-collapsed .sidebar-brand-sub,
body.sidebar-collapsed .sidebar-item > span:not(.text-lg),
body.sidebar-collapsed .sidebar-item > span[data-i18n],
body.sidebar-collapsed .sidebar-section > span[data-i18n],
body.sidebar-collapsed .sidebar-section > span:first-child,
body.sidebar-collapsed .sidebar-arrow {
opacity: 0;
width: 0;
overflow: hidden;
white-space: nowrap;
pointer-events: none;
transition: opacity 0.18s ease;
}
body.sidebar-collapsed .sidebar-header { padding: 14px 0; display: flex; justify-content: center; }
body.sidebar-collapsed .sidebar-brand { gap: 0; justify-content: center; }
body.sidebar-collapsed .sidebar-brand-logo { width: 40px; height: 40px; font-size: 18px; }
body.sidebar-collapsed .sidebar-item {
justify-content: center;
padding: 12px 8px;
margin: 3px 8px;
}
body.sidebar-collapsed .sidebar-section {
justify-content: center;
padding: 8px 0;
margin: 8px 4px 4px;
border-top: 1px solid rgba(255,255,255,0.12);
}
body.sidebar-collapsed .sidebar-section::before {
content: '•••';
display: block;
font-size: 11px;
color: rgba(255,255,255,0.5);
letter-spacing: 2px;
}
/* Collapsed: disable hover-shift (no room to slide) */
body.sidebar-collapsed .sidebar-item:hover { transform: none !important; }
/* Tooltip when collapsed (uses data-i18n text as backup) */
body.sidebar-collapsed .sidebar-item { position: relative; }
body.sidebar-collapsed .sidebar-item::after {
content: attr(data-tooltip);
position: absolute;
top: 50%; transform: translateY(-50%);
background: #0f172a; color: #fff;
font-size: 12px; font-weight: 700;
padding: 6px 12px; border-radius: 8px;
white-space: nowrap;
opacity: 0; visibility: hidden;
pointer-events: none;
transition: opacity 0.14s ease, transform 0.14s ease;
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
z-index: 100;
}
html[dir="rtl"] body.sidebar-collapsed .sidebar-item::after { right: 100%; margin-right: 12px; }
html[dir="ltr"] body.sidebar-collapsed .sidebar-item::after { left: 100%; margin-left: 12px; }
body.sidebar-collapsed .sidebar-item:hover::after { opacity: 1; visibility: visible; }
/* The "rail" collapse button — sits on the inner edge of the sidebar */
.sidebar-rail-btn {
position: absolute;
top: 78px;
width: 28px; height: 28px;
/* v0.37.9.509 — matches the active company's sidebar theme (same gradient) */
background: var(--sidebar-bg, #082f49);
color: #fff;
border: 2px solid rgba(255,255,255,0.9);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0,0,0,0.3);
z-index: 50;
font-size: 14px;
font-weight: 800;
transition: transform 0.25s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.sidebar-rail-btn:hover {
filter: brightness(1.25);
box-shadow: 0 6px 18px rgba(0,0,0,0.36);
transform: scale(1.12);
}
/* Position on the INNER edge (toward the content) */
html[dir="rtl"] .sidebar-rail-btn { left: -14px; }
html[dir="ltr"] .sidebar-rail-btn { right: -14px; }
/* Arrow rotates depending on state + direction */
.sidebar-rail-btn .rail-arrow { display: inline-block; transition: transform 0.3s cubic-bezier(0.5,0,0.2,1); }
html[dir="rtl"] body:not(.sidebar-collapsed) .sidebar-rail-btn .rail-arrow { transform: rotate(0deg); }
html[dir="rtl"] body.sidebar-collapsed .sidebar-rail-btn .rail-arrow { transform: rotate(180deg); }
html[dir="ltr"] body:not(.sidebar-collapsed) .sidebar-rail-btn .rail-arrow { transform: rotate(180deg); }
html[dir="ltr"] body.sidebar-collapsed .sidebar-rail-btn .rail-arrow { transform: rotate(0deg); }
/* Smooth sidebar width transition on desktop */
@media (min-width: 1025px) {
.sidebar, .app-layout { transition: grid-template-columns 0.28s cubic-bezier(0.5,0,0.2,1); }
body { transition: none; }
.sidebar { transition: width 0.28s cubic-bezier(0.5,0,0.2,1); }
}
/* Hide rail button on mobile (drawer pattern continues) */
@media (max-width: 1024px) {
.sidebar-rail-btn { display: none; }
body.sidebar-collapsed { --sidebar-w: 280px; } /* mobile ignores collapsed state */
}
/* When collapsed, hide the toggle group dropdowns to keep things clean */
body.sidebar-collapsed .sidebar-group { display: none; }
body.sidebar-collapsed .sidebar-group.is-flyout {
display: block;
position: absolute;
background: var(--sidebar-bg, #1e293b);
border-radius: 10px;
padding: 8px;
min-width: 220px;
box-shadow: 0 12px 40px rgba(0,0,0,0.35);
z-index: 90;
}
html[dir="rtl"] body.sidebar-collapsed .sidebar-group.is-flyout { right: calc(100% + 8px); }
html[dir="ltr"] body.sidebar-collapsed .sidebar-group.is-flyout { left: calc(100% + 8px); }
/* ═══════════════════════════════════════════════════════════════════
Searchable-select popup
═══════════════════════════════════════════════════════════════════ */
.searchable-popup {
position: absolute;
z-index: 10001;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 16px 48px rgba(15,23,42,0.22), 0 2px 6px rgba(15,23,42,0.08);
display: flex; flex-direction: column;
max-width: 460px;
max-height: min(380px, 70vh);
opacity: 0;
transform: translateY(-4px) scale(0.98);
transition: opacity 0.14s ease, transform 0.18s cubic-bezier(0.4,0,0.2,1);
overflow: hidden;
font-family: inherit;
}
.searchable-popup.ss-open { opacity: 1; transform: translateY(0) scale(1); }
.searchable-popup.ss-above { transform-origin: bottom; }
.searchable-popup.ss-below { transform-origin: top; }
.searchable-popup .ss-search-row {
display: flex; align-items: center; gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid #f1f5f9;
background: linear-gradient(180deg, #f8fafc, #fff);
}
.searchable-popup .ss-search-icon { font-size: 14px; opacity: 0.7; }
.searchable-popup .ss-search-input {
flex: 1;
border: 1.5px solid #cbd5e1;
border-radius: 8px;
padding: 7px 11px;
font-size: 13px;
outline: none;
background: #fff;
font-family: inherit;
font-weight: 600;
color: #0f172a;
transition: border-color 0.12s, box-shadow 0.12s;
}
.searchable-popup .ss-search-input:focus {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
.searchable-popup .ss-clear-btn {
background: #f1f5f9; border: 0; padding: 5px 9px;
border-radius: 7px; font-size: 11px; cursor: pointer;
color: #64748b; font-weight: 800;
transition: all 0.12s;
}
.searchable-popup .ss-clear-btn:hover { background: #e2e8f0; color: #0f172a; }
.searchable-popup .ss-list {
overflow-y: auto; overflow-x: hidden;
flex: 1 1 auto;
padding: 4px;
scrollbar-width: thin;
}
.searchable-popup .ss-list::-webkit-scrollbar { width: 7px; }
.searchable-popup .ss-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.searchable-popup .ss-opt {
display: flex; align-items: center; gap: 8px;
width: 100%;
padding: 8px 10px;
border: 0; background: transparent;
border-radius: 7px;
cursor: pointer;
text-align: start;
font-size: 12.5px;
font-weight: 600;
color: #0f172a;
transition: background 0.08s;
font-family: inherit;
}
.searchable-popup .ss-opt:hover { background: #f1f5f9; }
.searchable-popup .ss-opt-active { background: linear-gradient(90deg, #eef2ff, #f5f3ff); box-shadow: inset 0 0 0 1.5px #c7d2fe; }
.searchable-popup .ss-opt-selected { background: #dcfce7; color: #065f46; }
.searchable-popup .ss-opt-selected.ss-opt-active { background: #bbf7d0; }
.searchable-popup .ss-opt-disabled { opacity: 0.5; cursor: not-allowed; }
.searchable-popup .ss-opt mark {
background: #fde68a; color: #78350f;
padding: 0 2px; border-radius: 3px;
font-weight: 800;
}
.searchable-popup .ss-check { color: #10b981; font-weight: 900; width: 14px; flex: 0 0 14px; text-align: center; }
.searchable-popup .ss-check-space { width: 14px; flex: 0 0 14px; }
.searchable-popup .ss-opt-label { flex: 1 1 auto; }
.searchable-popup .ss-group-tag {
font-size: 10px; padding: 2px 6px;
background: #f1f5f9; color: #64748b;
border-radius: 5px; font-weight: 700;
flex: 0 0 auto;
}
.searchable-popup .ss-empty {
padding: 28px 12px;
text-align: center;
color: #94a3b8;
font-size: 13px;
font-weight: 600;
}
.searchable-popup .ss-footer {
display: flex; gap: 14px;
padding: 8px 12px;
border-top: 1px solid #f1f5f9;
background: #f8fafc;
font-size: 10.5px;
color: #64748b;
font-weight: 600;
}
.searchable-popup .ss-footer kbd {
background: #fff;
border: 1px solid #cbd5e1;
border-bottom-width: 2px;
border-radius: 4px;
padding: 1px 5px;
font-family: 'Inter', monospace;
font-size: 10px;
font-weight: 800;
color: #0f172a;
margin: 0 1px;
}
/* Mobile tweaks */
@media (max-width: 600px) {
.searchable-popup {
position: fixed !important;
left: 8px !important; right: 8px !important;
bottom: 8px !important; top: auto !important;
max-width: none;
max-height: 60vh;
border-radius: 14px 14px 8px 8px;
}
.searchable-popup .ss-footer { display: none; }
}
/* Locked date field (business-rule locks in employee modal) */
input.field-locked {
background: #fef2f2 !important;
color: #991b1b !important;
cursor: not-allowed !important;
border-color: #fca5a5 !important;
box-shadow: inset 0 0 0 1.5px #fecaca;
}
input.field-locked:focus { outline: none !important; }
.form-field .lock-hint {
background: #fee2e2;
border-radius: 6px;
padding: 4px 8px;
font-size: 11px;
}
/* Work days picker — 7 chips on one row (employee modal) */
.emp-workdays-row {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
margin-top: 6px;
}
.emp-workday-chip {
display: flex; align-items: center; justify-content: center; gap: 6px;
background: #f1f5f9; border: 1.5px solid #cbd5e1;
border-radius: 10px; padding: 8px 6px;
font-size: 12px; font-weight: 700; color: #64748b;
cursor: pointer; transition: all 0.15s ease;
user-select: none;
text-align: center;
}
.emp-workday-chip input { width: 14px; height: 14px; accent-color: #f97316; }
.emp-workday-chip:hover { border-color: #94a3b8; background: #e2e8f0; }
.emp-workday-chip.checked {
background: linear-gradient(135deg, #f97316, #ea580c);
color: #fff; border-color: #c2410c;
box-shadow: 0 2px 6px rgba(249,115,22,0.35);
}
@media (max-width: 600px) {
.emp-workdays-row { grid-template-columns: repeat(4, 1fr); }
.emp-workday-chip { padding: 7px 4px; font-size: 11px; }
}
/* ═══════════════════════════════════════════════════════════════════
COST CENTERS SCREEN
═══════════════════════════════════════════════════════════════════ */
.cc-hero {
background: linear-gradient(135deg, #0e7490 0%, #0891b2 60%, #06b6d4 100%);
color: #fff; border-radius: 18px; padding: 22px 24px; margin-bottom: 18px;
box-shadow: 0 14px 38px rgba(8,145,178,0.32);
}
.cc-hero-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.cc-hero-title { display: flex; align-items: center; gap: 14px; }
.cc-hero-icon { font-size: 38px; background: rgba(255,255,255,0.18); border-radius: 14px; padding: 8px 12px; }
.cc-hero-title h1 { margin: 0; font-size: 22px; font-weight: 900; }
.cc-hero-title p { margin: 2px 0 0; font-size: 12px; opacity: 0.9; }
.cc-hero-btn { background: #fff; color: #0e7490; border: 0; border-radius: 10px; padding: 9px 16px; font-size: 12px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.cc-hero-btn.primary { background: #facc15; color: #422006; }
.cc-hero-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 10px; }
.cc-hero-kpi { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22); border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.cc-hero-kpi.warn { background: rgba(254,243,199,0.25); border-color: #fde047; }
.cc-hero-kpi-ic { font-size: 22px; }
.cc-hero-kpi-val { font-size: 16px; font-weight: 900; font-family: 'Inter', monospace; }
.cc-hero-kpi-lbl { font-size: 10.5px; opacity: 0.88; font-weight: 700; }
.cc-tabs-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 4px 12px rgba(15,23,42,0.04); margin-bottom: 14px; overflow: hidden; }
.cc-tabs { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid #e2e8f0; }
.cc-tab-btn { background: transparent; border: 0; padding: 10px 16px; font-size: 13px; font-weight: 700; color: #64748b; cursor: pointer; border-radius: 8px; }
.cc-tab-btn:hover { background: #f1f5f9; color: #0f172a; }
.cc-tab-btn.active { background: linear-gradient(135deg, #0e7490, #0891b2); color: #fff; }
.cc-tab-body { padding: 16px; }
.cc-tree-toolbar { display: flex; gap: 8px; margin-bottom: 12px; }
.cc-tree { background: #f8fafc; border-radius: 10px; padding: 10px; }
.cc-tree-node { border-radius: 8px; }
.cc-tree-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: #fff; border: 1px solid #e2e8f0; margin-bottom: 4px; font-size: 13px; }
.cc-tree-row:hover { background: #f1f5f9; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
.cc-tree-node.leaf > .cc-tree-row { background: #ecfdf5; border-color: #6ee7b7; }
.cc-tree-node.inactive > .cc-tree-row { opacity: 0.55; }
.cc-tree-toggle { width: 18px; text-align: center; cursor: pointer; font-weight: 800; color: #475569; user-select: none; }
.cc-tree-toggle.placeholder { color: #cbd5e1; cursor: default; }
.cc-tree-icon { font-size: 16px; }
.cc-tree-code { font-family: monospace; font-weight: 800; color: #0e7490; }
.cc-tree-name { flex: 1; font-weight: 700; color: #0f172a; }
.cc-tree-amt { font-size: 11px; padding: 3px 7px; border-radius: 5px; font-weight: 800; font-family: monospace; }
.cc-tree-amt.cc-rev { background: #d1fae5; color: #065f46; }
.cc-tree-amt.cc-exp { background: #fee2e2; color: #991b1b; }
.cc-tree-actions { display: flex; gap: 4px; }
.cc-tree-children { margin: 0; padding: 0; }
.cc-act-btn { background: transparent; border: 0; padding: 4px 7px; border-radius: 6px; cursor: pointer; font-size: 14px; transition: all 0.12s; }
.cc-act-btn.add { color: #16a34a; } .cc-act-btn.add:hover { background: #dcfce7; }
.cc-act-btn.edit { color: #3b82f6; } .cc-act-btn.edit:hover { background: #dbeafe; }
.cc-act-btn.delete { color: #ef4444; } .cc-act-btn.delete:hover { background: #fee2e2; }
.cc-act-btn.dist { color: #7c3aed; background: #f3e8ff; padding: 6px 10px; font-size: 16px; }
.cc-act-btn.dist:hover { background: #ddd6fe; transform: scale(1.1); }
.cc-empty { text-align: center; padding: 50px; color: #94a3b8; font-size: 14px; }
.cc-filter-bar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.cc-input { padding: 8px 12px; border: 1.5px solid #cbd5e1; border-radius: 8px; font-size: 12.5px; background: #fff; min-width: 150px; }
.cc-reset { cursor: pointer; background: #f1f5f9; font-weight: 700; }
.cc-lines-summary { display: flex; gap: 16px; padding: 12px; background: #f8fafc; border-radius: 10px; margin-bottom: 12px; font-size: 12.5px; flex-wrap: wrap; }
.cc-lines-summary .ok { color: #065f46; }
.cc-lines-summary .warn { color: #b45309; }
.cc-table-wrap { overflow-x: auto; border-radius: 10px; }
.cc-table { width: 100%; border-collapse: collapse; font-size: 12.5px; background: #fff; }
.cc-table th { background: linear-gradient(135deg, #0e7490, #0891b2); color: #fff; padding: 10px 8px; font-weight: 800; font-size: 11.5px; white-space: nowrap; }
.cc-table td { padding: 9px 8px; border-bottom: 1px solid #e2e8f0; }
.cc-table td.num { font-family: monospace; font-weight: 700; text-align: end; }
.cc-table td.cc-cell-ok { background: #ecfdf5; color: #065f46; }
.cc-table td.cc-cell-warn { background: #fffbeb; color: #92400e; }
.cc-table tr.cc-allocated { background: #f0fdf4; }
.cc-table tr:hover { background: #f8fafc; }
.cc-table .mono { font-family: monospace; }
/* Distribution modal */
.cc-dist-body { background: #f8fafc; }
.cc-dist-info { background: #fff; border: 1px solid #c4b5fd; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.cc-dist-summary { margin-bottom: 12px; }
.cc-dist-meter { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 10px 14px; display: flex; gap: 14px; align-items: center; font-size: 12.5px; flex-wrap: wrap; }
.cc-dist-meter.ok { background: #ecfdf5; border-color: #6ee7b7; }
.cc-dist-meter.short { background: #fffbeb; border-color: #fcd34d; }
.cc-dist-meter.over { background: #fee2e2; border-color: #fca5a5; }
.cc-dist-meter .mono { font-family: monospace; font-weight: 800; }
.cc-badge { font-size: 11px; padding: 3px 8px; border-radius: 6px; font-weight: 800; margin-inline-start: auto; }
.cc-badge.ok { background: #10b981; color: #fff; }
.cc-badge.short { background: #f59e0b; color: #fff; }
.cc-badge.over { background: #ef4444; color: #fff; }
.cc-dist-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; font-size: 12px; }
.cc-dist-table th { background: #f1f5f9; padding: 9px 7px; font-weight: 800; color: #475569; }
.cc-dist-table td { padding: 6px 5px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.cc-dist-table input, .cc-dist-table select { padding: 5px 8px; border: 1.5px solid #cbd5e1; border-radius: 6px; font-size: 12px; background: #fff; width: 100%; box-sizing: border-box; }
.cc-dist-table .cc-dist-pct, .cc-dist-table .cc-dist-amt { text-align: end; font-family: monospace; font-weight: 700; }
.cc-dist-helpers { display: flex; gap: 8px; }
/* Cost-center button inside journal line */
.action-btn.cc-jv-dist { background: #f3e8ff; color: #7c3aed; padding: 4px 8px; font-size: 13px; margin-inline-end: 2px; transition: all 0.12s; }
.action-btn.cc-jv-dist:hover { background: #ddd6fe; transform: scale(1.1); }
.action-btn.cc-jv-dist.allocated { background: #d1fae5; color: #065f46; }
.action-btn.cc-jv-dist.allocated::after { content: '✓'; margin-inline-start: 2px; }
/* ═══════════════════════════════════════════════════════════════════════
Cost Centers — Enhanced Hero KPIs + Filter Pro + Export
═══════════════════════════════════════════════════════════════════════ */
/* 2-row hero KPIs: 4 columns on wide screens, scales down nicely */
.cc-hero-kpis-2row { grid-template-columns: repeat(4, 1fr); }
.cc-hero-kpi.rev { background: linear-gradient(135deg, rgba(16,185,129,0.22), rgba(5,150,105,0.22)); border-color: rgba(110,231,183,0.5); }
.cc-hero-kpi.rev-ok { background: linear-gradient(135deg, rgba(34,197,94,0.25), rgba(22,163,74,0.25)); border-color: rgba(134,239,172,0.6); }
.cc-hero-kpi.exp { background: linear-gradient(135deg, rgba(239,68,68,0.22), rgba(220,38,38,0.22)); border-color: rgba(252,165,165,0.5); }
.cc-hero-kpi.exp-ok { background: linear-gradient(135deg, rgba(244,114,182,0.22), rgba(219,39,119,0.22)); border-color: rgba(251,182,206,0.5); }
@media (max-width: 1100px) { .cc-hero-kpis-2row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cc-hero-kpis-2row { grid-template-columns: 1fr; } }
/* Active filter chips */
.cc-active-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: rgba(255,255,255,0.14); padding: 8px 12px; border-radius: 10px; margin: 8px 0; font-size: 11.5px; }
.cc-chips-lbl { color: #facc15; font-weight: 800; }
.cc-chip { background: rgba(255,255,255,0.22); border: 1px solid rgba(255,255,255,0.32); padding: 3px 9px; border-radius: 12px; color: #fff; font-weight: 700; }
.cc-chip-clear { margin-inline-start: auto; background: #ef4444; color: #fff; border: 0; padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 800; cursor: pointer; }
.cc-chip-clear:hover { background: #dc2626; }
/* Filter bar — pro */
.cc-filter-bar-pro { padding: 12px; background: linear-gradient(135deg, #f0f9ff, #ecfeff); border: 1px solid #bae6fd; border-radius: 12px; margin: 12px; display: flex; flex-direction: column; gap: 10px; }
.cc-filter-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cc-filter-adv { background: rgba(255,255,255,0.6); border: 1px dashed #93c5fd; border-radius: 10px; padding: 10px; }
.cc-adv-toggle { background: linear-gradient(135deg, #6366f1, #4f46e5) !important; color: #fff !important; border-color: #4f46e5 !important; cursor: pointer; font-weight: 800; }
.cc-adv-toggle.is-open { background: linear-gradient(135deg, #4f46e5, #4338ca) !important; }
.cc-date-presets { display: flex; gap: 4px; flex-wrap: wrap; }
.cc-mini-btn { background: #fff; border: 1px solid #cbd5e1; border-radius: 6px; padding: 5px 10px; font-size: 11px; font-weight: 700; color: #475569; cursor: pointer; transition: all 0.12s; }
.cc-mini-btn:hover { background: #0891b2; color: #fff; border-color: #0e7490; }
/* Export buttons */
.cc-filter-export { justify-content: flex-end; padding-top: 6px; border-top: 1px dashed #bae6fd; }
.cc-export-group { display: flex; gap: 6px; }
.cc-export-btn { padding: 7px 13px; border: 0; border-radius: 8px; font-size: 12px; font-weight: 800; cursor: pointer; color: #fff; transition: all 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.cc-export-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.15); }
.cc-export-btn.excel { background: linear-gradient(135deg, #10b981, #059669); }
.cc-export-btn.csv { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.cc-export-btn.pdf { background: linear-gradient(135deg, #ef4444, #dc2626); }
.cc-export-btn.print { background: linear-gradient(135deg, #64748b, #475569); }
/* Tree filter results count */
.cc-tree-count { margin-inline-start: auto; font-size: 11.5px; color: #0891b2; font-weight: 800; padding: 4px 10px; background: #ecfeff; border-radius: 6px; border: 1px solid #a5f3fc; }
/* Lines summary — pct chip */
.cc-lines-summary .cc-pct { margin-inline-start: auto; background: #0891b2; color: #fff; padding: 3px 10px; border-radius: 6px; font-weight: 800; }
/* Row tinting for partial/unallocated */
.cc-table tr.cc-unallocated { background: #fffbeb; }
.cc-table tr.cc-partial { background: #fef3c7; }
/* Combined tab — summary cards */
.cc-combined-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
@media (max-width: 900px) { .cc-combined-summary { grid-template-columns: 1fr; } }
.cc-cs-card { padding: 14px 16px; border-radius: 12px; border: 1.5px solid; position: relative; overflow: hidden; }
.cc-cs-card .cc-cs-hdr { font-size: 13px; font-weight: 800; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1.5px dashed currentColor; opacity: 0.85; }
.cc-cs-card .cc-cs-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 12px; }
.cc-cs-card .cc-cs-row strong { font-family: monospace; font-size: 13.5px; }
.cc-cs-card .cc-cs-row.ok { color: #065f46; }
.cc-cs-card .cc-cs-row.warn { color: #92400e; }
.cc-cs-card .cc-cs-pct { position: absolute; top: 10px; inset-inline-end: 12px; font-size: 11.5px; font-weight: 800; background: rgba(255,255,255,0.7); padding: 2px 9px; border-radius: 8px; }
.cc-cs-rev { background: linear-gradient(135deg, #ecfdf5, #d1fae5); border-color: #6ee7b7; color: #065f46; }
.cc-cs-exp { background: linear-gradient(135deg, #fef2f2, #fee2e2); border-color: #fca5a5; color: #991b1b; }
.cc-cs-net { background: linear-gradient(135deg, #eff6ff, #dbeafe); border-color: #93c5fd; color: #1e3a8a; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.cc-cs-net.positive { background: linear-gradient(135deg, #ecfeff, #cffafe); border-color: #67e8f9; color: #155e75; }
.cc-cs-net.negative { background: linear-gradient(135deg, #fff7ed, #ffedd5); border-color: #fdba74; color: #9a3412; }
.cc-cs-net .cc-cs-net-val { font-family: monospace; font-size: 26px; font-weight: 900; margin: 6px 0; }
.cc-cs-net .cc-cs-net-lbl { font-size: 12px; font-weight: 800; opacity: 0.85; padding: 3px 12px; border-radius: 10px; background: rgba(255,255,255,0.6); }
.cc-cs-net .cc-cs-count { font-size: 10.5px; margin-top: 8px; opacity: 0.7; }
/* Kind badge (combined tab) */
.cc-kind-badge { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.cc-kind-badge.rev { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.cc-kind-badge.exp { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.cc-table tr.cc-row-revenue td:first-child { border-inline-start: 3px solid #10b981; }
.cc-table tr.cc-row-expense td:first-child { border-inline-start: 3px solid #ef4444; }
/* Company cell + source badge */
.cc-cell-company { font-size: 11.5px; color: #0f172a; max-width: 180px; }
.cc-com-code { background: #0891b2; color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 800; }
.cc-com-name { font-weight: 700; }
.cc-src-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 800; padding: 3px 7px; border-radius: 6px; white-space: nowrap; background: #f1f5f9; color: #475569; }
.cc-src-manual { background: #e0e7ff; color: #3730a3; }
.cc-src-opening { background: #fef3c7; color: #92400e; }
.cc-src-sales-invoice { background: #d1fae5; color: #065f46; }
.cc-src-receipt { background: #dbeafe; color: #1e40af; }
.cc-src-payment { background: #fee2e2; color: #991b1b; }
.cc-src-transfer { background: #fce7f3; color: #9d174d; }
.cc-src-fixed-asset { background: #f3e8ff; color: #5b21b6; }
/* ═══════════════════════════════════════════════════════════════════════
OFFICIAL LETTERS ISSUANCE SCREEN
═══════════════════════════════════════════════════════════════════════ */
.ol-hero {
background: linear-gradient(135deg, #15803d 0%, #0e7490 60%, #1e40af 100%);
color: #fff; border-radius: 14px; padding: 18px 22px; margin-bottom: 14px;
box-shadow: 0 8px 20px -8px rgba(0,0,0,0.2);
}
.ol-hero-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.ol-hero-title { display: flex; align-items: center; gap: 14px; }
.ol-hero-icon { font-size: 36px; background: rgba(255,255,255,0.18); border-radius: 12px; padding: 8px 14px; }
.ol-hero h2 { font-size: 20px; font-weight: 900; margin: 0; }
.ol-hero p { font-size: 12px; opacity: 0.92; margin: 4px 0 0; }
.ol-hero-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 14px; }
.ol-kpi {
display: flex; align-items: center; gap: 10px;
background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.24);
border-radius: 10px; padding: 10px 14px;
}
.ol-kpi-ic { font-size: 22px; }
.ol-kpi-lbl { font-size: 10.5px; opacity: 0.88; font-weight: 700; }
.ol-kpi-val { font-size: 22px; font-weight: 900; font-family: 'Courier New', monospace; direction: ltr; }
.ol-tabs {
display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 8px; margin-bottom: 14px;
}
.ol-tab {
background: #fff; border: 2px solid #e2e8f0; border-radius: 10px;
padding: 10px 12px; display: flex; align-items: center; gap: 10px; cursor: pointer;
transition: all 0.2s; font-size: 12.5px; font-weight: 700; color: #475569;
}
.ol-tab:hover { border-color: var(--c); transform: translateY(-1px); box-shadow: 0 4px 12px -4px rgba(0,0,0,0.08); }
.ol-tab.active {
background: var(--c); color: #fff; border-color: transparent;
box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--c) 40%, transparent);
}
.ol-tab-ic { font-size: 18px; }
.ol-tab-badge {
margin-inline-start: auto;
background: rgba(255,255,255,0.25); padding: 2px 8px; border-radius: 999px;
font-weight: 900; font-size: 11px; min-width: 24px; text-align: center;
}
.ol-tab:not(.active) .ol-tab-badge { background: #f1f5f9; color: #0f172a; }
.ol-input {
width: 100%; padding: 7px 10px; border: 1.5px solid #cbd5e1;
border-radius: 6px; font-size: 12px; background: #fff;
}
.ol-input:focus { outline: 2px solid #15803d; outline-offset: -1px; border-color: #15803d; }
.ol-table th { font-size: 11px; }
.ol-type-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 700;
}
/* ─── Official Letters · Rich-text editor toolbar ─── */
.ol-toolbar { font-size: 12px; }
.ol-tb-btn {
display: inline-flex; align-items: center; justify-content: center;
min-width: 30px; height: 30px; padding: 0 8px;
background: #fff; border: 1px solid #cbd5e1; border-radius: 5px;
cursor: pointer; font-size: 13px; font-weight: 700; color: #334155;
transition: all 0.15s; position: relative;
}
.ol-tb-btn:hover { background: #e0f2fe; border-color: #0ea5e9; color: #0369a1; }
.ol-tb-btn:active { transform: scale(0.95); }
.ol-tb-select {
height: 30px; padding: 0 6px; border: 1px solid #cbd5e1;
border-radius: 5px; background: #fff; font-size: 11.5px; cursor: pointer;
}
.ol-tb-sep {
display: inline-block; width: 1px; height: 22px; background: #cbd5e1; margin: 0 4px;
}
/* Word-style color button — A + color bar under it */
.ol-tb-color {
flex-direction: column; gap: 0; min-width: 32px; padding: 2px 6px; height: auto;
}
.ol-tb-color-bar { transition: background 0.15s }
.ol-tb-color:hover .ol-tb-color-bar { filter: brightness(1.1) }
/* Hover state for table grid cells */
.tbl-cell:hover { background: #93c5fd !important; border-color: #1e40af !important }
.ol-editor { transition: border-color 0.2s, box-shadow 0.2s; }
.ol-editor:focus { border-color: #0ea5e9 !important; box-shadow: 0 0 0 3px rgba(14,165,233,0.15); }
.ol-editor.view-only { background: #fafafa !important; cursor: default; }
.ol-editor p { margin: 0 0 12px }
.ol-editor table { border-collapse: collapse; margin: 8px 0 }
.ol-editor table td, .ol-editor table th { padding: 6px 10px; border: 1px solid #cbd5e1 }
.ol-editor blockquote {
margin: 8px 0; padding: 8px 16px; border-inline-start: 4px solid #0ea5e9;
background: #f0f9ff; color: #0c4a6e; font-style: italic;
}
.ol-editor h2 { font-size: 18px; font-weight: 800; margin: 12px 0 8px; color: #1e40af }
/* ─── Quotations screen ─────────────────────────────────────────────── */
.ql-kpi {
padding: 12px 14px; border-radius: 10px;
box-shadow: 0 2px 8px rgba(15,23,42,0.04);
transition: transform 0.15s, box-shadow 0.15s;
}
.ql-kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15,23,42,0.08); }
.ql-kpi-val { font-size: 19px; font-weight: 900; color: #0f172a; font-family: Tajawal, 'Courier New', monospace; }
.ql-kpi-lbl { font-size: 11.5px; font-weight: 700; color: #475569; margin-top: 4px; }
.ql-tab-strip { font-size: 13px; }
.ql-tab {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px; border-radius: 8px; background: #fff;
border: 1.5px solid #cbd5e1; color: #475569; font-weight: 700;
cursor: pointer; transition: all 0.15s; font-size: 12.5px;
}
.ql-tab:hover { background: #ecfeff; border-color: var(--c, #0e7490); color: var(--c, #0e7490); }
.ql-tab.active { background: var(--c, #0e7490); border-color: var(--c, #0e7490); color: #fff; box-shadow: 0 4px 10px rgba(14,116,144,0.25); }
.ql-tab-badge { background: rgba(255,255,255,0.25); color: inherit; padding: 2px 8px; border-radius: 10px; font-weight: 800; font-size: 11px; }
.ql-tab.active .ql-tab-badge { background: rgba(255,255,255,0.35) }
.ql-input {
width: 100%; padding: 7px 10px; border: 1.5px solid #cbd5e1;
border-radius: 6px; font-size: 12px; background: #fff;
}
.ql-input:focus { outline: 2px solid #0e7490; outline-offset: -1px; border-color: #0e7490; }
.ql-table th { font-size: 11.5px; }
/* ═══════════════════════════════════════════════════════════════════
📌 COMPANIES — Pin / Compare / PDF / Bulk / Silent Alerts / Smart Search
═══════════════════════════════════════════════════════════════════ */
/* Pinned row marker */
.co-list-table tr.pinned-row { background: linear-gradient(90deg, #fffbeb 0%, #ffffff 12%) !important; }
.co-list-table tr.pinned-row > td:first-child { border-${'left' /* RTL fallback handled via dir */}: 3px solid #f59e0b; }
/* Card-level quick-action row */
.co-card-quick-actions {
display: flex; gap: 6px; margin-top: 10px; padding-top: 10px;
border-top: 1px dashed #e2e8f0; flex-wrap: wrap;
}
.co-quick-btn {
flex: 1; min-width: 0;
display: inline-flex; align-items: center; justify-content: center; gap: 4px;
padding: 6px 8px; border-radius: 7px; font-size: 11px; font-weight: 800;
border: 1.5px solid #e2e8f0; background: #fff; color: #475569;
cursor: pointer; transition: all 0.15s;
}
.co-quick-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(15,23,42,0.08); }
.co-quick-pin { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.co-quick-pin.active { background: linear-gradient(135deg,#f59e0b,#fbbf24); color: #fff; border-color: #d97706; }
.co-quick-cmp { background: #eff6ff; color: #1e40af; border-color: #93c5fd; }
.co-quick-cmp.active { background: linear-gradient(135deg,#1e40af,#3b82f6); color: #fff; border-color: #1e3a8a; }
.co-quick-pdf { background: #fce7f3; color: #be185d; border-color: #f9a8d4; }
.co-quick-pdf:hover { background: linear-gradient(135deg,#be185d,#ec4899); color: #fff; border-color: #9d174d; }
/* Bulk action bar (sticky toolbar) */
.co-bulk-bar {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 10px 18px; background: linear-gradient(135deg,#1e40af,#3b82f6);
color: #fff; border-bottom: 1px solid #1e3a8a;
animation: coBulkSlide 0.25s ease;
}
@keyframes coBulkSlide { from { transform: translateY(-6px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
.co-bulk-bar-info { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; }
.co-bulk-bar-count {
background: rgba(255,255,255,0.25); padding: 2px 10px; border-radius: 999px;
font-weight: 900; font-size: 13px;
}
.co-bulk-bar .btn { font-size: 11.5px; padding: 5px 10px; font-weight: 800; }
/* Bulk row checkboxes accent */
.co-bulk-cb { accent-color: #1e40af; cursor: pointer; transform: scale(1.15); }
/* Silent Alerts panel */
.co-silent-alerts {
margin-bottom: 14px; background: #fff; border: 1.5px solid #e2e8f0;
border-radius: 12px; padding: 10px 14px;
box-shadow: 0 2px 6px rgba(15,23,42,0.04);
}
.co-silent-alerts > summary {
display: flex; align-items: center; gap: 8px;
cursor: pointer; list-style: none; user-select: none;
font-size: 13px; color: #334155;
}
.co-silent-alerts > summary::-webkit-details-marker { display: none; }
.co-silent-badge {
background: linear-gradient(135deg,#dc2626,#f87171); color: #fff;
font-weight: 900; font-size: 11px; padding: 2px 9px;
border-radius: 999px; min-width: 22px; text-align: center;
}
.co-silent-alerts-grid {
display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
gap: 8px; margin-top: 10px;
}
.co-silent-chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 12px; border-radius: 10px;
font-size: 12px; font-weight: 700;
border-${'inline-start'}: 4px solid;
}
.co-silent-ic { font-size: 16px; }
.co-silent-amber { background: #fffbeb; color: #92400e; border-color: #f59e0b; }
.co-silent-rose { background: #fff1f2; color: #9f1239; border-color: #f43f5e; }
.co-silent-cyan { background: #ecfeff; color: #155e75; border-color: #0891b2; }
.co-silent-slate { background: #f8fafc; color: #475569; border-color: #94a3b8; }
/* Smart Search inline help button */
.co-smart-search-help {
position: absolute; top: 50%; transform: translateY(-50%);
inset-inline-end: 8px; background: linear-gradient(135deg,#1e40af,#3b82f6); color: #fff;
border: 0; padding: 4px 9px; border-radius: 6px;
font-weight: 900; font-size: 13px; cursor: pointer;
box-shadow: 0 2px 6px rgba(30,64,175,0.25);
}
.co-smart-search-help:hover { transform: translateY(-50%) scale(1.05); }
/* Capital Timeline svg */
.co-cap-timeline { max-width: 100%; }
.co-cap-timeline rect { transition: opacity 0.15s; }
.co-cap-timeline rect:hover { opacity: 1 !important; }
.co-cap-timeline circle { transition: r 0.15s; cursor: pointer; }
.co-cap-timeline circle:hover { r: 7; }
/* ═══════════════════════════════════════════════════════════════════
🩺 Health Score Badge + 👁 Side Panel Preview + 🕘 Recent + ⌨️ Hints
═══════════════════════════════════════════════════════════════════ */
/* Segmented Cards/Table toggle (cleaner replacement) */
.co-basic-view-seg {
display: inline-flex; background: #f1f5f9; border: 1.5px solid #cbd5e1;
border-radius: 999px; padding: 3px; gap: 2px;
}
.co-basic-view-seg .btn { border-radius: 999px !important; border: 0 !important; padding: 5px 12px !important; font-size: 11.5px; }
.co-basic-view-seg .btn-outline { background: transparent !important; color: #64748b !important; }
.co-basic-view-seg .btn-primary-action {
background: linear-gradient(135deg,#1e40af,#3b82f6) !important; color: #fff !important;
box-shadow: 0 2px 6px rgba(30,64,175,0.25);
}
/* 🩺 Health Score badge in the table */
.col-health { width: 50px; text-align: center; padding: 4px !important; }
.co-health-badge {
background: none; border: 2px solid; border-radius: 50%;
width: 38px; height: 38px; padding: 0; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: transform 0.15s;
}
.co-health-badge:hover { transform: scale(1.12); box-shadow: 0 3px 10px rgba(0,0,0,0.12); }
/* 🕘 Recently Viewed strip */
.co-recent-strip {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 8px 14px; background: linear-gradient(90deg,#f8fafc,#fff,#f8fafc);
border: 1.5px solid #e2e8f0; border-radius: 10px;
margin-bottom: 12px; box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
.co-recent-strip-lbl {
font-size: 11.5px; font-weight: 800; color: #475569;
padding: 2px 10px; background: #f1f5f9; border-radius: 999px;
}
.co-recent-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px 4px 4px; border-radius: 999px;
background: #fff; border: 1.5px solid #cbd5e1; color: #1e293b;
cursor: pointer; font-weight: 700; font-size: 11.5px;
transition: all 0.15s;
}
.co-recent-chip:hover { background: #eff6ff; border-color: #3b82f6; transform: translateY(-1px); }
.co-recent-chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: contain; background: #f1f5f9; padding: 1px; }
.co-recent-init {
width: 22px; height: 22px; border-radius: 50%;
background: linear-gradient(135deg,#1e40af,#3b82f6); color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 11px;
}
.co-recent-clear {
margin-inline-start: auto; background: transparent; border: 1.5px dashed #cbd5e1;
color: #94a3b8; padding: 2px 8px; border-radius: 999px; cursor: pointer;
font-size: 11px; font-weight: 800;
}
.co-recent-clear:hover { color: #dc2626; border-color: #fca5a5; background: #fef2f2; }
/* 👁 Side Panel Preview (slide-in from end) */
.co-side-panel-backdrop {
position: fixed; inset: 0; background: rgba(15,23,42,0.45);
z-index: 1500; display: flex; justify-content: flex-end;
animation: coSideFade 0.2s ease;
}
[dir="ltr"] .co-side-panel-backdrop { justify-content: flex-end; }
[dir="rtl"] .co-side-panel-backdrop { justify-content: flex-start; }
@keyframes coSideFade { from { background: rgba(15,23,42,0); } to { background: rgba(15,23,42,0.45); } }
.co-side-panel {
background: #fff; width: 460px; max-width: 92vw; height: 100%;
display: flex; flex-direction: column; overflow: hidden;
transform: translateX(100%); transition: transform 0.24s cubic-bezier(.22,.61,.36,1);
box-shadow: -8px 0 32px rgba(15,23,42,0.18);
}
[dir="rtl"] .co-side-panel { transform: translateX(-100%); box-shadow: 8px 0 32px rgba(15,23,42,0.18); }
.co-side-panel.open { transform: translateX(0); }
.co-side-panel-head {
display: flex; align-items: center; gap: 8px;
padding: 14px 16px; flex-shrink: 0;
}
.co-side-panel-close {
background: rgba(255,255,255,0.22); color: #fff; border: 0;
width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
font-size: 15px; font-weight: 900;
}
.co-side-panel-close:hover { background: rgba(255,255,255,0.35); }
.co-side-panel-body { flex: 1; overflow-y: auto; padding: 16px; background: #f8fafc; }
.co-side-section {
background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px;
padding: 12px 14px; margin-bottom: 12px;
}
.co-side-section h4 {
font-size: 12.5px; font-weight: 800; color: #475569;
margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px dashed #e2e8f0;
}
.co-side-row {
display: flex; justify-content: space-between; align-items: center;
padding: 6px 0; font-size: 12.5px; border-bottom: 1px dashed #f1f5f9;
}
.co-side-row:last-child { border-bottom: 0; }
.co-side-row > span { color: #64748b; font-weight: 600; }
.co-side-row > strong { color: #0f172a; }
.co-side-owner-row {
display: flex; align-items: center; gap: 8px; padding: 4px 0;
}
.co-side-actions {
display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.co-side-actions .btn { padding: 7px 10px; font-size: 11.5px; font-weight: 800; }
/* ⌨️ kbd badges */
kbd {
display: inline-block; padding: 2px 8px; border-radius: 6px;
background: #f1f5f9; border: 1.5px solid #cbd5e1; border-bottom-width: 2px;
color: #475569; font-family: ui-monospace, monospace; font-size: 11px;
font-weight: 800; box-shadow: 0 1px 0 #94a3b8;
}
/* ═══════════════════════════════════════════════════════════════════
⚡ Quick-Action Icons inside the Companies table row
═══════════════════════════════════════════════════════════════════ */
.col-quick { width: 78px; padding: 4px !important; text-align: center; }
.co-row-quick {
display: inline-grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: auto;
gap: 3px; padding: 3px;
background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0;
}
.co-row-icon {
width: 28px; height: 28px; border-radius: 6px;
display: inline-flex; align-items: center; justify-content: center;
background: #fff; border: 1px solid #e2e8f0; cursor: pointer;
font-size: 13.5px; transition: all 0.15s; padding: 0;
}
.co-row-icon:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(15,23,42,0.12); }
.co-row-pin { color: #92400e; }
.co-row-pin:hover, .co-row-pin.active {
background: linear-gradient(135deg,#f59e0b,#fbbf24); color: #fff; border-color: #d97706;
}
.co-row-pdf { color: #be185d; }
.co-row-pdf:hover { background: linear-gradient(135deg,#be185d,#ec4899); color: #fff; border-color: #9d174d; }
.co-row-preview { color: #1e40af; }
.co-row-preview:hover { background: linear-gradient(135deg,#1e40af,#3b82f6); color: #fff; border-color: #1e3a8a; }
.co-row-cmp { color: #475569; }
.co-row-cmp:hover, .co-row-cmp.active { background: linear-gradient(135deg,#475569,#64748b); color: #fff; border-color: #334155; }
/* ═══════════════════════════════════════════════════════════════════
🔒 Side Panel — Audit lock banner + actions adapt when audited
═══════════════════════════════════════════════════════════════════ */
.co-side-audit-banner {
display: flex; align-items: center; gap: 10px;
background: linear-gradient(135deg,#fef3c7,#fde68a);
color: #92400e; border: 1.5px solid #f59e0b;
border-radius: 12px; padding: 10px 14px;
margin-bottom: 12px;
box-shadow: 0 2px 6px rgba(245,158,11,0.15);
}
.co-side-actions.audited {
grid-template-columns: 1fr 1fr 1fr; /* 3 cols since Edit is gone */
}
/* ═══════════════════════════════════════════════════════════════════
📊 COMPACT TABLE LAYOUT — Merged columns, screen-optimized
═══════════════════════════════════════════════════════════════════ */
.co-tbl-compact .data-table {
table-layout: auto;
width: 100%;
font-size: 12.5px;
}
.co-tbl-compact .data-table th {
font-size: 11.5px;
font-weight: 800;
letter-spacing: 0;
white-space: nowrap;
padding: 8px 6px;
vertical-align: middle;
}
.co-tbl-compact .data-table td {
padding: 7px 6px;
vertical-align: middle;
}
.co-tbl-compact .th-sub {
font-size: 9.5px;
font-weight: 600;
color: rgba(0,0,0,0.5);
margin-inline-start: 2px;
letter-spacing: 0;
}
.co-tbl-compact thead .th-sub { color: rgba(255,255,255,0.7); }
/* Column widths */
.co-tbl-compact .col-num { width: 40px; text-align: center; font-weight: 700; color: #475569; }
.co-tbl-compact .col-code { width: 90px; text-align: center; }
.co-tbl-compact .col-company { min-width: 220px; }
.co-tbl-compact .col-ids { width: 180px; }
.co-tbl-compact .col-license { width: 130px; text-align: center; }
.co-tbl-compact .col-indic { width: 150px; text-align: center; }
.co-tbl-compact .col-audit { width: 50px; text-align: center; }
.co-tbl-compact .col-health { width: 56px; text-align: center; padding: 4px !important; }
.co-tbl-compact .col-quick { width: 78px; text-align: center; padding: 4px !important; }
.co-tbl-compact .col-acts { width: auto; text-align: center; }
/* Code badge */
.co-code-badge {
display: inline-block;
background: #dbeafe; color: #1e40af;
font-family: ui-monospace, monospace;
font-weight: 800; font-size: 11px;
padding: 3px 8px; border-radius: 6px;
letter-spacing: 0.5px;
}
/* Company name cell - stacked layout */
.co-name-cell-text { min-width: 0; flex: 1; line-height: 1.25; }
.co-tbl-name { font-size: 13px; color: #0f172a; display: block; }
.co-tbl-meta {
display: flex; gap: 4px; flex-wrap: wrap;
margin-top: 3px; align-items: center;
}
/* Mini pills */
.pill.pill-mini {
font-size: 10px !important;
padding: 2px 6px !important;
font-weight: 700;
border-radius: 5px !important;
line-height: 1.3;
}
.co-pill-btn {
cursor: pointer; border: 0; font-family: inherit;
transition: transform 0.15s;
}
.co-pill-btn:hover { transform: scale(1.05); }
/* Stacked IDs cell */
.co-ids-stack {
display: flex; flex-direction: column; gap: 2px;
font-size: 11px; line-height: 1.45;
}
.co-ids-stack > div {
display: flex; align-items: center; gap: 4px;
white-space: nowrap;
}
.co-id-lbl {
display: inline-block; width: 16px; text-align: center;
font-size: 10px; opacity: 0.7;
}
.co-ids-stack .mono { font-weight: 700; color: #1e293b; }
.co-id-empty { color: #cbd5e1; font-weight: 600; text-align: center; }
/* License stack */
.co-lic-stack {
display: flex; flex-direction: column; gap: 3px;
align-items: center; line-height: 1.3;
}
.co-lic-founded {
font-size: 10.5px; color: #64748b; font-weight: 700;
}
/* Indicators grid */
.co-indic-grid {
display: inline-flex; gap: 4px; flex-wrap: wrap;
justify-content: center; align-items: center;
}
/* Pin marker in row number */
.co-pin-mark {
font-size: 12px; margin-inline-end: 2px;
filter: drop-shadow(0 1px 1px rgba(245,158,11,0.4));
}
/* Avatar smaller in compact table */
.co-tbl-compact .co-name-avatar {
width: 36px; height: 36px; flex-shrink: 0;
border-radius: 8px; font-size: 14px;
}
.co-tbl-compact .co-name-avatar img { width: 100%; height: 100%; object-fit: contain; padding: 2px; background: #fff; }
/* Reduce action button spacing in compact tables */
.co-tbl-compact .co-row-quick {
padding: 3px; gap: 3px;
}
.co-tbl-compact .co-row-icon {
width: 28px; height: 26px; font-size: 12.5px;
}
/* For tabs that have only 2 icons, keep them on a single row for a more natural look */
.co-tbl-compact .col-quick:has(.co-row-quick .co-row-icon:nth-child(2):last-child) .co-row-quick {
grid-template-columns: 1fr 1fr;
}
/* Responsive: tighter padding on smaller screens */
@media (max-width: 1280px) {
.co-tbl-compact .data-table th,
.co-tbl-compact .data-table td { padding: 6px 4px; }
.co-tbl-compact .col-indic { width: 110px; }
.co-tbl-compact .col-ids { width: 150px; }
.co-tbl-compact .col-quick { width: 68px; }
.co-tbl-compact .co-row-icon { width: 26px; height: 24px; font-size: 11.5px; }
.co-tbl-compact .pill.pill-mini { font-size: 9.5px !important; padding: 1px 5px !important; }
}
/* ═══════════════════════════════════════════════════════════════════
📦 GENERAL DEFINITIONS — Smart Dashboard, Universal Search, Recent, FAB
═══════════════════════════════════════════════════════════════════ */
/* 🔍 Universal Search */
.gd-uni-search-wrap { margin: 12px 0; }
.gd-uni-search {
position: relative; display: flex; align-items: center; gap: 8px;
background: #fff; border: 2px solid #c4b5fd; border-radius: 12px;
padding: 8px 14px; box-shadow: 0 2px 8px rgba(124,58,237,0.08);
transition: border-color 0.15s;
}
.gd-uni-search:focus-within { border-color: #7c3aed; box-shadow: 0 4px 14px rgba(124,58,237,0.15); }
.gd-uni-search-icon { font-size: 18px; color: #7c3aed; }
.gd-uni-search input {
flex: 1; border: 0; outline: 0; font-size: 14px;
background: transparent; color: #0f172a; font-weight: 600;
}
.gd-uni-search input::placeholder { color: #94a3b8; font-weight: 500; }
.gd-uni-search-clear, .gd-uni-search-help {
border: 0; background: #f1f5f9; color: #475569; cursor: pointer;
padding: 4px 10px; border-radius: 6px; font-weight: 800; font-size: 12px;
}
.gd-uni-search-clear:hover { background: #fee2e2; color: #dc2626; }
.gd-uni-search-help:hover { background: #ede9fe; color: #7c3aed; }
.gd-uni-results {
margin-top: 10px; background: #fff; border: 1px solid #e2e8f0;
border-radius: 12px; padding: 14px; max-height: 460px; overflow-y: auto;
box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.gd-uni-results-empty {
display: flex; align-items: center; gap: 10px; padding: 18px;
color: #94a3b8; font-weight: 600; font-size: 13px;
background: #f8fafc; border-radius: 10px;
}
.gd-uni-results-hdr {
font-size: 12.5px; color: #475569; padding-bottom: 8px;
margin-bottom: 8px; border-bottom: 1px solid #e2e8f0;
}
.gd-uni-group { margin: 8px 0; padding-inline-start: 8px; }
.gd-uni-group-hdr {
display: flex; align-items: center; gap: 8px;
font-size: 12px; font-weight: 800; color: #1e293b;
padding: 4px 0;
}
.gd-uni-group-count {
background: #1e293b; color: #fff; padding: 1px 7px;
border-radius: 999px; font-size: 10px; font-weight: 800;
margin-inline-start: auto;
}
.gd-uni-group-items { display: flex; flex-direction: column; gap: 2px; padding-inline-start: 12px; }
.gd-uni-item {
display: flex; align-items: center; gap: 8px;
background: #fff; border: 1px solid #f1f5f9;
padding: 6px 10px; border-radius: 6px; cursor: pointer;
font-size: 12px; transition: all 0.12s;
}
.gd-uni-item:hover { background: #eff6ff; border-color: #93c5fd; transform: translateX(-2px); }
[dir="ltr"] .gd-uni-item:hover { transform: translateX(2px); }
.gd-uni-item mark { background: #fef08a; color: #713f12; font-weight: 800; padding: 0 2px; border-radius: 3px; }
/* 🩺 Smart Dashboard */
.gd-smart-dashboard {
margin: 12px 0; padding: 14px;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-radius: 14px; border: 1.5px solid #e2e8f0;
}
.gd-macro-row {
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px; margin-bottom: 14px;
}
.gd-macro-card {
display: flex; align-items: center; gap: 12px;
background: #fff; border: 1.5px solid #e2e8f0;
border-radius: 12px; padding: 12px 14px;
transition: transform 0.15s, box-shadow 0.15s;
}
.gd-macro-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
.gd-macro-primary { background: linear-gradient(135deg, #eef2ff, #e0e7ff); border-color: #c7d2fe; }
.gd-macro-primary .gd-macro-num { color: #4338ca; }
.gd-macro-warn { background: linear-gradient(135deg, #fef3c7, #fde68a); border-color: #fcd34d; }
.gd-macro-warn .gd-macro-num { color: #b45309; }
.gd-macro-danger { background: linear-gradient(135deg, #fee2e2, #fecaca); border-color: #fca5a5; }
.gd-macro-danger .gd-macro-num { color: #b91c1c; }
.gd-macro-icon { font-size: 36px; flex-shrink: 0; }
.gd-macro-num { font-size: 28px; font-weight: 900; line-height: 1; color: #0f172a; }
.gd-macro-lbl { font-size: 12.5px; font-weight: 800; color: #475569; margin-top: 3px; }
.gd-macro-sub { font-size: 10.5px; color: #94a3b8; margin-top: 2px; }
.gd-dash-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media (max-width: 900px) { .gd-dash-row { grid-template-columns: 1fr; } }
.gd-dash-panel {
background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px;
overflow: hidden;
}
.gd-dash-head {
padding: 10px 14px; background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-bottom: 1px solid #e2e8f0;
}
.gd-dash-head h4 { margin: 0; font-size: 13px; font-weight: 800; color: #0f172a; }
.gd-dash-body { padding: 14px; }
.gd-dash-legend {
display: flex; align-items: center; gap: 6px;
background: #f8fafc; border: 1px solid #e2e8f0;
padding: 5px 8px; border-radius: 6px; cursor: pointer;
font-size: 11px; transition: all 0.12s; color: #334155;
}
.gd-dash-legend:hover { background: #fff; border-color: #94a3b8; transform: translateY(-1px); }
.gd-dash-legend-num {
background: #1e293b; color: #fff; padding: 1px 6px;
border-radius: 999px; font-size: 10px; font-weight: 800;
}
.gd-top-used-row {
display: flex; align-items: center; gap: 8px;
background: #fff; border: 1px solid #f1f5f9;
padding: 8px 10px; border-radius: 8px; cursor: pointer;
margin-bottom: 4px; transition: all 0.12s; width: 100%;
}
.gd-top-used-row:hover { background: #fff7ed; border-color: #fdba74; transform: translateX(-2px); }
[dir="ltr"] .gd-top-used-row:hover { transform: translateX(2px); }
.gd-top-rank {
width: 22px; height: 22px; border-radius: 50%;
background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 900; flex-shrink: 0;
}
/* 🕘 Recently Modified Strip */
.gd-recent-strip {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 8px 14px;
background: linear-gradient(90deg, #f8fafc, #fff, #f8fafc);
border: 1.5px solid #e2e8f0; border-radius: 10px;
margin: 10px 0;
}
.gd-recent-strip-lbl {
font-size: 11.5px; font-weight: 800; color: #475569;
padding: 2px 10px; background: #f1f5f9; border-radius: 999px;
}
.gd-recent-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 999px;
background: #fff; border: 1.5px solid #cbd5e1; color: #1e293b;
cursor: pointer; font-weight: 700; font-size: 11.5px;
transition: all 0.15s;
}
.gd-recent-chip:hover { background: #eff6ff; border-color: #3b82f6; transform: translateY(-1px); }
.gd-recent-icon { font-size: 14px; }
.gd-recent-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-recent-time {
background: #f1f5f9; color: #475569; padding: 1px 6px;
border-radius: 6px; font-size: 10px; font-weight: 800;
font-family: ui-monospace, monospace;
}
/* 🏷️ Smart Status Pills */
.gd-status-pill {
display: inline-flex; align-items: center; gap: 4px;
font-size: 10.5px; font-weight: 800; padding: 2px 8px;
border-radius: 999px; border: 1px solid;
}
.gd-status-new { background: #eff6ff; color: #1e40af; border-color: #93c5fd; }
.gd-status-active { background: #ecfdf5; color: #065f46; border-color: #6ee7b7; }
.gd-status-hot { background: linear-gradient(135deg,#fef3c7,#fde68a); color: #92400e; border-color: #f59e0b; }
.gd-status-dormant { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.gd-status-orphan { background: #fef2f2; color: #b91c1c; border-color: #fca5a5; }
.gd-status-protected { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
/* 📊 Usage badge */
.gd-use-badge {
display: inline-block; min-width: 22px; text-align: center;
font-size: 10.5px; font-weight: 800; padding: 1px 7px;
border-radius: 999px; font-family: ui-monospace, monospace;
}
.gd-use-zero { background: #fef2f2; color: #b91c1c; border: 1px dashed #fca5a5; }
.gd-use-light { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.gd-use-warm { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.gd-use-hot { background: linear-gradient(135deg,#ea580c,#f97316); color: #fff; border: 1px solid #c2410c; }
/* ⚡ Quick Add FAB */
.gd-fab {
position: fixed; bottom: 28px; inset-inline-end: 28px; z-index: 800;
width: 56px; height: 56px; border-radius: 50%;
background: linear-gradient(135deg, #7c3aed, #a855f7);
color: #fff; border: 0; cursor: pointer;
box-shadow: 0 6px 20px rgba(124,58,237,0.4);
display: flex; align-items: center; justify-content: center;
font-weight: 900; transition: transform 0.2s, box-shadow 0.2s;
}
.gd-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 28px rgba(124,58,237,0.5); }
.gd-fab:active { transform: translateY(0) scale(0.95); }
/* ═══════════════════════════════════════════════════════════════════
📦 GD — Row meta (status + usage), Audit toggle, Bulk bar, Templates
═══════════════════════════════════════════════════════════════════ */
/* Row meta — injected by post-render enhancement */
.gd-row-meta {
display: inline-flex; gap: 4px; align-items: center;
margin-inline-start: 6px; vertical-align: middle;
}
/* 🔒 Per-row audit toggle button (injected post-render) */
.gd-audit-toggle-btn {
background: #f8fafc; border: 1.5px solid #e2e8f0;
width: 28px; height: 28px; border-radius: 7px;
cursor: pointer; font-size: 12px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
margin-inline-end: 4px; transition: all 0.15s;
}
.gd-audit-toggle-btn:hover { background: #fff; border-color: #94a3b8; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.gd-audit-toggle-btn.is-audited {
background: linear-gradient(135deg, #fef3c7, #fde68a);
border-color: #f59e0b; color: #92400e;
}
/* Audited rows in general_defs context */
.gd-tab-content tbody tr.audited,
#gdTabContent tbody tr.audited {
background: linear-gradient(to right, #fffbeb 0%, #fff 30%) !important;
}
[dir="ltr"] #gdTabContent tbody tr.audited {
background: linear-gradient(to left, #fffbeb 0%, #fff 30%) !important;
}
#gdTabContent tbody tr.audited > td:first-child {
border-inline-start: 3px solid #f59e0b;
}
/* 🗂️ Bulk Operations Bar */
.gd-bulk-bar {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
background: linear-gradient(135deg, #7c3aed, #a855f7);
padding: 10px 16px; border-radius: 12px; color: #fff;
margin: 10px 0;
box-shadow: 0 4px 12px rgba(124,58,237,0.25);
animation: gdBulkIn 0.25s ease-out;
}
@keyframes gdBulkIn { from { transform: translateY(-6px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
.gd-bulk-count {
background: rgba(255,255,255,0.28); color: #fff;
font-weight: 900; padding: 2px 12px;
border-radius: 999px; min-width: 28px; text-align: center;
}
.gd-bulk-bar .btn { font-size: 11.5px; font-weight: 800; padding: 5px 12px; }
.gd-bulk-bar .btn:hover { transform: translateY(-1px); }
/* 📋 Templates modal rows */
.gd-tmpl-row {
display: flex; align-items: center; gap: 10px;
background: #f8fafc; border: 1px solid #e2e8f0;
border-radius: 8px; padding: 10px 14px; cursor: pointer;
transition: all 0.15s;
}
.gd-tmpl-row:hover { background: #ede9fe; border-color: #c4b5fd; }
.gd-tmpl-row input { accent-color: #7c3aed; transform: scale(1.2); }
/* Highlight audited items in dependency inspector */
.gd-uni-results tr[data-audited="true"] { background: #fffbeb; }
/* ═══════════════════════════════════════════════════════════════════
🚀 GD — Tab Workspace (filters + stats + chips + insights)
═══════════════════════════════════════════════════════════════════ */
.gd-workspace {
margin: 12px 0; padding: 14px;
background: linear-gradient(135deg, #f8fafc, #fff);
border: 1.5px solid #e2e8f0; border-radius: 12px;
}
.gd-ws-filter-row {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.gd-ws-icon { font-size: 18px; color: #0d9488; }
.gd-ws-search {
flex: 1; min-width: 200px;
padding: 7px 12px; border: 1.5px solid #cbd5e1;
border-radius: 8px; font-size: 13px; outline: none;
}
.gd-ws-search:focus { border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,0.12); }
.gd-ws-select, .gd-ws-input {
padding: 6px 10px; border: 1.5px solid #cbd5e1;
border-radius: 8px; font-size: 12px; background: #fff;
color: #1e293b; font-weight: 600;
}
.gd-ws-select:focus, .gd-ws-input:focus { border-color: #0d9488; outline: none; }
.gd-ws-undo, .gd-ws-clear {
padding: 6px 10px; border: 1.5px solid #cbd5e1;
border-radius: 8px; background: #fff; font-size: 12px;
font-weight: 800; cursor: pointer; color: #475569;
}
.gd-ws-undo:hover { background: #eff6ff; border-color: #3b82f6; color: #1e40af; }
.gd-ws-clear:hover:not(:disabled) { background: #fee2e2; border-color: #f87171; color: #dc2626; }
.gd-ws-clear:disabled { opacity: 0.4; cursor: not-allowed; }
/* Presets dropdown */
.gd-ws-preset-wrap { position: relative; }
.gd-ws-preset-btn {
padding: 6px 12px; border: 1.5px solid #c4b5fd;
border-radius: 8px; background: #ede9fe; color: #5b21b6;
font-size: 12px; font-weight: 800; cursor: pointer;
}
.gd-ws-preset-btn:hover { background: #ddd6fe; }
.gd-ws-preset-dropdown {
position: absolute; top: calc(100% + 4px); inset-inline-end: 0;
min-width: 240px; max-width: 320px; background: #fff;
border: 1.5px solid #c4b5fd; border-radius: 10px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 100; padding: 4px;
}
.gd-ws-preset-item {
display: flex; align-items: center; gap: 4px; padding: 2px;
}
.gd-ws-preset-use {
flex: 1; padding: 6px 10px; background: #f8fafc;
border: 1px solid transparent; border-radius: 6px;
cursor: pointer; font-size: 12px; font-weight: 700;
color: #5b21b6; text-align: start;
}
.gd-ws-preset-use:hover { background: #ede9fe; }
.gd-ws-preset-del {
width: 24px; height: 24px; padding: 0; border-radius: 6px;
background: transparent; border: 0; cursor: pointer;
color: #94a3b8; font-weight: 800; font-size: 11px;
}
.gd-ws-preset-del:hover { background: #fee2e2; color: #dc2626; }
/* Active filter chips */
.gd-ws-chips {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
margin-top: 10px; padding-top: 10px;
border-top: 1px dashed #e2e8f0;
}
.gd-ws-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 4px 3px 10px; background: #ecfdf5;
border: 1.5px solid #6ee7b7; border-radius: 999px;
font-size: 11px; font-weight: 700; color: #065f46; cursor: pointer;
}
[dir="rtl"] .gd-ws-chip { padding: 3px 10px 3px 4px; }
.gd-ws-chip:hover { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }
.gd-ws-chip-x {
display: inline-flex; width: 18px; height: 18px;
align-items: center; justify-content: center;
background: rgba(0,0,0,0.08); border-radius: 999px;
font-size: 10px;
}
/* Live stats row */
.gd-ws-stats-row {
display: flex; flex-wrap: wrap; gap: 8px;
margin-top: 12px;
}
.gd-ws-stat {
display: flex; align-items: center; gap: 8px;
background: #fff; border: 1.5px solid #e2e8f0;
padding: 8px 12px; border-radius: 10px;
flex: 1; min-width: 130px; max-width: 200px;
position: relative;
}
.gd-ws-stat-ic { font-size: 22px; flex-shrink: 0; }
.gd-ws-stat-num { font-size: 20px; font-weight: 900; line-height: 1; color: #0f172a; }
.gd-ws-stat-lbl { font-size: 10.5px; font-weight: 700; color: #64748b; margin-top: 2px; }
.gd-ws-stat-primary { background: linear-gradient(135deg, #eff6ff, #dbeafe); border-color: #93c5fd; }
.gd-ws-stat-primary .gd-ws-stat-num { color: #1e40af; }
.gd-ws-stat-success { background: linear-gradient(135deg, #ecfdf5, #d1fae5); border-color: #6ee7b7; }
.gd-ws-stat-success .gd-ws-stat-num { color: #065f46; }
.gd-ws-stat-warning { background: linear-gradient(135deg, #fef2f2, #fecaca); border-color: #fca5a5; }
.gd-ws-stat-warning .gd-ws-stat-num { color: #b91c1c; }
.gd-ws-stat-amber { background: linear-gradient(135deg, #fef3c7, #fde68a); border-color: #fcd34d; }
.gd-ws-stat-amber .gd-ws-stat-num { color: #92400e; }
.gd-ws-stat-cyan { background: linear-gradient(135deg, #ecfeff, #cffafe); border-color: #67e8f9; }
.gd-ws-stat-cyan .gd-ws-stat-num { color: #0e7490; }
.gd-ws-stat-info { background: #f0f9ff; border-color: #7dd3fc; }
.gd-ws-stat-violet { background: linear-gradient(135deg, #f5f3ff, #ede9fe); border-color: #c4b5fd; }
.gd-ws-stat-violet .gd-ws-stat-num { color: #5b21b6; }
.gd-ws-stat-indigo { background: linear-gradient(135deg, #eef2ff, #e0e7ff); border-color: #a5b4fc; }
.gd-ws-stat-custom { background: linear-gradient(135deg, #fdf4ff, #fae8ff); border-color: #e9d5ff; }
.gd-ws-stat-custom .gd-ws-stat-num { color: #86198f; }
.gd-ws-stat-del {
position: absolute; top: 2px; inset-inline-end: 2px;
width: 18px; height: 18px; padding: 0; border: 0;
background: rgba(0,0,0,0.05); border-radius: 4px;
font-size: 10px; cursor: pointer; color: #94a3b8;
}
.gd-ws-stat-del:hover { background: #fee2e2; color: #dc2626; }
.gd-ws-stat-add {
width: 40px; min-width: 40px; height: auto; padding: 8px;
border: 2px dashed #cbd5e1; background: #f8fafc;
border-radius: 10px; cursor: pointer;
font-size: 22px; color: #64748b; font-weight: 800;
}
.gd-ws-stat-add:hover { background: #ede9fe; border-color: #a78bfa; color: #5b21b6; }
/* Smart Insights */
.gd-ws-insights {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-top: 12px; padding: 10px 14px;
background: linear-gradient(135deg, #ecfeff, #cffafe);
border: 1.5px solid #67e8f9; border-radius: 10px;
}
.gd-ws-insight {
display: inline-flex; align-items: center; gap: 6px;
background: #fff; padding: 4px 10px;
border-radius: 999px; font-size: 11.5px; color: #0e7490;
border: 1px solid #a5f3fc;
}
.gd-ws-insight strong { color: #155e75; }
/* ═══════════════════════════════════════════════════════════════════
👥 EMPLOYEES — Pulse, Org Tree, Health Badge, Side Panel, Radar, etc.
═══════════════════════════════════════════════════════════════════ */
/* 🩺 Health badge in table */
.emp-health-badge {
background: none; border: 2px solid; border-radius: 50%;
width: 38px; height: 38px; padding: 0; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: transform 0.15s;
}
.emp-health-badge:hover { transform: scale(1.12); box-shadow: 0 3px 10px rgba(0,0,0,0.12); }
.emp-risk-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; }
/* 📊 Workforce Pulse */
.emp-pulse { margin: 12px 0; padding: 14px; background: linear-gradient(135deg, #fffbeb, #fef3c7); border: 1.5px solid #fcd34d; border-radius: 14px; }
.emp-pulse-macros { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px; }
.emp-pulse-card { display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; }
.emp-pulse-ic { font-size: 32px; }
.emp-pulse-num { font-size: 24px; font-weight: 900; line-height: 1; color: #0f172a; }
.emp-pulse-lbl { font-size: 12px; font-weight: 800; color: #475569; margin-top: 3px; }
.emp-pulse-sub { font-size: 10.5px; color: #94a3b8; margin-top: 2px; }
.emp-pulse-primary { background: linear-gradient(135deg, #fef3c7, #fde68a); border-color: #f59e0b; }
.emp-pulse-primary .emp-pulse-num { color: #92400e; }
.emp-pulse-success { background: linear-gradient(135deg, #ecfdf5, #d1fae5); border-color: #6ee7b7; }
.emp-pulse-success .emp-pulse-num { color: #065f46; }
.emp-pulse-danger { background: linear-gradient(135deg, #fef2f2, #fecaca); border-color: #fca5a5; }
.emp-pulse-danger .emp-pulse-num { color: #b91c1c; }
.emp-pulse-violet { background: linear-gradient(135deg, #f5f3ff, #ede9fe); border-color: #c4b5fd; }
.emp-pulse-violet .emp-pulse-num { color: #5b21b6; }
.emp-pulse-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.emp-pulse-panel { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; }
.emp-pulse-panel h4 { margin: 0 0 8px; font-size: 12.5px; font-weight: 800; color: #0f172a; }
/* 🌳 Org Tree */
.emp-org-tree { margin: 12px 0; padding: 14px; background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 12px; }
.emp-org-head { font-size: 14px; font-weight: 900; color: #0f172a; margin-bottom: 12px; }
.emp-org-co { background: #fff; border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; border-inline-start: 4px solid #d97706; }
.emp-org-co-head { font-size: 13px; font-weight: 800; color: #92400e; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.emp-org-dept { background: #fffbeb; border-radius: 8px; padding: 8px 12px; margin: 6px 0; border-inline-start: 3px solid #f59e0b; }
.emp-org-dept-head { font-size: 12px; font-weight: 800; color: #92400e; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.emp-org-count { background: #d97706; color: #fff; font-size: 10px; padding: 1px 7px; border-radius: 999px; font-weight: 900; }
.emp-org-emps { display: flex; flex-wrap: wrap; gap: 4px; }
.emp-org-chip { display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 1px solid #fcd34d; padding: 3px 8px 3px 3px; border-radius: 999px; cursor: pointer; font-size: 11px; font-weight: 700; color: #92400e; }
[dir="ltr"] .emp-org-chip { padding: 3px 3px 3px 8px; }
.emp-org-chip:hover { background: #fef3c7; }
.emp-org-chip img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.emp-org-init { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, #d97706, #f59e0b); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; }
/* ⏰ Expiry Radar */
.emp-expiry-radar { margin: 10px 0; padding: 10px 14px; background: #fff; border: 1.5px solid #fca5a5; border-radius: 10px; }
.emp-expiry-radar > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: 13px; }
.emp-expiry-radar > summary::-webkit-details-marker { display: none; }
.emp-radar-badge { background: linear-gradient(135deg, #dc2626, #f87171); color: #fff; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 900; }
.emp-radar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px; margin-top: 10px; }
.emp-radar-chip { display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid; border-radius: 8px; padding: 6px 10px; cursor: pointer; transition: transform 0.12s; }
.emp-radar-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.08); }
/* 🎂 Events Wall */
.emp-events-wall { margin: 10px 0; padding: 10px 14px; background: linear-gradient(135deg, #fef3c7, #fde68a); border: 1.5px solid #f59e0b; border-radius: 10px; }
.emp-events-head { font-weight: 900; font-size: 13px; color: #92400e; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.emp-events-row { display: flex; gap: 6px; flex-wrap: wrap; }
.emp-event-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: #fff; border: 1.5px solid; border-radius: 8px; cursor: pointer; transition: transform 0.12s; }
.emp-event-chip:hover { transform: translateY(-1px); }
.emp-event-birthday { border-color: #ec4899; color: #be185d; }
.emp-event-anniversary { border-color: #7c3aed; color: #5b21b6; }
/* 🕘 Recently Viewed */
.emp-recent-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 14px; background: #fff; border: 1.5px solid #e2e8f0; border-radius: 10px; margin: 10px 0; }
.emp-recent-lbl { font-size: 11.5px; font-weight: 800; color: #475569; padding: 2px 10px; background: #f1f5f9; border-radius: 999px; }
.emp-recent-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; background: #fff; border: 1.5px solid #cbd5e1; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: 11.5px; color: #1e293b; }
[dir="ltr"] .emp-recent-chip { padding: 4px 4px 4px 10px; }
.emp-recent-chip:hover { background: #fef3c7; border-color: #f59e0b; }
.emp-recent-chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.emp-recent-init { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #d97706, #f59e0b); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; }
.emp-recent-clear { margin-inline-start: auto; border: 1.5px dashed #cbd5e1; background: transparent; padding: 2px 8px; border-radius: 999px; cursor: pointer; font-size: 11px; font-weight: 800; color: #94a3b8; }
.emp-recent-clear:hover { color: #dc2626; border-color: #fca5a5; }
/* 🗂️ Bulk Bar */
.emp-bulk-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px; background: linear-gradient(135deg, #d97706, #f59e0b); color: #fff; border-radius: 12px; margin: 10px 0; box-shadow: 0 4px 12px rgba(217,119,6,0.25); }
.emp-bulk-count { background: rgba(255,255,255,0.28); color: #fff; font-weight: 900; padding: 2px 12px; border-radius: 999px; }
/* 👁 Side Panel */
.emp-side-panel-bd { position: fixed; inset: 0; background: rgba(15,23,42,0.5); z-index: 1500; display: flex; justify-content: flex-end; }
[dir="rtl"] .emp-side-panel-bd { justify-content: flex-start; }
.emp-side-panel { width: 480px; max-width: 92vw; height: 100%; background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.25s cubic-bezier(.22,.61,.36,1); box-shadow: -8px 0 32px rgba(0,0,0,0.2); }
[dir="rtl"] .emp-side-panel { transform: translateX(-100%); box-shadow: 8px 0 32px rgba(0,0,0,0.2); }
.emp-side-panel.open { transform: translateX(0); }
.emp-side-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.emp-side-close { background: rgba(255,255,255,0.25); color: #fff; border: 0; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-weight: 900; }
.emp-side-body { flex: 1; overflow-y: auto; padding: 14px; background: #f8fafc; }
.emp-side-section { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.emp-side-section h4 { font-size: 12.5px; font-weight: 800; color: #475569; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px dashed #e2e8f0; }
.emp-side-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 12.5px; border-bottom: 1px dashed #f1f5f9; }
.emp-side-row > span { color: #64748b; font-weight: 600; }
.emp-side-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.emp-side-actions .btn { padding: 7px 10px; font-size: 11.5px; font-weight: 800; }
/* ═══════════════════════════════════════════════════════════════════
👥 EMPLOYEES — In-row Health badge + Quick action icons
(ideas 3, 4, 5 made visible inside every tab table)
═══════════════════════════════════════════════════════════════════ */
.emp-row-health { display: inline-block; vertical-align: middle; margin-inline-end: 6px; }
.emp-row-health .emp-health-badge { width: 32px; height: 32px; }
.emp-row-quick-cell { padding: 4px !important; text-align: center; width: 84px; }
.emp-row-quick {
display: inline-grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px;
background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0;
}
.emp-row-icon {
width: 28px; height: 26px; border-radius: 6px;
display: inline-flex; align-items: center; justify-content: center;
background: #fff; border: 1px solid #e2e8f0; cursor: pointer;
font-size: 12.5px; padding: 0; transition: all 0.15s;
}
.emp-row-icon:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.1); }
.emp-row-pin { color: #92400e; }
.emp-row-pin:hover, .emp-row-pin.active {
background: linear-gradient(135deg,#f59e0b,#fbbf24); color: #fff; border-color: #d97706;
}
.emp-row-pdf { color: #be185d; }
.emp-row-pdf:hover { background: linear-gradient(135deg,#be185d,#ec4899); color: #fff; border-color: #9d174d; }
.emp-row-preview { color: #1e40af; }
.emp-row-preview:hover { background: linear-gradient(135deg,#1e40af,#3b82f6); color: #fff; border-color: #1e3a8a; }
.emp-row-cmp { color: #475569; }
.emp-row-cmp:hover, .emp-row-cmp.active { background: linear-gradient(135deg,#475569,#64748b); color: #fff; border-color: #334155; }
/* Pinned row highlight */
.emp-pinned-row { background: linear-gradient(to right, #fffbeb 0%, #fff 12%) !important; }
[dir="ltr"] .emp-pinned-row { background: linear-gradient(to left, #fffbeb 0%, #fff 12%) !important; }
.emp-pinned-row > td:first-child { border-inline-start: 3px solid #f59e0b; }
/* ═══════════════════════════════════════════════════════════════════
👥 EMPLOYEES v2 — Bigger, brighter, more visible
═══════════════════════════════════════════════════════════════════ */
/* ✨ Feature hint banner — explains the new row icons */
.emp-features-hint {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 8px 14px; margin: 8px 0;
background: linear-gradient(135deg, #fff7ed, #ffedd5);
border: 1.5px solid #fb923c; border-radius: 10px;
box-shadow: 0 2px 6px rgba(251,146,60,0.15);
animation: empHintGlow 2s ease-in-out infinite alternate;
}
@keyframes empHintGlow { from { box-shadow: 0 2px 6px rgba(251,146,60,0.15); } to { box-shadow: 0 4px 14px rgba(251,146,60,0.35); } }
.emp-hint-lbl { font-weight: 900; color: #c2410c; font-size: 12.5px; }
.emp-hint-chip {
display: inline-flex; align-items: center; gap: 4px;
background: #fff; padding: 4px 10px; border-radius: 999px;
font-weight: 900; font-size: 12px; border: 1.5px solid;
}
.emp-hint-health { color: #10b981; border-color: #10b981; }
.emp-hint-arrow { font-size: 16px; font-weight: 900; color: #c2410c; }
.emp-hint-txt { font-size: 12px; color: #7c2d12; font-weight: 600; }
/* 🩺 Bigger Health badge in row — more prominent */
.emp-row-health { display: inline-block; vertical-align: middle; margin-inline-end: 8px; }
.emp-row-health .emp-health-badge {
width: 40px; height: 40px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.emp-row-health .emp-health-badge:hover {
box-shadow: 0 6px 16px rgba(0,0,0,0.2);
transform: scale(1.15);
}
/* Header for the injected Quick column */
.emp-row-quick-th {
background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
color: #fff !important; font-size: 11px; font-weight: 800;
text-align: center; width: 90px;
letter-spacing: 0.5px;
}
.emp-row-quick-th span { font-size: 10.5px; opacity: 0.95; }
/* 👁 Quick Actions cell — bigger and more prominent */
.emp-row-quick-cell {
padding: 6px !important; text-align: center; width: 90px;
background: linear-gradient(135deg, #faf5ff, #fff);
}
.emp-row-quick {
display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
background: #fff; border-radius: 8px; border: 1.5px solid #c4b5fd;
box-shadow: 0 2px 4px rgba(124,58,237,0.08);
}
.emp-row-icon {
width: 30px; height: 28px; border-radius: 7px;
display: inline-flex; align-items: center; justify-content: center;
background: #fff; border: 1.5px solid #e2e8f0; cursor: pointer;
font-size: 13.5px; padding: 0; transition: all 0.15s; position: relative;
}
.emp-row-icon:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
.emp-row-pin { color: #92400e; background: #fffbeb; border-color: #fcd34d; }
.emp-row-pin:hover, .emp-row-pin.active {
background: linear-gradient(135deg,#f59e0b,#fbbf24); color: #fff; border-color: #d97706;
}
.emp-row-pdf { color: #be185d; background: #fdf2f8; border-color: #f9a8d4; }
.emp-row-pdf:hover { background: linear-gradient(135deg,#be185d,#ec4899); color: #fff; border-color: #9d174d; }
.emp-row-preview { color: #1e40af; background: #eff6ff; border-color: #93c5fd; }
.emp-row-preview:hover { background: linear-gradient(135deg,#1e40af,#3b82f6); color: #fff; border-color: #1e3a8a; }
.emp-row-cmp { color: #475569; background: #f8fafc; border-color: #cbd5e1; }
.emp-row-cmp:hover, .emp-row-cmp.active { background: linear-gradient(135deg,#475569,#64748b); color: #fff; border-color: #334155; }
/* Pinned row — clearer */
.emp-pinned-row {
background: linear-gradient(to right, #fffbeb 0%, #fff 18%) !important;
border-inline-start: 4px solid #f59e0b !important;
}
/* 🔒 Audit lock for employee rows */
.emp-tab-content tbody tr.audited {
background: linear-gradient(to right, #fef3c7 0%, #fff 22%) !important;
border-inline-start: 4px solid #d97706 !important;
}
/* Hero action buttons (Pulse, Org) — more visible */
.emp-hero-actions .btn-sm { font-weight: 900; padding: 6px 14px; box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
.emp-hero-actions .btn-sm:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); }
/* ═══════════════════════════════════════════════════════════════════
👥 EMPLOYEES — Merged columns (Identity + Contact) — CENTERED
Center-aligned content lets the column take the minimum width it
needs, freeing horizontal space for a full-width screen layout.
═══════════════════════════════════════════════════════════════════ */
.emp-col-merged {
padding: 6px 8px !important;
vertical-align: middle;
text-align: center; /* ← center horizontally */
white-space: nowrap; /* prevent line-breaks → narrower column */
width: 1%; /* let content dictate the width */
}
.emp-col-merged-th {
background: linear-gradient(135deg, #fef3c7, #fde68a);
border-bottom: 2px solid #f59e0b;
color: #92400e;
text-align: center; /* ← header centered too */
white-space: nowrap;
width: 1%;
}
.emp-th-sub {
font-size: 9px; font-weight: 600;
color: rgba(146,64,14,0.7); display: block;
margin-top: 2px; letter-spacing: 0;
}
.emp-merged-cell {
display: inline-flex; /* ← inline-flex so the cell shrinks */
flex-direction: column;
align-items: center; /* ← center stacked lines */
gap: 2px;
line-height: 1.4;
}
.emp-merged-line {
display: inline-flex; align-items: center; gap: 4px;
font-size: 12px; color: #0f172a;
justify-content: center;
}
.emp-merged-type {
background: #e0f2fe; color: #075985;
padding: 1px 6px; border-radius: 4px;
font-size: 10px; font-weight: 700;
}
.emp-merged-mono {
font-family: ui-monospace, monospace;
font-size: 11.5px; color: #1e293b;
font-weight: 700;
text-align: center;
}
.emp-merged-small {
font-size: 10.5px; color: #64748b;
font-family: ui-monospace, monospace;
}
.emp-merged-email {
font-size: 10.5px; color: #64748b;
justify-content: center;
}
.emp-merged-empty {
color: #cbd5e1; font-weight: 600; font-size: 12px;
text-align: center;
}
/* ═══════════════════════════════════════════════════════════════════
🧑💼 CLIENTS PRO — Tab bar + Statement + Aging + Pulse + Side Panel
═══════════════════════════════════════════════════════════════════ */
.cli-pro-tabs { display: flex; gap: 6px; padding: 12px 14px; background: #f8fafc; border-bottom: 2px solid #e2e8f0; margin: 12px 0 0; border-radius: 12px 12px 0 0; flex-wrap: wrap; }
.cli-pro-tab { padding: 8px 14px; background: #fff; border: 1.5px solid #cbd5e1; border-radius: 8px; cursor: pointer; font-weight: 800; font-size: 12.5px; color: #475569; transition: all 0.15s; }
.cli-pro-tab:hover { border-color: #0369a1; color: #0369a1; transform: translateY(-1px); }
.cli-pro-tab.active { background: linear-gradient(135deg, #0369a1, #0ea5e9); color: #fff; border-color: #0369a1; box-shadow: 0 4px 10px rgba(3,105,161,0.25); }
/* Recent strip */
.cli-recent-strip { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; margin: 8px 0; }
.cli-recent-lbl { font-size: 11px; font-weight: 800; color: #475569; background: #f1f5f9; padding: 2px 8px; border-radius: 999px; }
.cli-recent-chip { background: #eff6ff; border: 1px solid #93c5fd; color: #1e40af; padding: 3px 10px; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: 11.5px; }
.cli-recent-chip:hover { background: #dbeafe; }
.cli-recent-clear { margin-inline-start: auto; border: 1px dashed #cbd5e1; background: transparent; color: #94a3b8; cursor: pointer; padding: 2px 8px; border-radius: 999px; font-size: 11px; }
/* Health badge */
.cli-col-health { width: 50px; text-align: center; padding: 4px !important; }
.cli-health-badge { background: none; border: 2px solid; border-radius: 50%; width: 38px; height: 38px; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.15s; }
.cli-health-badge:hover { transform: scale(1.12); box-shadow: 0 3px 10px rgba(0,0,0,0.12); }
/* Quick column */
.cli-col-quick { width: 88px !important; padding: 4px !important; text-align: center; background: linear-gradient(135deg, #f0f9ff, #fff); }
.cli-row-quick { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; background: #fff; border: 1.5px solid #93c5fd; border-radius: 8px; }
.cli-row-icon { width: 28px; height: 26px; border-radius: 6px; background: #fff; border: 1px solid #e2e8f0; cursor: pointer; font-size: 13px; padding: 0; transition: all 0.15s; display: inline-flex; align-items: center; justify-content: center; }
.cli-row-icon:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.1); }
.cli-row-pin { color: #92400e; background: #fffbeb; border-color: #fcd34d; }
.cli-row-pin:hover, .cli-row-pin.active { background: linear-gradient(135deg,#f59e0b,#fbbf24); color: #fff; border-color: #d97706; }
.cli-row-pdf { color: #0369a1; background: #eff6ff; border-color: #93c5fd; }
.cli-row-pdf:hover { background: linear-gradient(135deg,#0369a1,#0ea5e9); color: #fff; }
.cli-row-preview { color: #1e40af; background: #eff6ff; border-color: #93c5fd; }
.cli-row-preview:hover { background: linear-gradient(135deg,#1e40af,#3b82f6); color: #fff; }
.cli-row-cmp { color: #475569; background: #f8fafc; border-color: #cbd5e1; }
.cli-row-cmp:hover, .cli-row-cmp.active { background: linear-gradient(135deg,#475569,#64748b); color: #fff; }
.cli-pinned-row { background: linear-gradient(to right, #fffbeb 0%, #fff 12%) !important; border-inline-start: 4px solid #f59e0b !important; }
/* Statement view */
.cli-statement-wrap { padding: 14px; background: #fff; border-radius: 0 0 12px 12px; }
.cli-statement-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; padding-bottom: 12px; border-bottom: 1.5px solid #e2e8f0; margin-bottom: 12px; flex-wrap: wrap; }
.cli-statement-kpis { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 8px; margin-bottom: 14px; }
.cli-skpi { display: flex; align-items: center; gap: 10px; background: #f0f9ff; border: 1.5px solid #93c5fd; border-radius: 10px; padding: 10px 12px; }
.cli-skpi-ic { font-size: 28px; }
.cli-skpi-num { font-size: 18px; font-weight: 900; color: #0369a1; }
.cli-skpi-lbl { font-size: 11px; font-weight: 800; color: #475569; }
.cli-aging-row { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px; background: #f8fafc; border-radius: 8px; }
.cli-aging-cell { flex: 1; min-width: 90px; padding: 6px 10px; border: 1.5px solid; border-radius: 6px; text-align: center; background: #fff; }
.cli-statement-table tbody tr:hover { background: #f8fafc; }
.cli-statement-opening { background: #fef3c7 !important; }
.cli-statement-empty { text-align: center; padding: 30px 14px; background: #fff; border-radius: 0 0 12px 12px; }
.cli-selector-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 8px; margin-top: 20px; max-width: 900px; margin-inline: auto; }
.cli-selector-card { background: #fff; border: 1.5px solid #cbd5e1; padding: 12px; border-radius: 10px; cursor: pointer; text-align: start; transition: all 0.15s; }
.cli-selector-card:hover { border-color: #0369a1; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(3,105,161,0.15); }
/* Pulse */
.cli-pulse { padding: 14px; background: linear-gradient(135deg,#f0f9ff,#fff); border-radius: 0 0 12px 12px; }
.cli-pulse-macros { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 10px; margin-bottom: 14px; }
.cli-pulse-card { display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; }
.cli-pulse-ic { font-size: 32px; }
.cli-pulse-num { font-size: 22px; font-weight: 900; color: #0f172a; }
.cli-pulse-lbl { font-size: 11.5px; font-weight: 800; color: #475569; }
.cli-pulse-primary { background: linear-gradient(135deg,#eff6ff,#dbeafe); border-color: #93c5fd; }
.cli-pulse-primary .cli-pulse-num { color: #1e40af; }
.cli-pulse-danger { background: linear-gradient(135deg,#fef2f2,#fecaca); border-color: #fca5a5; }
.cli-pulse-danger .cli-pulse-num { color: #b91c1c; }
.cli-pulse-amber { background: linear-gradient(135deg,#fef3c7,#fde68a); border-color: #fcd34d; }
.cli-pulse-amber .cli-pulse-num { color: #92400e; }
.cli-pulse-warning { background: linear-gradient(135deg,#fef2f2,#fecaca); border-color: #f87171; }
.cli-pulse-warning .cli-pulse-num { color: #dc2626; }
.cli-pulse-charts { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 10px; }
.cli-pulse-panel { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; }
.cli-pulse-panel h4 { margin: 0 0 8px; font-size: 13px; font-weight: 900; color: #0369a1; }
.cli-top-row { display: flex; align-items: center; gap: 8px; background: #f8fafc; border: 1px solid #e2e8f0; padding: 6px 10px; border-radius: 6px; cursor: pointer; margin: 4px 0; transition: all 0.15s; width: 100%; }
.cli-top-row:hover { background: #eff6ff; border-color: #0369a1; }
.cli-top-rank { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg,#f59e0b,#fbbf24); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; }
/* 🆕 Clickable narrative in customer statement */
.cli-narr-link {
background: none; border: 0; cursor: pointer; padding: 4px 8px;
border-radius: 6px; transition: background 0.15s;
text-align: inherit; font-family: inherit; font-size: inherit;
color: inherit; line-height: 1.4; display: inline-flex; gap: 6px; align-items: center;
}
.cli-narr-link:hover { background: #f1f5f9; text-decoration: underline; }
.cli-narr-link:active { background: #e2e8f0; }
/* Aging tab */
.cli-aging-wrap { padding: 14px; background: #fff; border-radius: 0 0 12px 12px; }
.cli-link-name { background: none; border: 0; cursor: pointer; color: #0369a1; font-weight: 700; padding: 0; }
.cli-link-name:hover { text-decoration: underline; }
/* 🆕 WAVE 2 — Customer 360° View styles */
.cli-360-wrap { padding: 14px; background: #fff; border-radius: 0 0 12px 12px; }
.cli-360-head {
display: flex; align-items: center; gap: 14px;
padding: 18px 22px; border-radius: 12px; color: #fff;
box-shadow: 0 6px 18px rgba(15,23,42,0.12);
}
.cli-360-kpis {
display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
margin-top: 12px; margin-bottom: 12px;
}
.cli-360-kpi {
display: flex; align-items: center; gap: 10px;
background: #f8fafc; border: 1.5px solid #e2e8f0;
border-radius: 10px; padding: 10px 12px;
}
.cli-360-kpi-ic { font-size: 22px; }
.cli-360-kpi-num { font-size: 17px; font-weight: 900; color: #0f172a; line-height: 1.1; }
.cli-360-kpi-lbl { font-size: 10.5px; color: #64748b; font-weight: 700; }
.cli-360-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
margin-top: 4px;
}
.cli-360-panel {
background: #fff; border: 1.5px solid #e2e8f0;
border-radius: 10px; padding: 12px 14px;
}
.cli-360-panel h4 {
margin: 0 0 8px; font-size: 13px; font-weight: 900; color: #0369a1;
padding-bottom: 4px; border-bottom: 1.5px solid #e0f2fe;
}
.cli-360-rows > div { font-size: 12.5px; padding: 4px 0; border-bottom: 1px dashed #e2e8f0; color: #334155; }
.cli-360-rows > div:last-child { border-bottom: 0; }
.cli-360-rows strong { color: #0f172a; min-width: 110px; display: inline-block; }
@media (max-width: 768px) {
.cli-360-kpis { grid-template-columns: repeat(3, 1fr); }
.cli-360-grid { grid-template-columns: 1fr; }
}
/* Reports wrap */
.cli-reports-wrap { padding: 14px; background: #fff; border-radius: 0 0 12px 12px; }
/* Side Panel */
.cli-side-bd { position: fixed; inset: 0; background: rgba(15,23,42,0.5); z-index: 1500; display: flex; justify-content: flex-end; }
[dir="rtl"] .cli-side-bd { justify-content: flex-start; }
.cli-side { width: 480px; max-width: 92vw; height: 100%; background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.25s cubic-bezier(.22,.61,.36,1); box-shadow: -8px 0 32px rgba(0,0,0,0.2); }
[dir="rtl"] .cli-side { transform: translateX(-100%); box-shadow: 8px 0 32px rgba(0,0,0,0.2); }
.cli-side.open { transform: translateX(0); }
.cli-side-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; color: #fff; }
.cli-side-close { background: rgba(255,255,255,0.25); color: #fff; border: 0; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-weight: 900; }
.cli-side-body { flex: 1; overflow-y: auto; padding: 14px; background: #f8fafc; }
.cli-side-section { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.cli-side-section h4 { font-size: 12.5px; font-weight: 800; color: #475569; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px dashed #e2e8f0; }
.cli-side-stat { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: #f8fafc; border-radius: 6px; }
.cli-side-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cli-side-actions .btn { padding: 7px 10px; font-size: 11.5px; font-weight: 800; }
/* ═══════════════════════════════════════════════════════════════════════
🎌 HOLIDAYS — Waves 1-4 (countdown banner + heatmap + toggle)
═══════════════════════════════════════════════════════════════════════ */
.h-countdown-banner {
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: 16px;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%);
border: 2px solid #f59e0b;
border-radius: 14px;
padding: 12px 18px;
margin-bottom: 12px;
box-shadow: 0 4px 14px rgba(245, 158, 11, 0.18);
position: relative;
overflow: hidden;
}
.h-countdown-banner::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 100% 0%, rgba(255,255,255,0.4) 0, transparent 60%);
pointer-events: none;
}
.h-cb-emoji { font-size: 42px; line-height: 1; filter: drop-shadow(0 3px 6px rgba(180,83,9,0.3)); }
.h-cb-content { display: flex; flex-direction: column; }
.h-cb-label { font-size: 11px; font-weight: 700; color: #92400e; text-transform: uppercase; letter-spacing: 1px; }
.h-cb-name { font-size: 18px; font-weight: 900; color: #78350f; line-height: 1.2; }
.h-cb-date { font-size: 12px; color: #a16207; margin-top: 2px; }
.h-cb-count { text-align: center; background: rgba(255,255,255,0.6); border-radius: 12px; padding: 6px 18px; border: 1.5px solid rgba(245,158,11,0.4); }
.h-cb-num { font-size: 32px; font-weight: 900; color: #b45309; line-height: 1; }
.h-cb-unit { font-size: 11px; font-weight: 700; color: #92400e; }
.h-cb-progress { width: 90px; height: 6px; background: rgba(255,255,255,0.6); border-radius: 999px; overflow: hidden; align-self: end; margin-bottom: 6px; }
.h-cb-bar { height: 100%; background: linear-gradient(90deg, #16a34a, #84cc16, #fbbf24, #f97316, #dc2626); border-radius: 999px; transition: width 0.4s ease; }
/* Calendar Hijri toggle button */
.h-cal-toggle-btn { transition: all 0.2s ease; }
.h-cal-toggle-btn:hover { transform: scale(1.05); }
/* Holiday bridge & weekend pill colors */
.h-month-holiday[data-bridge] { position: relative; }
.h-month-holiday[data-bridge]::after { content: '🌉'; position: absolute; top: 4px; inset-inline-end: 4px; font-size: 11px; opacity: 0.7; }
@media print {
.h-countdown-banner { display: none; }
}
/* 💰 Cost cell — clickable button styling */
.h-cost-cell { transition: all 0.18s ease; }
.h-cost-cell:hover {
background: #fef3c7 !important;
border-color: #f59e0b !important;
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(245, 158, 11, 0.25);
}
.h-cost-cell:active { transform: translateY(0); }
/* ═══════════════════════════════════════════════════════════════════════
🆕 v0.37.9.41 — UNIVERSAL JV NUMBER COLORS
Debit = green · Credit = blue · Difference (Imbalance) = red.
Apply via class on the | // that shows the amount.
═══════════════════════════════════════════════════════════════════════ */
.jv-debit { color: #16a34a !important; font-weight: 700; }
.jv-credit { color: #1d4ed8 !important; font-weight: 700; }
.jv-diff { color: #dc2626 !important; font-weight: 800; }
.jv-debit-bg { background: #dcfce7 !important; color: #14532d !important; }
.jv-credit-bg { background: #dbeafe !important; color: #1e3a8a !important; }
.jv-diff-bg { background: #fee2e2 !important; color: #7f1d1d !important; }
|