@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');
:root { color-scheme:light; --ink:#183027; --muted:#778780; --line:#e5ebe7; --canvas:#f7f9f7; --brand:#174e3a; --brand-soft:#e9f3ec; --shadow:0 5px 25px #1b3a2810; --panel:#fff; --raised:#fbfcfb; }
:root[data-theme="dark"] { color-scheme:dark; --ink:#e5efe9; --muted:#a1b3a8; --line:#30493b; --canvas:#101b16; --brand:#98d9b3; --brand-soft:#284434; --shadow:0 5px 25px #0003; --panel:#192a21; --raised:#21372a; }
.login-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(135deg,#edf4ef,#f7f9f7); }
.login-card { width:min(100%,430px); padding:36px; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); }
.login-card h1 { margin:0 0 8px; font-size:27px; }
.login-card .brand { padding:0 0 28px; }
.login-card form { margin-top:24px; padding:0; }
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:'IBM Plex Sans Arabic',Tahoma,Arial,sans-serif; font-size:14px; }
button,input,select,textarea { font:inherit; } button { cursor:pointer; } a { text-decoration:none; color:inherit; } [hidden] { display:none!important; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:246px minmax(0,1fr); direction:rtl; }
.sidebar { background:#fff; border-left:1px solid var(--line); padding:24px 15px; display:flex; flex-direction:column; }
.brand { display:flex; align-items:center; gap:10px; padding:0 9px 31px; font-size:17px; font-weight:700; line-height:1.25; }
.brand small { display:block; color:#8b9890; font-size:10px; font-weight:500; margin-top:5px; }
.brand-mark { width:35px; height:35px; flex:none; display:grid; place-items:center; border-radius:10px; background:var(--brand); color:#fff; }
.nav-label,.eyebrow { color:#809b89; font-size:11px; font-weight:700; margin:0 10px 10px; }
.sidebar nav { display:grid; gap:5px; }
.sidebar nav a { display:flex; align-items:center; gap:13px; min-height:44px; padding:0 14px; border-radius:8px; color:#66776c; font-size:17px; }
.sidebar nav a span { font-size:13px; }.sidebar nav a:hover { background:#f4f8f5; }
.sidebar nav a.active { background:var(--brand-soft); color:var(--brand); font-weight:700; }
.sidebar-footer { margin-top:auto; color:#94a199; border-top:1px solid var(--line); padding:18px 10px 0; font-size:11px; }
.sidebar-dot { display:inline-block; background:#3fa56c; width:7px; height:7px; border-radius:50%; margin-left:6px; }
.topbar { height:70px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; background:#fff; border-bottom:1px solid var(--line); color:#7d8b82; font-size:12px; }
.topbar b { padding:0 8px; color:#b8c1ba; }.topbar-mark { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#e5f0e8; color:var(--brand); font-weight:700; }
.page { max-width:1500px; padding:36px; margin:auto; }.page-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:24px; }
.page-heading .eyebrow { margin:0 0 5px; }.page-heading h1 { font-size:29px; letter-spacing:-.04em; margin:0; }.subhead { color:var(--muted); font-size:13px; margin:6px 0 0; }
.primary-button { border:1px solid var(--brand); background:var(--brand); color:#fff; border-radius:8px; padding:10px 16px; font-weight:600; white-space:nowrap; box-shadow:0 2px 4px #173d2a20; }
.primary-button:hover { background:#0d3d2a; }.secondary-button { border:1px solid #dce5dd; background:white; color:#455a4c; border-radius:8px; padding:10px 15px; }
.notice { margin:0 0 18px; padding:12px 15px; border-radius:8px; background:#e7f4eb; color:#236a3e; border:1px solid #cce8d2; }.notice.error { background:#fff0ef; color:#a63c33; border-color:#f1d0cb; }
.summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; margin-bottom:22px; }
.summary-grid article { background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 20px; box-shadow:var(--shadow); }
.summary-grid span { display:block; color:#7b8a80; font-size:12px; }.summary-grid strong { display:block; font-size:28px; line-height:1.5; margin:4px 0; }.summary-grid small { font-size:11px; color:#92a099; }
.table-card,.chart-card { background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; }
.table-toolbar { display:flex; justify-content:space-between; gap:15px; padding:16px; border-bottom:1px solid var(--line); }
.search { display:flex; align-items:center; gap:8px; border:1px solid #dce4de; border-radius:8px; padding:0 10px; min-width:330px; color:#87988c; }.search span { font-size:21px; }
.search input { border:0; outline:0; background:transparent; width:100%; height:38px; font-size:12px; }.filters { display:flex; gap:8px; }
.filters select,.dialog-form select { border:1px solid #dce4de; border-radius:8px; background:#fff; color:#53675a; padding:8px 11px; font-size:12px; min-width:135px; }
.table-wrap { overflow-x:auto; }table { width:100%; min-width:930px; border-collapse:collapse; }th { text-align:right; background:#fbfcfb; color:#85928a; font-size:11px; font-weight:600; padding:13px 17px; border-bottom:1px solid var(--line); }
td { padding:13px 17px; border-bottom:1px solid #eff2ef; font-size:12px; color:#46594c; }tbody tr:last-child td { border:0; }
.customer-cell { display:flex; align-items:center; gap:10px; }.customer-cell strong { display:block; color:#26392e; font-size:12px; }.customer-cell small,.contact-cell small { display:block; color:#92a096; font-size:11px; }
.avatar { display:grid; place-items:center; width:33px; height:33px; border-radius:50%; background:#e7f2e9; color:#387750; flex:none; font-weight:700; }
.status { display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:99px; background:#eef2ee; color:#78857b; font-size:11px; }
.status:before { content:''; width:5px; height:5px; background:currentColor; border-radius:50%; }.status.ACTIVE { background:#e7f5eb; color:#32834d; }.status.ON_HOLD { background:#fff3df; color:#a27929; }.status.PROSPECT { background:#eaf0fa; color:#567bb2; }
.status-select { border:0; border-radius:99px; padding:5px 9px; background:#eef2ee; color:#78857b; font-size:11px; outline-color:#689b75; }.status-select.ACTIVE { background:#e7f5eb; color:#32834d; }.status-select.ON_HOLD { background:#fff3df; color:#a27929; }.status-select.PROSPECT { background:#eaf0fa; color:#567bb2; }
.service-pill { display:inline-block; background:#eef4ee; color:#4f7158; border:1px solid #e0eae1; border-radius:99px; padding:3px 8px; font-size:10px; margin:2px; }
.text-button { border:0; background:none; color:var(--brand); font-weight:600; font-size:11px; }.text-button:hover { text-decoration:underline; }
.table-footer { display:flex; justify-content:space-between; padding:14px 17px; border-top:1px solid var(--line); font-size:11px; color:#8b9b90; }.empty-row { text-align:center; color:#8c9990; padding:30px!important; }
.services-intro { display:flex; justify-content:space-between; align-items:center; background:linear-gradient(112deg,#184e39,#27694b); border-radius:13px; color:#fff; padding:25px 28px; margin-bottom:25px; overflow:hidden; }
.services-intro .eyebrow { color:#b5dbc3; margin:0; }.services-intro strong { display:block; font-size:32px; }.services-intro p { margin:0; color:#cce2d3; font-size:11px; }.intro-art { font-size:95px; line-height:1; opacity:.15; transform:rotate(-15deg); }
.section-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; }.section-heading h2,.chart-heading h2 { font-size:16px; margin:0; }.section-heading span { color:#8c9b91; font-size:11px; }
.service-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }.service-card { border:1px solid var(--line); background:#fff; border-radius:12px; padding:19px; box-shadow:var(--shadow); }
.service-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:9px; background:#eaf4ed; color:var(--brand); font-size:19px; margin-bottom:14px; }.service-card h3 { font-size:14px; margin:0 0 5px; }
.service-card p { color:#88978c; min-height:38px; font-size:11px; line-height:1.7; margin:0; }.service-meta { border-top:1px solid var(--line); margin-top:14px; padding-top:12px; color:#789082; font-size:11px; }.empty-card { grid-column:1/-1; background:#fff; border:1px dashed #d5e1d7; border-radius:12px; padding:35px; text-align:center; color:#829388; }
.today { font-size:11px; color:#8b9b91; background:#fff; border:1px solid var(--line); border-radius:8px; padding:9px 12px; }.dashboard-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:16px; }.chart-card { padding:20px; }.chart-card.full { grid-column:1/-1; }
.chart-heading { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; }.chart-heading p { margin:4px 0 0; color:#90a096; font-size:11px; }.chart-icon { color:#587b61; background:#eaf4ec; padding:7px; border-radius:8px; }
.monthly-chart { display:flex; align-items:end; gap:12px; height:210px; border-bottom:1px solid #e9eee9; padding:5px 4px 0; }.month-col { height:100%; flex:1; display:flex; flex-direction:column; justify-content:end; align-items:center; gap:5px; min-width:0; }
.month-bar { display:block; width:min(58%,42px); min-height:2px; border-radius:6px 6px 0 0; background:#377d56; }.month-value,.month-label { font-size:10px; color:#87978c; white-space:nowrap; }
.status-chart { display:flex; align-items:center; gap:20px; min-height:210px; }.donut { width:155px; height:155px; border-radius:50%; display:grid; place-items:center; flex:none; }.donut-center { width:100px; height:100px; border-radius:50%; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; }.donut-center strong { font-size:24px; }.donut-center small { color:#9ba89f; font-size:10px; }
.legend { display:grid; gap:10px; width:100%; }.legend-row { display:flex; align-items:center; gap:7px; color:#687c6c; font-size:11px; }.legend-row b { margin-right:auto; color:#2f4435; }.legend-swatch { width:8px; height:8px; border-radius:50%; }
.service-chart { display:grid; gap:13px; min-height:85px; }.service-row { display:grid; grid-template-columns:180px 1fr 35px; align-items:center; gap:12px; font-size:11px; color:#617366; }.service-row strong { text-align:left; }.track { height:9px; background:#edf3ed; border-radius:10px; overflow:hidden; }.fill { height:100%; background:#4d9067; border-radius:10px; }.chart-empty { color:#9ba69e; font-size:12px; align-self:center; text-align:center; width:100%; padding:35px 0; }
dialog { border:1px solid var(--line); border-radius:14px; padding:0; width:min(520px,calc(100vw - 30px)); box-shadow:0 25px 65px #183a2750; color:var(--ink); }dialog::backdrop { background:#1a2f2370; }.dialog-form { padding:23px; display:grid; gap:17px; }.dialog-head { display:flex; justify-content:space-between; align-items:flex-start; }.dialog-head .eyebrow { margin:0; }.dialog-head h2 { margin:3px 0 0; font-size:20px; }.plain-close { border:0; background:transparent; color:#9ca99f; font-size:26px; }
.dialog-form label { display:grid; gap:6px; font-weight:600; font-size:12px; }.dialog-form input,.dialog-form textarea { width:100%; border:1px solid #d8e3da; border-radius:8px; padding:10px; outline-color:#649a74; font-weight:400; }.dialog-form select { width:100%; font-size:13px; }.two-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.dialog-form fieldset { border:1px solid var(--line); border-radius:9px; padding:11px; }.dialog-form legend { font-size:12px; font-weight:600; }.check-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.check-grid label { display:flex; gap:7px; align-items:center; border:1px solid var(--line); border-radius:7px; padding:8px; font-size:11px; font-weight:500; }.check-grid input { width:auto; }.dialog-actions { display:flex; justify-content:flex-end; gap:8px; border-top:1px solid var(--line); padding-top:17px; }
.quiet { color:#87968c; font-size:11px; margin:0; }
.topbar-actions,.page-actions,.row-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.row-actions { min-width:85px; }
.user-label { color:var(--muted); font-size:12px; }
.theme-toggle { white-space:nowrap; font-size:12px; }
.login-card > .theme-toggle { margin-top:24px; width:100%; }
.danger-text { color:#bc514a; }
.danger-button { background:#a53d36; border-color:#a53d36; color:#fff; }
.permission-note { margin-top:20px; line-height:1.8; }
.dialog-form .checkbox-label { display:flex; align-items:center; gap:8px; }
.dialog-form .checkbox-label input { width:auto; }
button:disabled,select:disabled { cursor:not-allowed; opacity:.6; }
:root[data-theme="dark"] .sidebar,:root[data-theme="dark"] .topbar,:root[data-theme="dark"] .summary-grid article,:root[data-theme="dark"] .table-card,:root[data-theme="dark"] .chart-card,:root[data-theme="dark"] .service-card,:root[data-theme="dark"] .login-card,:root[data-theme="dark"] .empty-card,:root[data-theme="dark"] .donut-center,:root[data-theme="dark"] dialog { background:var(--panel); color:var(--ink); }
:root[data-theme="dark"] .login-page { background:linear-gradient(135deg,#14271c,var(--canvas)); }
:root[data-theme="dark"] th,:root[data-theme="dark"] .today { background:var(--raised); color:var(--muted); }
:root[data-theme="dark"] td,:root[data-theme="dark"] .customer-cell strong,:root[data-theme="dark"] .legend-row b { color:var(--ink); border-color:var(--line); }
:root[data-theme="dark"] .sidebar nav a,:root[data-theme="dark"] .summary-grid span,:root[data-theme="dark"] .summary-grid small,:root[data-theme="dark"] .service-card p,:root[data-theme="dark"] .legend-row,:root[data-theme="dark"] .service-row,:root[data-theme="dark"] .quiet,:root[data-theme="dark"] .brand small { color:var(--muted); }
:root[data-theme="dark"] .sidebar nav a:hover { background:var(--raised); }
:root[data-theme="dark"] input,:root[data-theme="dark"] textarea,:root[data-theme="dark"] select,:root[data-theme="dark"] .secondary-button { background:var(--raised); color:var(--ink); border-color:var(--line); }
:root[data-theme="dark"] .search,:root[data-theme="dark"] fieldset,:root[data-theme="dark"] .check-grid label,:root[data-theme="dark"] .monthly-chart { border-color:var(--line); }
:root[data-theme="dark"] .primary-button { background:#286b46; border-color:#3b8b5d; color:#fff; }
:root[data-theme="dark"] .danger-button { background:#843a36; border-color:#b7574f; }
:root[data-theme="dark"] .notice { background:#203f2c; color:#b1e3c2; border-color:#396248; }
:root[data-theme="dark"] .notice.error { background:#452826; color:#f5b3ad; border-color:#7f443f; }
:root[data-theme="dark"] .avatar,:root[data-theme="dark"] .service-pill,:root[data-theme="dark"] .service-icon,:root[data-theme="dark"] .chart-icon,:root[data-theme="dark"] .track { background:var(--brand-soft); color:var(--brand); border-color:var(--line); }
:root[data-theme="dark"] .status,:root[data-theme="dark"] .status-select { background:#314638; color:#c2d2c6; }
:root[data-theme="dark"] .status.ACTIVE,:root[data-theme="dark"] .status-select.ACTIVE { background:#274a34; color:#a6dcb6; }
:root[data-theme="dark"] .status.PROSPECT,:root[data-theme="dark"] .status-select.PROSPECT { background:#2a3f56; color:#acc7ec; }
:root[data-theme="dark"] .status.ON_HOLD,:root[data-theme="dark"] .status-select.ON_HOLD { background:#514329; color:#e5ca92; }
@media(max-width:1000px) { .table-toolbar,.filters { flex-wrap:wrap; }.topbar { height:auto; min-height:70px; gap:10px; padding-block:12px; }.user-label { display:none; } }
@media(max-width:1050px) { .service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.dashboard-grid { grid-template-columns:1fr; }.chart-card.full { grid-column:auto; } }
@media(max-width:760px) { .app-shell { display:block; }.sidebar { min-height:auto; padding:10px; flex-direction:row; align-items:center; gap:15px; overflow-x:auto; border-left:0; border-bottom:1px solid var(--line); }.brand { padding:0; font-size:12px; white-space:nowrap; }.brand small,.nav-label,.sidebar-footer { display:none; }.sidebar nav { display:flex; white-space:nowrap; }.sidebar nav a { min-height:36px; padding:0 8px; font-size:13px; gap:5px; }.sidebar nav a span { font-size:11px; }.topbar { height:47px; padding:0 18px; }.page { padding:21px 16px; }.page-heading { align-items:flex-start; flex-direction:column; }.summary-grid,.service-grid { grid-template-columns:1fr; }.table-toolbar { flex-direction:column; }.search { min-width:0; width:100%; }.filters select { min-width:0; flex:1; }.filters { display:flex; }.status-chart { flex-direction:column; }.service-row { grid-template-columns:100px 1fr 30px; }.two-fields,.check-grid { grid-template-columns:1fr; } }