/* ============================================================
   PORCELAIN & NOIR — design system for Chnafi Clinique Privée
   Livery: Émeraude & Laiton (deep green + sage-washed cream + brass)

   Scope: everything in this file is scoped under body.porcelain-noir.
   New classes are prefixed pn-. This file only restyles existing
   Perfex/Bootstrap markup — it does not add, remove, or rename any
   element IDs, classes used by JS, form fields, or PHP logic.
   Loaded last (see app/Views/includes/head.php) so it wins over
   bootstrap.min.css, app.all.css and custom-style.css without needing
   !important everywhere.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
body.porcelain-noir {
    --pn-bg: #E8EDE1;
    --pn-surface: #F9FAF3;
    --pn-well: #E7ECDC;
    --pn-border: #D9DFCA;
    --pn-border-strong: #BDC6AC;
    --pn-text-1: #182A1F;
    --pn-text-2: #495A4B;
    --pn-text-3: #7F8F80;
    --pn-accent: #1D5C43;
    --pn-accent-hover: #154A35;
    --pn-on-accent: #F4F8EE;
    --pn-brass: #9C7A2E;
    --pn-success: #3E6B4F;
    --pn-warning: #97571D;
    --pn-danger: #8C3538;
    --pn-info: #3E6875;

    /* the sidebar is always the dark espresso "noir spine", in every theme */
    --pn-sb-bg: #0D251B;
    --pn-sb-border: #1C3B2B;
    --pn-sb-text: #8BA393;
    --pn-sb-text-hi: #D8E4D6;
    --pn-sb-active: rgba(201, 169, 97, .16);
    --pn-sb-on: #E3CD96;

    --pn-font-serif: "Fraunces", Georgia, serif;
    --pn-font-ui: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --pn-font-mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    --pn-radius-card: 16px;
    --pn-radius-control: 10px;
    --pn-radius-pill: 999px;
    --pn-shadow-card: 0 1px 2px rgba(24, 32, 24, .06);
    --pn-motion: 160ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    body.porcelain-noir * {
        transition-duration: 0ms !important;
        animation-duration: 0ms !important;
    }
}

/* ---------- 2. Base surfaces & typography ---------- */
body.porcelain-noir {
    background-color: var(--pn-bg) !important;
    color: var(--pn-text-2);
    font-family: var(--pn-font-ui);
    font-size: 13.5px;
}

body.porcelain-noir h1,
body.porcelain-noir h2,
body.porcelain-noir h3,
body.porcelain-noir .page-title,
body.porcelain-noir .panel-title,
body.porcelain-noir .modal-title {
    font-family: var(--pn-font-serif);
    font-weight: 560;
    color: var(--pn-text-1);
}

body.porcelain-noir .page-title {
    background: transparent !important;
    font-size: 25px;
    border: none !important;
}

body.porcelain-noir a {
    color: var(--pn-accent);
}

body.porcelain-noir a:hover,
body.porcelain-noir a:focus,
body.porcelain-noir a:active {
    color: var(--pn-accent-hover);
}

body.porcelain-noir ::-webkit-scrollbar-thumb {
    background: var(--pn-border-strong) !important;
}

/* section "eyebrows": ◆ TASKS TODAY style micro-labels */
body.porcelain-noir .pn-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--pn-font-ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pn-text-3);
}

body.porcelain-noir .pn-eyebrow::before {
    content: "";
    width: 5px;
    height: 5px;
    background: var(--pn-brass);
    transform: rotate(45deg);
    flex: none;
}

/* figures: money, phone numbers, times, durations */
body.porcelain-noir .pn-money,
body.porcelain-noir .pn-figure {
    font-family: var(--pn-font-mono);
    font-variant-numeric: tabular-nums;
}

body.porcelain-noir .pn-money {
    display: inline-block;
    text-align: right;
}

/* ---------- 3. Sidebar — the noir spine (always dark) ---------- */
body.porcelain-noir .sidebar,
body.porcelain-noir .sidebar-scroll {
    background: var(--pn-sb-bg) !important;
    border-color: var(--pn-sb-border) !important;
}

body.porcelain-noir .sidebar-brand {
    background: transparent !important;
    padding: 20px 18px 14px;
    border-bottom: 1px solid var(--pn-sb-border);
    margin-bottom: 6px;
}

body.porcelain-noir .sidebar-brand .dashboard-image {
    filter: drop-shadow(0 0 0 transparent);
}

body.porcelain-noir #sidebar-menu.sidebar-menu {
    padding: 6px 10px;
}

body.porcelain-noir .sidebar-menu li.main {
    margin-bottom: 2px;
}

body.porcelain-noir .sidebar-menu li a {
    color: var(--pn-sb-text) !important;
    border-radius: var(--pn-radius-control);
    font-size: 13px;
    transition: background-color var(--pn-motion), color var(--pn-motion);
}

body.porcelain-noir .sidebar-menu > li.main > a {
    height: 38px;
    display: flex;
    align-items: center;
}

body.porcelain-noir .sidebar-menu li a:hover,
body.porcelain-noir .sidebar-menu li a:focus,
body.porcelain-noir .sidebar-menu li a:active {
    color: var(--pn-sb-text-hi) !important;
    background-color: rgba(255, 255, 255, .04) !important;
}

body.porcelain-noir .sidebar-menu li.active > a,
body.porcelain-noir .sidebar-menu li.open > a {
    color: var(--pn-sb-on) !important;
    background-color: var(--pn-sb-active) !important;
}

body.porcelain-noir .sidebar-menu li a .badge {
    font-family: var(--pn-font-mono);
    background-color: rgba(201, 169, 97, .18) !important;
    color: var(--pn-sb-on) !important;
    font-weight: 500;
}

body.porcelain-noir .sidebar-menu ul {
    background: rgba(0, 0, 0, .12);
    border-radius: var(--pn-radius-control);
}

body.porcelain-noir .sidebar-toggle-btn {
    color: var(--pn-sb-text) !important;
}

/* ---------- 4. Topbar ---------- */
body.porcelain-noir .navbar-custom {
    background: var(--pn-surface) !important;
    border-bottom: 1px solid var(--pn-border) !important;
    box-shadow: none !important;
}

body.porcelain-noir .navbar-custom .nav-link {
    color: var(--pn-text-2) !important;
}

body.porcelain-noir .navbar-custom .nav-link:hover {
    color: var(--pn-accent) !important;
}

body.porcelain-noir .navbar-custom .user-name {
    font-family: var(--pn-font-ui);
    font-weight: 500;
    color: var(--pn-text-1);
}

/* ---------- 5. Cards / panels ---------- */
body.porcelain-noir .card,
body.porcelain-noir .widget,
body.porcelain-noir .panel,
body.porcelain-noir .modal-content {
    background-color: var(--pn-surface) !important;
    border: 1px solid var(--pn-border) !important;
    border-radius: var(--pn-radius-card) !important;
    box-shadow: var(--pn-shadow-card) !important;
}

body.porcelain-noir .card-header,
body.porcelain-noir .card-footer,
body.porcelain-noir .modal-header,
body.porcelain-noir .modal-footer {
    background-color: transparent !important;
    border-color: var(--pn-border) !important;
}

body.porcelain-noir .modal-content {
    border-radius: 18px !important;
}

/* ---------- 6. Buttons ---------- */
body.porcelain-noir .btn {
    border-radius: var(--pn-radius-control);
    font-weight: 500;
    transition: background-color var(--pn-motion), border-color var(--pn-motion), color var(--pn-motion);
}

body.porcelain-noir .btn-primary,
body.porcelain-noir .btn-info {
    background-color: var(--pn-accent) !important;
    border-color: var(--pn-accent) !important;
    color: var(--pn-on-accent) !important;
}

body.porcelain-noir .btn-primary:hover,
body.porcelain-noir .btn-primary:focus,
body.porcelain-noir .btn-primary:active,
body.porcelain-noir .btn-info:hover,
body.porcelain-noir .btn-info:focus,
body.porcelain-noir .btn-info:active {
    background-color: var(--pn-accent-hover) !important;
    border-color: var(--pn-accent-hover) !important;
}

body.porcelain-noir .btn-outline-primary {
    color: var(--pn-accent) !important;
    border-color: var(--pn-border-strong) !important;
    background-color: transparent !important;
}

body.porcelain-noir .btn-outline-primary:hover,
body.porcelain-noir .btn-outline-primary:focus,
body.porcelain-noir .js-approve-lead:hover {
    color: var(--pn-on-accent) !important;
    background-color: var(--pn-accent) !important;
    border-color: var(--pn-accent) !important;
}

body.porcelain-noir .btn-default,
body.porcelain-noir .btn-secondary {
    background-color: var(--pn-surface) !important;
    border-color: var(--pn-border-strong) !important;
    color: var(--pn-text-1) !important;
}

body.porcelain-noir .btn-danger {
    background-color: transparent !important;
    border-color: var(--pn-border-strong) !important;
    color: var(--pn-danger) !important;
}

body.porcelain-noir .btn-danger:hover,
body.porcelain-noir .btn-danger:focus {
    background-color: color-mix(in oklab, var(--pn-danger) 12%, var(--pn-surface)) !important;
    border-color: var(--pn-danger) !important;
    color: var(--pn-danger) !important;
}

/* row-level icon actions (edit/delete anchors), not full buttons */
body.porcelain-noir a.edit,
body.porcelain-noir a.delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    color: var(--pn-text-3) !important;
}

body.porcelain-noir a.edit:hover {
    background: var(--pn-well);
    color: var(--pn-accent) !important;
}

body.porcelain-noir a.delete:hover {
    background: color-mix(in oklab, var(--pn-danger) 12%, var(--pn-surface));
    color: var(--pn-danger) !important;
}

/* ---------- 7. Forms ---------- */
body.porcelain-noir .form-control,
body.porcelain-noir .form-select,
body.porcelain-noir .select2-container .select2-selection {
    background-color: var(--pn-surface) !important;
    border: 1px solid var(--pn-border-strong) !important;
    border-radius: var(--pn-radius-control) !important;
    color: var(--pn-text-1) !important;
}

body.porcelain-noir .form-control:focus,
body.porcelain-noir .select2-container--focus .select2-selection {
    border-color: var(--pn-accent) !important;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--pn-accent) 18%, transparent) !important;
}

body.porcelain-noir label {
    color: var(--pn-text-2);
}

/* ---------- 8. Tables & DataTables ---------- */
body.porcelain-noir table.dataTable,
body.porcelain-noir table.table {
    color: var(--pn-text-2);
}

body.porcelain-noir table.dataTable thead th,
body.porcelain-noir table.table thead th {
    font-family: var(--pn-font-ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pn-text-3) !important;
    border-bottom: 1px solid var(--pn-border) !important;
    background: transparent !important;
}

body.porcelain-noir table.dataTable tbody td,
body.porcelain-noir table.table tbody td,
body.porcelain-noir table.dataTable tbody th {
    border-color: var(--pn-border) !important;
    padding-top: 11px;
    padding-bottom: 11px;
    background-color: var(--pn-surface) !important;
    color: var(--pn-text-2);
}

body.porcelain-noir table.dataTable tbody tr:hover td,
body.porcelain-noir table.table tbody tr:hover td {
    background-color: var(--pn-well) !important;
}

body.porcelain-noir table.dataTable tbody td.js-selection-id,
body.porcelain-noir table.dataTable tbody td a.js-selection-id {
    font-family: var(--pn-font-serif);
}

body.porcelain-noir .dataTables_wrapper .dataTables_filter input,
body.porcelain-noir .dataTables_wrapper .dataTables_length select {
    border-radius: var(--pn-radius-control);
    border: 1px solid var(--pn-border-strong);
    background: var(--pn-surface);
}

body.porcelain-noir .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    color: var(--pn-text-2) !important;
}

body.porcelain-noir .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--pn-accent) !important;
    border-color: var(--pn-accent) !important;
    color: var(--pn-on-accent) !important;
}

body.porcelain-noir .dataTables_wrapper .dataTables_info,
body.porcelain-noir .dataTables_wrapper .dataTables_length,
body.porcelain-noir .dataTables_wrapper .dataTables_filter {
    color: var(--pn-text-3);
    font-size: 12px;
}

/* ---------- 9. Status chips (badges) — tinted, never solid ---------- */
body.porcelain-noir .badge {
    border-radius: var(--pn-radius-pill);
    font-family: var(--pn-font-ui);
    font-weight: 500;
    font-size: 11px;
    padding: 4px 10px;
    letter-spacing: .01em;
}

body.porcelain-noir .badge.bg-success {
    background-color: color-mix(in oklab, var(--pn-success) 13%, var(--pn-surface)) !important;
    color: var(--pn-success) !important;
}

body.porcelain-noir .badge.bg-danger {
    background-color: color-mix(in oklab, var(--pn-danger) 13%, var(--pn-surface)) !important;
    color: var(--pn-danger) !important;
}

body.porcelain-noir .badge.bg-warning {
    background-color: color-mix(in oklab, var(--pn-warning) 15%, var(--pn-surface)) !important;
    color: var(--pn-warning) !important;
}

body.porcelain-noir .badge.bg-info {
    background-color: color-mix(in oklab, var(--pn-info) 13%, var(--pn-surface)) !important;
    color: var(--pn-info) !important;
}

body.porcelain-noir .badge.bg-primary {
    background-color: color-mix(in oklab, var(--pn-accent) 13%, var(--pn-surface)) !important;
    color: var(--pn-accent) !important;
}

body.porcelain-noir .badge.bg-secondary {
    background-color: var(--pn-well) !important;
    color: var(--pn-text-3) !important;
}

/* lead-status / pipeline badges keep their admin-configured inline color
   (dynamic per clinic setup) but still take the pill shape + type scale */
body.porcelain-noir .badge[style*="background-color"] {
    font-family: var(--pn-font-ui);
    border-radius: var(--pn-radius-pill);
    padding: 4px 10px;
}

/* ---------- 10. Kanban (Leads → Kanban, Tasks kanban) ---------- */
body.porcelain-noir .kanban-col {
    background: var(--pn-well);
    border-radius: var(--pn-radius-card);
    border: 1px solid var(--pn-border);
}

body.porcelain-noir .kanban-col-title {
    font-family: var(--pn-font-ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pn-text-3);
    background: transparent !important;
}

body.porcelain-noir .kanban-item-count {
    font-family: var(--pn-font-mono);
    color: var(--pn-text-2);
}

body.porcelain-noir a.kanban-item,
body.porcelain-noir .kanban-item {
    background: var(--pn-surface) !important;
    border: 1px solid var(--pn-border) !important;
    border-radius: 12px !important;
    color: var(--pn-text-1);
}

body.porcelain-noir .kanban-item-list.js-dragging,
body.porcelain-noir .kanban-item-list .sortable-ghost {
    background-color: color-mix(in oklab, var(--pn-accent) 8%, var(--pn-well));
    outline: 2px solid color-mix(in oklab, var(--pn-accent) 40%, transparent);
    outline-offset: -2px;
}

/* ---------- 11. Nav tabs (lead detail: Overview/Estimates/Proposals…) ---------- */
body.porcelain-noir .nav-tabs {
    border-bottom: 1px solid var(--pn-border);
}

body.porcelain-noir .nav-tabs li a {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pn-text-3) !important;
}

body.porcelain-noir .nav-tabs li.active a,
body.porcelain-noir .nav-tabs li a.active {
    color: var(--pn-text-1) !important;
}

body.porcelain-noir .nav-tabs li:not(.title-tab) a::after {
    background-color: var(--pn-accent) !important;
    height: 2px;
}

/* ---------- 12. Focus states (accessibility) ---------- */
body.porcelain-noir a:focus-visible,
body.porcelain-noir button:focus-visible,
body.porcelain-noir .btn:focus-visible,
body.porcelain-noir .nav-link:focus-visible {
    outline: 2px solid var(--pn-accent);
    outline-offset: 2px;
}