/* ==========================================================================
   DC Management Tool — Design System
   Flat design, no gradients. Purposeful color coding & animations.
   ========================================================================== */

/* Alpine.js — prevent flash of unstyled content */
[x-cloak] { display: none !important; }

/* ---------- 1. CSS Custom Properties ---------- */
:root {
  /* --- Brand / Primary --- */
  --primary-50:  #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;

  /* --- Semantic: Success (Green) --- */
  --success-50:  #f0fdf4;
  --success-100: #dcfce7;
  --success-500: #22c55e;
  --success-600: #16a34a;
  --success-700: #15803d;

  /* --- Semantic: Warning (Amber) --- */
  --warning-50:  #fffbeb;
  --warning-100: #fef3c7;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-700: #b45309;

  /* --- Semantic: Error / Danger (Red) --- */
  --error-50:  #fef2f2;
  --error-100: #fee2e2;
  --error-500: #ef4444;
  --error-600: #dc2626;
  --error-700: #b91c1c;

  /* --- Semantic: Info (Blue — alias of primary) --- */
  --info-50:  var(--primary-50);
  --info-100: var(--primary-100);
  --info-500: var(--primary-500);
  --info-600: var(--primary-600);

  /* --- Neutral Scale --- */
  --neutral-50:  #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;

  /* --- Spacing (4px base) --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* --- Typography --- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */

  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* --- Border Radius --- */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 9999px;

  /* --- Shadows (flat, subtle) --- */
  --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);

  /* --- Animation Durations --- */
  --duration-fast:   100ms;
  --duration-normal: 150ms;
  --duration-slow:   200ms;
  --duration-toast:  300ms;

  /* --- Layout --- */
  --sidebar-width:     256px;   /* 16rem / w-64 */
  --sidebar-collapsed: 64px;    /* icon-only */
  --topbar-height:     64px;    /* h-16 */
}

/* ---------- 2. Base Resets ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  color: var(--neutral-900);
  background-color: var(--neutral-100);
  line-height: var(--leading-normal);
}

/* ---------- 3. HTMX Indicators ---------- */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-block; }
body.htmx-request { cursor: wait; }

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  cursor: pointer;
  transition: background-color var(--duration-normal) ease,
              color var(--duration-normal) ease,
              box-shadow var(--duration-normal) ease;
  user-select: none;
}

.btn:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary */
.btn-primary {
  background-color: var(--primary-600);
  color: #fff;
}
.btn-primary:hover { background-color: var(--primary-700); }
.btn-primary:active { background-color: var(--primary-800); }

/* Secondary */
.btn-secondary {
  background-color: #fff;
  color: var(--neutral-700);
  border-color: var(--neutral-300);
}
.btn-secondary:hover { background-color: var(--neutral-50); }
.btn-secondary:active { background-color: var(--neutral-100); }

/* Ghost */
.btn-ghost {
  background-color: transparent;
  color: var(--neutral-600);
}
.btn-ghost:hover { background-color: var(--neutral-100); color: var(--neutral-900); }
.btn-ghost:active { background-color: var(--neutral-200); }

/* Danger */
.btn-danger {
  background-color: var(--error-600);
  color: #fff;
}
.btn-danger:hover { background-color: var(--error-700); }
.btn-danger:active { background-color: var(--error-600); }

/* Small & Large variants */
.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--text-base); }

/* ---------- 5. Form Inputs ---------- */
.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--neutral-700);
  margin-bottom: var(--space-1);
}

.form-input,
.form-select,
.form-textarea {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  color: var(--neutral-900);
  background-color: #fff;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-normal) ease,
              box-shadow var(--duration-normal) ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 2px var(--primary-100);
}

.form-input.is-error,
.form-select.is-error,
.form-textarea.is-error {
  border-color: var(--error-500);
  box-shadow: 0 0 0 2px var(--error-100);
}

/* Global input border fix — ensures all text inputs, selects, textareas have visible borders */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  border: 1px solid var(--neutral-300);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  border-color: var(--primary-500);
  outline: none;
  box-shadow: 0 0 0 2px var(--primary-100);
}

/* .input class used in address templates */
.input {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  color: var(--neutral-900);
  background-color: #fff;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-normal) ease,
              box-shadow var(--duration-normal) ease;
}

.input:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 2px var(--primary-100);
}

.form-error {
  font-size: var(--text-xs);
  color: var(--error-600);
  margin-top: var(--space-1);
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--neutral-500);
  margin-top: var(--space-1);
}

/* ---------- 6. Cards ---------- */
.card {
  background-color: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.card-clickable {
  cursor: pointer;
  transition: box-shadow var(--duration-normal) ease;
}
.card-clickable:hover { box-shadow: var(--shadow-md); }

.card-header {
  border-bottom: 1px solid var(--neutral-200);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
}

.card-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--neutral-900);
}

/* ---------- 7. Badges / Tags ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.badge-draft    { background-color: var(--warning-100); color: var(--warning-700); }
.badge-pending  { background-color: var(--warning-100); color: var(--warning-700); }
.badge-issued   { background-color: var(--success-100); color: var(--success-700); }
.badge-success  { background-color: var(--success-100); color: var(--success-700); }
.badge-error    { background-color: var(--error-100);   color: var(--error-700); }
.badge-info     { background-color: var(--primary-100); color: var(--primary-700); }
.badge-neutral  { background-color: var(--neutral-200); color: var(--neutral-700); }

/* ---------- 8. Tables ---------- */
.table-container {
  overflow-x: auto;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.data-table thead th {
  background-color: var(--neutral-50);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--font-semibold);
  color: var(--neutral-700);
  border-bottom: 1px solid var(--neutral-200);
  white-space: nowrap;
}

.data-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--neutral-100);
  color: var(--neutral-800);
}

.data-table tbody tr:nth-child(even) {
  background-color: var(--neutral-50);
}

.data-table tbody tr {
  transition: background-color var(--duration-fast) ease;
}
.data-table tbody tr:hover {
  background-color: var(--primary-50);
}

.data-table th.sortable {
  cursor: pointer;
  user-select: none;
}
.data-table th.sortable:hover {
  color: var(--primary-600);
}

/* ---------- 9. Toast Notifications ---------- */
.toast {
  min-width: 300px;
  max-width: 420px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  animation: toast-slide-in var(--duration-toast) ease-out;
  position: relative;
  overflow: hidden;
}

.toast.removing {
  animation: toast-slide-out var(--duration-toast) ease-in forwards;
}

.toast-success { background-color: var(--success-600); color: #fff; }
.toast-error   { background-color: var(--error-600);   color: #fff; }
.toast-info    { background-color: var(--primary-600); color: #fff; }
.toast-warning { background-color: var(--warning-500); color: #fff; }

.toast-message {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.toast-close {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
  padding: 0;
  display: flex;
  transition: opacity var(--duration-normal) ease;
}
.toast-close:hover { opacity: 1; }
.toast-close svg { width: 1.25rem; height: 1.25rem; }

/* Toast progress bar */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background-color: rgba(255,255,255,0.4);
  animation: toast-progress 5s linear forwards;
}

@keyframes toast-slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes toast-slide-out {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}

@keyframes toast-progress {
  from { width: 100%; }
  to   { width: 0%; }
}

/* ---------- 10. Modals ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modal-fade-in var(--duration-normal) ease;
}

.modal-content {
  background-color: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
  max-width: 480px;
  width: 90%;
  animation: modal-scale-in var(--duration-normal) ease;
}

@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modal-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---------- 11. Skeleton Loaders ---------- */
.skeleton {
  background-color: var(--neutral-200);
  border-radius: var(--radius-md);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-text {
  height: 1em;
  width: 100%;
  margin-bottom: var(--space-2);
}

.skeleton-text-sm { width: 60%; }
.skeleton-text-lg { height: 1.5em; width: 40%; }

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
}

.skeleton-row {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--neutral-100);
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ---------- 12. Breadcrumbs ---------- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
}

.breadcrumb-item a {
  color: var(--neutral-500);
  text-decoration: none;
  font-weight: var(--font-medium);
  transition: color var(--duration-normal) ease;
}

.breadcrumb-item a:hover {
  color: var(--primary-600);
}

.breadcrumb-item.active {
  color: var(--neutral-900);
  font-weight: var(--font-semibold);
}

.breadcrumb-separator {
  color: var(--neutral-400);
}

/* ---------- 13. Navigation ---------- */
.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--neutral-600);
  border-radius: var(--radius-lg);
  transition: background-color var(--duration-normal) ease,
              color var(--duration-normal) ease;
  border-left: 3px solid transparent;
  text-decoration: none;
}

.nav-link:hover {
  background-color: var(--neutral-100);
  color: var(--neutral-900);
}

.nav-link.active {
  background-color: var(--primary-50);
  color: var(--primary-700);
  border-left-color: var(--primary-600);
  font-weight: var(--font-semibold);
}

.nav-link svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* Expandable nav section */
.nav-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--neutral-600);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background-color var(--duration-normal) ease;
  border-left: 3px solid transparent;
  user-select: none;
}

.nav-section-header:hover { background-color: var(--neutral-100); }

.nav-section-header .chevron {
  transition: transform var(--duration-normal) ease;
  width: 16px;
  height: 16px;
}

.nav-section-header.expanded .chevron {
  transform: rotate(90deg);
}

.nav-section-header.section-active {
  color: var(--primary-700);
  background-color: var(--primary-50);
  border-left-color: var(--primary-600);
}

.nav-submenu {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--duration-slow) ease;
}

.nav-submenu.open {
  max-height: 300px;
}

.nav-submenu a {
  display: block;
  padding: 6px var(--space-3) 6px var(--space-10);
  font-size: var(--text-sm);
  color: var(--neutral-500);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: color var(--duration-normal) ease,
              background-color var(--duration-normal) ease;
}

.nav-submenu a:hover {
  color: var(--neutral-900);
  background-color: var(--neutral-100);
}

.nav-submenu a.active {
  color: var(--primary-700);
  font-weight: var(--font-semibold);
}

/* ---------- 14. Sidebar Layout ---------- */
.sidebar {
  position: fixed;
  inset-block: 0;
  left: 0;
  z-index: 30;
  width: var(--sidebar-width);
  background-color: #fff;
  border-right: 1px solid var(--neutral-200);
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-slow) ease,
              width var(--duration-slow) ease;
}

/* Mobile: hidden by default */
@media (max-width: 1023px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.mobile-open { transform: translateX(0); }
}

/* Sidebar collapsed mode (desktop toggle) */
.sidebar.collapsed {
  width: var(--sidebar-collapsed);
}
.sidebar.collapsed .nav-link span,
.sidebar.collapsed .nav-section-header span,
.sidebar.collapsed .nav-submenu,
.sidebar.collapsed .sidebar-logo-text,
.sidebar.collapsed .sidebar-footer-text {
  display: none;
}
.sidebar.collapsed .nav-link,
.sidebar.collapsed .nav-section-header {
  justify-content: center;
  padding: var(--space-2);
  border-left: none;
}

/* Main content margin — applied via CSS so it works before Alpine.js loads.
   Alpine.js only toggles the 'sidebar-collapsed' class for the collapsed state. */
@media (min-width: 1024px) {
  #main-content-wrapper {
    margin-left: var(--sidebar-width);
    transition: margin-left var(--duration-slow) ease;
  }
  #main-content-wrapper.sidebar-collapsed {
    margin-left: var(--sidebar-collapsed);
  }
}

/* ---------- 15. Topbar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--topbar-height);
  background-color: #fff;
  border-bottom: 1px solid var(--neutral-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
}

/* ---------- 16. Content Area ---------- */
.content-area {
  flex: 1;
  overflow-y: auto;
  background-color: var(--neutral-100);
  animation: content-fade-in var(--duration-normal) ease;
}

@keyframes content-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- 17. Page Transitions (HTMX) ---------- */
.htmx-swapping { opacity: 0; transition: opacity var(--duration-fast) ease; }
.htmx-settling { opacity: 1; transition: opacity var(--duration-fast) ease; }

/* ---------- 18. User Menu Dropdown ---------- */
.user-menu-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: var(--space-2);
  min-width: 200px;
  background-color: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 50;
  transform-origin: top right;
  animation: dropdown-in var(--duration-normal) ease;
}

.user-menu-dropdown.closing {
  animation: dropdown-out var(--duration-normal) ease forwards;
}

@keyframes dropdown-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes dropdown-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.95); }
}

.user-menu-dropdown a,
.user-menu-dropdown button {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--neutral-700);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background-color var(--duration-fast) ease;
}
.user-menu-dropdown a:hover,
.user-menu-dropdown button:hover {
  background-color: var(--neutral-100);
}

/* ---------- 19. Sidebar Overlay (Mobile) ---------- */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-slow) ease;
}

.sidebar-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- 20. Scrollbar ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--neutral-400); }

/* ---------- 21. Print ---------- */
@media print {
  .sidebar,
  .sidebar-overlay,
  .topbar,
  .no-print,
  #toast-container { display: none !important; }
  body { background: #fff; }
  .content-area { margin: 0; padding: 0; }
}