/**
 * compliance-styles.css
 *
 * Shared design tokens + base layout + common component styles for every
 * PI compliance form. Loaded by each form file via <link rel="stylesheet">.
 *
 * Keep this file lean — only extract CSS that is IDENTICAL across most forms.
 * Form-specific CSS stays inline in each form's own <style> block.
 */

/* ========== Design tokens ========== */
:root {
  --pi-navy-950: #061a3a; --pi-navy-900: #082653; --pi-navy-800: #103b78;
  --pi-blue-700: #1459b8; --pi-blue-600: #2675d8; --pi-blue-500: #4c8fe8;
  --pi-blue-100: #d5e5f9; --pi-blue-50: #f5f9ff;
  --pi-green-700: #08775d; --pi-green-600: #10916f; --pi-green-100: #c8f0dd; --pi-green-50: #effbf6;
  --pi-orange-600: #d98b0b; --pi-orange-100: #ffe0a3; --pi-orange-50: #fff9ed;
  --pi-red-600: #dc2626; --pi-red-50: #fef2f2;
  --pi-purple-600: #7556d9; --pi-purple-100: #ddd4ff;
  --pi-gray-900: #0f172a; --pi-gray-800: #344054; --pi-gray-700: #475467;
  --pi-gray-600: #667085; --pi-gray-500: #98a2b3; --pi-gray-400: #94a3b8;
  --pi-gray-300: #d0d5dd; --pi-gray-200: #e4e7ec; --pi-gray-100: #f2f4f7; --pi-gray-50: #f8fafc;
  --pi-white: #ffffff;

  --pi-color-primary: var(--pi-blue-700);
  --pi-color-primary-dark: var(--pi-navy-800);
  --pi-color-primary-bg: var(--pi-blue-50);
  --pi-color-bg: #f5f8fd;
  --pi-color-border: #e1e8f2;
  --pi-color-text: var(--pi-gray-800);
  --pi-color-text-strong: var(--pi-gray-900);
  --pi-color-text-muted: var(--pi-gray-600);

  --pi-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pi-radius-sm: 8px; --pi-radius-md: 12px; --pi-radius-pill: 999px;
  --pi-shadow-sm: 0 2px 6px rgba(16, 24, 40, 0.05);
}

/* ========== Base ========== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--pi-font);
  background: var(--pi-color-bg);
  color: var(--pi-color-text);
  line-height: 1.5;
  padding: 16px 20px 40px;
}

/* ========== Form head bar (title + draft indicator + action buttons) ========== */
.form-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.form-head h1 { font-size: 1.35rem; color: var(--pi-color-text-strong); font-weight: 600; }
.form-head .sub { font-size: 0.85rem; color: var(--pi-color-text-muted); margin-top: 2px; }
.form-head .actions { display: flex; gap: 8px; align-items: center; }

/* ========== Month navigator (used by most monthly forms) ========== */
.month-nav { background: white; border: 1px solid var(--pi-color-border); border-radius: var(--pi-radius-md); padding: 12px 20px; display: flex; align-items: center; gap: 14px; margin-bottom: 16px; box-shadow: var(--pi-shadow-sm); }
.month-nav button { background: transparent; border: 1px solid var(--pi-color-border); color: var(--pi-color-text); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 15px; font-family: inherit; }
.month-nav button:hover { background: var(--pi-gray-50); border-color: var(--pi-color-primary); color: var(--pi-color-primary); }
.month-nav .current-month { font-weight: 600; font-size: 1.05rem; color: var(--pi-color-text-strong); min-width: 200px; }
.month-nav .status-strip { margin-left: auto; display: flex; gap: 20px; font-size: 0.82rem; }
.month-nav .stat-inline { display: flex; flex-direction: column; }
.month-nav .stat-inline .k { font-size: 0.66rem; color: var(--pi-color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.month-nav .stat-inline .v { font-weight: 700; font-size: 1rem; color: var(--pi-color-text-strong); }
.month-nav .stat-inline .v.warn { color: var(--pi-orange-600); }
.month-nav .stat-inline .v.danger { color: var(--pi-red-600); }
.month-nav .stat-inline .v.success { color: var(--pi-green-600); }

/* ========== Draft indicator pill + pulse animation ========== */
.draft-indicator { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--pi-color-text-muted); }
.draft-indicator .dot { width: 8px; height: 8px; background: var(--pi-green-600); border-radius: 50%; }
.draft-indicator.saving .dot { background: var(--pi-orange-600); animation: pulse 1s ease infinite; }
.draft-indicator.locked .dot { background: var(--pi-gray-400); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ========== Cards ========== */
.card { background: white; border: 1px solid var(--pi-color-border); border-radius: var(--pi-radius-md); margin-bottom: 16px; overflow: hidden; box-shadow: var(--pi-shadow-sm); }
.card-head { padding: 14px 20px; border-bottom: 1px solid var(--pi-color-border); display: flex; align-items: center; justify-content: space-between; }
.card-head h2 { font-size: 1rem; color: var(--pi-color-text-strong); font-weight: 600; }
.card-body { padding: 16px 20px; }

/* ========== Meta grid (Pharmacy / Lab / Period triplet) ========== */
.meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 700px) { .meta-grid { grid-template-columns: 1fr; } }
.meta-item .k { font-size: 0.7rem; color: var(--pi-color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.meta-item .v { font-size: 0.95rem; font-weight: 600; color: var(--pi-color-text-strong); margin-top: 3px; }

/* ========== Buttons ========== */
.btn { padding: 9px 16px; border-radius: var(--pi-radius-sm); font-family: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; border: none; transition: 0.15s; }
.btn-primary { background: var(--pi-color-primary); color: white; }
.btn-primary:hover:not(:disabled) { background: var(--pi-color-primary-dark); }
.btn-primary:disabled { background: var(--pi-gray-300); cursor: not-allowed; }
.btn-outline { background: transparent; border: 1.5px solid var(--pi-color-border); color: var(--pi-gray-700); }
.btn-outline:hover { border-color: var(--pi-color-primary); color: var(--pi-color-primary); }
.btn-success { background: var(--pi-green-600); color: white; }
.btn-success:hover { background: var(--pi-green-700); }
.btn-success:disabled { background: var(--pi-gray-300); cursor: not-allowed; }
.btn-danger { background: var(--pi-red-600); color: white; }
.btn-danger:hover { background: #b91c1c; }