/* =======================================================================
   infront/style.css
   Refactor: token mapping to base.html variables + dark-mode fixes + RTL/LTR.
   - Keeps existing class names (no breaking changes)
   - Binds colors to base.html CSS variables where available
   - Respect dark text color set in settings (var(--dm-text) -> var(--text))
   - Avoids wiping header background image (use background-color)
   ======================================================================= */

/* =======================================================================
   0) THEME TOKENS (mapped to base.html variables with fallbacks)
   ======================================================================= */
:root {
  /* Brand (from base.html -> --brand, --brand-deep) */
  --color-brand: var(--brand, #143d35);
  --color-brand-deep: var(--brand-deep, #0f221d);

  /* Accents (from base.html -> --accent, --accent-hover, --bg-soft) */
  --color-accent: var(--accent, #ce883e);
  --color-accent-alt: var(--accent-hover, #bbaf9d);
  --color-accent-soft: var(--bg-soft, #d5cbbe);

  /* Surfaces (from base.html -> --bg-page, --bg-card) */
  --color-bg: var(--bg-page, #f8f7f4);
  --color-surface: var(--bg-card, #ffffff);
  --color-surface-alt: var(--bg-soft, #faf9f7);

  /* Borders (from base.html -> --border, --border-strong) */
  --color-border: var(--border, #e2ddd5);
  --color-border-strong: var(--border-strong, #c9c1b5);

  /* Text (from base.html -> --text, --text-soft, --text-fade) */
  --color-text: var(--text, #24302d);
  --color-text-soft: var(--text-soft, #666);
  --color-text-muted: var(--text-fade, #7a8683);

  /* States (map to base if present; else fallbacks) */
  --color-success: var(--ok, #219d36);
  --color-success-bright: #36e25a;
  --color-warning: var(--warning, #ce883e);
  --color-archived: #a4a4a4;
  --color-danger: var(--danger, #b33a2d);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-xxl: 24px;

  /* Shadows (prefer base shadows when available) */
  --shadow-sm: var(--shadow-sm, 0 2px 6px rgba(0,0,0,.08));
  --shadow-md: var(--shadow-md, 0 4px 16px rgba(0,0,0,.07));
  --shadow-lg: var(--shadow-lg, 0 10px 40px -4px rgba(0,0,0,.12));

  /* Motion */
  --transition-fast: .15s;
  --transition-base: .25s;

  /* Layout */
  --container-width: 1180px;
  --focus-ring: 0 0 0 3px rgba(206,136,62,.35);

  /* Badges background tokens */
  --badge-done-bg: #e0e0e0;
  --badge-pending-bg: #ffeda8;
  --badge-archived-bg: #b0b0b0;

  /* Nav pills tokens (to unify header links with base.html) */
  --nav-pill-bg: rgba(255,255,255,.10);
  --nav-pill-hover-bg: rgba(255,255,255,.18);
  --nav-pill-active-bg: var(--accent-grad);
  --nav-pill-color: #f1fbf8;
  --nav-pill-active-color: #fff;
}

/* Dark mode tokens: rely on base.html variables when present */
html.dark-mode, body.dark-mode, html[data-theme="dark"], body[data-theme="dark"] {
  --color-bg: var(--bg-page, #181a1a);
  --color-surface: var(--bg-card, #23272b);
  --color-surface-alt: var(--bg-soft, #23272b);

  --color-border: var(--border, #2d3234);
  --color-border-strong: var(--border-strong, #3a4043);

  /* Crucial: pick dark text color from base.html -> --dm-text via --text */
  --color-text: var(--text, #f7f7f7);
  --color-text-soft: var(--text-soft, #d0d0d0);
  --color-text-muted: var(--text-fade, #9aa3a2);

  --color-accent-alt: var(--accent-hover, #796c5b);

  --shadow-sm: var(--shadow-sm, 0 2px 6px rgba(0,0,0,.55));
  --shadow-md: var(--shadow-md, 0 4px 16px rgba(0,0,0,.5));
  --shadow-lg: var(--shadow-lg, 0 10px 42px -4px rgba(0,0,0,.55));

  --badge-done-bg: #444;
  --badge-pending-bg: #9d6a28;
  --badge-archived-bg: #555;
}

/* Breakpoints */
@media (max-width: 1200px) { :root { --container-width: 1040px; } }
@media (max-width: 992px)  { :root { --container-width: 900px; } }
@media (max-width: 768px)  { :root { --container-width: 100vw; } }

/* =======================================================================
   1) BASE / RESET / TYPOGRAPHY
   ======================================================================= */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
@font-face {
  font-family: 'Almarai';
  src: url('/static/fonts/Almarai-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  /* Performance: swap prevents invisible text during font load (improves LCP). */
  font-display: swap;
}
@font-face {
  font-family: 'Saudi';
  src: url('/static/fonts/Saudi-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  /* Performance: swap prevents invisible text during font load (improves LCP). */
  font-display: swap;
}
/* لا نفرض الاتجاه. اتركه يحدده الـ HTML attribute (dir="rtl" / "ltr") */

/* Typography and base colors bound to theme tokens */
body {
  font-family: var(--theme-font, 'Almarai'), system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: var(--theme-font-size, 14px);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display:block; max-width:100%; height:auto; }
a { color: var(--color-brand); text-decoration:none; transition: color var(--transition-fast), opacity var(--transition-fast); }
a:hover { color: var(--color-accent); }

/* عناوين تعتمد لون النص العام حتى تتبدل في الداكن */
h1,h2,h3,h4 { font-weight:700; line-height:1.2; color: var(--color-text); margin: 0 0 18px; }
p { line-height:1.55; margin:0 0 14px; }

/* ألغينا فرض الأبيض/الأسود الصلب في الوضع الداكن لتُحترم قيمة --text المختارة */

/* Focus */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 10px; }

/* =======================================================================
   2) LAYOUT / UTILITIES
   ======================================================================= */
.container {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: clamp(10px, 3vw, 24px);
}
.row { display:flex; gap:12px; align-items:center; }
.wrap { flex-wrap:wrap; }
.right { margin-inline-start:auto; }
.mb { margin-bottom:10px; }
.mb-md { margin-bottom:16px; }
.mb-lg { margin-bottom:26px; }
.mt { margin-top:10px; }
.mt-lg { margin-top:26px; }

.grid { display:grid; gap:12px; }
.grid.cols-2 { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.grid.cols-3 { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }

/* Width utilities */
.w-100 { width:100% !important; }
.maxw-100vw { max-width:100vw !important; }
/* Overflow helpers */
.overflow-x { overflow-x:auto; }
.overflow-y { overflow-y:auto; }

/* =======================================================================
   3) HEADER / NAV (keeps existing class names)
   ======================================================================= */
header.nav {
  /* مهم: لا نستخدم background حتى لا نمسح background-image المضافة من base.html */
  background-color: var(--color-brand);
  color:#fff;
  padding: 10px 0 14px;
  box-shadow: var(--shadow-sm);
  position:relative;
}
.brand { display:flex; align-items:center; gap:10px; }
.brand img {
  height: var(--brand-logo-h, 48px);
  width: auto;
  border-radius: 10px;
  object-fit: contain;
}

nav.links {
  display:flex; gap:6px; flex-wrap:wrap; justify-content:center;
  margin-top:10px; padding:0 8px;
}

/* موحّد مع base.html باستخدام متغيرات nav-pill */
nav.links a {
  background: var(--nav-pill-bg);
  color: var(--nav-pill-color);
  padding:8px 14px;
  font-size:14px;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
nav.links a:hover {
  background: var(--nav-pill-hover-bg);
  color: var(--nav-pill-color);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
nav.links a.active {
  background: var(--nav-pill-active-bg);
  color: var(--nav-pill-active-color);
  font-weight:700;
  box-shadow: 0 4px 16px -6px rgba(0,0,0,.4);
}
/* زيادة دقة الانتقاء لضمان الثبات إن وُجدت قواعد داخلية بالصفحات */
header.nav nav.links a.active {
  background: var(--nav-pill-active-bg);
  color: var(--nav-pill-active-color);
}

/* =======================================================================
   4) BUTTONS
   ======================================================================= */
.btn, button, input[type=submit] {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background: var(--color-brand); color:#fff;
  border:1px solid var(--color-brand);
  border-radius: var(--radius-md);
  padding: 10px 20px;
  font-size: 15px; font-weight:600;
  cursor:pointer; line-height:1;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.btn:hover, .btn:focus,
button:hover, button:focus,
input[type=submit]:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color:#fff;
}
.btn:active { transform: translateY(1px); }
.btn.secondary { background: var(--color-accent); border-color: var(--color-accent); }
.btn.link { background:transparent; border:none; color: var(--color-brand); padding:0; }
.btn.link:hover { color: var(--color-accent); }
.btn.danger { background: var(--color-danger); border-color: var(--color-danger); }
.btn.danger:hover { background:#992d21; }
.btn.success { background: var(--color-success); border-color: var(--color-success); }
.btn.success:hover { background:#178527; }
.btn.outline { background:transparent; color: var(--color-brand); border-color: var(--color-brand); }
.btn.outline:hover { background: var(--color-brand); color:#fff; }
.logout-link { background: var(--color-danger); color:#fff !important; }

html.dark-mode .btn,
html.dark-mode button,
html.dark-mode input[type=submit],
body.dark-mode .btn,
body.dark-mode button,
body.dark-mode input[type=submit] {
  background: var(--color-brand);
  color:#fff;
  border-color: var(--color-brand);
}
body.dark-mode .btn.link, html.dark-mode .btn.link { color: var(--color-accent); }

/* =======================================================================
   5) BADGES / TAGS
   ======================================================================= */
.badge {
  display:inline-block; padding:4px 10px; border-radius: 999px;
  font-size: 12px; background: var(--color-accent-soft); color: var(--color-text); font-weight:600;
}
.badge-success { background: var(--color-success); color:#fff; }
.badge-pending { background: var(--badge-pending-bg); color:#443600; }
.badge-archived { background: var(--badge-archived-bg); color:#fff; }
.tag { display:inline-block; padding:3px 8px; border-radius: 999px; background: var(--color-accent-soft); font-size: 12px; color: var(--color-text); }

/* =======================================================================
   6) CARDS
   ======================================================================= */
.card {
  background: var(--color-surface);
  border:1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 20px 22px;
  position:relative;
  transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast);
}
.card:hover { box-shadow: var(--shadow-lg); }
.card:focus-within { box-shadow: var(--shadow-lg), var(--focus-ring); }
.archived-wrapper { background: var(--color-surface-alt); }

/* =======================================================================
   7) FORMS
   ======================================================================= */
label { font-size:14px; font-weight:600; margin:0 0 6px; display:inline-block; color: var(--color-text); }
input[type=text], input[type=password], input[type=date], input[type=datetime-local], input[type=file],
textarea, select {
  width:100%; padding:10px 14px; border:1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text);
  font-size:15px; transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
input:focus, textarea:focus, select:focus { outline:none; border-color: var(--color-accent); box-shadow: var(--focus-ring); }
.inline-input { padding:6px 10px; border-radius: var(--radius-md); font-size:14px; }

/* =======================================================================
   8) TABLES
   ======================================================================= */
.table-wrap { overflow:auto; border-radius: var(--radius-lg); }
table {
  width:100%; border-collapse:separate; border-spacing:0;
  background: var(--color-surface);
  border:1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size:15px;
}
th, td { padding: 12px 10px; border-bottom:1px solid var(--color-border); text-align:right; vertical-align:top; }
th { background: var(--color-accent-soft); color: #37423e; font-weight:700; font-size:14px; }
tr:last-child td { border-bottom:none; }
html.dark-mode th, body.dark-mode th { color:#ffe082; background: var(--color-surface); }

/* =======================================================================
   9) MODALS
   ======================================================================= */
.modal-overlay {
  position:fixed; inset:0; background: rgba(0,0,0,0.4); display:none; z-index:2000;
  align-items:center; justify-content:center; padding: 30px 14px;
}
.modal-overlay.open { display:flex; }
.modal-dialog {
  background: var(--color-surface);
  width:100%; max-width:600px; max-height:85vh; overflow-y:auto;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border:1px solid var(--color-border);
  display:flex; flex-direction:column;
}
.modal-header { padding:14px 18px; border-bottom:1px solid var(--color-border); display:flex; align-items:center; justify-content:space-between; }
.modal-title { margin:0; font-size:18px; color: var(--color-text); }
.modal-body { padding:18px 20px; color: var(--color-text); }
.close { background:transparent; border:none; font-size:24px; line-height:1; cursor:pointer; color: var(--color-text); }
.close:hover { color: var(--color-accent); }

/* =======================================================================
   10) CALENDAR (polished + responsive)
   ======================================================================= */
.calendar-wrapper {
  background: var(--color-surface);
  border:1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 22px 20px 28px;
  margin-bottom: 40px;
  box-shadow: var(--shadow-md);
}
.calendar-header {
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px;
}
.calendar-header .calendar-title { font-size:22px; font-weight:700; margin:0; color: var(--color-text); }
.calendar-header .cal-nav {
  font-size:15px; font-weight:600; color: var(--color-accent);
  background:transparent; padding:6px 10px; border-radius: var(--radius-md); border:1px solid transparent;
  transition: background .18s, color .18s, border-color .18s; line-height:1.1;
}
.calendar-header .cal-nav:hover { background: var(--color-accent); color:#fff; border-color: var(--color-accent); text-decoration:none; }

.calendar-scroll { overflow-x:auto; }
.calendar-grid {
  display:grid;
  grid-template-columns: repeat(7, minmax(44px, 1fr));
  gap:8px;
}
.calendar-grid .day {
  position:relative; display:flex; flex-direction:column; justify-content:flex-start; gap:6px;
  padding:10px 8px 12px;
  background: var(--color-surface);
  border:1px solid var(--color-border-strong);
  border-radius:12px; box-shadow: var(--shadow-sm);
  min-height:130px; overflow:hidden;
}
.calendar-grid .day:hover { box-shadow: var(--shadow-md); }
.calendar-grid .day.selected { outline:2px solid var(--color-accent); }
.day-name { font-weight:700; text-align:center; color: var(--color-text); padding:6px 0 4px; font-size:14px; }
.day-top { display:flex; flex-direction:column; gap:2px; font-size:12px; line-height:1.2; }
.day-top .greg-num { font-weight:700; font-size:14px; color: var(--color-text); }
.day-top .hijri-num { font-weight:600; color: var(--color-accent); font-size:12px; }

.calendar-add-btn, .add-mini, .day .add-mini {
  margin-top:auto; width:100%;
  background: var(--color-accent); color:#fff; border:none; border-radius:999px;
  padding:8px 4px; font-size:13px; font-weight:700; cursor:pointer; letter-spacing:.5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.18); transition: background .18s, transform .18s;
}
.calendar-add-btn:hover { background:#b66f25; }

.calendar-grid .day.today-highlight {
  background: linear-gradient(135deg,#ffe6cf,#ffd9a6);
  border:1px solid var(--color-accent);
}
html.dark-mode .calendar-grid .day.today-highlight,
body.dark-mode .calendar-grid .day.today-highlight {
  background: linear-gradient(135deg,rgba(54,226,90,0.16),rgba(54,226,90,0.05)) !important;
}
.calendar-event {
  background: var(--color-accent-soft);
  border-radius: 8px;
  padding:4px 6px;
  font-size:11px; color:#333; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
html.dark-mode .calendar-event, body.dark-mode .calendar-event { background:#2f3335; color:#eee; }

/* =======================================================================
   11) APPOINTMENTS
   ======================================================================= */
.appointments-cards { display:flex; flex-direction:column; gap: 12px; }

.appointment-card-expandable {
  background: var(--color-surface); color: var(--color-text);
  border-radius: 12px; border:1px solid var(--color-border); box-shadow: 0 2px 10px #0001;
  margin-bottom: 14px; padding: 6px 8px; position:relative;
  transition: box-shadow .13s, transform .13s, border-color .13s, background .13s;
}
.appointment-card-expandable:hover { box-shadow: 0 6px 18px #0002; }

.appt-summary-row {
  display:flex; align-items:center; gap:7px; padding:7px 2px;
  font-size: 1.08em; cursor:pointer; border-bottom: 1px solid var(--color-border);
}
.appt-title { font-weight: 800; flex: 1 1 auto; min-width: 90px; word-break: break-word; }
.appt-date { color: var(--color-accent); font-size: 12px; min-width: 60px; }
.appt-lawyer { color: var(--color-text-soft); font-size: 12px; min-width: 70px; }

.appt-toggle-btn {
  margin-right: 6px; background: #fff; border: 1px solid var(--color-border); font-size: 1.3em; cursor: pointer;
  transition: transform .2s, background .2s, border-color .2s; color: var(--color-brand); padding: 0 6px; border-radius: 10px; width:36px; height:36px;
}
.appt-toggle-btn:hover{ background:#f6f8f7; }
.appt-toggle-btn::before{ content:"▾"; font-size:18px; line-height:1; transform:rotate(0deg); transition: transform .18s; }
.appointment-card-expandable.open .appt-toggle-btn::before{ transform: rotate(180deg); }

.appt-details {
  display:none; background: var(--color-surface-alt); border-top: 1px solid var(--color-border); padding: 8px 4px 12px 4px;
  animation: detailsIn .35s cubic-bezier(.42,1.18,.47,1.11);
}
.appt-details.open { display:block; }

.btn-action {
  font-size: 14px !important; padding: 7px 22px !important; border-radius: 6px !important; height:auto !important;
  min-width: 72px !important; line-height: 20px !important; margin-inline:2px; background: var(--color-surface-alt) !important;
  color: var(--color-text) !important; border:1px solid var(--color-border) !important; transition: background .2s; box-sizing:border-box; font-weight:600;
}
.btn-action:hover, .btn-action:focus { background: var(--color-surface) !important; color: var(--color-text) !important; }
.actions-vertical { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }

.tag.files-download, a.tag.files-download {
  font-size: 11px !important; padding: 2px 8px !important; border-radius: 4px !important; height:auto !important; 
  min-width: unset !important; line-height: normal !important; background: var(--color-surface-alt) !important; color: var(--color-text) !important;
  border:1px solid var(--color-border) !important; transition: background .2s; display:inline-block; margin: 2px 0;
}
.tag.files-download:hover, a.tag.files-download:hover,
.tag.files-download:focus, a.tag.files-download:focus { background: var(--color-surface) !important; color: var(--color-text) !important; }

.date-gregorian { font-weight: 800; font-size: 13.5px; color: var(--date-main, var(--color-text)); }
.date-hijri { font-weight: 800; font-size: 13.5px; color: var(--date-secondary, var(--color-accent)); }
.date-time { font-size: 12.5px; font-weight: 500; color: var(--date-secondary, var(--color-accent)); }

.case-badge-inline{
  background:var(--color-brand); color:#fff; font-size:11px; font-weight:800; padding:3px 10px 4px; border-radius:16px; letter-spacing:.3px;
  margin-inline-start:6px; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.case-badge-inline:hover { filter:brightness(1.1); }

/* =======================================================================
   12) TASKS
   ======================================================================= */
.tasks-user-title { font-size:20px; margin:0 0 18px; color: var(--color-text); }
.tasks-list { display:block; width:100%; }

.tasks-list .task-card {
  background: var(--color-surface); border:1.5px solid var(--color-border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
  padding: 18px 20px 16px; margin-bottom: 26px; position:relative;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.tasks-list .task-card:hover { box-shadow: var(--shadow-lg); border-color: var(--color-accent-soft); }
.tasks-list .task-card:focus-within { box-shadow: var(--shadow-lg), var(--focus-ring); }

.task-summary-row { display:flex; align-items:center; gap:12px; margin:0 0 14px; cursor:pointer; user-select:none; }
.task-toggle-btn {
  width:38px; height:38px; border-radius: var(--radius-md); background: var(--color-brand); border:none;
  font-size:20px; color:#fff; display:flex; align-items:center; justify-content:center; transition: background var(--transition-fast), transform var(--transition-fast); cursor:pointer;
}
.task-toggle-btn:hover { background: var(--color-accent); }
.task-toggle-btn.rotated { transform: rotate(180deg); }
.task-title { flex:1; font-size: 16px; font-weight:700; color: var(--color-text); margin:0; line-height:1.4; }
.task-status { font-size:13px; font-weight:700; letter-spacing:.3px; min-width:70px; text-align:center; }
.task-status.status-done { color: var(--color-success); }
.task-status.status-pending { color: var(--color-warning); }
.task-status.status-archived { color: var(--color-archived); }
.task-date { font-size: 13px; color: var(--color-text-soft); font-weight:400; margin-inline-start:4px; }

.task-card.status-done { background: var(--color-surface-alt); border-left:5px solid var(--color-success-bright); }
.task-card.status-archived { opacity:.7; }

.task-details {
  display:none; background: var(--color-surface-alt); border-top:1px solid var(--color-border);
  padding:14px 10px 4px; border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  font-size:14px; color: var(--color-text); line-height:1.5; animation: detailsIn .35s cubic-bezier(.42,1.18,.47,1.11);
}
.task-details.open { display:block; }
@keyframes detailsIn { from { opacity:0; transform:translateY(-4px);} to { opacity:1; transform:translateY(0);} }
.task-details-inner > div { margin-bottom:8px; }
.task-details a { color: var(--color-accent); }
.task-details a:hover { text-decoration:underline; }

.task-actions { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 4px; }
.task-actions .btn { padding:8px 18px; font-size:14px; border:none; background: var(--color-brand); }
.task-actions .btn:hover { background: var(--color-accent); }
.task-actions .btn.danger { background: var(--color-danger); }
.task-actions .btn.danger:hover { background:#962a1f; }

.task-comments { margin-top:16px; }
.task-comments .comment {
  background: var(--color-surface-alt); border:1px solid var(--color-border); border-radius: var(--radius-md);
  padding:8px 10px; font-size:14px; margin-bottom:6px; line-height:1.45; color: var(--color-text);
}
.task-comments .comment .author { font-weight:700; color: var(--color-accent); margin-inline-start:6px; font-size:13px; }
.task-comments .comment .date { font-size:11px; color: var(--color-text-soft); margin-inline-end:6px; }

/* =======================================================================
   13) FILE MANAGER
   ======================================================================= */
.filemanager-page { margin-top:30px; }
.files-actions-bar { display:grid; gap:24px; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); margin-bottom: 34px; align-items:start; }
.files-actions-bar label { font-size:14px; font-weight:700; margin-bottom:6px; color: var(--color-text); }
.files-actions-bar input[type=file], .files-actions-bar input[type=text] {
  background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md);
  padding:10px 14px; font-size:14px; margin-bottom:10px;
}
.files-actions-bar .upload-block, .files-actions-bar .new-folder {
  background: var(--color-surface-alt); padding:16px 18px 18px; border:1px solid var(--color-border); border-radius: 18px; box-shadow: var(--shadow-sm);
}

.files-table {
  width:100%; border-collapse:separate; border-spacing:0; background: var(--color-surface);
  border:1px solid var(--color-border); border-radius: 18px; overflow:hidden; font-size:14px;
}
.files-table th { background: var(--color-surface-alt); color: var(--color-accent); font-weight:700; font-size:13px; letter-spacing:.3px; padding:14px 14px 12px; border-bottom:1px solid var(--color-border); }
html.dark-mode .files-table th, body.dark-mode .files-table th { background:#1e2224; color:#ffe082; }
.files-table td { padding:12px 14px; border-bottom:1px solid var(--color-border); vertical-align:middle; color: var(--color-text); }
.files-table tbody tr:last-child td { border-bottom:none; }

.files-table td .file-name {
  font-weight:600; color: var(--color-brand); display:inline-flex; align-items:center; gap:8px; font-size:14px; padding:4px 0;
}
html.dark-mode .files-table td .file-name, body.dark-mode .files-table td .file-name { color:#e6e6e6; }
.files-table td .file-name .folder-icon {
  width:24px; height:24px; display:inline-flex; justify-content:center; align-items:center;
  background:#ffb347; color:#222; font-weight:700; border-radius:6px; font-size:13px;
}
html.dark-mode .files-table td .file-name .folder-icon, body.dark-mode .files-table td .file-name .folder-icon { background:#d18d34; color:#111; }

.file-actions { display:flex; gap:8px; flex-wrap:nowrap; }
.file-btn {
  width:34px; height:34px; border-radius:10px; border:1px solid var(--color-border);
  background: var(--color-surface-alt); color: var(--color-accent); display:flex; align-items:center; justify-content:center;
  font-size:16px; cursor:pointer; transition: background .17s, color .17s, border-color .17s, transform .17s;
}
.file-btn:hover { background: var(--color-accent); color:#fff; border-color: var(--color-accent); transform: translateY(-2px); }
.file-btn.delete { color:#c94d3e; } .file-btn.delete:hover { background:#c94d3e; }
.file-btn.download { color:#2f90d8; } .file-btn.download:hover { background:#2f90d8; }
.file-btn.rename { color:#6a5bd1; } .file-btn.rename:hover { background:#6a5bd1; }
html.dark-mode .file-btn, body.dark-mode .file-btn { background:#2a2f31; border-color:#32383a; color:#d9d9d9; }
html.dark-mode .file-btn:hover, body.dark-mode .file-btn:hover { color:#fff; }

.file-size { font-family:monospace; font-size:12px; color: var(--color-text-soft); }

/* =======================================================================
   14) UTILITIES
   ======================================================================= */
.muted { color: var(--color-text-muted); }
.hide { display:none !important; }

/* =======================================================================
   15) RESPONSIVE POLISH
   ======================================================================= */
@media (max-width: 900px) {
  nav.links a { font-size:13px; padding:6px 10px; }
  .btn { padding:9px 16px; font-size:14px; }
  .tasks-user-title { font-size:18px; }

  .task-summary-row { flex-wrap:wrap; align-items:flex-start; }
  .task-status { order:3; }
  .task-date { font-size:12px; }
}

@media (max-width: 768px) {
  .container, main.container { padding-inline: 2vw; }

  .card,
  .appointments-cards,
  .appointment-card-expandable {
    border-radius: 12px !important;
    margin: 10px 2vw !important;
    box-sizing:border-box;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 14px 10px !important;
  }
  .appointments-cards { gap: 10px !important; }

  .searchbar, .filters-row { display:flex; flex-direction:column !important; gap: 8px !important; align-items: stretch !important; }
  .searchbar input[type=text], .searchbar select { width:100% !important; }

  .btn, .btn-action { width:100%; margin: 4px 0 !important; padding: 11px 12px !important; }

  .appt-summary-row { flex-direction: column; align-items:flex-start; gap:6px !important; font-size: 1em !important; padding: 6px 2px !important; }
  .appt-title, .appt-lawyer, .appt-date { min-width:0 !important; word-break: break-word; }
  .appt-date { font-size: .95em !important; }

  .table-wrap, table, .files-table { display:block; width: 100%; overflow-x:auto; }
  th, td { font-size: 14px !important; white-space: normal !important; word-break: break-word; padding: 9px 8px !important; }

  .calendar-grid { gap:6px; }
  .calendar-grid .day { min-height: 110px; padding: 8px 6px; }
  .day-name { font-size:13px; }
}

@media (max-width: 480px) {
  .modal-dialog { max-width:98vw; }
  h2 { font-size:20px; }
  h3 { font-size:18px; }

  .calendar-grid { gap:4px; }
  .calendar-grid .day { min-height: 96px; }
}

/* =======================================================================
   16) NAV VISIBILITY ON MOBILE
   ======================================================================= */
@media (max-width: 980px){
  header.nav nav.links{ display:none !important; }
  main.container{ padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* === Appointment card mobile chevron === */
.appointment-card-expandable .appt-toggle-btn{ /* already defined above with better values */ }

/* === Users page mobile: horizontal scroll safeguard === */
@media (max-width: 900px){
  body.admin_users main.container{ overflow-x:auto; }
  body.admin_users table{ min-width: 720px; }
}

/* File manager container spacing so bottom bar doesn’t overlap actions on mobile */
@media (max-width: 980px){
  .filemanager-shell{ padding-bottom: 80px; }
}

/* =======================================================================
   17) GLOBAL TOAST (unified with base.html)
   ======================================================================= */
.global-toast {
  background: var(--toast) !important;
  color: #fff !important;
  border-radius: 14px;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: bold;
  box-shadow: 0 6px 22px -8px rgba(0,0,0,.18);
  margin: 12px auto;
  max-width: 420px;
  text-align: center;
  opacity: 0;
  transform: translateY(-18px) scale(.97);
  transition: .4s cubic-bezier(.4,0,.2,1);
}
.global-toast.visible { opacity: 1; transform: translateY(0) scale(1); }
.global-toast.info    { background: var(--toast) !important; color:#fff !important; }
.global-toast.error   { background: var(--danger, #b73128) !important; color:#fff !important; }
.global-toast.success { background: var(--ok, #137b2f) !important; color:#fff !important; }
.global-toast.warning { background: var(--warning, #ce7d1f) !important; color:#fff !important; }

.global-toast-box {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

/* =======================================================================
   18) MISC
   ======================================================================= */
:root { --gold: #D4AF37; }
.text-gold { color: var(--gold) !important; }

/* === 16) NAV VISIBILITY ON MOBILE (fixed) === */
@media (max-width: 980px){
  /* أخفِ ترويسة سطح المكتب نهائياً على الجوال لمنع ظهور شريطين */
  header.nav{ 
    display: none !important; 
  }
  /* أظهر شريط الموبايل فقط */
  .mobile-topbar{ 
    display: flex !important; 
    position: sticky; 
    top: 0; 
    z-index: 1100; 
  }
  /* مساحة سفلية بسيطة للصفحات ذات الشريط السفلي */
  main.container{ 
    padding-bottom: calc(84px + env(safe-area-inset-bottom)); 
  }
}

/* ==== Tasks dark-mode polish (group-box + task card + outline button) ==== */
html.dark-mode .group-box{
  background: var(--dm-card, #182320) !important;
  border-color: var(--dm-border, #2d3c39) !important;
  box-shadow: 0 10px 28px -16px rgba(0,0,0,.70) !important;
}
html.dark-mode .group-box.archived{
  background: color-mix(in oklab, var(--dm-card,#182320), #000 6%) !important;
}

html.dark-mode .tasks-list .task-card{
  background: var(--dm-card, #182320) !important;
  border-color: var(--dm-border, #2d3c39) !important;
  color: var(--dm-text, #eef8f5) !important;
}

html.dark-mode .tasks-list .task-card .task-details{
  background:#101716 !important;
  border-top-color: var(--dm-border, #2d3c39) !important;
}

.tasks-list .task-card .btn.btn-outline{
  background: transparent !important;
  color: var(--brand, #0d3f37) !important;
  border: 1.5px solid var(--brand, #0d3f37) !important;
}
.tasks-list .task-card .btn.btn-outline:hover{
  background: color-mix(in oklab,var(--bg-card,#fff),var(--brand,#0d3f37) 12%) !important;
}
html.dark-mode .tasks-list .task-card .btn.btn-outline{
  color:#21c6b0 !important;
  border-color:#21c6b0 !important;
}
html.dark-mode .tasks-list .task-card .btn.btn-outline:hover{
  background: rgba(33,198,176,.14) !important;
}
/* ==== Tasks page dark-mode fixes: title color + hide legacy chevrons + borders ==== */

/* 1) لون عنوان الصفحة (وقطع مشابه) في الوضع الداكن */
html.dark-mode .page-title,
body.dark-mode .page-title,
html.dark-mode main.container h1,
body.dark-mode main.container h1,
html.dark-mode main.container h2,
body.dark-mode main.container h2{
  color: var(--dm-text, #eef8f5) !important;
}

/* عنونة مجموعات المهام */
html.dark-mode .tasks-wrapper .group-title{
  color: var(--dm-text, #eef8f5) !important;
}

/* 2) جعل غلاف المجموعة داكناً + الكروت */
html.dark-mode .tasks-wrapper .group-box{
  background: var(--dm-card, #182320) !important;
  border-color: var(--dm-border, #2d3c39) !important;
  box-shadow: 0 10px 28px -16px rgba(0,0,0,.70) !important;
}
html.dark-mode .tasks-wrapper .task-card{
  background: var(--dm-card, #182320) !important;
  border-color: var(--dm-border, #2d3c39) !important;
  color: var(--dm-text, #eef8f5) !important;
}
html.dark-mode .tasks-wrapper .task-card .task-details{
  background:#101716 !important;
  border-top-color: var(--dm-border, #2d3c39) !important;
}

/* 3) إخفاء أي سهم موروث داخل بطاقة المهمة (رموز/عناصر زائفة) */
html.dark-mode .tasks-wrapper .task-card::after,
html.dark-mode .tasks-wrapper .task-card::before,
html.dark-mode .tasks-wrapper .task-row-flex::after,
html.dark-mode .tasks-wrapper .task-row-flex::before{
  content:none !important; display:none !important;
}
html.dark-mode .tasks-wrapper .task-card .fa-chevron-down,
html.dark-mode .tasks-wrapper .task-card .fa-chevron-up,
html.dark-mode .tasks-wrapper .task-card .chevron,
html.dark-mode .tasks-wrapper .task-card .icon-chevron,
html.dark-mode .tasks-wrapper .task-card .appt-toggle-btn,
html.dark-mode .tasks-wrapper .task-card .task-toggle-btn,
html.dark-mode .tasks-wrapper .task-card [class*="chevron"]{
  display:none !important; pointer-events:none !important;
}

/* 4) زر "إدارة المرفقات" كزر outline واضح في الوضعين */
.tasks-wrapper .task-card .btn.btn-outline{
  background: transparent !important;
  color: var(--brand, #0d3f37) !important;
  border: 1.5px solid var(--brand, #0d3f37) !important;
}
.tasks-wrapper .task-card .btn.btn-outline:hover{
  background: color-mix(in oklab,var(--bg-card,#fff),var(--brand,#0d3f37) 12%) !important;
}
html.dark-mode .tasks-wrapper .task-card .btn.btn-outline{
  color:#21c6b0 !important; border-color:#21c6b0 !important;
}
html.dark-mode .tasks-wrapper .task-card .btn.btn-outline:hover{
  background: rgba(33,198,176,.14) !important;
}

/* 5) تأكيد وضوح نص الأزرار المعبّأة */
.tasks-wrapper .task-actions .btn{ color:#fff !important; }
/* ==== Dark mode: status-bar + legacy chevron kill (global) ==== */

/* 1) شريط الحالات (الفلتر) في الداكن */
html.dark-mode .filters-row .status-bar,
body.dark-mode .filters-row .status-bar{
  background: var(--dm-card, #182320) !important;
  border-color: var(--dm-border, #2d3c39) !important;
  color: var(--dm-text, #eef8f5) !important;
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.6) !important;
}

/* نص عناصر الشريط */
html.dark-mode .filters-row .status-item{
  color: var(--dm-text, #eef8f5) !important;
}

/* نقاط الحالة داخل الشريط (حافة مناسبة للداكن) */
html.dark-mode .filters-row .dot{
  border-color: #0b1211 !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,.4) !important;
}

/* 2) إخفاء أي سهام قديمة موروثة داخل كروت المهام (على مستوى عام) */
.tasks-wrapper .task-card::after,
.tasks-wrapper .task-card::before,
.tasks-wrapper .task-row-flex::after,
.tasks-wrapper .task-row-flex::before{
  content: none !important;
  display: none !important;
}
.tasks-wrapper .task-card .fa-chevron-down,
.tasks-wrapper .task-card .fa-chevron-up,
.tasks-wrapper .task-card .chevron,
.tasks-wrapper .task-card .icon-chevron,
.tasks-wrapper .task-card .appt-toggle-btn,
.tasks-wrapper .task-card .task-toggle-btn,
.tasks-wrapper .task-card [class*="chevron"]{
  display: none !important;
  pointer-events: none !important;
}
/* ==== Fix: finish checkbox in task cards (dark-mode) ==== */
/* أخفِ علامة الصح عندما يكون المربع غير مُحدد */
.task-card .finish-visual .check-icon{
  opacity: 0;                 /* لا تُعرض افتراضيًا */
  border-right-color: transparent;
  border-bottom-color: transparent;
  transition: opacity .15s ease;
}
/* عند التحديد: أظهر علامة الصح */
.task-card .finish-checkbox:checked + .finish-visual .check-icon{
  opacity: 1;
  border-right-color: #fff;
  border-bottom-color: #fff;
}

/* ضبط مظهر مربع العلامة في الوضع الداكن */
html.dark-mode .task-card .finish-visual{
  background: transparent !important;          /* لا نجعل الخلفية فاتحة في الداكن */
  border-color: #7aa19a !important;            /* حدّ ناعم مناسب للداكن */
}
html.dark-mode .task-card .finish-checkbox:checked + .finish-visual{
  background: var(--brand, #0d3f37) !important;
  border-color: var(--brand, #0d3f37) !important;
}

/* احتراز: لا نسمح لأي أسهم/عناصر زائفة أن تُضاف قرب مربع الإنهاء */
.task-card .finish-box-wrapper::before,
.task-card .finish-box-wrapper::after{
  content: none !important;
  display: none !important;
}

/* ==== Comments bubbles (light/dark) - يمكن وضعه آخر الملف ==== */
.comments-list{
  display:flex; flex-direction:column; gap:8px;
  padding:6px 0; border-radius:10px;
}
.comment-item.bubble{
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #d7e5e2);
  border-radius: 12px;
  padding: 8px 10px;
  box-shadow: var(--shadow-sm);
  color: var(--text, #143d35);
}
.c-head{ display:flex; align-items:center; gap:8px; justify-content:space-between; margin-bottom:6px; }
.c-head .c-user{ font-weight:800; font-size:13px; color: var(--text, #143d35); }
.c-head .c-time{ font-size:11.5px; color: var(--text-soft, #6b7d7a); }
.c-del{ background: transparent; border: 1px solid var(--border, #d7e5e2); color:#c74134; border-radius: 8px; padding:2px 8px; cursor:pointer; font-size:13px; }
.c-del:hover{ filter:brightness(1.05); transform: translateY(-1px); }
.c-text{ font-size:13.5px; line-height:1.55; white-space:pre-wrap; }

html.dark-mode .comment-item.bubble{
  background: var(--dm-card, #182320);
  border-color: var(--dm-border, #2d3c39);
  color: var(--dm-text, #eef8f5);
  box-shadow: 0 6px 18px -10px rgba(0,0,0,.55);
}
html.dark-mode .c-head .c-user{ color: var(--dm-text, #eef8f5); }
html.dark-mode .c-head .c-time{ color: var(--text-fade, #7f9591); }
html.dark-mode .c-del{ border-color: var(--dm-border,#2d3c39); color:#ffb3aa; }
html.dark-mode .c-del:hover{ background: rgba(255,179,170,.08); }

/* ── Table row hover enhancement ────────────────────────── */
.table > tbody > tr {
  transition: background-color var(--transition-fast, 150ms ease),
              box-shadow var(--transition-fast, 150ms ease);
}
.table > tbody > tr:hover {
  background-color: color-mix(in srgb, var(--color-primary, #0d6b5a) 4%, var(--bg-card, #fff));
  box-shadow: inset 3px 0 0 var(--color-primary, #0d6b5a);
}
/* RTL: الخط يظهر من اليمين */
[dir="rtl"] .table > tbody > tr:hover {
  box-shadow: inset -3px 0 0 var(--color-primary, #0d6b5a);
}