/* ==========================================================================
   Premium Theme - design system shared by the admin area and the customer portal

   Colour tokens plus every shared component (cards, buttons, forms, tables,
   labels, tabs, menus, modals, calendar). Rules are scoped to
   :is(body.app, body.customers) so PDFs, emails and embedded web forms are
   never touched. admin.css and clients.css build the two shells on top.

   Palette: brand indigo (from the logo) for primary actions and selection,
   brand orange only for small "attention" accents (notifications, overdue).
   ========================================================================== */

:root {
    --pt-brand-50: #f3f3fc;
    --pt-brand-100: #e8e7fa;
    --pt-brand-200: #d2cff5;
    --pt-brand-300: #b1abec;
    --pt-brand-400: #8c84e0;
    --pt-brand-500: #6c63d3;
    --pt-brand-600: #5249c4;
    --pt-brand-700: #443da6;
    --pt-brand-800: #383387;
    --pt-brand-900: #2d2a6b;
    --pt-brand-950: #1a1842;

    --pt-accent: #f27321;
    --pt-accent-soft: #fff1e6;

    --pt-bg: #f5f5f9;
    --pt-surface: #ffffff;
    --pt-surface-2: #fafafd;
    --pt-border: #e7e7ef;
    --pt-border-strong: #d5d5e1;
    --pt-ink: #12121c;
    --pt-ink-2: #474757;
    --pt-muted: #85859a;
    --pt-hover: rgba(18, 18, 40, 0.045);

    --pt-radius-sm: 8px;
    --pt-radius: 10px;
    --pt-radius-lg: 14px;

    --pt-shadow-xs: 0 1px 2px rgba(18, 18, 40, 0.05);
    --pt-shadow-sm: 0 1px 2px rgba(18, 18, 40, 0.04), 0 2px 8px -2px rgba(18, 18, 40, 0.06);
    --pt-shadow-md: 0 2px 4px rgba(18, 18, 40, 0.04), 0 12px 28px -8px rgba(18, 18, 40, 0.14);
    --pt-shadow-lg: 0 4px 10px rgba(18, 18, 40, 0.05), 0 24px 56px -12px rgba(18, 18, 40, 0.24);
    --pt-ring: 0 0 0 4px rgba(82, 73, 196, 0.16);

    --pt-grad-brand: linear-gradient(180deg, #5f56d6 0%, #4b43bf 100%);
    --pt-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

:is(body.app, body.customers) {
    color: var(--pt-ink-2);
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:is(body.app, body.customers) ::selection {
    background: rgba(82, 73, 196, 0.18);
}

:is(body.app, body.customers) .text-primary,
:is(body.app, body.customers) .btn-link {
    color: var(--pt-brand-600);
}

:is(body.app, body.customers) .btn-link:hover,
:is(body.app, body.customers) .btn-link:focus {
    color: var(--pt-brand-700);
}

:is(body.app, body.customers) a:focus-visible,
:is(body.app, body.customers) button:focus-visible,
:is(body.app, body.customers) .btn:focus-visible {
    outline: 2px solid var(--pt-brand-400);
    outline-offset: 2px;
}

/* No scrollbar-color here on purpose: in Chrome it disables every ::-webkit-scrollbar rule,
   including Perfex's own one that hides the scrollbar under horizontal tab strips. */
:is(body.app, body.customers) ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

:is(body.app, body.customers) ::-webkit-scrollbar-thumb {
    background-color: #d3d3df;
    background-clip: content-box;
    border: 3px solid transparent;
    border-radius: 999px;
}

:is(body.app, body.customers) ::-webkit-scrollbar-thumb:hover {
    background-color: #b7b7c8;
}

:is(body.app, body.customers) ::-webkit-scrollbar-track {
    background: transparent;
}

/* --------------------------------------------------------------------------
   Cards & panels
   -------------------------------------------------------------------------- */

:is(body.app, body.customers) .panel_s,
:is(body.app, body.customers) .panel {
    background: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-lg);
    box-shadow: var(--pt-shadow-sm);
}

:is(body.app, body.customers) .panel_s > .panel-body,
:is(body.app, body.customers) .panel > .panel-body {
    border-radius: calc(var(--pt-radius-lg) - 1px);
}

:is(body.app, body.customers) .panel_s > .panel-heading,
:is(body.app, body.customers) .panel > .panel-heading {
    background: var(--pt-surface-2);
    border-bottom: 1px solid var(--pt-border);
    border-radius: calc(var(--pt-radius-lg) - 1px) calc(var(--pt-radius-lg) - 1px) 0 0;
    color: var(--pt-ink);
    font-weight: 600;
}

:is(body.app, body.customers) .panel_s > .panel-heading + .panel-body,
:is(body.app, body.customers) .panel > .panel-heading + .panel-body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

:is(body.app, body.customers) .panel_s > .panel-footer,
:is(body.app, body.customers) .panel > .panel-footer {
    background: var(--pt-surface-2);
    border-top: 1px solid var(--pt-border);
    border-radius: 0 0 calc(var(--pt-radius-lg) - 1px) calc(var(--pt-radius-lg) - 1px);
}

:is(body.app, body.customers) .panel_s > .panel-body:has(+ .panel-footer) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Small stat boxes above list pages (Total customers, Paid invoices...) */
:is(body.app, body.customers) .content .tw-border.tw-rounded-lg.tw-bg-white {
    border-color: var(--pt-border);
    border-radius: 12px;
    box-shadow: var(--pt-shadow-xs);
    transition: box-shadow 0.2s var(--pt-ease), border-color 0.2s;
}

:is(body.app, body.customers) .content a.tw-border.tw-rounded-lg.tw-bg-white:hover,
:is(body.app, body.customers) .content .tw-border.tw-rounded-lg.tw-bg-white:has(a):hover {
    border-color: var(--pt-border-strong);
    box-shadow: var(--pt-shadow-sm);
}

:is(body.app, body.customers) hr,
:is(body.app, body.customers) .hr-panel-separator {
    border-top-color: var(--pt-border);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

:is(body.app, body.customers) .btn {
    border-radius: var(--pt-radius);
    font-weight: 600;
    transition: background-color 0.15s var(--pt-ease), border-color 0.15s, box-shadow 0.15s, color 0.15s, transform 0.1s;
}

:is(body.app, body.customers) .btn:active {
    transform: translateY(1px);
}

:is(body.app, body.customers) .btn-primary {
    background: var(--pt-grad-brand);
    border: 1px solid #463eb3;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(30, 25, 90, 0.2), 0 4px 12px -4px rgba(82, 73, 196, 0.55);
}

:is(body.app, body.customers) .btn-primary:hover,
:is(body.app, body.customers) .btn-primary:focus,
:is(body.app, body.customers) .btn-primary.focus {
    background: linear-gradient(180deg, #574ecf 0%, #433bb0 100%);
    border-color: #3d36a2;
    color: #fff;
}

:is(body.app, body.customers) .btn-primary.active,
:is(body.app, body.customers) .btn-primary:active,
:is(body.app, body.customers) .open > .dropdown-toggle.btn-primary {
    background: #433ba9;
    border-color: #3d36a2;
    color: #fff;
    box-shadow: inset 0 2px 4px rgba(20, 16, 70, 0.3);
}

:is(body.app, body.customers) .btn-primary.disabled,
:is(body.app, body.customers) .btn-primary[disabled] {
    background: var(--pt-brand-400);
    border-color: var(--pt-brand-400);
    box-shadow: none;
    opacity: 0.6;
}

:is(body.app, body.customers) .btn-default {
    background: #fff;
    border: 1px solid var(--pt-border-strong);
    color: var(--pt-ink);
    box-shadow: 0 1px 2px rgba(18, 18, 40, 0.05);
}

:is(body.app, body.customers) .btn-default:hover,
:is(body.app, body.customers) .btn-default:focus,
:is(body.app, body.customers) .btn-default.focus {
    background: #f7f7fb;
    border-color: #c6c6d4;
    color: var(--pt-ink);
}

:is(body.app, body.customers) .btn-default.active,
:is(body.app, body.customers) .btn-default:active,
:is(body.app, body.customers) .open > .dropdown-toggle.btn-default {
    background: #f0f0f6;
    border-color: #c6c6d4;
    color: var(--pt-ink);
    box-shadow: inset 0 1px 2px rgba(18, 18, 40, 0.08);
}

:is(body.app, body.customers) .btn-success {
    background: linear-gradient(180deg, #17b05c 0%, #0f9a4e 100%);
    border-color: #0e8f48;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(10, 80, 40, 0.2);
}

:is(body.app, body.customers) .btn-success:hover,
:is(body.app, body.customers) .btn-success:focus {
    background: #0f9a4e;
    border-color: #0c8343;
}

:is(body.app, body.customers) .btn-danger {
    background: linear-gradient(180deg, #ea5a5f 0%, #db3e44 100%);
    border-color: #d1363c;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(110, 20, 25, 0.2);
}

:is(body.app, body.customers) .btn-danger:hover,
:is(body.app, body.customers) .btn-danger:focus {
    background: #db3e44;
    border-color: #c4313a;
}

:is(body.app, body.customers) .btn-warning {
    background: linear-gradient(180deg, #f6a33a 0%, #ec8f1f 100%);
    border-color: #e0841a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(120, 60, 0, 0.2);
}

:is(body.app, body.customers) .btn-info {
    background: linear-gradient(180deg, #1aa6e0 0%, #0b8fcc 100%);
    border-color: #0a86bf;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

:is(body.app, body.customers) .control-label {
    color: var(--pt-ink-2);
    font-size: 13px;
    font-weight: 600;
}

:is(body.app, body.customers) .form-control {
    background-color: #fff;
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius);
    box-shadow: 0 1px 2px rgba(18, 18, 40, 0.04);
    color: var(--pt-ink);
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

:is(body.app, body.customers) input.form-control,
:is(body.app, body.customers) select.form-control {
    height: 36px;
}

:is(body.app, body.customers) .form-control:hover {
    border-color: #c3c3d1;
}

:is(body.app, body.customers) .form-control:focus {
    background-color: #fff;
    border-color: var(--pt-brand-400);
    box-shadow: var(--pt-ring);
    outline: 0;
}

:is(body.app, body.customers) .form-control::placeholder {
    color: #a3a3b4;
}

:is(body.app, body.customers) .form-control[disabled],
:is(body.app, body.customers) .form-control[readonly],
:is(body.app, body.customers) fieldset[disabled] .form-control {
    background-color: #f4f4f8;
    border-color: var(--pt-border);
    box-shadow: none;
    color: var(--pt-muted);
}

:is(body.app, body.customers) .input-group-addon {
    background: #f5f5f9;
    border-color: var(--pt-border-strong);
    color: var(--pt-ink-2);
    font-weight: 500;
}

:is(body.app, body.customers) .input-group .form-control:first-child,
:is(body.app, body.customers) .input-group-addon:first-child,
:is(body.app, body.customers) .input-group-btn:first-child > .btn {
    border-radius: var(--pt-radius) 0 0 var(--pt-radius);
}

:is(body.app, body.customers) .input-group .form-control:last-child,
:is(body.app, body.customers) .input-group-addon:last-child,
:is(body.app, body.customers) .input-group-btn:last-child > .btn {
    border-radius: 0 var(--pt-radius) var(--pt-radius) 0;
}

:is(body.app, body.customers) .input-group .form-control:not(:first-child):not(:last-child) {
    border-radius: 0;
}

/* bootstrap-select dropdowns look like inputs, not buttons (except Perfex's borderless .simple-bootstrap-select) */
:is(body.app, body.customers) :not(.simple-bootstrap-select) > .bootstrap-select > .dropdown-toggle,
:is(body.app, body.customers) :not(.simple-bootstrap-select) > .bootstrap-select > .dropdown-toggle.btn-default {
    min-height: 36px;
    background: #fff;
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius);
    box-shadow: 0 1px 2px rgba(18, 18, 40, 0.04);
    color: var(--pt-ink);
    font-weight: 500;
}

:is(body.app, body.customers) :not(.simple-bootstrap-select) > .bootstrap-select > .dropdown-toggle:hover {
    background: #fff;
    border-color: #c3c3d1;
}

:is(body.app, body.customers) :not(.simple-bootstrap-select) > .bootstrap-select > .dropdown-toggle:focus,
:is(body.app, body.customers) :not(.simple-bootstrap-select) > .bootstrap-select.open > .dropdown-toggle {
    background: #fff;
    border-color: var(--pt-brand-400);
    box-shadow: var(--pt-ring);
    outline: 0 !important;
}

:is(body.app, body.customers) :not(.simple-bootstrap-select) > .bootstrap-select > .dropdown-toggle:active {
    transform: none;
}

:is(body.app, body.customers) :not(.simple-bootstrap-select) > .bootstrap-select > .dropdown-toggle.bs-placeholder .filter-option-inner-inner {
    color: #a3a3b4;
}

/* Perfex often puts .form-control on the bootstrap-select wrapper too; only the inner toggle should look like an input */
:is(body.app, body.customers) .bootstrap-select.form-control {
    height: auto;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

:is(body.app, body.customers) .input-group .bootstrap-select:not(:last-child) > .dropdown-toggle {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

:is(body.app, body.customers) .bootstrap-select .dropdown-menu.inner {
    padding: 0;
    border: 0;
    box-shadow: none;
}

:is(body.app, body.customers) .bootstrap-select .dropdown-menu li.selected > a,
:is(body.app, body.customers) .bootstrap-select .dropdown-menu li.active > a {
    background: var(--pt-brand-50);
    color: var(--pt-brand-700);
}

:is(body.app, body.customers) .bootstrap-select .bs-searchbox .form-control {
    height: 34px;
}

/* Checkboxes, radios and switches in brand indigo */
:is(body.app, body.customers) .checkbox label::before,
:is(body.app, body.customers) .radio label::before {
    border-color: #c4c4d3;
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

:is(body.app, body.customers) .checkbox label::before {
    border-radius: 5px;
}

:is(body.app, body.customers) .checkbox:not(.checkbox-danger):not(.checkbox-success):not(.checkbox-warning) input[type="checkbox"]:checked + label::before,
:is(body.app, body.customers) .checkbox:not(.checkbox-danger):not(.checkbox-success):not(.checkbox-warning) input[type="radio"]:checked + label::before {
    background-color: var(--pt-brand-600);
    border-color: var(--pt-brand-600);
}

:is(body.app, body.customers) .radio:not(.radio-danger):not(.radio-success):not(.radio-warning) input[type="radio"]:checked + label::before {
    border-color: var(--pt-brand-600);
}

:is(body.app, body.customers) .radio:not(.radio-danger):not(.radio-success):not(.radio-warning) input[type="radio"]:checked + label::after {
    background-color: var(--pt-brand-600);
}

:is(body.app, body.customers) .checkbox input:focus-visible + label::before,
:is(body.app, body.customers) .radio input:focus-visible + label::before {
    box-shadow: var(--pt-ring);
    outline: 0;
}

:is(body.app, body.customers) .onoffswitch-checkbox:checked + .onoffswitch-label,
:is(body.app, body.customers) .onoffswitch-checkbox:checked + .onoffswitch-label::before {
    background-color: var(--pt-brand-600);
    border-color: var(--pt-brand-600);
}

:is(body.app, body.customers) .onoffswitch-checkbox:checked + .onoffswitch-label::before {
    background-color: #fff;
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

:is(body.app, body.customers) .table > thead > tr > th,
:is(body.app, body.customers) table.dataTable > thead > tr > th {
    background: var(--pt-surface-2);
    color: var(--pt-muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--pt-border);
    vertical-align: middle;
}

:is(body.app, body.customers) .table > thead > tr > th a,
:is(body.app, body.customers) table.dataTable > thead > tr > th a {
    color: inherit;
}

:is(body.app, body.customers) .table > tbody > tr > td {
    border-top-color: #efeff5;
    color: var(--pt-ink-2);
    vertical-align: middle;
}

:is(body.app, body.customers) table.dataTable > tbody > tr > td {
    font-variant-numeric: tabular-nums;
}

:is(body.app, body.customers) .table-hover > tbody > tr:hover,
:is(body.app, body.customers) table.dataTable.table-hover > tbody > tr:hover,
:is(body.app, body.customers) table.dataTable > tbody > tr:hover {
    background-color: #f9f9fe;
}

:is(body.app, body.customers) table.dataTable > tbody > tr.selected,
:is(body.app, body.customers) table.dataTable > tbody > tr.row-highlight {
    background-color: var(--pt-brand-50);
}

:is(body.app, body.customers) .dataTables_filter input,
:is(body.app, body.customers) .dataTables_length select {
    border-radius: var(--pt-radius);
}

:is(body.app, body.customers) .pagination > li > a,
:is(body.app, body.customers) .pagination > li > span {
    min-width: 32px;
    margin: 0 2px;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px !important;
    background: transparent;
    color: var(--pt-ink-2);
    font-weight: 600;
    text-align: center;
}

:is(body.app, body.customers) .pagination > li > a:hover,
:is(body.app, body.customers) .pagination > li > a:focus {
    background: #efeff6;
    color: var(--pt-ink);
}

:is(body.app, body.customers) .pagination > .active > a,
:is(body.app, body.customers) .pagination > .active > a:hover,
:is(body.app, body.customers) .pagination > .active > a:focus,
:is(body.app, body.customers) .pagination > .active > span {
    background: var(--pt-grad-brand);
    color: #fff;
    box-shadow: 0 4px 10px -4px rgba(82, 73, 196, 0.7);
}

:is(body.app, body.customers) .pagination > .disabled > a,
:is(body.app, body.customers) .pagination > .disabled > a:hover {
    background: transparent;
    color: #c4c4d1;
}

:is(body.app, body.customers) table.dataTable td.dataTables_empty {
    padding: 36px 16px;
    background: transparent;
    color: var(--pt-muted);
    font-size: 13.5px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Labels, badges, tags
   -------------------------------------------------------------------------- */

:is(body.app, body.customers) .label {
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

:is(body.app, body.customers) .label-default {
    background: #f1f1f6;
    color: var(--pt-ink-2);
    box-shadow: inset 0 0 0 1px rgba(18, 18, 40, 0.08);
}

:is(body.app, body.customers) .label-primary {
    background: var(--pt-brand-50);
    color: var(--pt-brand-700);
    box-shadow: inset 0 0 0 1px rgba(82, 73, 196, 0.2);
}

:is(body.app, body.customers) .label-success {
    background: #eaf8f0;
    color: #0b7a3b;
    box-shadow: inset 0 0 0 1px rgba(18, 161, 80, 0.22);
}

:is(body.app, body.customers) .label-info {
    background: #eaf6fd;
    color: #0b6c99;
    box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.22);
}

:is(body.app, body.customers) .label-warning {
    background: #fff6e3;
    color: #8a5a00;
    box-shadow: inset 0 0 0 1px rgba(227, 160, 8, 0.28);
}

:is(body.app, body.customers) .label-danger {
    background: #fdeeee;
    color: #b42328;
    box-shadow: inset 0 0 0 1px rgba(229, 72, 77, 0.22);
}

:is(body.app, body.customers) .label-tag {
    border-radius: 6px;
    background: #f1f1f6;
}

:is(body.app, body.customers) .badge {
    border-radius: 999px;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */

:is(body.app, body.customers) .nav-tabs:not(.nav-tabs-segmented) {
    border-bottom: 1px solid var(--pt-border);
}

:is(body.app, body.customers) .nav-tabs:not(.nav-tabs-segmented) > li > a {
    margin-bottom: -1px;
    padding: 10px 14px;
    background: transparent;
    border-width: 0 0 2px;
    border-style: solid;
    border-color: transparent;
    border-radius: 0;
    color: var(--pt-muted);
    font-weight: 600;
    transition: color 0.15s, border-color 0.15s;
}

:is(body.app, body.customers) .nav-tabs:not(.nav-tabs-segmented) > li > a:hover {
    background: transparent;
    border-color: transparent transparent var(--pt-border-strong);
    color: var(--pt-ink);
}

:is(body.app, body.customers) .nav-tabs:not(.nav-tabs-segmented) > li.active > a,
:is(body.app, body.customers) .nav-tabs:not(.nav-tabs-segmented) > li.active > a:hover,
:is(body.app, body.customers) .nav-tabs:not(.nav-tabs-segmented) > li.active > a:focus {
    background: transparent;
    border-width: 0 0 2px;
    border-color: transparent transparent var(--pt-brand-600);
    color: var(--pt-brand-700);
}

/* Scrollable tab strips clip their overflow, which would cut off the underline where Bootstrap
   pulls tabs 1px down over the strip's border */
:is(body.app, body.customers) .nav-tabs-horizontal:not(.nav-tabs-segmented) > li,
:is(body.app, body.customers) .nav-tabs-horizontal:not(.nav-tabs-segmented) > li > a {
    margin-bottom: 0;
}

:is(body.app, body.customers) .nav-tabs > li.active > a i.menu-icon {
    color: var(--pt-brand-600);
}

:is(body.app, body.customers) .nav-tabs-segmented > li.active > a {
    color: var(--pt-brand-700);
    box-shadow: var(--pt-shadow-xs);
}

/* Side navigation on customer / project profiles */
:is(body.app, body.customers) .customer-tabs a.tw-text-primary-600,
:is(body.app, body.customers) .project-tabs a.tw-text-primary-600 {
    background: var(--pt-brand-50);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Dropdowns, tooltips, popovers, modals, alerts
   -------------------------------------------------------------------------- */

:is(body.app, body.customers) .dropdown-menu {
    padding: 6px;
    border: 1px solid var(--pt-border);
    border-radius: 12px;
    box-shadow: var(--pt-shadow-lg);
}

:is(body.app, body.customers) .dropdown-menu > li > a {
    padding: 7px 12px;
    border-radius: 8px;
    color: var(--pt-ink-2);
    font-weight: 500;
}

:is(body.app, body.customers) .dropdown-menu > li > a:hover,
:is(body.app, body.customers) .dropdown-menu > li > a:focus {
    background: var(--pt-hover);
    color: var(--pt-ink);
}

:is(body.app, body.customers) .dropdown-menu > .active > a,
:is(body.app, body.customers) .dropdown-menu > .active > a:hover,
:is(body.app, body.customers) .dropdown-menu > .active > a:focus {
    background: var(--pt-brand-50);
    color: var(--pt-brand-700);
}

:is(body.app, body.customers) .dropdown-menu .divider {
    margin: 6px -6px;
    background: var(--pt-border);
}

:is(body.app, body.customers) .dropdown-header {
    padding: 8px 12px 4px;
    color: var(--pt-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

:is(body.app, body.customers) .tooltip-inner {
    padding: 6px 10px;
    background: #17162e;
    border-radius: 8px;
    font-weight: 500;
}

:is(body.app, body.customers) .tooltip.top .tooltip-arrow { border-top-color: #17162e; }
:is(body.app, body.customers) .tooltip.bottom .tooltip-arrow { border-bottom-color: #17162e; }
:is(body.app, body.customers) .tooltip.left .tooltip-arrow { border-left-color: #17162e; }
:is(body.app, body.customers) .tooltip.right .tooltip-arrow { border-right-color: #17162e; }

:is(body.app, body.customers) .popover {
    border: 1px solid var(--pt-border);
    border-radius: 12px;
    box-shadow: var(--pt-shadow-lg);
}

:is(body.app, body.customers) .modal-backdrop {
    background-color: #14122e;
}

:is(body.app, body.customers) .modal-backdrop.in {
    opacity: 0.45;
}

:is(body.app, body.customers) .modal-content {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 0 0 1px rgba(18, 18, 40, 0.06), 0 30px 80px -20px rgba(18, 18, 40, 0.45);
}

:is(body.app, body.customers) .modal-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--pt-border);
}

:is(body.app, body.customers) .modal-title {
    color: var(--pt-ink);
    font-weight: 700;
    letter-spacing: -0.01em;
}

:is(body.app, body.customers) .modal-footer {
    padding: 14px 22px;
    background: var(--pt-surface-2);
    border-top: 1px solid var(--pt-border);
    border-radius: 0 0 18px 18px;
}

:is(body.app, body.customers) .alert {
    border-radius: 12px;
}

/* --------------------------------------------------------------------------
   Progress bars
   -------------------------------------------------------------------------- */

:is(body.app, body.customers) .progress {
    background-color: #ededf4;
    border-radius: 999px;
    box-shadow: none;
}

:is(body.app, body.customers) .progress-bar {
    border-radius: 999px;
    box-shadow: none;
}

:is(body.app, body.customers) .progress-bar:not([class*="progress-bar-"]) {
    background-color: var(--pt-brand-600);
}

/* --------------------------------------------------------------------------
   Calendar (FullCalendar)
   -------------------------------------------------------------------------- */

/* Perfex's Tailwind build sets these colours with !important, so the
   brand overrides need it too. */
:is(body.app, body.customers) .fc .fc-button {
    border-radius: var(--pt-radius);
    font-weight: 600;
    text-transform: none;
}

:is(body.app, body.customers) .fc .fc-button-primary {
    background-color: #fff !important;
    border-color: var(--pt-border-strong) !important;
    color: var(--pt-ink) !important;
    box-shadow: 0 1px 2px rgba(18, 18, 40, 0.05) !important;
}

:is(body.app, body.customers) .fc .fc-button-primary:hover,
:is(body.app, body.customers) .fc .fc-button-primary:focus {
    background-color: #f7f7fb !important;
    border-color: #c6c6d4 !important;
    color: var(--pt-ink) !important;
}

:is(body.app, body.customers) .fc .fc-button-primary.fc-button-active,
:is(body.app, body.customers) .fc .fc-button-primary.fc-button-active:hover,
:is(body.app, body.customers) .fc .fc-button-primary.fc-button-active:focus,
:is(body.app, body.customers) .fc .fc-button-primary:active {
    background-color: var(--pt-brand-600) !important;
    border-color: var(--pt-brand-600) !important;
    color: #fff !important;
}

:is(body.app, body.customers) .fc .fc-button-primary:disabled,
:is(body.app, body.customers) .fc .fc-button-primary:disabled:hover {
    background-color: #f4f4f8 !important;
    border-color: var(--pt-border) !important;
    color: var(--pt-muted) !important;
    opacity: 1;
}

:is(body.app, body.customers) .fc .fc-toolbar-title {
    color: var(--pt-ink);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

:is(body.app, body.customers) .fc-theme-standard td,
:is(body.app, body.customers) .fc-theme-standard th,
:is(body.app, body.customers) .fc-theme-standard .fc-scrollgrid {
    border-color: var(--pt-border);
}

:is(body.app, body.customers) .fc .fc-day-today {
    background: var(--pt-brand-50) !important;
}

:is(body.app, body.customers) .fc .fc-day.fc-day-today .fc-daygrid-day-number {
    background-color: var(--pt-brand-600) !important;
}

/* --------------------------------------------------------------------------
   Tailwind "primary" utilities: Perfex ships them as stock blue
   -------------------------------------------------------------------------- */

.tw-bg-primary-50 { background-color: #f3f3fc; }
.tw-bg-primary-100 { background-color: #e8e7fa; }
.tw-bg-primary-200 { background-color: #d2cff5; }
.tw-bg-primary-300 { background-color: #b1abec; }
.tw-bg-primary-400 { background-color: #8c84e0; }
.tw-bg-primary-500 { background-color: #6c63d3; }
.tw-bg-primary-600 { background-color: #5249c4; }
.tw-bg-primary-700 { background-color: #443da6; }
.tw-bg-primary-800 { background-color: #383387; }
.tw-bg-primary-900 { background-color: #2d2a6b; }
.tw-bg-primary-950 { background-color: #1a1842; }
.tw-text-primary-50 { color: #f3f3fc; }
.tw-text-primary-100 { color: #e8e7fa; }
.tw-text-primary-200 { color: #d2cff5; }
.tw-text-primary-300 { color: #b1abec; }
.tw-text-primary-400 { color: #8c84e0; }
.tw-text-primary-500 { color: #6c63d3; }
.tw-text-primary-600 { color: #5249c4; }
.tw-text-primary-700 { color: #443da6; }
.tw-text-primary-800 { color: #383387; }
.tw-text-primary-900 { color: #2d2a6b; }
.tw-text-primary-950 { color: #1a1842; }
.tw-border-primary-600 { border-color: #5249c4; }
.hover\:tw-text-primary-600:hover { color: #5249c4; }
.tw-group:hover .group-hover\:tw-text-primary-600 { color: #5249c4; }
.tw-group:hover .group-hover\:\!tw-bg-primary-700 { background-color: #443da6 !important; }