/* Imports must precede every other rule: CSS drops late @imports, which is
   why components/_forms.css never actually shipped. postcss-import does not
   do Sass-style underscore partials, so name the files exactly. */
@import "./components/_forms.css";
@import "./components/_tom_select.css";
/* Trix editor styles, used by the rich-text ticket body. */
@import "./actiontext.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* Brand defaults (#1D4ED8 / #1942B8). Defined here so every page has a
     value even outside the admin layout, which overrides them per org. */
  :root {
    --brand-500: 29 78 216;
    --brand-600: 25 66 184;
  }

  /* Manrope is the identity. Setting it on the element (rather than on a
     handful of views) is what carries the landing's typography into the
     panel, the portal and the Devise screens without touching them. */
  html {
    font-family: theme('fontFamily.sans');
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Headings sit tight and heavy in this design; the browser defaults are
     too light and too loose to read as the same family as the landing. */
  h1, h2, h3, h4 {
    @apply font-extrabold tracking-tight text-ink;
  }
}

@layer components {
  /* Button styles */
  .btn {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-bold rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 transition duration-150 ease-in-out;
  }

  .btn-primary {
    @apply text-white hover:bg-orange-600 focus:ring-orange-500 shadow-brand-sm;
    background-color: rgb(var(--brand-500));
  }

  .btn-secondary {
    @apply text-ink bg-white border-line-strong hover:bg-surface-tint focus:ring-orange-500;
  }

  .btn-sm {
    @apply px-3 py-1.5 text-xs;
  }

  .btn-outline-primary {
    @apply text-primary-500 border-line-strong hover:bg-surface-tint;
  }

  .btn-outline-secondary {
    @apply text-ink-body border-line hover:bg-surface-tint;
  }

  .btn-outline-danger {
    @apply text-red-600 border-red-600 hover:bg-red-50;
  }

  .btn-outline-warning {
    @apply text-yellow-600 border-yellow-600 hover:bg-yellow-50;
  }

  /* Form styles */
  .form-input {
    @apply mt-1 block w-full rounded-lg border-line-blue bg-surface-soft shadow-sm focus:border-orange-500 focus:ring-orange-500 sm:text-sm;
  }

  .form-select {
    @apply mt-1 block w-full rounded-lg border-line-blue bg-surface-soft shadow-sm focus:border-orange-500 focus:ring-orange-500 sm:text-sm;
  }

  .form-checkbox {
    @apply rounded border-line-strong text-orange-600 shadow-sm focus:border-orange-500 focus:ring-orange-500 mr-3;
  }

  .form-label {
    @apply block text-sm font-bold text-ink;
  }

  /* Checkbox label spacing */
  .checkbox {
    @apply flex items-center;
  }

  .checkbox label {
    @apply ml-2;
  }

  /* Surfaces. The panel's pages are built from white cards on a tinted page;
     naming the pair keeps every screen on the same elevation vocabulary. */
  .card {
    @apply bg-white border border-line rounded-2xl shadow-card;
  }

  .card-pad {
    @apply p-6;
  }

  /* Small caps kicker above a section heading, used on every marketing
     section and reused for the panel's section headers. */
  .kicker {
    @apply text-xs font-bold uppercase tracking-[0.14em] text-primary-500;
  }
}

/* Conversations inbox on phones: one pane at a time. The wrapper's
   data-inbox-pane says which (see inbox_layout_controller.js); from md up both
   columns sit side by side and the attribute is ignored. */
@media (max-width: 767px) {
  [data-inbox-pane="panel"] [data-inbox-list] { display: none; }
  [data-inbox-pane="list"] [data-inbox-panel] { display: none; }
}