/* BizBooks custom styles */

/* ==========================================================================
   Design tokens — single source of truth for the custom component layer.
   Values mirror the Tailwind palette the markup already uses, so these can be
   referenced everywhere without changing the current look. Adjust here to
   re-theme the app.
   ========================================================================== */
:root {
  /* Brand / semantic colors */
  --color-primary: #4f46e5;          /* indigo-600 */
  --color-primary-hover: #4338ca;    /* indigo-700 */
  --color-primary-tint: #f0f4ff;     /* row hover */
  --color-focus-ring: rgba(79, 70, 229, 0.1);

  --color-success: #16a34a;          /* green-600 */
  --color-success-hover: #15803d;    /* green-700 */
  --color-danger: #dc2626;           /* red-600 */
  --color-danger-border: #fecaca;    /* red-200 */
  --color-danger-tint: #fef2f2;      /* red-50 */
  --color-warning: #d97706;          /* amber-600 */
  --color-warning-hover: #b45309;    /* amber-700 */

  /* Neutrals */
  --color-surface: #ffffff;
  --color-bg-subtle: #f9fafb;        /* gray-50 */
  --color-border: #e5e7eb;           /* gray-200 */
  --color-border-strong: #d1d5db;    /* gray-300 */
  --color-border-subtle: #f3f4f6;    /* gray-100 */
  --color-text: #111827;             /* gray-900 */
  --color-text-label: #374151;       /* gray-700 */
  --color-text-muted: #6b7280;       /* gray-500 */
  --color-text-faint: #9ca3af;       /* gray-400 */
  --color-scroll-track: #f1f5f9;
  --color-scroll-thumb: #cbd5e1;
  --color-scroll-thumb-hover: #94a3b8;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Elevation */
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.15);

  /* Motion */
  --transition-fast: 0.15s;

  /* Focus ring used by keyboard navigation */
  --focus-outline-width: 2px;
  --focus-outline-offset: 2px;
}

* { box-sizing: border-box; }
body { font-family: 'Inter', system-ui, sans-serif; }

/* Never let a stray wide element cause horizontal page scroll on mobile */
html, body { max-width: 100%; overflow-x: hidden; }

/* ==========================================================================
   Accessibility — visible keyboard focus for all interactive elements.
   Mouse clicks don't trigger :focus-visible, so this stays out of the way for
   pointer users while giving keyboard users a clear focus indicator.
   ========================================================================== */
:focus-visible {
  outline: var(--focus-outline-width) solid var(--color-primary);
  outline-offset: var(--focus-outline-offset);
  border-radius: 3px;
}
/* Inputs keep their own softer ring instead of a hard outline */
.form-input:focus-visible { outline: none; }

.page-loading { display: flex; align-items: center; justify-content: center; min-height: 200px; }
.spinner { width: 32px; height: 32px; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.modal-box { background: var(--color-surface); border-radius: var(--radius-lg); padding: 24px; width: 100%; max-width: 480px; box-shadow: var(--shadow-modal); max-height: 90vh; overflow-y: auto; }
.modal-box-lg { background: var(--color-surface); border-radius: var(--radius-lg); padding: 24px; width: 100%; max-width: 640px; box-shadow: var(--shadow-modal); max-height: 90vh; overflow-y: auto; }

/* Horizontal-scroll wrapper for wide tables on small screens.
   Applied automatically to .data-table by the helper in utils.js. */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
  .modal-box, .modal-box-lg { padding: 20px; border-radius: 14px; }
  .data-table th, .data-table td { padding: 10px 12px; }
}

.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--color-text-label); margin-bottom: 6px; }
.form-input { width: 100%; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); padding: 9px 12px; font-size: 14px; outline: none; transition: border-color var(--transition-fast); background: var(--color-surface); }
.form-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); }
select.form-input { cursor: pointer; }
textarea.form-input { resize: vertical; min-height: 80px; }

.btn { padding: 9px 16px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: all var(--transition-fast); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-primary { background: var(--color-primary); color: white; }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }
.btn-secondary { background: var(--color-surface); color: var(--color-text-label); border: 1px solid var(--color-border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--color-bg-subtle); }
.btn-danger { background: var(--color-surface); color: var(--color-danger); border: 1px solid var(--color-danger-border); }
.btn-danger:hover:not(:disabled) { background: var(--color-danger-tint); }
.btn-success { background: var(--color-success); color: white; }
.btn-success:hover:not(:disabled) { background: var(--color-success-hover); }
.btn-warning { background: var(--color-warning); color: white; }
.btn-warning:hover:not(:disabled) { background: var(--color-warning-hover); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-xs { padding: 3px 8px; font-size: 11px; border-radius: var(--radius-sm); }

.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th { background: var(--color-bg-subtle); padding: 10px 14px; text-align: left; font-weight: 600; color: var(--color-text-muted); font-size: 12px; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.data-table td { padding: 12px 14px; border-bottom: 1px solid var(--color-border-subtle); color: var(--color-text); vertical-align: middle; }
.data-table tr:hover td { background: var(--color-bg-subtle); }
.data-table tbody tr:last-child td { border-bottom: none; }

.card { background: var(--color-surface); border-radius: var(--radius-lg); border: 1px solid var(--color-border); padding: 20px; }
.stat-card { background: var(--color-surface); border-radius: var(--radius-lg); border: 1px solid var(--color-border); padding: 20px; }

/* Tab styles */
.tab-btn { padding: 8px 16px; font-size: 13px; font-weight: 600; border-radius: var(--radius-md); cursor: pointer; border: none; background: transparent; color: var(--color-text-muted); transition: all var(--transition-fast); }
.tab-btn.active { background: var(--color-primary); color: white; }
.tab-btn:not(.active):hover { background: var(--color-border-subtle); color: var(--color-text-label); }

/* Step indicator */
.step-indicator { display: flex; align-items: center; }
.step-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.step-dot.active { background: var(--color-primary); color: white; }
.step-dot.done { background: var(--color-success); color: white; }
.step-dot.pending { background: var(--color-border); color: var(--color-text-faint); }
.step-line { flex: 1; height: 2px; background: var(--color-border); margin: 0 4px; }
.step-line.done { background: var(--color-success); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-scroll-track); }
::-webkit-scrollbar-thumb { background: var(--color-scroll-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-scroll-thumb-hover); }

/* Link row */
.clickable-row { cursor: pointer; }
.clickable-row:hover td { background: var(--color-primary-tint) !important; }

/* Empty state */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; }
.empty-state svg { color: var(--color-border-strong); margin-bottom: 12px; }
.empty-state p { color: var(--color-text-muted); font-size: 14px; }

/* ==========================================================================
   Touch targets — on touch/coarse-pointer devices, enforce comfortable hit
   areas (WCAG 2.5.5) without enlarging controls for mouse users.
   ========================================================================== */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; }
  .btn-xs { min-height: 36px; }
  .tab-btn { min-height: 40px; }
  .form-input { min-height: 44px; }
}