/* Component styles for the SaaS dashboard rebuild (Task 3). Built on
   dashboard-tokens.css; every colour/spacing/radius value here is a
   var(--dt-*) token, never a raw literal (acceptance criterion: "every
   colour/spacing value from a token"). Logical properties throughout
   (inset-inline-start, not left/right) -- this admin is Arabic/RTL-first
   (see index.html's dir="rtl"), same convention theme.css already uses. */

/* === Layout: sidebar + content === */

.dt-layout { display: flex; min-height: 100vh; }

.dt-sidebar {
  width: var(--dt-sidebar-width);
  flex-shrink: 0;
  background: var(--dt-color-surface);
  border-inline-end: 1px solid var(--dt-color-border);
  padding: var(--dt-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--dt-space-6);
}

.dt-sidebar .dt-wordmark { display: flex; align-items: baseline; gap: .45em; direction: ltr; padding: 0 var(--dt-space-2); }
.dt-sidebar .dt-wordmark .amjd { font-weight: 700; letter-spacing: -0.03em; text-transform: uppercase; font-size: 1.05rem; color: var(--dt-color-foreground); }
.dt-sidebar .dt-wordmark .rule { width: 1.1em; height: .14em; background: var(--dt-color-accent); transform: translateY(-.3em); flex-shrink: 0; }
.dt-sidebar .dt-wordmark .aldia { font-weight: 700; letter-spacing: -0.03em; text-transform: uppercase; font-size: 1.05rem; color: var(--dt-color-foreground-muted); }

.dt-nav { display: flex; flex-direction: column; gap: var(--dt-space-1); }
.dt-nav a {
  display: block;
  padding: var(--dt-space-2) var(--dt-space-3) !important;
  border-radius: var(--dt-nav-item-radius) !important;
  color: var(--dt-color-foreground-muted);
  text-decoration: none;
  font-size: var(--dt-font-size-sm);
  transition: background var(--dt-duration-fast) var(--dt-ease-standard), color var(--dt-duration-fast) var(--dt-ease-standard);
}
.dt-nav a:hover { background: var(--dt-color-surface-sunken); color: var(--dt-color-foreground); }
.dt-nav a.active { background: var(--dt-color-gray-900); color: var(--dt-color-white); }
.dt-nav a:focus-visible { outline: 2px solid var(--dt-color-accent); outline-offset: 2px; }

.dt-sidebar-footer { margin-top: auto; }
.dt-sidebar .dt-logout {
  width: 100%;
  background: none;
  border: 1px solid var(--dt-color-border) !important;
  border-radius: var(--dt-nav-item-radius) !important;
  color: var(--dt-color-foreground-muted);
  font-family: var(--dt-font-display);
  font-size: var(--dt-font-size-sm);
  padding: var(--dt-space-2) var(--dt-space-3);
  cursor: pointer;
}
.dt-sidebar .dt-logout:hover { background: var(--dt-color-surface-sunken); color: var(--dt-color-foreground); }
.dt-sidebar .dt-logout:focus-visible { outline: 2px solid var(--dt-color-accent); outline-offset: 2px; }

.dt-main { flex: 1; min-width: 0; padding: var(--dt-space-6) var(--dt-space-8); }

/* .admin-shell (the pre-Task-3 content container: max-width 960px,
   centered) still wraps every routed page including .dt-main, so
   non-dashboard screens (ClientList, ProjectList, ...) keep working
   unmodified -- this task explicitly stops before restyling them. Inside
   the new layout that container would otherwise stack its own
   max-width/margin/padding on top of .dt-main's, which does not look
   right, but the old screens themselves are still fully untouched below
   this reset. */
.dashboard-shell .admin-shell { max-width: none; margin: 0; padding: 0; }

.dt-page-title { font-size: var(--dt-font-size-2xl); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 var(--dt-space-6); }
.dt-section-title { font-size: var(--dt-font-size-lg); font-weight: 700; margin: 0 0 var(--dt-space-3); }

/* === Card === */

.dt-card {
  background: var(--dt-card-bg);
  border: 1px solid var(--dt-card-border);
  border-radius: var(--dt-card-radius) !important;
  padding: var(--dt-card-padding);
  box-shadow: var(--dt-card-shadow);
}

/* === Pipeline stat row ===
   One card containing every stage, divided by hairlines, rather than a
   separate bordered/shadowed box per stage -- with 7 pipeline statuses
   (see STATUS_LABELS_AR) the old auto-fit card grid wrapped into a bulky
   multi-row block ("too many cards", reported during staging testing).
   No wrap here: narrow viewports scroll the strip horizontally instead,
   the same pattern .dt-nav already uses on mobile (see the max-width:
   640px block below), so it never re-collapses into stacked cards. */

.dt-pipeline {
  display: flex;
  background: var(--dt-card-bg);
  border: 1px solid var(--dt-card-border);
  border-radius: var(--dt-card-radius) !important;
  box-shadow: var(--dt-card-shadow);
  margin-bottom: var(--dt-space-6);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.dt-stat { flex: 1 1 auto; min-width: 6.5rem; padding: var(--dt-space-3) var(--dt-space-4); border-inline-start: 1px solid var(--dt-card-border); white-space: nowrap; }
.dt-stat:first-child { border-inline-start: none; }
.dt-stat .dt-stat-count { font-size: var(--dt-font-size-xl); font-weight: 700; line-height: 1.2; }
.dt-stat .dt-stat-label { font-size: var(--dt-font-size-xs); color: var(--dt-color-foreground-muted); margin-top: var(--dt-space-1); }

/* === Badge (status dots/pills -- muted colours reserved for these) === */

.dt-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--dt-font-size-xs);
  font-weight: 600;
  padding: var(--dt-badge-padding);
  border-radius: var(--dt-badge-radius) !important;
}
.dt-badge.neutral { background: var(--dt-status-neutral-bg); color: var(--dt-status-neutral-fg); }
.dt-badge.info { background: var(--dt-status-info-bg); color: var(--dt-status-info-fg); }
.dt-badge.success { background: var(--dt-status-success-bg); color: var(--dt-status-success-fg); }
.dt-badge.warning { background: var(--dt-status-warning-bg); color: var(--dt-status-warning-fg); }
.dt-badge.danger { background: var(--dt-status-danger-bg); color: var(--dt-status-danger-fg); }

/* === Action queue === */

.dt-action-list { display: flex; flex-direction: column; gap: var(--dt-space-2); }
.dt-action-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dt-space-3);
  padding: var(--dt-space-3);
  background: var(--dt-card-bg);
  border: 1px solid var(--dt-card-border);
  border-radius: var(--dt-radius-md) !important;
  text-decoration: none;
  color: inherit;
}
.dt-action-item:hover { border-color: var(--dt-color-border-strong); }
.dt-action-item:focus-visible { outline: 2px solid var(--dt-color-accent); outline-offset: 2px; }
.dt-action-item .dt-action-main { min-width: 0; }
.dt-action-item .dt-action-project { font-weight: 600; font-size: var(--dt-font-size-base); }
.dt-action-item .dt-action-client { color: var(--dt-color-foreground-muted); font-size: var(--dt-font-size-sm); }
.dt-action-item .dt-action-since { color: var(--dt-color-foreground-muted); font-size: var(--dt-font-size-xs); white-space: nowrap; }

/* === Recent activity === */

.dt-activity-list { display: flex; flex-direction: column; max-height: 28rem; overflow-y: auto; }
.dt-activity-item { display: flex; gap: var(--dt-space-3); padding: var(--dt-space-2) 0; border-top: 1px solid var(--dt-color-border); }
.dt-activity-item:first-child { border-top: none; }
.dt-activity-item .dt-activity-dot { width: 0.5rem; height: 0.5rem; border-radius: var(--dt-radius-full) !important; margin-top: 0.4em; flex-shrink: 0; background: var(--dt-color-gray-300); }
.dt-activity-item .dt-activity-text { font-size: var(--dt-font-size-sm); }
.dt-activity-item .dt-activity-text a { color: var(--dt-color-foreground); font-weight: 600; text-decoration: none; }
.dt-activity-item .dt-activity-text a:hover { color: var(--dt-color-accent-hover); }
.dt-activity-item .dt-activity-time { color: var(--dt-color-foreground-muted); font-size: var(--dt-font-size-xs); white-space: nowrap; }

.dt-empty { color: var(--dt-color-foreground-muted); font-size: var(--dt-font-size-sm); padding: var(--dt-space-4) 0; text-align: center; }

.dt-grid-2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--dt-space-4); align-items: start; }

/* === Responsive: 390px is the acceptance-tested mobile width === */

@media (max-width: 640px) {
  .dt-layout { flex-direction: column; }
  .dt-sidebar {
    width: 100%;
    border-inline-end: none;
    border-bottom: 1px solid var(--dt-color-border);
    flex-direction: row;
    align-items: center;
    padding: var(--dt-space-2) var(--dt-space-3);
    gap: var(--dt-space-3);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .dt-sidebar .dt-wordmark { flex-shrink: 0; }
  .dt-nav { flex-direction: row; flex-shrink: 0; }
  .dt-nav a { white-space: nowrap; }
  .dt-sidebar-footer { margin-top: 0; margin-inline-start: auto; flex-shrink: 0; }
  .dt-sidebar .dt-logout { white-space: nowrap; }
  .dt-main { padding: var(--dt-space-4); }
  .dt-page-title { font-size: var(--dt-font-size-xl); margin-bottom: var(--dt-space-4); }
  .dt-grid-2 { grid-template-columns: 1fr; }
  .dt-action-item { flex-wrap: wrap; }
}