/* ============================================================
   BAF Insurance Cayman Limited — EOD Portal Design System
   Tailwind v4 @theme + @layer components
   ============================================================ */

@theme {
  /* ── Brand: BAF Cayman ─────────────────────────────────── */
  --color-navy:        #1B3A6B;
  --color-navy-dark:   #122F58;
  --color-navy-light:  #234E8B;
  --color-red:        #BE1E2D;
  --color-red-light:  #D42B3A;
  --color-red-pale:   #FBECED;

  /* ── Neutrals ──────────────────────────────────────────── */
  --color-ink:         #0F1923;
  --color-ink-soft:    #283444;
  --color-ink-muted:   #5A6878;
  --color-paper:       #F8F9FA;
  --color-card:        #FFFFFF;
  --color-rule:        #E2E6EA;

  /* ── Semantic ──────────────────────────────────────────── */
  --color-good:        #1A7A45;
  --color-good-pale:   #D4EDDA;
  --color-warn:        #856404;
  --color-warn-pale:   #FFF3CD;
  --color-bad:         #B02A2A;
  --color-bad-pale:    #F8D7DA;
  --color-info:        #0D5FA5;
  --color-info-pale:   #D1ECF1;

  /* ── Typography ────────────────────────────────────────── */
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ── Border Radius ─────────────────────────────────────── */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
}

/* ============================================================
   BAF Accent Bar — navy → crimson → navy gradient
   ============================================================ */
.eod-accent-bar {
  height: 4px;
  width: 100%;
  background: linear-gradient(
    to right,
    var(--color-navy)      0%,
    var(--color-navy)      30%,
    var(--color-red)      50%,
    var(--color-navy)      70%,
    var(--color-navy)      100%
  );
  flex-shrink: 0;
}

/* ============================================================
   @layer components
   ============================================================ */
@layer components {

  /* ── Card ─────────────────────────────────────────────── */
  .eod-card {
    background-color: var(--color-card);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.07), 0 1px 2px -1px rgb(0 0 0 / 0.07);
    padding: 1.5rem;
  }

  /* ── Buttons: Base ────────────────────────────────────── */
  .eod-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border: 1px solid transparent;
    transition-property: color, background-color, border-color, box-shadow;
    transition-duration: 150ms;
    transition-timing-function: ease-in-out;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
  }
  .eod-btn:focus-visible {
    outline: 2px solid var(--color-navy);
    outline-offset: 2px;
  }
  .eod-btn:disabled,
  .eod-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* ── Button Variants ──────────────────────────────────── */
  .eod-btn-primary {
    background-color: var(--color-navy);
    color: #ffffff;
    border-color: var(--color-navy);
  }
  .eod-btn-primary:hover {
    background-color: var(--color-navy-dark);
    border-color: var(--color-navy-dark);
  }

  .eod-btn-secondary {
    background-color: #ffffff;
    color: var(--color-navy);
    border-color: var(--color-navy);
  }
  .eod-btn-secondary:hover {
    background-color: var(--color-paper);
  }

  .eod-btn-ghost {
    background-color: transparent;
    color: var(--color-navy);
    border-color: transparent;
  }
  .eod-btn-ghost:hover {
    background-color: var(--color-paper);
  }

  .eod-btn-danger {
    background-color: var(--color-bad);
    color: #ffffff;
    border-color: var(--color-bad);
  }
  .eod-btn-danger:hover {
    background-color: #8B2020;
    border-color: #8B2020;
  }

  .eod-btn-red {
    background-color: var(--color-red);
    color: var(--color-navy);
    border-color: var(--color-red);
    font-weight: 600;
  }
  .eod-btn-red:hover {
    background-color: var(--color-red-light);
    border-color: var(--color-red-light);
  }

  /* ── Button Sizes ─────────────────────────────────────── */
  .eod-btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    gap: 0.375rem;
  }

  .eod-btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    gap: 0.625rem;
    border-radius: var(--radius-lg);
  }

  .eod-btn-block {
    width: 100%;
    justify-content: center;
  }

  /* ── Form Inputs ──────────────────────────────────────── */
  .eod-input {
    display: block;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--color-ink);
    transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
    line-height: 1.5;
  }
  .eod-input::placeholder {
    color: var(--color-ink-muted);
  }
  .eod-input:focus {
    outline: none;
    border-color: var(--color-navy);
    box-shadow: 0 0 0 3px rgb(0 45 90 / 0.12);
  }
  .eod-input:disabled {
    background-color: var(--color-paper);
    color: var(--color-ink-muted);
    cursor: not-allowed;
  }

  .eod-select {
    display: block;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-md);
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--color-ink);
    transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%235A6878' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.25rem;
  }
  .eod-select:focus {
    outline: none;
    border-color: var(--color-navy);
    box-shadow: 0 0 0 3px rgb(0 45 90 / 0.12);
  }

  .eod-textarea {
    display: block;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--color-ink);
    transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
    resize: vertical;
    min-height: 6rem;
    line-height: 1.5;
  }
  .eod-textarea::placeholder {
    color: var(--color-ink-muted);
  }
  .eod-textarea:focus {
    outline: none;
    border-color: var(--color-navy);
    box-shadow: 0 0 0 3px rgb(0 45 90 / 0.12);
  }

  /* ── Form Labels & Wrappers ───────────────────────────── */
  .eod-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-ink-soft);
    margin-bottom: 0.25rem;
  }

  .eod-field {
    margin-bottom: 1rem;
  }

  /* ── Table ────────────────────────────────────────────── */
  .eod-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    background-color: #ffffff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-rule);
  }
  .eod-table thead {
    background-color: var(--color-navy);
  }
  .eod-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
  .eod-table td {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--color-ink);
    border-bottom: 1px solid var(--color-rule);
    vertical-align: middle;
  }
  .eod-table tbody tr:last-child td {
    border-bottom: none;
  }
  .eod-table tbody tr:nth-child(even) {
    background-color: var(--color-paper);
  }
  .eod-table tbody tr:hover {
    background-color: var(--color-red-pale);
    transition: background-color 100ms ease;
  }

  /* ── Badges ───────────────────────────────────────────── */
  .eod-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25rem;
    white-space: nowrap;
  }

  /* Status: account */
  .eod-badge-active {
    background-color: var(--color-good-pale);
    color: var(--color-good);
  }
  .eod-badge-suspended {
    background-color: var(--color-warn-pale);
    color: var(--color-warn);
  }
  .eod-badge-deleted {
    background-color: var(--color-bad-pale);
    color: var(--color-bad);
  }
  .eod-badge-pending {
    background-color: var(--color-info-pale);
    color: var(--color-info);
  }

  /* Status: EOD sheet */
  .eod-badge-submitted {
    background-color: var(--color-red-pale);
    color: var(--color-warn);
  }
  .eod-badge-rejected {
    background-color: var(--color-bad-pale);
    color: var(--color-bad);
  }
  .eod-badge-reviewed {
    background-color: var(--color-warn-pale);
    color: var(--color-warn);
  }
  .eod-badge-completed {
    background-color: var(--color-good-pale);
    color: var(--color-good);
  }

  /* ── Notice / Alert Boxes ─────────────────────────────── */
  .eod-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border-radius: var(--radius-md);
    padding: 1rem;
    font-size: 0.875rem;
    border: 1px solid transparent;
  }
  .eod-notice-success {
    background-color: var(--color-good-pale);
    color: var(--color-good);
    border-color: #a3d9b8;
  }
  .eod-notice-error {
    background-color: var(--color-bad-pale);
    color: var(--color-bad);
    border-color: #e8a9a9;
  }
  .eod-notice-warning {
    background-color: var(--color-warn-pale);
    color: var(--color-warn);
    border-color: #f0d080;
  }
  .eod-notice-info {
    background-color: var(--color-info-pale);
    color: var(--color-info);
    border-color: #9bd0e0;
  }

  /* ── Auth Layout ──────────────────────────────────────── */
  .eod-auth {
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5rem;
    padding: 0 1rem 3rem;
  }

  /* ── Empty State ──────────────────────────────────────── */
  .eod-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--color-ink-muted);
    gap: 0.75rem;
  }
  .eod-empty iconify-icon {
    font-size: 2.5rem;
    opacity: 0.5;
  }

  /* ── Stat Card ────────────────────────────────────────── */
  .eod-stat-card {
    background-color: #ffffff;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.07);
    padding: 1.25rem 1.5rem;
    border-left: 4px solid var(--color-navy);
    position: relative;
    overflow: hidden;
  }
  .eod-stat-card.red  { border-left-color: var(--color-red); }
  .eod-stat-card.green { border-left-color: var(--color-good); }
  .eod-stat-card.red   { border-left-color: var(--color-bad); }
  .eod-stat-card.blue  { border-left-color: var(--color-info); }

  /* ── OTP Input ────────────────────────────────────────── */
  .eod-otp {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
  }
  .eod-otp input {
    width: 3rem;
    height: 3.5rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    border: 2px solid var(--color-rule);
    border-radius: var(--radius-md);
    background-color: #ffffff;
    color: var(--color-ink);
    transition: border-color 150ms ease, box-shadow 150ms ease;
    caret-color: var(--color-navy);
  }
  .eod-otp input:focus {
    outline: none;
    border-color: var(--color-navy);
    box-shadow: 0 0 0 3px rgb(0 45 90 / 0.15);
  }
  .eod-otp input.has-value {
    border-color: var(--color-red);
  }

}
/* ── end @layer components ──────────────────────────────────── */