/* ==========================================================================
   Fathia Events — component styles
   Tailwind handles layout/utilities; this file holds reusable component
   classes and brand tokens that are awkward to express as utilities alone.
   Brand palette mirrors tailwind.config in header.php.
   ========================================================================== */

:root {
    --brand-50:  #F9F3FC;
    --brand-100: #F1E4F5;
    --brand-400: #A9519C;
    --brand-600: #5A347D;
    --brand-700: #51105E;
    --brand-800: #392258;
    --brand-900: #262329;
    --cream:     #FBF6F5;
    --muted:     #A6A7A7;
    --success:   #1F9D55;
    --warning:   #C77700;
    --danger:    #C0341D;
    --info:      #2B6CB0;
}

/* ---- Buttons ------------------------------------------------------------ */
.btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .55rem 1rem; border-radius: .625rem;
    font-size: .875rem; font-weight: 600; line-height: 1;
    cursor: pointer; border: 1px solid transparent;
    transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
    white-space: nowrap;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary   { background: var(--brand-700); color: #fff; }
.btn-primary:hover   { background: var(--brand-800); }
.btn-secondary { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }
.btn-secondary:hover { background: var(--brand-100); }
.btn-ghost     { background: transparent; color: var(--brand-700); }
.btn-ghost:hover     { background: var(--brand-50); }
.btn-danger    { background: var(--danger); color: #fff; }
.btn-danger:hover    { filter: brightness(.93); }
.btn-sm { padding: .375rem .7rem; font-size: .8rem; border-radius: .5rem; }
.btn-icon { padding: .5rem; border-radius: .5rem; }

/* ---- Cards -------------------------------------------------------------- */
.card {
    background: #fff; border: 1px solid var(--brand-100);
    border-radius: 1rem; box-shadow: 0 1px 2px rgba(38,35,41,.06), 0 8px 24px rgba(81,16,94,.05);
}
.card-pad { padding: 1.25rem 1.5rem; }
.card-header {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1.5rem; border-bottom: 1px solid var(--brand-100);
}
.card-title { font-weight: 600; color: var(--brand-800); }

/* ---- Stat tiles (dashboard) --------------------------------------------- */
.stat { position: relative; overflow: hidden; }
.stat .stat-value { font-size: 1.6rem; font-weight: 700; color: var(--brand-800); line-height: 1.1; }
.stat .stat-label { font-size: .8rem; color: var(--muted); }
.stat .stat-icon {
    display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
    border-radius: .75rem; background: var(--brand-50); color: var(--brand-700);
}

/* ---- KPI cards ----------------------------------------------------------
   The figure row on the dashboard AND on the invoice / payment / expense
   registers — one component, rendered by includes/layout/statCards.php, so a
   total looks the same wherever it is quoted.

   The icon carries the colour, not the card: the surface stays white and the
   accent lives in a soft tinted tile, which is what keeps a row of four from
   reading as four unrelated things. Tones are semantic — money in is emerald,
   money out is rose, waiting-on is amber — so the palette means something
   rather than just varying. */
.kpi {
    display: flex; align-items: flex-start; gap: 1rem;
    padding: 1.25rem 1.25rem; background: #fff;
    border: 1px solid var(--brand-100); border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(38,35,41,.06), 0 8px 24px rgba(81,16,94,.05);
    transition: box-shadow .15s, transform .15s, border-color .15s;
}
a.kpi:hover {
    box-shadow: 0 2px 4px rgba(38,35,41,.07), 0 14px 32px rgba(81,16,94,.10);
    border-color: var(--brand-200, #E0C8EA); transform: translateY(-1px);
}
.kpi-icon {
    display: grid; place-items: center; flex: none;
    width: 2.75rem; height: 2.75rem; border-radius: .875rem;
}
.kpi-label {
    font-size: .78rem; font-weight: 500; color: var(--muted);
    text-transform: uppercase; letter-spacing: .04em; line-height: 1.3;
}
.kpi-value {
    margin-top: .3rem; font-size: 1.5rem; font-weight: 700;
    color: var(--brand-800); line-height: 1.15; letter-spacing: -.01em;
    overflow-wrap: anywhere;
}
.kpi-note { margin-top: .2rem; font-size: .75rem; color: var(--muted); }

/* The tints. Each is the semantic colour at ~10% on white, with the solid
   colour as the glyph — the same pairing the badges use. */
.kpi-icon-violet  { background: #F3E9FA; color: #7E2A86; }
.kpi-icon-emerald { background: #E4F5EC; color: #1F9D55; }
.kpi-icon-amber   { background: #FBF0DD; color: #C77700; }
.kpi-icon-rose    { background: #FBE6E1; color: #C0341D; }
.kpi-icon-sky     { background: #E5EEF8; color: #2B6CB0; }
.kpi-icon-indigo  { background: #E8E9FA; color: #4C51BF; }
.kpi-icon-slate   { background: #EFECF1; color: #6B6570; }

@media (max-width: 400px) {
    .kpi { padding: 1rem; gap: .75rem; }
    .kpi-value { font-size: 1.3rem; }
}

/* ---- Charts -------------------------------------------------------------
   Chart.js draws into a canvas that has no size of its own, so the height
   lives here and the width comes from the card. assets/js/charts.js reads the
   spec off [data-chart]. */
.chart-box { position: relative; width: 100%; height: 260px; }
.chart-box-tall { height: 320px; }
.chart-empty {
    display: grid; place-items: center; height: 100%;
    font-size: .875rem; color: var(--muted); text-align: center;
}

/* ---- Pagination ---------------------------------------------------------
   includes/layout/pagination.php, under every data table. It sits inside the
   card, separated by the same hairline the table rows use. */
.pagination {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .75rem; padding: .875rem 1.5rem; border-top: 1px solid var(--brand-100);
}
.pagination-count { font-size: .78rem; color: var(--muted); }
.pagination-list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.page-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.25rem; height: 2.25rem; padding: 0 .55rem;
    border-radius: .5rem; border: 1px solid transparent;
    font-size: .8rem; font-weight: 600; color: var(--brand-700);
    transition: background-color .15s, color .15s, border-color .15s;
}
a.page-link:hover { background: var(--brand-50); border-color: var(--brand-100); }
.page-link.is-current { background: var(--brand-700); color: #fff; }
.page-link.is-disabled { color: var(--muted); opacity: .45; cursor: not-allowed; }
.page-gap { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; color: var(--muted); }

@media (max-width: 640px) {
    .pagination { padding: .75rem 1rem; justify-content: center; }
    .pagination-count { width: 100%; text-align: center; }
}

/* ---- Page & section headers ---------------------------------------------
   The band a report opens on (title + the span it covers + the exports), and
   the lighter version the show screens use. Deliberately not a .card: it is
   the heading OF the cards below it, so it carries the brand gradient rather
   than the same white surface it introduces. */
.page-head {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
    gap: 1rem; padding: 1.25rem 1.5rem; border-radius: 1rem;
    background: linear-gradient(160deg, #51105E 0%, #392258 60%, #262329 100%);
    color: #fff;
}
.page-head-title { font-size: 1.25rem; font-weight: 600; line-height: 1.25; }
.page-head-meta {
    display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem;
    padding: .25rem .7rem; border-radius: 999px;
    background: rgba(255,255,255,.12); color: #fff;
    font-size: .78rem; font-weight: 500;
}
.page-head .btn-secondary { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.18); }
.page-head .btn-secondary:hover { background: rgba(255,255,255,.24); }
.page-head .btn-primary { background: #fff; color: var(--brand-700); }
.page-head .btn-primary:hover { background: var(--brand-50); }

/* The prompt a report shows instead of its figures when a required filter has
   not been chosen yet. */
.needs-filter { text-align: center; padding: 3rem 1.5rem; }
.needs-filter svg { width: 3rem; height: 3rem; margin: 0 auto 1rem; color: var(--brand-200, #E0C8EA); }

/* ---- Forms -------------------------------------------------------------- */
.form-label { display: block; font-size: .8rem; font-weight: 600; color: var(--brand-800); margin-bottom: .35rem; }
.form-input, .form-select, .form-textarea {
    width: 100%; padding: .55rem .75rem; font-size: .875rem;
    background: #fff; color: var(--brand-900);
    border: 1px solid #E3D8EA; border-radius: .625rem;
    transition: border-color .15s, box-shadow .15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none; border-color: var(--brand-400);
    box-shadow: 0 0 0 3px rgba(169,81,156,.15);
}
/* A field that is not editable YET (the payment amount before an invoice is
   picked) or not editable AT ALL (Settings for someone without settings.update)
   reads as inert rather than looking like an empty box somebody forgot to fill. */
.form-input[readonly], .form-textarea[readonly] {
    background: var(--brand-50); color: var(--muted); cursor: not-allowed;
}
.form-input[readonly]:focus, .form-textarea[readonly]:focus {
    border-color: #E3D8EA; box-shadow: none;
}
.form-hint  { font-size: .75rem; color: var(--muted); margin-top: .3rem; }
.form-error { font-size: .75rem; color: var(--danger); margin-top: .3rem; }
.form-group { margin-bottom: 1rem; }
.is-invalid { border-color: var(--danger) !important; }

/* ---- Tables ------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table th {
    text-align: left; font-weight: 600; color: var(--muted);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    padding: .75rem 1rem; border-bottom: 1px solid var(--brand-100); white-space: nowrap;
}
.table td { padding: .8rem 1rem; border-bottom: 1px solid #F3EDF6; color: var(--brand-900); vertical-align: middle; }
.table tbody tr:hover { background: var(--brand-50); }
.table tbody tr:last-child td { border-bottom: 0; }

/* ---- Badges / status pills ---------------------------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .2rem .6rem; border-radius: 999px;
    font-size: .72rem; font-weight: 600; line-height: 1.2;
}
.badge-success { background: #E4F5EC; color: var(--success); }
.badge-warning { background: #FBF0DD; color: var(--warning); }
.badge-danger  { background: #FBE6E1; color: var(--danger); }
.badge-info    { background: #E5EEF8; color: var(--info); }
.badge-muted   { background: #EFECF1; color: #6B6570; }

/* ---- Flash messages ----------------------------------------------------- */
.flash {
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem 1rem; border-radius: .75rem; font-size: .875rem;
    border: 1px solid transparent;
}
.flash span:first-child { flex: 1; }
.flash-close { background: none; border: 0; font-size: 1.15rem; line-height: 1; cursor: pointer; color: inherit; opacity: .6; }
.flash-close:hover { opacity: 1; }
.flash-success { background: #E4F5EC; color: var(--success); border-color: #BFE6CF; }
.flash-error   { background: #FBE6E1; color: var(--danger);  border-color: #F3C6BC; }
.flash-warning { background: #FBF0DD; color: var(--warning); border-color: #F0DDB4; }
.flash-info    { background: #E5EEF8; color: var(--info);    border-color: #C4D8EF; }

/* ---- Modal -------------------------------------------------------------- */
.modal-overlay {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(38,35,41,.5); backdrop-filter: blur(2px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 2.5rem 1rem; overflow-y: auto;
    opacity: 0; transition: opacity .15s;
}
.modal-overlay.open { opacity: 1; }
.modal {
    width: 100%; max-width: 640px; background: #fff;
    border-radius: 1rem; box-shadow: 0 20px 60px rgba(38,35,41,.25);
    transform: translateY(-8px); transition: transform .15s;
}
.modal-overlay.open .modal { transform: translateY(0); }
.modal-lg { max-width: 920px; }
.modal-header { display: flex; align-items: center; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--brand-100); }
.modal-title { font-weight: 600; font-size: 1.05rem; color: var(--brand-800); }
.modal-close { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 1.4rem; line-height: 1; }
.modal-body { padding: 1.5rem; }
.modal-footer { display: flex; justify-content: flex-end; gap: .75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--brand-100); }

/* ---- Tabs ---------------------------------------------------------------
   Sub-navigation for screens that share one sidebar entry (Users · Roles &
   access · Activity log). Each tab is a plain link to its own route. */
.tabs {
    display: flex; gap: .25rem; flex-wrap: wrap;
    padding: .3rem; border-radius: .875rem;
    background: #fff; border: 1px solid var(--brand-100);
    box-shadow: 0 1px 2px rgba(38,35,41,.06), 0 8px 24px rgba(81,16,94,.05);
}
.tab {
    padding: .5rem .95rem; border-radius: .625rem;
    font-size: .875rem; font-weight: 600; line-height: 1;
    color: var(--muted); white-space: nowrap;
    transition: background-color .15s, color .15s;
}
.tab:hover { background: var(--brand-50); color: var(--brand-700); }
.tab-active, .tab-active:hover { background: var(--brand-700); color: #fff; }

/* ---- Dropdown menu (top-bar account menu) ------------------------------- */
.dropdown { position: relative; }
.dropdown-menu {
    position: absolute; right: 0; top: calc(100% + .5rem); z-index: 40;
    min-width: 13rem; padding: .35rem;
    background: #fff; border: 1px solid var(--brand-100); border-radius: .875rem;
    box-shadow: 0 12px 32px rgba(38,35,41,.14);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .15s, transform .15s, visibility .15s;
}
.dropdown.open .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-heading { padding: .5rem .75rem; border-bottom: 1px solid var(--brand-100); margin-bottom: .35rem; }
.dropdown-item {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .75rem; border-radius: .5rem;
    font-size: .875rem; font-weight: 500; color: var(--brand-900);
}
.dropdown-item:hover { background: var(--brand-50); color: var(--brand-700); }
.dropdown-item-danger { color: var(--danger); }
.dropdown-item-danger:hover { background: #FBE6E1; color: var(--danger); }

/* ---- SweetAlert2 confirmations ------------------------------------------
   Every confirmation in the app is a SweetAlert (see confirmDialog() in
   app.js); these rules pull it into the brand. Buttons are OUR .btn classes —
   the dialog is opened with buttonsStyling:false. */
.swal2-popup.swal-brand {
    font-family: inherit;
    border-radius: 1rem;
    padding: 1.75rem 1.5rem 1.25rem;
    box-shadow: 0 20px 60px rgba(38,35,41,.25);
}
.swal-brand .swal2-title { font-size: 1.15rem; font-weight: 600; color: var(--brand-800); }
.swal-brand .swal2-html-container { font-size: .9rem; color: var(--brand-900); margin-top: .5rem; }
.swal-brand .swal2-actions { gap: .75rem; margin-top: 1.5rem; }
.swal-brand .swal2-actions .btn { margin: 0; }
.swal-brand .swal2-icon { margin-top: .25rem; }

/* Safety net: SweetAlert's heightAuto puts `height: auto !important` on the
   body, which collapses the full-height shell and leaves a white band below
   the sidebar. confirmDialog() passes heightAuto:false; this covers any
   Swal.fire() called directly. The `html body` prefix is deliberate —
   SweetAlert's own rule is `body.swal2-height-auto{height:auto!important}` and
   its <style> is injected after this file, so an equal-specificity selector
   would lose the cascade. */
html body.swal2-height-auto { height: 100% !important; }

/* ---- Empty state -------------------------------------------------------- */
.empty { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.empty svg { width: 3rem; height: 3rem; margin: 0 auto 1rem; color: var(--brand-200, #E0C8EA); }

/* Utility used by line-item rows on quotes/invoices */
/* Scroll lock behind a modal. On desktop the document does not scroll — the
   #pageScroll region does — so both have to be pinned. */
body.modal-open { overflow: hidden; }
body.modal-open #pageScroll { overflow: hidden; }

/* ---- Third-party widget theming -------------------------------------------
   Select2 ([data-search]) and Pikaday ([data-datepicker]) are wired up in
   app.js. Both ship opinionated default styles, so they are pulled back onto
   the same border, radius, focus ring and brand colours as .form-select /
   .form-input. app.css loads after both vendor stylesheets, so these win. */

/* Select2 — the closed control */
.select2-container { width: 100% !important; }
.select2-container--default .select2-selection--single {
    height: auto; padding: .55rem .75rem; font-size: .875rem;
    background: #fff; border: 1px solid #E3D8EA; border-radius: .625rem;
    transition: border-color .15s, box-shadow .15s;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.25rem; padding: 0; color: var(--brand-900);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--muted); }
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%; right: .5rem;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--brand-400); box-shadow: 0 0 0 3px rgba(169,81,156,.15);
}
/* Mirrors .is-invalid on the hidden <select> the AJAX error handler marks up */
select.is-invalid + .select2-container .select2-selection--single { border-color: var(--danger) !important; }

/* Select2 — the open dropdown */
.select2-dropdown {
    border: 1px solid #E3D8EA; border-radius: .625rem;
    box-shadow: 0 8px 24px rgba(81,16,94,.12); overflow: hidden;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    padding: .45rem .6rem; font-size: .875rem;
    border: 1px solid #E3D8EA; border-radius: .5rem;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    outline: none; border-color: var(--brand-400);
}
.select2-container--default .select2-results__option { font-size: .875rem; padding: .5rem .75rem; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--brand-50); color: var(--brand-800);
}
.select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--brand-100); color: var(--brand-800); font-weight: 500;
}
/* Above the modal (z-60 in the shell) and above SweetAlert's backdrop */
.select2-container--open { z-index: 80; }

/* Pikaday */
.pika-single {
    border: 1px solid #E3D8EA; border-radius: .625rem;
    box-shadow: 0 8px 24px rgba(81,16,94,.12);
    font-family: inherit; color: var(--brand-900); z-index: 80 !important;
}
.pika-label { font-weight: 600; color: var(--brand-800); font-size: .85rem; }
.pika-table th { color: var(--muted); font-size: .7rem; text-transform: uppercase; }
.pika-button { border-radius: .375rem; text-align: center; background: var(--cream); }
.pika-button:hover { background: var(--brand-400) !important; color: #fff !important; }
.is-today .pika-button { color: var(--brand-700); font-weight: 600; }
.is-selected .pika-button {
    background: var(--brand-700); color: #fff; font-weight: 600; box-shadow: none;
}
.pika-prev, .pika-next { opacity: .6; }
.pika-prev:hover, .pika-next:hover { opacity: 1; }

/* No @media print rules: nothing in the app is meant to be printed from the
   browser. Quotations and invoices are printed from the PDF (quotePdf.php /
   invoicePdf.php), which opens in the browser's own viewer — that is the one
   document, laid out by TCPDF, and it looks the same wherever it is opened. */

.text-right.align-right { text-align: right !important; }
.text-center.align-center { text-align: center !important; }