/* ==========================================================================
   CLÉ D'OR PMS — CORE SYSTEM & BASE STYLES (cledor.css)
   Contains: Design Tokens, CSS Variables, Typography, Layout Shell,
   Sidebar, Topbar, Buttons, Badges, Data Tables, Alerts, Form Fields.
   ========================================================================== */

:root {
  --cd-navy: #102a43;
  --cd-navy-2: #173f5f;
  --cd-gold: #c99a3d;
  --cd-gold-2: #e4c477;
  --cd-cream: #f6f3ec;
  --cd-paper: #fff;
  --cd-ink: #183247;
  --cd-muted: #6b7c8c;
  --cd-line: #e3ddd2;
  --cd-green: #2f8f63;
  --cd-red: #c95b63;
  --cd-blue: #3f78a6;
  --cd-shadow: 0 18px 50px rgba(16,42,67,.08);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cd-cream);
  color: var(--cd-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

/* --- 1. App Layout & Shell --- */
.cd-page { min-height: 100vh; background: var(--cd-cream); }
.app-shell { min-height: calc(100vh - 72px); background: var(--cd-cream); display: flex; }
.cd-shell { display: flex; min-height: calc(100vh - 72px); }
.cd-main, .app-main { flex: 1; min-width: 0; padding: 28px 32px; }
.cd-content, .page-wrap { max-width: 1320px; margin: 0 auto; }

/* --- 2. Top Navigation Bar --- */
.cd-topbar {
  height: 72px;
  background: #fff;
  border-bottom: 1px solid var(--cd-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.cd-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.cd-brand-mark {
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(145deg, var(--cd-gold-2), var(--cd-gold));
  display: grid; place-items: center; color: var(--cd-navy);
  font: 900 20px Georgia; box-shadow: 0 7px 18px rgba(201,154,61,.2);
}
.cd-brand-name { font: 800 18px Georgia; color: var(--cd-navy); }
.cd-brand-sub { display: block; margin-top: 1px; font-size: 8px; letter-spacing: .2em; color: #9a742d; font-weight: 800; }
.cd-brand-logo { width: 220px; height: 64px; display: block; object-fit: contain; object-position: left center; }

/* --- 3. Sidebar Navigation --- */
.cd-sidebar, .app-sidebar {
  width: 250px;
  background: var(--cd-navy);
  color: #fff;
  flex: 0 0 250px;
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  box-shadow: 7px 0 30px rgba(16,42,67,.08);
}
.cd-sidebar-title {
  font-size: 9px; letter-spacing: .18em; color: #9eb0bf; font-weight: 900;
  padding: 8px 11px 9px; display: flex; align-items: center; gap: 8px;
}
.cd-sidebar-title:before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--cd-gold); box-shadow: 0 0 0 4px rgba(201,154,61,.12);
}
.cd-nav, .sidebar-nav { display: grid; gap: 4px; }
.cd-nav a, .app-sidebar .nav-link {
  display: flex; align-items: center; gap: 11px; padding: 11px 12px;
  border-radius: 11px; text-decoration: none; color: #b9c7d2; font-size: 12px; font-weight: 750;
  transition: .18s ease;
}
.cd-nav a:hover, .app-sidebar .nav-link:hover { background: #173f5f; color: #fff; transform: translateX(2px); }
.cd-nav a.active, .app-sidebar .nav-link.active {
  background: linear-gradient(90deg, var(--cd-gold), var(--cd-gold-2));
  color: #102a43; box-shadow: 0 8px 18px rgba(0,0,0,.12); font-weight: 800;
}
.cd-sidebar-bottom { margin-top: auto; border-top: 1px solid rgba(255,255,255,.1); padding-top: 12px; }
.cd-sidebar-bottom a {
  display: flex; gap: 9px; align-items: center; padding: 9px 11px;
  border-radius: 10px; color: #b9c7d2; text-decoration: none; font-size: 11px; font-weight: 700;
}
.cd-sidebar-bottom a:hover { background: #173f5f; color: #fff; }

/* --- 4. Typography & Headers --- */
.cd-page-head, .page-header {
  background: #fff; border: 1px solid var(--cd-line); border-radius: 18px;
  padding: 24px 26px; box-shadow: 0 5px 20px rgba(15,23,42,.045);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 22px;
}
.cd-eyebrow, .page-kicker { font-size: 9px; letter-spacing: .2em; color: #9a742d; font-weight: 900; text-transform: uppercase; }
.cd-page-head h1, .page-title { margin: 5px 0 0; font: 800 25px Georgia, serif; color: var(--cd-navy); letter-spacing: -.025em; }
.cd-page-head p, .page-subtitle { margin: 6px 0 0; color: var(--cd-muted); font-size: 12px; }

/* --- 5. Buttons & Actions --- */
.cd-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cd-btn, .btn-primary, .btn-gold, .btn-soft, .btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 11px; padding: 10px 14px; text-decoration: none;
  font-size: 11px; font-weight: 850; cursor: pointer; transition: .18s ease;
}
.cd-btn-primary, .btn-primary { background: var(--cd-navy); color: #fff; }
.cd-btn-primary:hover, .btn-primary:hover { background: #173f5f; transform: translateY(-1px); }
.cd-btn-gold, .btn-gold { background: var(--cd-gold); color: #102a43; }
.cd-btn-gold:hover, .btn-gold:hover { background: var(--cd-gold-2); transform: translateY(-1px); }
.cd-btn-soft, .btn-soft { background: #fff; border: 1px solid var(--cd-line); color: var(--cd-ink); }
.cd-btn-soft:hover, .btn-soft:hover { border-color: #cdb474; background: #fffaf1; }
.cd-btn-danger, .btn-danger { background: #fff0f1; color: #a73e47; border: 1px solid #f0c8cc; }

/* --- 6. Cards, Tables & Badges --- */
.cd-card, .card-clean, .form-card {
  background: #fff; border: 1px solid var(--cd-line); border-radius: 18px;
  box-shadow: 0 7px 25px rgba(16,42,67,.045); padding: 20px;
}
.cd-table-wrap { overflow: auto; }
.cd-table, .data-table { width: 100%; border-collapse: collapse; border-spacing: 0; }
.cd-table th, .data-table thead th {
  text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: .1em;
  color: #84929d; background: #fbfaf7; padding: 11px 14px; border-bottom: 1px solid var(--cd-line);
}
.cd-table td, .data-table tbody td {
  padding: 12px 14px; border-bottom: 1px solid #f0ece5; font-size: 11px; color: #344b5c;
}
.cd-table tr:hover td, .data-table tbody tr:hover { background: #fffcf7; }
.cd-badge-status, .status-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px;
  border-radius: 99px; font-size: 9px; font-weight: 900; letter-spacing: .04em;
}
.status-ok { background: #eaf6ef; color: #24704e; }
.status-warn { background: #fff5df; color: #946d20; }
.status-danger { background: #fff0f1; color: #a8444c; }
.status-info { background: #edf5fb; color: #386a91; }

/* --- 7. Forms, Inputs & Labels (UX Readability Fixes) --- */
.cd-form-grid, .cd-fe-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cd-field, .cd-fe-field { display: flex; flex-direction: column; gap: 6px; }
.cd-field label, .cd-fe-field label, .cd-login-field label {
  display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
  color: #213242; font-weight: 800; margin-bottom: 4px;
}
.cd-field input, .cd-field select, .cd-field textarea,
.cd-fe-field input, .cd-fe-field select, .cd-fe-field textarea,
.cd-login-input input {
  width: 100%; border: 1px solid #cbd5e1; border-radius: 11px; padding: 11px 12px;
  background: #fff; color: #183247; font-size: 12px; outline: none; transition: border-color .18s, box-shadow .18s;
}
.cd-field input:focus, .cd-field select:focus, .cd-field textarea:focus,
.cd-fe-field input:focus, .cd-fe-field select:focus, .cd-fe-field textarea:focus {
  border-color: #c99b43; box-shadow: 0 0 0 3px rgba(201,154,61,.15);
}
.cd-field.full, .cd-fe-field.full { grid-column: 1 / -1; }
.cd-alert { padding: 12px 14px; border-radius: 12px; font-size: 11px; font-weight: 700; border: 1px solid var(--cd-line); background: #fff; }
.cd-alert.success { border-color: #cde8d8; background: #f2fbf5; color: #286b4b; }
.cd-alert.error { border-color: #efc9cd; background: #fff4f5; color: #a4434c; }

/* --- 8. Contextual Technical Icon Sizing System --- */
/* Base navigation icons */
.cd-nav-icon {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* KPI Cards (Large stat metric boxes: w-14 h-14, w-12 h-12) */
.w-14.h-14 svg, .w-12.h-12 svg, .cd-kpi-icon svg, .kpi-icon svg {
  width: 28px !important;
  height: 28px !important;
  stroke-width: 1.8 !important;
}

/* Panel headers / feature badges (w-10 h-10, w-9 h-9) */
.w-10.h-10 svg, .w-9.h-9 svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 1.8 !important;
}

/* Profile menu & compact lists (w-8 h-8 containers) */
.w-8.h-8 svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2 !important;
}

/* Buttons and interactive actions */
.cd-btn svg, .btn-primary svg, .btn-gold svg, button svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2 !important;
}

/* --- 9. Professional Dark Card Form Inputs --- */
.bg-\[\#131f37\] input:not([type="checkbox"]):not([type="radio"]),
.bg-\[\#131f37\] select,
.bg-\[\#131f37\] textarea {
  width: 100% !important;
  background: #0a1222 !important;
  border: 1px solid #2d4268 !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}
.bg-\[\#131f37\] input:not([type="checkbox"]):not([type="radio"]):focus,
.bg-\[\#131f37\] select:focus,
.bg-\[\#131f37\] textarea:focus {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25) !important;
}
.bg-\[\#131f37\] input::placeholder,
.bg-\[\#131f37\] textarea::placeholder {
  color: #94a3b8 !important;
}

/* --- 11. High Contrast Readability on Dark Cards --- */
.bg-\[\#131f37\] .text-slate-400,
.bg-\[\#131f37\] .text-slate-500,
.bg-\[\#0c1730\] .text-slate-400,
.bg-\[\#0c1730\] .text-slate-500 {
  color: #e2e8f0 !important; /* slate-200: crystal clear high contrast */
}

/* --- 12. High Contrast Amber Info / Warning Banners --- */
.bg-amber-500\/10 p,
.bg-amber-500\/15 p,
.bg-amber-500\/20 p,
.bg-amber-500\/10 div,
.bg-amber-500\/15 div,
.bg-amber-500\/20 div {
  color: #f8fafc !important; /* bright white/slate-50 for maximum legibility */
}
.bg-amber-500\/10 .font-bold,
.bg-amber-500\/15 .font-bold,
.bg-amber-500\/20 .font-bold,
.bg-amber-500\/10 strong,
.bg-amber-500\/15 strong,
.bg-amber-500\/20 strong {
  color: #fde047 !important; /* amber-300: striking gold/amber for titles */
}

/* --- 10. Notification Dropdown Polish --- */
.cd-notification-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: #fff;
  transition: background 0.15s ease;
  position: relative;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
}
.cd-notification-item:hover {
  background: #f8fafc;
}
.cd-notification-item.is-unread {
  background: #fffbeb;
}
.cd-notification-item.is-unread:hover {
  background: #fef3c7;
}
.cd-notification-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cd-notification-item.is-unread .cd-notification-icon {
  background: #fef3c7;
  color: #b45309;
}
.cd-notification-item strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
}
.cd-notification-item small {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
  line-height: 1.4;
}
.cd-notification-item time {
  display: block;
  font-size: 10px;
  color: #94a3b8;
  margin-top: 4px;
}
.cd-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  flex-shrink: 0;
  margin-top: 6px;
}

/* --- 12. High Contrast Info & Warning Banners --- */
.bg-amber-500\/10 p,
.bg-amber-500\/15 p,
.bg-amber-500\/10 span,
.bg-amber-500\/15 span,
.bg-amber-500\/10 div,
.bg-amber-500\/15 div {
  color: #fef3c7 !important; /* amber-100: fully opaque, crystal clear readability */
}
.bg-amber-500\/10 .font-bold,
.bg-amber-500\/15 .font-bold,
.bg-amber-500\/10 strong,
.bg-amber-500\/15 strong {
  color: #fff !important; /* pure white for titles/bold text */
}

/* --- 13. Alpine.js Cloak to prevent FOUC / Ghost Popup Flashes --- */
[x-cloak] { display: none !important; }