/* ═══════════════════════════════════════ */
/* ECMS — Layout, Modal, Table, Auth      */
/* ═══════════════════════════════════════ */

/* Grid layouts */
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:16px;transition:background-color .3s ease,border-color .3s ease}
.grid-s{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:24px}
.grid-c{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.grid-u{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}

/* Table */
table{width:100%;border-collapse:collapse;font-size:12px}
th{text-align:left;padding:8px 10px;color:var(--text-d);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border)}
td{padding:10px;border-bottom:1px solid var(--border)}
tr.clickable{cursor:pointer}tr.clickable:hover{background:var(--hover-bg)}

/* Contract row */
.cr{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 20px;cursor:pointer;transition:border-color .2s;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:16px;margin-bottom:10px}
.cr:hover{border-color:var(--border-l)}

/* Modal */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}
.modal{background:var(--bg);border:1px solid var(--border);border-radius:18px;width:100%;max-width:620px;max-height:85vh;overflow:auto;padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.15)}
.m-sec{font-size:11px;font-weight:700;color:var(--accent-t);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.m-row{display:flex;justify-content:space-between;padding:5px 0;font-size:13px}
.m-row-l{color:var(--text-m)}.m-row-v{color:var(--text);font-weight:500;text-align:right;max-width:60%}

/* Auth */
.auth-box{max-width:420px;margin:12vh auto;padding:40px;text-align:center}
.auth-box h2{font-size:24px;font-weight:700;font-family:'IBM Plex Sans Arabic',-apple-system,sans-serif;margin-bottom:6px}
.auth-box p{color:var(--text-m);font-size:13px;margin-bottom:24px;line-height:1.6}
.auth-form{text-align:left}
.auth-form .inp{margin-bottom:12px}
.auth-err{background:var(--danger-dim);color:var(--danger);padding:8px 12px;border-radius:8px;font-size:12px;margin-bottom:12px;display:none}

/* Admin user card */
.user-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:10px}
.user-card .props-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}

/* Upload zone */
.drop{border:2px dashed var(--border-l);border-radius:16px;padding:30px;text-align:center;cursor:pointer;transition:all .3s}
.drop.over{border-color:var(--accent);background:var(--accent-dim)}

/* Charts */
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}
@media(max-width:768px){.charts-grid{grid-template-columns:1fr}}
.chart-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;cursor:pointer;transition:all .3s;position:relative;overflow:hidden}
.chart-card:hover{border-color:var(--border-l)}
.chart-card.compact{min-height:auto}
.recon-badge{cursor:pointer;transition:opacity .2s;display:inline-flex;align-items:center;gap:4px}
.recon-badge:hover{opacity:0.7}
.chart-card.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;max-width:800px;max-height:85vh;z-index:1001;padding:24px;cursor:default;overflow:visible;border-color:var(--accent)}
.chart-card.expanded .chart-expand-hint{display:none}
.chart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(8px);z-index:1000;display:none}
.chart-overlay.show{display:block}
.chart-title{font-size:12px;font-weight:700;margin-bottom:10px;color:var(--text);display:flex;justify-content:space-between;align-items:center}
.chart-expand-hint{font-size:10px;color:var(--text-d);font-weight:500}
.chart-close{position:absolute;top:12px;right:12px;background:var(--card);border:1px solid var(--border);border-radius:8px;color:var(--text-m);font-size:16px;cursor:pointer;padding:2px 8px;display:none;z-index:2}
.chart-card.expanded .chart-close{display:block}
.chart-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:11px;color:var(--text-m)}
.chart-legend-item{display:flex;align-items:center;gap:5px}
.chart-legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
@keyframes donutFill{from{stroke-dasharray:0 100}to{stroke-dasharray:var(--fill) 100}}
.donut-seg{animation:donutFill 1s ease-out forwards}
@keyframes lineDraw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.line-anim{animation:lineDraw 1.5s ease-out forwards}
.chart-tooltip{position:absolute;background:var(--card);border:1px solid var(--border-l);border-radius:8px;padding:6px 10px;font-size:11px;color:var(--text);pointer-events:none;z-index:10;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.12)}

/* Theme overrides — LIGHT is the default; DARK deepens overlays/shadows */
[data-theme="dark"] .modal-bg{background:rgba(0,0,0,.7)}
[data-theme="dark"] .chart-overlay{background:rgba(0,0,0,.7)}
[data-theme="dark"] .modal{box-shadow:0 20px 60px rgba(0,0,0,.5)}
[data-theme="dark"] .chart-tooltip{box-shadow:0 4px 12px rgba(0,0,0,.4)}

/* RTL overrides */
[dir="rtl"] body{font-family:'RiyalSymbol','IBM Plex Sans Arabic',sans-serif}
[dir="rtl"] .sc{flex-direction:row-reverse;text-align:right}
[dir="rtl"] .m-row{flex-direction:row-reverse}
[dir="rtl"] .m-row-v{text-align:left}
[dir="rtl"] table th,[dir="rtl"] table td{text-align:right}
[dir="rtl"] .badge{flex-direction:row-reverse}
[dir="rtl"] .cr{direction:rtl}
[dir="rtl"] .tabs{flex-direction:row-reverse !important;justify-content:flex-end !important}
[dir="rtl"] #mainTabs{flex-direction:row-reverse !important;justify-content:flex-end !important}
[dir="rtl"] .inp-label{text-align:right}
[dir="rtl"] .chart-close{right:auto;left:12px}
[dir="rtl"] .chart-legend{flex-direction:row-reverse}

/* Responsive */
@media(max-width:600px){.upload-dropdowns-row{flex-direction:column}.upload-dropdowns-row .dd-group{width:100%}.upload-dropdowns-row .sel,.upload-dropdowns-row .ms-dropdown{width:100%}}
/* Phone gutters: reclaim the 24px side padding wasted on ~390px screens */
@media(max-width:600px){#tc{padding:16px 12px !important}.dash-header{padding-left:12px !important;padding-right:12px !important}.tabs{padding-left:12px;padding-right:12px}.grid-c{grid-template-columns:1fr}}