/* Font Awesome 6 (self-hosted through Vite, so the portal and login layouts
   get icons too and we do not depend on a CDN being reachable). */
@import '@fortawesome/fontawesome-free/css/fontawesome.css';
@import '@fortawesome/fontawesome-free/css/solid.css';
@import '@fortawesome/fontawesome-free/css/regular.css';
@import '@fortawesome/fontawesome-free/css/brands.css';

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

[x-cloak] {
    display: none;
}

/* ---------------------------------------------------------
   Base typography & body
   --------------------------------------------------------- */
@layer base {
    html {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    }
    body {
        @apply bg-slate-50 text-slate-700;
        font-family: 'Inter', 'Figtree', ui-sans-serif, system-ui, sans-serif;
    }
    h1, h2, h3, h4, h5, h6 {
        @apply text-slate-900 tracking-tight;
        letter-spacing: -0.015em;
    }
    /* Tabular numerals everywhere, important for a billing app */
    .tabular,
    table td,
    table th,
    .stat-value {
        font-variant-numeric: tabular-nums;
    }

    /* ---------------------------------------------------------
       Mobile: nothing may make the document wider than the phone.

       When one stray toolbar overflowed, the whole page gained a
       horizontal scroll: the sticky header and the page cards stayed at
       viewport width while the fixed bottom dock stayed glued to the
       screen, so the dock read as "wider" than everything above it.
       Wide content that genuinely needs to scroll (data tables, the
       kanban board) carries its own overflow-x-auto wrapper, so clipping
       here only catches layout bugs.

       `clip` rather than `hidden` is deliberate: it does not create a
       scroll container, so position:sticky inside still works and
       position:fixed children (dock, modals, drawers) still escape.
       --------------------------------------------------------- */
    @media (max-width: 1023.98px) {
        body {
            overflow-x: clip;
        }
    }
}

/* ---------------------------------------------------------
   Rich-text settings editor
   --------------------------------------------------------- */
.rich-input {
    line-height: 1.6;
}
.rich-input:empty::before {
    content: attr(data-placeholder);
    color: #94a3b8;
    pointer-events: none;
}
.rich-input ul { list-style: disc;    padding-left: 1.25rem; margin: 0.25rem 0; }
.rich-input ol { list-style: decimal; padding-left: 1.25rem; margin: 0.25rem 0; }
.rich-input li { margin: 0.125rem 0; }
.rich-input a  { color: #3b6fa0; text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------
   TipTap document editor (letters). These styles must mirror the
   dompdf `.body` rules in resources/views/pdf/letter.blade.php so the
   on-screen document matches the printed one.
   --------------------------------------------------------- */
.tiptap-content .ProseMirror {
    min-height: inherit;
    outline: none;
    line-height: 1.6;
}
.tiptap-content .ProseMirror:focus { outline: none; }
.tiptap-content h1 { font-size: 1.5rem;  font-weight: 700; margin: 0.6rem 0 0.4rem; }
.tiptap-content h2 { font-size: 1.25rem; font-weight: 700; margin: 0.6rem 0 0.4rem; }
.tiptap-content h3 { font-size: 1.1rem;  font-weight: 600; margin: 0.5rem 0 0.3rem; }
.tiptap-content p  { margin: 0.35rem 0; }
.tiptap-content ul { list-style: disc;    padding-left: 1.5rem; margin: 0.4rem 0; }
.tiptap-content ol { list-style: decimal; padding-left: 1.5rem; margin: 0.4rem 0; }
.tiptap-content li { margin: 0.1rem 0; }
.tiptap-content a  { color: #3b6fa0; text-decoration: underline; text-underline-offset: 2px; }
.tiptap-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.6rem 0;
    table-layout: fixed;
}
.tiptap-content th,
.tiptap-content td {
    border: 1px solid #cbd5e1;
    padding: 0.4rem 0.55rem;
    vertical-align: top;
    position: relative;
}
.tiptap-content th { background: #f1f5f9; font-weight: 600; text-align: left; }
.tiptap-content .selectedCell { background: #e0e7ff; }
.tiptap-content .ProseMirror-gapcursor { display: none; }
.tiptap-content p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    color: #94a3b8;
    float: left;
    height: 0;
    pointer-events: none;
}

/* ---------------------------------------------------------
   Icons (Font Awesome, rendered by <x-icon>)
   --------------------------------------------------------- */
@layer components {
    /* Call sites size icons with a Tailwind box (h-4 w-4, h-5 w-5 …). Centre the
       glyph inside that box so an icon occupies exactly the space the layout
       reserved for it, and sits on the text baseline next to a label. */
    .bp-icon {
        --fa-display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        vertical-align: -0.125em;
        flex-shrink: 0;
    }

    /* Bare Font Awesome <i> tags in buttons/labels: keep them optically aligned
       with the text they sit beside without needing a wrapper. */
    .fa-solid,
    .fa-regular,
    .fa-brands {
        vertical-align: -0.075em;
    }

    .bp-icon.fa-solid,
    .bp-icon.fa-regular,
    .bp-icon.fa-brands {
        vertical-align: -0.125em;
    }
}

/* ---------------------------------------------------------
   Brand utilities
   --------------------------------------------------------- */
@layer utilities {
    .bg-brand-gradient {
        background-image: linear-gradient(135deg, #0f1b3d 0%, #3b6fa0 100%);
    }

    .text-brand-gradient {
        background-image: linear-gradient(135deg, #0f1b3d 0%, #3b6fa0 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .glass {
        background-color: rgba(255, 255, 255, 0.65);
        backdrop-filter: blur(12px) saturate(140%);
        -webkit-backdrop-filter: blur(12px) saturate(140%);
    }

    .glass-dark {
        background-color: rgba(15, 27, 61, 0.55);
        backdrop-filter: blur(12px);
    }

    /* Sidebar scrollbar */
    .sidebar-scroll::-webkit-scrollbar { width: 6px; }
    .sidebar-scroll::-webkit-scrollbar-thumb {
        background-color: rgba(148, 163, 184, 0.18);
        border-radius: 9999px;
    }
    .sidebar-scroll::-webkit-scrollbar-thumb:hover {
        background-color: rgba(148, 163, 184, 0.32);
    }

    /* App-wide scrollbar polish */
    .scrollbar-fine::-webkit-scrollbar { width: 8px; height: 8px; }
    .scrollbar-fine::-webkit-scrollbar-thumb {
        background-color: rgb(203 213 225);
        border-radius: 9999px;
    }
    .scrollbar-fine::-webkit-scrollbar-thumb:hover { background-color: rgb(148 163 184); }

    /* Scrollable region with no visible scrollbar chrome */
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
    .no-scrollbar::-webkit-scrollbar { display: none; }

    /* Spinning brand pinwheel */
    .animate-brand-spin {
        transform-origin: 50% 50%;
        animation: brand-spin 6s linear infinite;
    }

    /* Subtle entrance for cards / lists */
    .animate-rise {
        animation: rise 280ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    /* Dial down the 2xl heading size app-wide */
    .text-2xl {
        font-size: 1.1rem;
    }
}

@keyframes brand-spin {
    to { transform: rotate(360deg); }
}

@keyframes rise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------
   Form polish (works with @tailwindcss/forms)
   --------------------------------------------------------- */
@layer base {
    [type='text'],
    [type='email'],
    [type='url'],
    [type='password'],
    [type='number'],
    [type='date'],
    [type='datetime-local'],
    [type='month'],
    [type='search'],
    [type='tel'],
    [type='time'],
    [type='week'],
    [multiple],
    textarea,
    select {
        @apply border-slate-200 bg-white text-slate-900 placeholder:text-slate-400;
        @apply transition shadow-xs;
    }
    [type='text']:focus,
    [type='email']:focus,
    [type='url']:focus,
    [type='password']:focus,
    [type='number']:focus,
    [type='date']:focus,
    [type='datetime-local']:focus,
    [type='month']:focus,
    [type='search']:focus,
    [type='tel']:focus,
    [type='time']:focus,
    [type='week']:focus,
    [multiple]:focus,
    textarea:focus,
    select:focus {
        @apply border-accent-500 ring-2 ring-accent-500/20 outline-none;
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .animate-brand-spin,
    .animate-rise { animation: none; }
}