/* Lavaka Digital brand fonts (variable, bundled locally so the CRM works offline). */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('../fonts/BricolageGrotesque.ttf') format('truetype');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   Lavaka Digital — CRM brand layer
   --------------------------------------------------------------------------
   Loaded after Perfex's own CSS on every admin and authentication page.
   Tokens are taken from the brand system (lavaka.in) — same palette as the
      website and the mobile app:
      ink #10141C · ink-2 #2B3240 · paper #FFF · paper2 #F5F7FA
      coral #F4845F (primary) · blue #2F6BFF (secondary)
      gradient linear-gradient(100deg,#F4845F 0%,#2F6BFF 100%)
      radius 22 · display Bricolage Grotesque · body Inter · display Bricolage Grotesque · body Inter
   ========================================================================== */

:root {
    --lavaka-ink: #10141c;
    --lavaka-ink-2: #2b3240;
    --lavaka-charcoal: #161615;
    --lavaka-charcoal-2: #222220;
    --lavaka-paper: #ffffff;
    --lavaka-paper-2: #f5f7fa;
    --lavaka-grey-soft: #eef1f6;
    --lavaka-grey: #828b9c;
    --lavaka-muted: #5b6474;
    --lavaka-coral: #f4845f;
    --lavaka-coral-soft: #ffe9e1;
    --lavaka-blue-light: #5b8cff;
    --lavaka-blue: #2f6bff;
    --lavaka-blue-soft: #e1e9ff;
    --lavaka-danger: #e5484d;
    --lavaka-success: #1f9d55;
    --lavaka-grad: linear-gradient(100deg, #f4845f 0%, #2f6bff 100%);
    --lavaka-radius: 22px;
    --lavaka-radius-sm: 14px;
    --lavaka-shadow: 0 1px 2px #0e0e0d0d, 0 12px 32px -12px #0e0e0d2e;
    --lavaka-shadow-lg: 0 2px 4px #0e0e0d0d, 0 30px 60px -20px #0e0e0d40;
    --lavaka-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
    --lavaka-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --lavaka-ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------- typography */
body,
body.admin,
body.login_admin,
input,
select,
textarea,
button,
.btn,
.table,
.form-control {
    font-family: var(--lavaka-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3,
.page-title,
[data-title],
.modal-title,
h4.panel-title {
    font-family: var(--lavaka-display);
    letter-spacing: -0.02em;
    color: var(--lavaka-ink);
}

::selection {
    background: #F4845F55;
}

/* ------------------------------------------------------------------ chrome  */
body.admin,
.admin #wrapper {
    background: var(--lavaka-paper-2);
}

/* top bar */
.admin #header {
    background: var(--lavaka-paper);
    border-bottom: 1px solid var(--lavaka-grey-soft);
    box-shadow: 0 1px 2px #0e0e0d0a;
    transition: box-shadow .25s var(--lavaka-ease);
}

.admin .navbar-nav > li > a,
.admin .navbar-nav > li > a > span > i,
.admin .mobile-menu-toggle {
    color: var(--lavaka-ink-2) !important;
    transition: color .18s var(--lavaka-ease), background-color .18s var(--lavaka-ease);
}

.admin .navbar-nav > li > a:hover,
.admin .navbar-nav > li > a:focus {
    background: var(--lavaka-paper-2) !important;
    color: var(--lavaka-ink) !important;
}

/* --------------------------------------------------------------- sidebar   */
/* Deliberately plain: a white rail, grey labels, and one solid coral marker
   for the item you are on. No sliding cards, no gradient rails, no boxed
   submenus — the menu should read like a table of contents.                */

.admin .sidebar {
    background: var(--lavaka-paper) !important;
    border-right: 1px solid rgba(16, 20, 28, .10);
    box-shadow: none;
    padding-left: 14px;
    padding-right: 14px;
}

.admin .sidebar .logo,
.admin .sidebar #logo {
    border: 0;
}

.admin .sidebar img {
    max-width: 168px;
    height: auto;
}

/* The admin header is a light bar but Perfex renders company_logo_dark (the white
   wordmark) in it, which would be invisible here. Swap in the dark wordmark so the
   lockup works on paper. The white asset stays in use on the dark login screen and
   the sidebar stays logo-free in this theme. */
.admin #logo img {
    display: none !important;
}

.admin #logo a.logo {
    display: block;
    width: 176px;
    height: 36px;
    background: url('../images/lavaka-wordmark.png') left center / contain no-repeat;
}

.admin #logo a.logo.logo-text {
    width: auto;
    height: auto;
    background: none;
    color: var(--lavaka-ink) !important;
    font-family: var(--lavaka-display);
    font-weight: 700;
}

/* --- rows ---------------------------------------------------------------- */
.admin #side-menu,
.admin #setup-menu {
    margin-top: 12px;
}

.admin #side-menu > li,
.admin #setup-menu > li {
    position: relative;
    border-left: 3px solid transparent;
    margin: 1px 0;
}

.admin #side-menu li a,
.admin #setup-menu li a {
    color: var(--lavaka-muted) !important;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: 9px;
    margin: 0;
    padding: 9px 11px !important;
    transition: background-color .16s var(--lavaka-ease), color .16s var(--lavaka-ease);
}

.admin #side-menu li a i.menu-icon,
.admin #setup-menu li a i.menu-icon {
    float: none;
    display: inline-block;
    vertical-align: -1px;
    width: 18px;
    margin-right: 11px;
    font-size: 15px;
    text-align: center;
    color: var(--lavaka-grey) !important;
    transition: color .16s var(--lavaka-ease);
}

/* hover: a soft fill, nothing moves */
.admin #side-menu li a:hover,
.admin #setup-menu li a:hover,
.admin #side-menu li a:focus,
.admin #setup-menu li a:focus {
    background: #eef1f6 !important;
    color: var(--lavaka-ink) !important;
    transform: none !important;
    box-shadow: none !important;
}

.admin #side-menu li a:hover i.menu-icon,
.admin #side-menu li a:focus i.menu-icon,
.admin #setup-menu li a:hover i.menu-icon,
.admin #setup-menu li a:focus i.menu-icon {
    color: var(--lavaka-ink) !important;
}

/* active: coral text on a coral tint, plus a solid coral marker on the edge */
.admin #side-menu li.active > a,
.admin #setup-menu li.active > a,
#side-menu.nav > li > a:focus,
#side-menu.nav > li > a:hover {
    background: rgba(244, 132, 95, .10) !important;
    color: var(--lavaka-coral) !important;
    box-shadow: none !important;
}

.admin #side-menu li.active > a i.menu-icon,
.admin #side-menu li.active > a .menu-text,
.admin #setup-menu li.active > a i.menu-icon,
.admin #setup-menu li.active > a .menu-text {
    color: var(--lavaka-coral) !important;
}

.admin #side-menu > li.active::before,
.admin #setup-menu > li.active::before {
    content: "";
    position: absolute;
    left: -17px;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--lavaka-coral);
}

/* submenu parent: keep the marker slot, no extra decoration */
.admin #side-menu > li > a .arrow,
.admin #setup-menu > li > a .arrow {
    color: var(--lavaka-grey) !important;
    transition: transform .18s var(--lavaka-ease);
}

/* --- submenus: indented links under a hairline, no filled box ----------- */
.admin #side-menu .nav-second-level,
.admin #setup-menu .nav-second-level {
    background: none;
    border-radius: 0;
    border-left: 1px solid rgba(16, 20, 28, .10);
    margin: 2px 0 6px 19px;
    padding: 2px 0 2px 10px;
}

.admin #side-menu li .nav-second-level li,
.admin #setup-menu li .nav-second-level li {
    border-left: 0;
    margin: 0;
}

.admin #side-menu li .nav-second-level li a,
.admin #setup-menu li .nav-second-level li a {
    padding: 6px 9px !important;
    font-size: 13px;
    font-weight: 500;
    color: var(--lavaka-grey) !important;
}

.admin #side-menu li .nav-second-level li a i.menu-icon {
    width: 16px;
    margin-right: 8px;
    font-size: 13px;
}

.admin #side-menu li .nav-second-level li.active a,
.admin #side-menu li .nav-second-level li a:hover,
.admin #side-menu li .nav-second-level li a:focus,
.admin #setup-menu li .nav-second-level li.active a,
.admin #setup-menu li .nav-second-level li a:hover {
    background: none !important;
    color: var(--lavaka-coral) !important;
}

.admin #side-menu li .nav-second-level li.active a i.menu-icon {
    color: var(--lavaka-coral) !important;
}

/* badges keep Perfex's own colours — only tidied up */
.admin #side-menu li a .badge,
.admin #setup-menu li a .badge,
.admin #side-menu li .nav-second-level li a .badge {
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 999px;
    letter-spacing: .02em;
}

/* staff card at the top: flat row, not a card on a card */
.admin .sidebar .sidebar-user-profile > a.profile {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 9px;
}

.admin .sidebar .sidebar-user-profile > a.profile:hover,
.admin .sidebar .sidebar-user-profile > a.profile:focus {
    background: #eef1f6 !important;
}

.admin .sidebar .dashboard_user,
.admin .sidebar .user-profile {
    border-top: 1px solid rgba(16, 20, 28, .08);
    color: var(--lavaka-muted);
}

/* ----------------------------------------------------------------- surface  */
.admin .panel_s,
.admin .panel,
.admin .widget,
.admin ._filters_wrapper {
    background: var(--lavaka-paper);
    border: 1px solid var(--lavaka-grey-soft);
    border-radius: var(--lavaka-radius);
    box-shadow: var(--lavaka-shadow);
    transition: transform .25s var(--lavaka-ease), box-shadow .25s var(--lavaka-ease);
}

.admin .panel-default > .panel-heading,
.admin .panel-heading {
    background: transparent;
    border-bottom: 1px solid var(--lavaka-grey-soft);
    border-radius: var(--lavaka-radius) var(--lavaka-radius) 0 0;
    padding: 16px 20px;
}

.admin .panel-title,
.admin .panel-heading h4 {
    font-family: var(--lavaka-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--lavaka-ink) !important;
}

/* dashboard widget hover lift */
.admin .widget:hover,
.admin .panel_s:hover {
    transform: translateY(-2px);
    box-shadow: var(--lavaka-shadow-lg);
}

.admin .widget-dragger {
    color: var(--lavaka-grey);
}

/* keep icon tiles rounded and on-brand */
.admin .widget .tw-rounded,
.admin .tw-rounded-lg {
    border-radius: var(--lavaka-radius-sm) !important;
}

/* ------------------------------------------------------------------- tables */
.dataTables_wrapper {
    border-radius: var(--lavaka-radius-sm);
    overflow: hidden;
}

table.dataTable thead tr > th,
.table.dataTable > thead:first-child > tr:first-child > th,
.table thead th {
    background: var(--lavaka-paper-2) !important;
    color: var(--lavaka-muted) !important;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--lavaka-grey-soft) !important;
}

.table > tbody > tr > td {
    border-top: 1px solid var(--lavaka-grey-soft);
    vertical-align: middle;
    padding: 12px 10px;
}

.table > tbody > tr {
    transition: background-color .16s var(--lavaka-ease);
}

.table > tbody > tr:hover {
    background: #F4845F0f !important;
}

.dataTables_wrapper table tbody a:not(.text-muted):not(.text-danger) {
    color: var(--lavaka-ink);
    font-weight: 500;
}

.dataTables_wrapper table tbody a:hover:not(.text-muted):not(.text-danger) {
    color: var(--lavaka-blue);
}

/* ------------------------------------------------------------------ buttons */
.btn {
    border-radius: var(--lavaka-radius-sm);
    font-weight: 600;
    letter-spacing: .01em;
    transition: transform .18s var(--lavaka-ease), box-shadow .18s var(--lavaka-ease), background-color .18s var(--lavaka-ease), color .18s var(--lavaka-ease);
    box-shadow: none;
}

.btn:hover,
.btn:focus {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background-color: var(--lavaka-ink);
    background-image: var(--lavaka-grad);
    border: 0;
    color: var(--lavaka-ink) !important;
    font-weight: 700;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-color: var(--lavaka-ink);
    background-image: var(--lavaka-grad);
    border: 0;
    color: var(--lavaka-ink) !important;
    filter: saturate(1.08) brightness(1.03);
    box-shadow: 0 10px 24px -12px #2F6BFF8c;
}

.btn-default {
    background: var(--lavaka-paper);
    border: 1px solid var(--lavaka-grey-soft);
    color: var(--lavaka-ink-2) !important;
}

.btn-default:hover,
.btn-default:focus {
    background: var(--lavaka-paper-2);
    border-color: #d2d2ce;
    color: var(--lavaka-ink) !important;
}

.btn-info {
    background: var(--lavaka-blue);
    border-color: var(--lavaka-blue);
    color: var(--lavaka-paper) !important;
}

.btn-success {
    background: var(--lavaka-success);
    border-color: var(--lavaka-success);
}

.btn-danger {
    background: var(--lavaka-danger);
    border-color: var(--lavaka-danger);
}

.btn-link {
    color: var(--lavaka-blue);
}

/* ------------------------------------------------------------------- forms  */
.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], select, textarea {
    background: var(--lavaka-paper-2);
    border: 1px solid var(--lavaka-grey-soft);
    border-radius: var(--lavaka-radius-sm);
    color: var(--lavaka-ink);
    box-shadow: none;
    transition: border-color .18s var(--lavaka-ease), box-shadow .18s var(--lavaka-ease), background-color .18s var(--lavaka-ease);
}

.form-control:focus,
input:focus, select:focus, textarea:focus {
    background: var(--lavaka-paper);
    border-color: var(--lavaka-blue);
    box-shadow: 0 0 0 3px #2F6BFF33;
    outline: none;
}

.form-control::placeholder {
    color: var(--lavaka-grey);
}

label, .control-label {
    font-weight: 600;
    font-size: 12.5px;
    color: var(--lavaka-ink-2);
}

/* select2 + tag inputs */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: var(--lavaka-radius-sm);
    border-color: var(--lavaka-grey-soft);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--lavaka-ink);
}

/* ------------------------------------------------------- tabs / navs / tags */
.nav-tabs {
    border-bottom: 1px solid var(--lavaka-grey-soft);
}

.nav-tabs > li > a {
    border: 0;
    border-radius: 0;
    color: var(--lavaka-muted);
    font-weight: 600;
    transition: color .18s var(--lavaka-ease);
}

.nav-tabs > li > a:hover {
    background: transparent;
    color: var(--lavaka-ink);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--lavaka-ink);
    background-image: linear-gradient(var(--lavaka-blue), var(--lavaka-blue));
    background-repeat: no-repeat;
    background-size: 100% 2px;
    background-position: bottom left;
}

.nav-tabs.nav-tabs-horizontal > li.active > a {
    background-image: var(--lavaka-grad);
}

.label,
.tagit li.tagit-choice {
    border-radius: 999px !important;
    font-weight: 600;
    font-size: 11.5px;
    padding: .35em .8em;
}

/* ------------------------------------------------------------------ modals  */
.modal-content {
    border: 1px solid var(--lavaka-grey-soft);
    border-radius: var(--lavaka-radius);
    box-shadow: var(--lavaka-shadow-lg);
}

.modal-header {
    background: var(--lavaka-paper-2);
    border-bottom: 1px solid var(--lavaka-grey-soft);
    border-radius: var(--lavaka-radius) var(--lavaka-radius) 0 0;
    padding: 16px 20px;
}

.modal-title {
    font-family: var(--lavaka-display);
    font-weight: 700;
    font-size: 16px;
}

.modal-footer {
    border-top: 1px solid var(--lavaka-grey-soft);
}

/* dropdowns / tooltips */
.dropdown-menu {
    border: 1px solid var(--lavaka-grey-soft);
    border-radius: var(--lavaka-radius-sm);
    box-shadow: var(--lavaka-shadow-lg);
    padding: 6px;
    animation: lavaka-pop .16s var(--lavaka-ease);
}

.dropdown-menu > li > a {
    border-radius: 10px;
    color: var(--lavaka-ink-2);
    padding: 8px 12px;
    transition: background-color .16s var(--lavaka-ease), color .16s var(--lavaka-ease);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: var(--lavaka-paper-2);
    color: var(--lavaka-ink);
}

@keyframes lavaka-pop {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- scrollbars */
.admin ::-webkit-scrollbar,
body.login_admin ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.admin ::-webkit-scrollbar-track,
body.login_admin ::-webkit-scrollbar-track {
    background: transparent;
}

.admin ::-webkit-scrollbar-thumb,
body.login_admin ::-webkit-scrollbar-thumb {
    background: #c9c9c5;
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
}

.admin ::-webkit-scrollbar-thumb:hover,
body.login_admin ::-webkit-scrollbar-thumb:hover {
    background: var(--lavaka-grey);
    background-clip: content-box;
}

/* ------------------------------------------------------------ login screen  */
body.login_admin {
    background: var(--lavaka-ink) !important;
    background-image:
        radial-gradient(circle at 12% 8%, #F4845F40 0%, transparent 42%),
        radial-gradient(circle at 88% 92%, #2F6BFF33 0%, transparent 46%) !important;
    color: var(--lavaka-paper);
}

body.login_admin h1 {
    font-family: var(--lavaka-display);
    color: var(--lavaka-paper);
    letter-spacing: -0.02em;
}

body.login_admin p,
body.login_admin .tw-text-neutral-600,
body.login_admin .tw-text-neutral-500 {
    color: #bdbdb7 !important;
}

body.login_admin .company-logo {
    margin-bottom: 26px;
}

body.login_admin .company-logo img {
    max-width: 232px;
    height: auto;
}

body.login_admin .authentication-form-wrapper > .tw-bg-white,
body.login_admin .authentication-form-wrapper > div[class*="tw-bg-white"] {
    background: #ffffff0f !important;
    border: 1px solid #ffffff1f !important;
    border-radius: 26px !important;
    box-shadow: 0 30px 70px -30px #000000cc !important;
    backdrop-filter: blur(14px);
    padding-top: 34px !important;
    padding-bottom: 34px !important;
}

body.login_admin label,
body.login_admin .control-label {
    color: #c9c9c5 !important;
}

body.login_admin .form-control,
body.login_admin input[type="email"],
body.login_admin input[type="password"],
body.login_admin input[type="text"] {
    background: #ffffff12 !important;
    border: 1px solid #ffffff24 !important;
    color: var(--lavaka-paper) !important;
    border-radius: var(--lavaka-radius-sm) !important;
    height: auto;
    padding: 12px 14px;
}

body.login_admin .form-control:focus,
body.login_admin input:focus {
    background: #ffffff1c !important;
    border-color: var(--lavaka-blue-light) !important;
    box-shadow: 0 0 0 3px #5B8CFF2e !important;
}

body.login_admin .form-control::placeholder {
    color: #8c8c88 !important;
}

body.login_admin .btn-primary,
body.login_admin button[type="submit"] {
    width: 100%;
    background-image: var(--lavaka-grad) !important;
    background-color: transparent !important;
    border: 0 !important;
    color: var(--lavaka-ink) !important;
    font-weight: 700;
    border-radius: var(--lavaka-radius-sm) !important;
    padding: 13px 18px;
    box-shadow: 0 14px 34px -16px #2F6BFFa6;
}

body.login_admin .btn-primary:hover,
body.login_admin button[type="submit"]:hover {
    filter: saturate(1.1) brightness(1.04);
    transform: translateY(-1px);
}

body.login_admin a {
    color: var(--lavaka-blue-light) !important;
    font-weight: 500;
}

body.login_admin a:hover,
body.login_admin a:focus {
    color: var(--lavaka-paper) !important;
}

body.login_admin .alert-danger {
    background: #e5484d1f;
    border: 1px solid #e5484d59;
    color: #ffd7d8;
    border-radius: var(--lavaka-radius-sm);
}

/* ---------------------------------------------------------- reduced motion  */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── alert panels (announcement, cron notice) — rounded, on-brand ───────── */
.admin .alert {
    border: 0;
    border-left: 3px solid var(--lavaka-blue-light);
    border-radius: var(--lavaka-radius-sm);
    box-shadow: 0 1px 2px #0e0e0d0d;
    padding: 14px 18px;
}

.admin .alert-info {
    background: #FFE9E166;
    border-left-color: var(--lavaka-coral);
    color: var(--lavaka-ink-2);
}

.admin .alert-info a,
.admin .alert-success a,
.admin .alert-warning a,
.admin .alert-danger a {
    font-weight: 600;
}

.admin .alert-success {
    background: #1f9d5514;
    border-left-color: var(--lavaka-success);
    color: var(--lavaka-ink-2);
}

.admin .alert-warning {
    background: #fbbf2417;
    border-left-color: #d9a520;
    color: var(--lavaka-ink-2);
}

.admin .alert-danger {
    background: #e5484d10;
    border-left-color: var(--lavaka-danger);
    color: var(--lavaka-ink-2);
}

.admin .alert-dismissable .close,
.admin .alert-dismissible .close {
    color: var(--lavaka-muted);
    opacity: .7;
    transition: opacity .16s var(--lavaka-ease), color .16s var(--lavaka-ease);
}

.admin .alert-dismissable .close:hover,
.admin .alert-dismissible .close:hover {
    color: var(--lavaka-ink);
    opacity: 1;
}

.admin .alert h4,
.admin .alert .bold,
.admin .alert strong {
    color: var(--lavaka-ink);
}

/* ==========================================================================
   Responsive & polish layer — mobile-first tweaks on top of the brand layer
   ========================================================================== */

/* ── topbar: keep search + icons usable on small screens ───────────────── */
@media (max-width: 767px) {
    .admin #header .search-form,
    .admin #header .navbar-form {
        max-width: 46vw;
    }

    .admin #header .nav .open > a,
    .admin #header .navbar-nav > li > a {
        padding: 14px 10px;
    }

    /* tighten the wrapper so content uses the full width */
    .admin #wrapper {
        padding-left: 0;
    }

    .admin .content {
        padding: 12px;
    }

    /* page titles */
    .admin h4.page-title,
    .admin .page-title {
        font-size: 18px;
        margin-bottom: 10px;
    }

    /* status summary badges (leads, tickets …) — wrap cleanly */
    .admin .leads-overview .tw-grid,
    .admin [class*="tw-grid-flow-col"] {
        gap: 6px;
    }

    /* tables: allow horizontal scroll inside a wrapper so the page itself
       never overflows on phones */
    .admin .table-responsive {
        border: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin table.dataTable,
    .admin .table:not(.table-responsive) {
        min-width: 640px;
    }

    /* stack the New Lead / import / kanban buttons vertically-ish */
    .admin ._buttons .tw-flex {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* modal: full-width sheet on phones */
    .admin .modal-dialog {
        width: auto;
        margin: 10px;
        max-width: none;
    }

    .admin .modal-content {
        border-radius: 16px;
    }

    /* dashboard widgets — 1 column */
    .admin .widget {
        margin-bottom: 12px;
    }

    /* reduce giant padding on panels */
    .admin .panel_s,
    .admin .panel,
    .admin .widget {
        border-radius: 16px;
    }

    .admin .panel-body {
        padding: 14px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .admin .content {
        padding: 16px;
    }
}

/* ── login: tighten spacing on short screens ───────────────────────────── */
@media (max-width: 480px) {
    body.login_admin .company-logo img {
        max-width: 180px;
    }

    body.login_admin h1 {
        font-size: 22px;
    }

    body.login_admin .authentication-form-wrapper > .tw-bg-white,
    body.login_admin .authentication-form-wrapper > div[class*="tw-bg-white"] {
        border-radius: 18px;
        padding: 20px !important;
    }
}

/* ── generic focus ring for keyboard users ─────────────────────────────── */
.admin a:focus-visible,
.admin button:focus-visible,
.admin .btn:focus-visible,
.admin input:focus-visible,
.admin select:focus-visible,
.admin textarea:focus-visible {
    outline: 2px solid var(--lavaka-blue);
    outline-offset: 2px;
}

/* ── smooth page transitions ───────────────────────────────────────────── */
.admin #wrapper .content,
.admin .content {
    animation: lavaka-fade .22s var(--lavaka-ease);
}

@keyframes lavaka-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}