/* ============================================================
   CANWIDE STEEL · Safety Document Portal — Dashboard only
   assets/css/dashboard.css — SCOPED to .cw-dash (index.php)
   Restrained enterprise light mode. No gradients, no decorative
   color, no floating cards. Structure comes from alignment,
   hairline borders, one subtle shadow, and disciplined spacing.
   Every selector is scoped so nothing here leaks to other pages.
   Shared style.css is intentionally NOT modified.
   Tokens:
   bg #F7F8FA · surface #FFFFFF · surface-2 #F1F3F5 ·
   text #20252D · secondary #5F6875 · muted #858D98 ·
   border #E1E5EA · divider #EDF0F3 ·
   accent #23456A · accent-hover #193651 · accent-bg #EDF3F8 ·
   success #28784A/#EDF7F0 · warning #966516/#FBF4E7 ·
   error #B33A3A/#FBEFEF · info #365F88/#EDF3F9
   Radii: 6px components, 4px small elements. Shadow: one subtle
   0 1px 2px on bordered containers only — never on rows.
   ============================================================ */

.cw-dash {
  --cw-bg: #F7F8FA;
  --cw-surface: #FFFFFF;
  --cw-surface-2: #F1F3F5;
  --cw-text: #20252D;
  --cw-secondary: #5F6875;
  --cw-muted: #858D98;
  --cw-border: #E1E5EA;
  --cw-divider: #EDF0F3;
  --cw-accent: #23456A;
  --cw-accent-hover: #193651;
  --cw-accent-bg: #EDF3F8;
  --cw-success: #28784A;
  --cw-success-bg: #EDF7F0;
  --cw-warning: #966516;
  --cw-warning-bg: #FBF4E7;
  --cw-error: #B33A3A;
  --cw-error-bg: #FBEFEF;
  --cw-info: #365F88;
  --cw-info-bg: #EDF3F9;
  --cw-radius: 6px;
  --cw-radius-sm: 4px;
  --cw-shadow: 0 1px 2px rgba(32, 37, 45, 0.05);
  --cw-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--cw-bg);
  color: var(--cw-text);
  font-family: var(--cw-font);
  font-size: 14px;
  line-height: 1.5;
}

.cw-dash *, .cw-dash *::before, .cw-dash *::after { box-sizing: border-box; }
.cw-dash img { max-width: 100%; }
.cw-dash a { color: inherit; }

/* Skip link — visible on keyboard focus only */
.cw-skip {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--cw-accent); color: #fff; text-decoration: none;
  font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: var(--cw-radius-sm);
}
.cw-skip:focus { top: 12px; outline: 2px solid var(--cw-accent); outline-offset: 2px; }
.cw-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

/* Focus — visible, consistent, never removed */
.cw-dash :focus-visible {
  outline: 2px solid var(--cw-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Shell */
.cw-shell { min-height: 100vh; display: flex; flex-direction: column; }

/* Top bar — compact, one row on desktop, wraps on narrow phones */
.cw-topbar {
  background: var(--cw-surface);
  border-bottom: 1px solid var(--cw-border);
  position: sticky; top: 0; z-index: 50;
}
.cw-topbar-inner {
  max-width: 1040px; margin: 0 auto; padding: 0 20px;
  min-height: 56px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.cw-brand { display: flex; align-items: center; gap: 10px; min-width: 0; margin-right: auto; text-decoration: none; }
.cw-logo { height: 32px; width: auto; flex-shrink: 0; }
.cw-brand-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.cw-brand-name { font-size: 15px; font-weight: 650; letter-spacing: -0.005em; white-space: nowrap; }
.cw-brand-sub { font-size: 12px; color: var(--cw-muted); white-space: nowrap; }
.cw-topnav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cw-topnav a {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 10px; border-radius: var(--cw-radius);
  color: var(--cw-secondary); text-decoration: none;
  font-size: 14px; font-weight: 500; white-space: nowrap;
}
.cw-topnav a:hover { color: var(--cw-text); background: var(--cw-surface-2); }
.cw-topnav a.cw-topnav-primary { background: var(--cw-accent); color: #fff; font-weight: 600; padding: 0 14px; }
.cw-topnav a.cw-topnav-primary:hover { background: var(--cw-accent-hover); color: #fff; }

/* Hero — compact, no banner, no pill */
.cw-hero { max-width: 1040px; margin: 0 auto; width: 100%; padding: 28px 20px 0; }
.cw-eyebrow {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cw-muted); margin-bottom: 8px;
}
.cw-hero h1 { font-size: 26px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 6px; }
.cw-hero p { color: var(--cw-secondary); font-size: 14px; max-width: 640px; margin: 0; }

/* Content */
.cw-content { flex: 1; max-width: 1040px; margin: 0 auto; width: 100%; padding: 20px 20px 48px; }

/* Section headings */
.cw-section { margin: 28px 0 0; }
.cw-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cw-section-head h2 { font-size: 16px; font-weight: 650; letter-spacing: -0.005em; margin: 0; }
.cw-section-head p { color: var(--cw-muted); font-size: 13px; margin: 0; }

/* Quick access — a bordered list, not six floating cards */
.cw-quick {
  display: block; background: var(--cw-surface);
  border: 1px solid var(--cw-border); border-radius: 8px;
  box-shadow: var(--cw-shadow); overflow: hidden;
}
.cw-quick-card {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 12px 16px; border-top: 1px solid var(--cw-divider);
  text-decoration: none; background: var(--cw-surface);
}
.cw-quick-card:first-child { border-top: none; }
.cw-quick-card:hover { background: var(--cw-bg); }
.cw-quick-icon {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--cw-radius);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  background: var(--cw-surface-2); color: var(--cw-secondary); border: 1px solid var(--cw-border);
}
.cw-quick-icon.cw-icon-amber { background: var(--cw-warning-bg); color: var(--cw-warning); }
.cw-quick-icon.cw-icon-green { background: var(--cw-success-bg); color: var(--cw-success); }
.cw-quick-body { flex: 1; min-width: 0; }
.cw-quick-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 600; line-height: 1.4; }
.cw-quick-arrow { color: var(--cw-muted); font-size: 12px; flex-shrink: 0; }
.cw-quick-card:hover .cw-quick-arrow { color: var(--cw-accent); }
.cw-badge {
  display: inline-flex; align-items: center; border-radius: var(--cw-radius-sm);
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
  padding: 2px 6px; border: 1px solid transparent; white-space: nowrap;
}
.cw-badge-amber { background: var(--cw-warning-bg); color: var(--cw-warning); }
.cw-badge-blue { background: var(--cw-info-bg); color: var(--cw-info); }
.cw-badge-green { background: var(--cw-success-bg); color: var(--cw-success); }

/* Search — integrated, one consistent height */
.cw-search { display: flex; gap: 8px; align-items: stretch; margin: 0 0 4px; }
.cw-search-wrap { position: relative; flex: 1; min-width: 0; }
.cw-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--cw-muted); font-size: 13px; pointer-events: none; }
.cw-search-input {
  width: 100%; min-height: 40px; padding: 9px 36px 9px 34px;
  border: 1px solid var(--cw-border); border-radius: var(--cw-radius);
  background: var(--cw-surface); color: var(--cw-text); font: inherit; font-size: 14px;
}
.cw-search-input::placeholder { color: var(--cw-muted); }
.cw-search-input:focus { border-color: var(--cw-accent); box-shadow: 0 0 0 3px rgba(35, 69, 106, 0.12); outline: none; }
.cw-search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border: 0; border-radius: var(--cw-radius-sm); background: var(--cw-surface-2);
  color: var(--cw-secondary); font-size: 14px; line-height: 1; cursor: pointer; display: none;
}
.cw-search-clear:hover { background: var(--cw-border); color: var(--cw-text); }
.cw-search-btn {
  min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--cw-radius);
  background: var(--cw-accent); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.cw-search-btn:hover { background: var(--cw-accent-hover); }
.cw-search-meta { min-height: 18px; color: var(--cw-muted); font-size: 12px; margin: 8px 0 12px; }

/* Document directory — a bordered list, not a card grid */
.cw-grid {
  display: block; background: var(--cw-surface);
  border: 1px solid var(--cw-border); border-radius: 8px;
  box-shadow: var(--cw-shadow); overflow: hidden;
}
.cw-card {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 12px 16px; border-top: 1px solid var(--cw-divider);
  text-decoration: none; background: var(--cw-surface);
}
.cw-card:first-child { border-top: none; }
.cw-card:hover { background: var(--cw-bg); }
.cw-card-icon {
  width: 32px; height: 32px; border-radius: var(--cw-radius); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  background: var(--cw-surface-2); color: var(--cw-secondary); border: 1px solid var(--cw-border);
}
.cw-card-jha .cw-card-icon { background: var(--cw-warning-bg); color: var(--cw-warning); }
.cw-card-main { flex: 1; min-width: 0; }
.cw-card-title { font-size: 14px; font-weight: 600; line-height: 1.4; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cw-card-arrow { color: var(--cw-muted); font-size: 12px; flex-shrink: 0; }
.cw-card:hover .cw-card-arrow { color: var(--cw-accent); }

/* Empty states */
.cw-empty { padding: 28px 16px; text-align: center; border-top: 1px solid var(--cw-divider); }
.cw-empty:first-child { border-top: none; }
.cw-empty-icon { font-size: 20px; color: var(--cw-muted); margin-bottom: 8px; }
.cw-empty h3 { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.cw-empty p { color: var(--cw-secondary); font-size: 13px; margin: 0; }
.cw-empty button { margin-top: 12px; min-height: 36px; padding: 0 14px; border-radius: var(--cw-radius); border: 1px solid var(--cw-border); background: var(--cw-surface); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cw-empty button:hover { border-color: var(--cw-accent); color: var(--cw-accent); }

/* Footer */
.cw-footer { border-top: 1px solid var(--cw-border); padding: 16px 20px; text-align: center; color: var(--cw-muted); font-size: 12px; }

/* Mobile: compact header, comfortable rows */
@media (max-width: 640px) {
  .cw-topbar-inner { padding: 8px 16px; gap: 8px; }
  .cw-brand-sub { display: none; }
  .cw-topnav { width: 100%; }
  .cw-topnav a { flex: 1 1 auto; justify-content: center; padding: 0 8px; }
  .cw-hero { padding: 20px 16px 0; }
  .cw-hero h1 { font-size: 22px; }
  .cw-content { padding: 16px 16px 40px; }
  .cw-search-btn { padding: 0 12px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cw-dash *, .cw-dash *::before, .cw-dash *::after { transition: none !important; animation: none !important; }
}