/* D8F Workspace Design System v0.53 - UI/UX Pro Max Edition */
:root {
  --font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-soft: #eff6ff;
  --color-background: #f8fafc;
  --color-surface: #ffffff;
  --color-foreground: #0f172a;
  --color-muted: #64748b;
  --color-border: #e2e8f0;
  --color-border-subtle: #f1f5f9;
  --color-danger: #dc2626;
  --color-warning: #f59e0b;
  --color-success: #10b981;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.22);
  --blue: var(--color-primary);
  --line: var(--color-border);
  --muted: var(--color-muted);
  --bg-surface: var(--color-surface, #ffffff);
  --bg-main: var(--color-background, #f8fafc);
  --text-primary: var(--color-foreground, #0f172a);
  --text-muted: var(--color-muted, #64748b);
  color: var(--color-foreground);
  background: var(--color-background);
  font-family: var(--font-family);
  font-size: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; background: var(--color-background); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--color-background); color: var(--color-foreground); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, p { overflow-wrap: anywhere; margin-block: 0; }
h1 { font-size: clamp(1.5rem, 2.2vw, 1.85rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; }
h2 { font-size: 1.15rem; font-weight: 650; letter-spacing: -0.015em; line-height: 1.35; }
h3 { font-size: 1rem; font-weight: 600; }
p { margin-block: 6px; }
.sub { color: var(--color-muted); font-size: 0.88rem; line-height: 1.5; }

/* Accessibility & Utilities */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 99; background: #fff; padding: 12px 20px; border-radius: 8px; box-shadow: var(--shadow-lg); font-weight: 600; border: 2px solid var(--color-primary); }
.center { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login { width: 100%; max-width: 420px; margin: auto; padding: 36px 32px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-md); }

/* Core Layout: Shell, Sticky Sidebar, Topbar, Content */
.shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 24px 14px; background: #0f172a; color: #f8fafc; border-right: 1px solid #1e293b; }
.brand { margin: 0 10px 24px; font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.brand small { display: block; font-size: 0.75rem; color: #94a3b8; font-weight: 500; }
.nav-group-label { margin: 20px 10px 8px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; }
.nav { width: 100%; min-height: 40px; margin: 2px 0; padding: 9px 12px; border: 0; border-radius: var(--radius-sm); text-align: left; color: #94a3b8; background: transparent; font-size: 0.88rem; font-weight: 500; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: all 0.15s ease; }
.nav:hover { background: #1e293b; color: #f8fafc; }
.nav.active { background: #1e293b; color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 #3b82f6; }
.workspace { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 20; min-height: 64px; padding: 12px clamp(16px, 2.5vw, 32px); display: flex; justify-content: space-between; align-items: center; gap: 16px; background: rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-xs); }
.content { width: 100%; max-width: 1400px; margin: 0 auto; padding: clamp(20px, 2.5vw, 36px); flex: 1; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.page-head > div { max-width: 840px; }
.page-head .sub { margin-top: 6px; }

/* Bento Cards, Grids & Metrics */
.card { padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); transition: border-color 0.18s ease, box-shadow 0.18s ease; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #0f172a; margin-top: 4px; }
.metric.small { font-size: 1.35rem; font-weight: 750; }
.split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 20px; align-items: stretch; margin-bottom: 20px; }
.split > .card { padding: 24px; }
.split .form h2 { margin-bottom: 2px; }
.split .primary { width: 100%; margin-top: auto; }

/* Details / Accordion Cards */
details.card { padding: 0; overflow: hidden; }
details.card > summary { padding: 16px 20px; font-weight: 650; font-size: 0.95rem; color: #1e293b; cursor: pointer; display: flex; align-items: center; justify-content: space-between; list-style: none; user-select: none; background: #ffffff; transition: background-color 0.15s ease; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after { content: "+"; font-size: 1.25rem; font-weight: 400; color: #64748b; }
details.card[open] > summary { border-bottom: 1px solid var(--color-border); background: #f8fafc; }
details.card[open] > summary::after { content: "−"; }
details.card > *:not(summary) { padding: 20px; }

/* Modern Kanban Board - Horizontal Scroll, 6 columns side-by-side */
.board {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 24px;
  align-items: flex-start;
  min-height: calc(100vh - 240px);
}
.column {
  flex: 1 1 180px;
  min-width: 175px;
  min-height: 500px;
  padding: 14px;
  border-radius: var(--radius-md);
  background: #f8fafc;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.column[data-drop-status="todo"] { border-top: 3px solid #94a3b8; }
.column[data-drop-status="doing"] { border-top: 3px solid #3b82f6; }
.column[data-drop-status="blocked"] { border-top: 3px solid #ef4444; }
.column[data-drop-status="review"] { border-top: 3px solid #f59e0b; }
.column[data-drop-status="done"] { border-top: 3px solid #10b981; }
.column[data-drop-status="cancelled"] { border-top: 3px solid #cbd5e1; }
.column-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--color-border); }
.column-head strong { font-size: 0.9rem; font-weight: 700; color: #1e293b; }
.column-head span { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 9999px; background: #e2e8f0; color: #475569; font-size: 0.75rem; font-weight: 700; }
.task {
  width: 100%;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  text-align: left;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  cursor: grab;
}
.task:hover { border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08); transform: translateY(-2px); }
.task:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.task.dragging {
  opacity: 0.45;
  transform: scale(0.98);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
  cursor: grabbing;
}
.column.drag-over {
  outline: 2px dashed var(--color-primary, #2563eb);
  outline-offset: -3px;
  background-color: rgba(37, 99, 235, 0.04);
  border-radius: var(--radius-lg, 12px);
}
.task.loading {
  opacity: 0.55;
  pointer-events: none;
  position: relative;
}
.task.loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.4);
  border-radius: inherit;
}
.task[data-status="todo"] { border-left: 3px solid #94a3b8; }
.task[data-status="doing"] { border-left: 3px solid #3b82f6; }
.task[data-status="blocked"] { border-left: 3px solid #ef4444; }
.task[data-status="review"] { border-left: 3px solid #f59e0b; }
.task[data-status="done"] { border-left: 3px solid #10b981; }
.task[data-status="cancelled"] { border-left: 3px solid #cbd5e1; }
.task strong { display: block; font-size: 0.92rem; font-weight: 650; color: #0f172a; line-height: 1.4; margin-bottom: 6px; cursor: pointer; }
.task strong:hover { color: var(--color-primary); }
.task span { display: block; color: var(--color-muted); font-size: 0.78rem; line-height: 1.35; }
.task-action { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border-subtle); font-size: 0.72rem; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.task-action select { min-height: 32px; padding: 4px 8px; font-size: 0.8rem; border: 1px solid var(--color-border); border-radius: 6px; background: #f8fafc; color: #1e293b; cursor: pointer; }
.task-action select:hover { border-color: #94a3b8; background: #fff; }

/* Buttons & Inputs */
button, a, input, select, textarea { transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease; font: inherit; }
button, .nav, [data-route], [data-open-board] { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.48; }
input, select, textarea { width: 100%; min-height: 42px; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #ffffff; color: var(--color-foreground); font-size: 0.88rem; }
textarea { min-height: 96px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: #94a3b8; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 0; box-shadow: var(--focus-ring); border-color: var(--color-primary); }
.form { display: grid; gap: 16px; max-width: none; }
.form label, .form-grid label, .schedule-form label, .payment-create label, .payment-config label { display: grid; align-content: start; gap: 6px; font-size: 0.85rem; font-weight: 650; color: #334155; }
.field-help { margin: 0; color: var(--color-muted); font-weight: 400; font-size: 0.78rem; }
.primary, .secondary, .danger-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 18px; border-radius: var(--radius-sm); font-weight: 650; font-size: 0.88rem; line-height: 1.2; text-decoration: none; }
.primary { border: 1px solid var(--color-primary); background: var(--color-primary); color: #fff; box-shadow: var(--shadow-xs); }
.primary:hover:not(:disabled) { border-color: var(--color-primary-hover); background: var(--color-primary-hover); box-shadow: var(--shadow-sm); }
.secondary { border: 1px solid var(--color-border); background: #fff; color: #334155; }
.secondary:hover:not(:disabled) { border-color: #94a3b8; background: #f8fafc; }
.danger, .danger-btn { color: #dc2626; border: 1px solid #fca5a5; background: #fff; }
.danger:hover:not(:disabled), .danger-btn:hover:not(:disabled) { border-color: #ef4444; background: #fef2f2; }
.compact { min-height: 32px; padding: 5px 10px; font-size: 0.8rem; border-radius: 6px; }

/* Tables */
.table-wrap { padding: 0; overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
table { width: 100%; min-width: 760px; border-collapse: collapse; background: #fff; font-size: 0.88rem; }
th { padding: 12px 16px; color: #475569; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: #f8fafc; border-bottom: 1px solid var(--color-border); text-align: left; }
td { padding: 14px 16px; border-bottom: 1px solid var(--color-border-subtle); vertical-align: middle; color: #334155; }
tbody tr:hover { background: #f8fafc; }
tbody tr:last-child td { border-bottom: 0; }
td .compact { min-height: 32px; margin: 2px; }

/* Badges, Roles, Statuses */
.badge, .role, .status { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; line-height: 1.35; }
.badge, .status { background: #eff6ff; color: #1d4ed8; border: 1px solid #dbeafe; }
.role { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }

/* Alerts & Notifications */
.error { padding: 12px 16px; border-left: 4px solid #ef4444; background: #fef2f2; color: #991b1b; border-radius: 4px; font-size: 0.88rem; }
.warning { padding: 12px 16px; border-left: 4px solid #f59e0b; background: #fffbeb; color: #92400e; border-radius: 4px; font-size: 0.88rem; }
.empty { padding: 36px; text-align: center; color: var(--color-muted); font-size: 0.88rem; }
#access-feedback:not(:empty) { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--color-primary-soft); color: #1e40af; border: 1px solid #bfdbfe; font-size: 0.88rem; font-weight: 500; }

/* Admin Home KPIs & Actions */
.admin-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 18px 0; }
.admin-kpis article { display: grid; gap: 6px; }
.admin-kpis span, .admin-kpis small { color: var(--color-muted); }
.admin-kpis strong { font-size: 1.8rem; font-weight: 800; }
.admin-home-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr); gap: 16px; }
.admin-home-action { width: 100%; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 0; border-top: 1px solid var(--color-border); padding: 12px 2px; background: #fff; color: #0f172a; text-align: left; cursor: pointer; }
.admin-home-action:hover { background: #f8fafc; }
.admin-home-action span, .admin-home-links button { display: grid; gap: 5px; }
.admin-home-action small, .admin-home-links small { color: var(--color-muted); font-weight: 400; }
.admin-home-action b { color: var(--color-primary); font-size: 0.82rem; white-space: nowrap; }
.admin-home-links { display: grid; align-content: start; gap: 10px; }
.admin-home-links button { min-height: 74px; border: 1px solid var(--color-border); border-radius: 10px; padding: 14px; background: #fff; color: #0f172a; text-align: left; cursor: pointer; }
.admin-home-links button:hover { border-color: var(--color-primary); background: #f8fafc; }

/* App Catalog */
.app-catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 18px; }
.app-card { display: flex; min-height: 250px; flex-direction: column; justify-content: space-between; gap: 20px; }
.app-card h2 { margin: 14px 0 8px; }
.app-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 10px; }
.choice-grid label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.app-card a.primary { display: inline-flex; align-items: center; text-decoration: none; }

/* Workspace Directory */
.workspace-directory { display: grid; gap: 18px; }
.workspace-group { padding: 0; overflow: hidden; }
.workspace-group-head { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 18px; border-bottom: 1px solid var(--color-border); }
.workspace-avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: #e8edff; color: #3157d5; font-weight: 800; }
.workspace-group h2 { margin: 0; }
.production-board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; padding: 18px; }
.production-board-card { display: grid; gap: 8px; padding: 0 0 14px; text-align: left; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; overflow: hidden; color: inherit; cursor: pointer; transition: all 0.15s ease; }
.production-board-card:hover, .production-board-card:focus-visible { border-color: #3157d5; box-shadow: 0 8px 24px rgba(49, 87, 213, 0.12); transform: translateY(-1px); }
.production-board-card strong, .production-board-card small { margin: 0 14px; }
.production-board-card small { color: var(--color-muted); }
.board-cover { height: 64px; background: linear-gradient(135deg, var(--board-color, var(--color-primary)), color-mix(in srgb, var(--board-color, var(--color-primary)), #fff 55%)); }
.board-context { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.board-context div { display: grid; }
.board-context span { font-size: 0.75rem; color: var(--color-muted); }

/* Responsive Breakpoints */
@media (max-width: 1000px) {
  .admin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-home-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: 204px minmax(0, 1fr); }
  .content { padding: 24px 18px; }
  .split { grid-template-columns: 1fr; }
  table { min-width: 680px; }
}
@media (max-width: 760px) {
  .shell { display: block; }
  .side { position: sticky; z-index: 25; height: auto; max-height: none; display: flex; align-items: center; overflow-x: auto; padding: 8px; }
  .brand { display: none; }
  .nav-group-label { display: none; }
  .nav { white-space: nowrap; flex: 0 0 auto; }
  .nav.active { box-shadow: inset 0 -3px 0 var(--color-primary); }
  .top { top: 60px; padding: 10px 14px; }
  .content { padding: 18px 14px; }
  .grid, .grid.cols-2, .grid.cols-3, .grid.cols-4, .admin-kpis { grid-template-columns: 1fr; }
  .admin-home-action { align-items: flex-start; flex-direction: column; }
  .admin-home-action b { white-space: normal; }
  .page-head { gap: 14px; margin-bottom: 20px; }
  .split > .card { padding: 18px; }
  .table-wrap { margin-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}