@import "tailwindcss";

@theme {
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --color-app-bg: #f4f7fb;
  --color-app-text: #17202a;
  --color-app-muted: #637389;
  --color-app-border: #d9e2ef;
  --color-sidebar: #102033;
  --color-sidebar-hover: #1f3654;
  --color-brand: #2563eb;
  --color-danger: #b42318;
}

@layer base {
  * {
    box-sizing: border-box;
  }

  :root {
    color: var(--color-app-text);
    background: var(--color-app-bg);
    font-family: var(--font-sans);
  }

  body {
    margin: 0;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  button,
  input,
  textarea,
  select {
    font: inherit;
  }

  h1,
  h2,
  h3,
  p {
    margin-top: 0;
  }
}

@layer components {
  .app-shell {
    @apply grid min-h-screen grid-cols-[250px_1fr];
  }

  .sidebar {
    @apply bg-sidebar px-[18px] py-6 text-[#f8fbff];
  }

  .brand {
    @apply mb-7 block text-2xl font-extrabold;
  }

  .sidebar nav {
    @apply grid gap-1.5;
  }

  .sidebar-context {
    @apply mb-4 grid gap-1 rounded-lg border border-[#1f3654] bg-[#162a43] p-3;
  }

  .sidebar-context strong,
  .sidebar-context span {
    @apply block;
  }

  .sidebar-context span {
    @apply text-[13px] text-[#d7e3f3];
  }

  .sidebar nav a {
    @apply rounded-lg px-3 py-2.5 text-[#d7e3f3];
  }

  .sidebar nav a.router-link-active,
  .sidebar nav a:hover {
    @apply bg-sidebar-hover text-white;
  }

  .content {
    @apply p-6;
  }

  .topbar {
    @apply mb-6 flex items-center justify-between;
  }

  .eyebrow {
    @apply mb-1 text-[13px] font-bold uppercase text-app-muted;
  }

  .topbar h1 {
    @apply mb-0 text-[28px];
  }

  .topbar-actions {
    @apply flex gap-2.5;
  }

  .report-toolbar {
    @apply flex flex-wrap items-start justify-between gap-4;
  }

  .notice-bar {
    @apply mb-4 flex flex-wrap items-center justify-between gap-3 rounded-lg border border-[#fedf89] bg-[#fffbeb] p-4 text-[#713f12];
  }

  .notice-bar strong,
  .notice-bar span {
    @apply block;
  }

  .notice-bar span {
    @apply text-[13px];
  }

  .portal-notice {
    @apply mb-0;
  }

  .button {
    @apply inline-flex cursor-pointer rounded-lg border border-transparent px-3.5 py-2.5 font-bold disabled:cursor-not-allowed disabled:opacity-60;
  }

  .button.primary {
    @apply bg-brand text-white;
  }

  .button.ghost {
    @apply border-app-border bg-white text-app-text;
  }

  .panel {
    @apply rounded-lg border border-app-border bg-white p-5;
  }

  .grid {
    @apply grid grid-cols-[repeat(auto-fit,minmax(220px,1fr))] gap-4;
  }

  .stack {
    @apply grid gap-3;
  }

  .list-item {
    @apply flex flex-wrap items-center justify-between gap-3 rounded-lg border border-app-border p-3;
  }

  .list-item.unread {
    @apply border-brand bg-[#f8fbff];
  }

  .list-item strong,
  .list-item span {
    @apply block;
  }

  .list-item span {
    @apply text-[13px] text-app-muted;
  }

  .inline-actions {
    @apply flex flex-wrap items-center gap-2;
  }

  .metric {
    @apply rounded-lg border border-app-border bg-white p-[18px];
  }

  .metric strong {
    @apply mt-2 block text-[28px];
  }

  .metric small {
    @apply mt-1 block text-[13px] text-app-muted;
  }

  .form-page {
    @apply grid max-w-[430px];
  }

  .form {
    @apply grid gap-3.5;
  }

  fieldset.form {
    @apply m-0 border-0 p-0 disabled:opacity-70;
  }

  .field {
    @apply grid gap-1.5;
  }

  .field label {
    @apply font-bold;
  }

  .field input,
  .field textarea,
  .field select,
  select {
    @apply rounded-lg border border-[#cfd9e6] bg-white px-3 py-2.5;
  }

  .wide-grid {
    @apply items-start grid-cols-[repeat(auto-fit,minmax(320px,1fr))];
  }

  .compact-grid {
    @apply grid-cols-[repeat(auto-fit,minmax(110px,1fr))];
  }

  .error {
    @apply font-bold text-danger;
  }

  .success {
    @apply font-bold text-[#067647];
  }

  .muted {
    @apply text-[13px] text-app-muted;
  }

  .muted-link {
    @apply text-[13px] font-bold text-app-muted hover:text-brand;
  }

  .customer-access-item {
    @apply grid gap-3 rounded-lg border border-app-border p-3;
  }

  .customer-access-item .list-item {
    @apply border-0 p-0;
  }

  .portal-account-form {
    @apply border-t border-app-border pt-3;
  }

  .portal-account-title {
    @apply flex flex-wrap items-center justify-between gap-2;
  }

  .portal-account-title span {
    @apply text-[13px] font-bold text-app-muted;
  }

  .print-document {
    @apply mx-auto max-w-[860px] bg-white text-app-text;
  }

  .print-header {
    @apply mb-6 flex items-start justify-between gap-6 border-b border-app-border pb-5;
  }

  .print-meta {
    @apply grid gap-1 text-right;
  }

  .print-meta strong {
    @apply text-2xl;
  }

  .print-meta span,
  .receipt-meta span {
    @apply block text-app-muted;
  }

  .print-grid {
    @apply mb-5 grid grid-cols-2 gap-5;
  }

  .print-table {
    @apply mb-5 w-full border-collapse text-left;
  }

  .print-table th,
  .print-table td {
    @apply border-b border-app-border px-3 py-2 align-top;
  }

  .print-table th {
    @apply bg-app-bg text-[13px] uppercase text-app-muted;
  }

  .print-totals {
    @apply ml-auto grid max-w-[320px] gap-2;
  }

  .print-totals div {
    @apply flex justify-between gap-6 border-b border-app-border py-1.5;
  }

  .payment-history {
    @apply mt-6 border-t border-app-border pt-5;
  }

  .receipt-document {
    @apply max-w-[420px];
  }

  .receipt-header {
    @apply justify-center text-center;
  }

  .receipt-meta {
    @apply mb-4 grid gap-1 text-center;
  }

  .receipt-footer {
    @apply mt-5 text-center font-bold;
  }

  .portal-layout {
    @apply min-h-screen bg-app-bg p-6;
  }

  .portal-card,
  .portal-workspace {
    @apply mx-auto grid max-w-[1120px] gap-5;
  }

  .portal-card {
    @apply mt-[8vh] max-w-[430px] rounded-lg border border-app-border bg-white p-6;
  }

  .portal-header {
    @apply flex flex-wrap items-center justify-between gap-4 rounded-lg border border-app-border bg-white p-5;
  }

  .portal-header h1 {
    @apply mb-1 text-[28px];
  }

  .portal-header p {
    @apply mb-0 text-app-muted;
  }

  .portal-section-header {
    @apply mb-4 flex flex-wrap items-center justify-between gap-3;
  }

  .portal-section-header h2 {
    @apply mb-0;
  }

  .portal-section-header input,
  .portal-section-header select {
    @apply rounded-lg border border-[#cfd9e6] bg-white px-3 py-2.5;
  }

  .inline-check {
    @apply inline-flex items-center gap-2 font-bold;
  }

  .feature-picker {
    @apply grid max-h-[190px] gap-2 overflow-auto rounded-lg border border-app-border p-3;
  }

  .status-pill {
    @apply rounded-full bg-[#ecfdf3] px-2.5 py-1 text-[12px] font-bold text-[#067647];
  }

  .status-pill.off {
    @apply bg-[#f2f4f7] text-app-muted;
  }

  .status-pill.warn {
    @apply bg-[#fffbeb] text-[#b54708];
  }

  .status-pill.danger {
    @apply bg-[#fef3f2] text-danger;
  }

  .chart-track {
    @apply h-2 overflow-hidden rounded-lg bg-[#d9e2ef];
  }

  .chart-bar {
    @apply h-2 rounded-lg bg-brand;
  }

  .chart-bar.alt {
    @apply bg-[#0f766e];
  }

  .chart-bar.warn {
    @apply bg-[#b54708];
  }

  .portal-table {
    @apply grid gap-2;
  }

  .portal-row {
    @apply grid grid-cols-[1fr_auto_auto] items-center gap-4 rounded-lg border border-app-border p-3;
  }

  .portal-row:hover {
    @apply border-brand bg-[#f8fbff];
  }

  .portal-row strong,
  .portal-row small {
    @apply block;
  }

  .portal-row small {
    @apply text-app-muted;
  }

  .portal-pagination {
    @apply mt-4 justify-between;
  }

  .onboarding-layout {
    @apply grid max-w-[1040px] grid-cols-[minmax(320px,430px)_1fr] items-start gap-4;
  }

  .onboarding-panel {
    @apply min-h-[360px];
  }

  .plan-options {
    @apply grid gap-3;
  }

  .plan-option {
    @apply grid cursor-pointer grid-cols-[auto_1fr_auto] items-center gap-3 rounded-lg border border-app-border p-3;
  }

  .plan-option.active {
    @apply border-brand bg-[#f8fbff];
  }

  .plan-option input {
    @apply size-4;
  }

  .plan-option strong,
  .plan-option small {
    @apply block;
  }

  .plan-option small {
    @apply text-[13px] text-app-muted;
  }

  .plan-option b {
    @apply text-right;
  }
}

@media print {
  @page {
    margin: 14mm;
  }

  body {
    background: #ffffff;
  }

  .sidebar,
  .topbar,
  .no-print {
    display: none !important;
  }

  .app-shell {
    display: block;
    min-height: auto;
  }

  .content {
    padding: 0;
  }

  .print-document {
    border: 0 !important;
    box-shadow: none !important;
    max-width: none;
    padding: 0 !important;
  }

  .print-table th {
    background: #f4f7fb !important;
    print-color-adjust: exact;
  }
}

@media (max-width: 820px) {
  @layer components {
    .app-shell {
      @apply grid-cols-1;
    }

    .sidebar {
      @apply static;
    }

    .sidebar nav {
      @apply grid-cols-2;
    }

    .topbar {
      @apply flex-col items-start gap-3.5;
    }

    .portal-row {
      @apply grid-cols-1;
    }

    .onboarding-layout {
      @apply grid-cols-1;
    }
  }
}
