/* =========================================================
   UK Printers — Billing panel redesign
   Loaded AFTER the Otika template CSS. Keeps the existing
   brand colours (#5189C6 blue, #4f4e6d slate, #6777ef accent).
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap');

:root {
    --ukp-blue: #2E6BD1;
    --ukp-blue-dark: #1F54AB;
    --ukp-blue-soft: #EAF1FD;
    --ukp-slate: #16233F;
    --ukp-slate-deep: #0F1B35;
    --ukp-slate-ink: #0A1429;
    --ukp-accent: #1BA3D6;
    --ukp-red: #E0393E;
    --ukp-green: #13A06A;
    --ukp-amber: #E8A413;
    --ukp-bg: #F4F6FA;
    --ukp-cyan: #1BA3D6;
    --ukp-magenta: #D6336C;
    --ukp-yellow: #F2B91B;
    --ukp-cmyk: linear-gradient(90deg, #1BA3D6 0 25%, #D6336C 25% 50%, #F2B91B 50% 75%, #16233F 75% 100%);
    --ukp-card: #ffffff;
    --ukp-line: #E4E8F0;
    --ukp-text: #16233F;
    --ukp-muted: #6B7489;
    --ukp-radius: 10px;
    --ukp-radius-sm: 6px;
    --ukp-sidebar-w: 250px;
}

/* ---------- Base ---------- */
body,
body .main-content,
body .navbar,
body .card,
body .btn,
body .form-control,
body .dropdown-menu,
body .modal-content,
body table {
    font-family: 'Manrope', 'Segoe UI', Roboto, Arial, sans-serif !important;
}
body { background: var(--ukp-bg) !important; color: var(--ukp-text); font-size: 14px; }
body .main-wrapper-1 .main-content { background: var(--ukp-bg); padding-top: 92px; }
h1, h2, h3, h4, h5, h6 { color: var(--ukp-text); font-weight: 700; }
a { color: var(--ukp-blue); }
a:hover { color: var(--ukp-blue-dark); }
.text-muted { color: var(--ukp-muted) !important; }
::selection { background: var(--ukp-blue); color: #fff; }

/* Remove template setting panel and demo loader */
.settingSidebar, .loader { display: none !important; }

/* ---------- Top navbar ---------- */
body .navbar-bg { display: none !important; }
body .main-navbar {
    background: var(--ukp-card) !important;
    border-bottom: 1px solid var(--ukp-line);
    box-shadow: none !important;
    height: 64px;
    left: var(--ukp-sidebar-w) !important;
    padding: 0 24px !important;
}
body.sidebar-mini .main-navbar { left: 65px !important; }
body .main-navbar .nav-link { color: var(--ukp-slate) !important; }
body .main-navbar .nav-link svg { color: var(--ukp-slate); width: 20px; height: 20px; }
.ukp-page-title { font-size: 17px; font-weight: 700; color: var(--ukp-text); margin: 0 0 0 6px; white-space: nowrap; }
.ukp-quick { display: flex; gap: 8px; margin-right: 14px; }
.ukp-quick .btn { height: 38px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.ukp-quick svg { width: 16px; height: 16px; }
.ukp-user { display: flex !important; align-items: center; gap: 10px; }
.ukp-user .ukp-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--ukp-slate); color: #fff; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
.ukp-user .ukp-user-name { font-weight: 600; color: var(--ukp-text); font-size: 14px; line-height: 1.1; }
.ukp-user .ukp-user-role { font-size: 12px; color: var(--ukp-muted); }

/* ---------- Sidebar ---------- */
body .main-sidebar,
body.light-sidebar .main-sidebar,
body.dark-sidebar .main-sidebar {
    background: var(--ukp-slate-deep) !important;
    width: var(--ukp-sidebar-w) !important;
    box-shadow: none !important;
}
body .main-sidebar .sidebar-brand {
    height: 64px; line-height: 64px;
    background: var(--ukp-slate-ink) !important;
    display: flex; align-items: center; justify-content: center;
    padding: 0 16px;
}
body .main-sidebar .sidebar-brand a { display: flex; align-items: center; gap: 10px; height: 100%; }
body .main-sidebar .sidebar-brand .header-logo {
    height: 40px !important; max-width: 170px; object-fit: contain;
    background: #fff; border-radius: 8px; padding: 4px 8px;
}
body .main-sidebar .sidebar-brand .logo-name { color: #fff !important; font-weight: 700; }
body .main-sidebar .sidebar-menu { padding: 14px 12px 30px; }
body .main-sidebar .sidebar-menu li.menu-header {
    color: rgba(255,255,255,.45) !important;
    font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
    padding: 18px 12px 6px; height: auto; line-height: 1.2; text-transform: none;
}
body .main-sidebar .sidebar-menu li a,
body.light-sidebar .main-sidebar .sidebar-menu li a,
body.dark-sidebar .main-sidebar .sidebar-menu li a {
    color: rgba(255,255,255,.78) !important;
    height: 44px !important; padding: 0 12px !important;
    border-radius: 8px; margin-bottom: 2px;
    font-size: 14px; font-weight: 600;
    display: flex; align-items: center;
    background: transparent !important;
    transition: background .15s ease, color .15s ease;
}
body .main-sidebar .sidebar-menu li a svg,
body .main-sidebar .sidebar-menu li a i {
    width: 19px !important; height: 19px !important;
    margin-right: 12px !important; color: inherit !important;
    stroke-width: 2; flex-shrink: 0;
}
body .main-sidebar .sidebar-menu li a span { font-size: 14px !important; }
body .main-sidebar .sidebar-menu li a:hover {
    background: rgba(255,255,255,.07) !important; color: #fff !important;
}
body .main-sidebar .sidebar-menu li.active > a,
body.light-sidebar .main-sidebar .sidebar-menu li.active > a,
body.dark-sidebar .main-sidebar .sidebar-menu li.active > a {
    background: var(--ukp-blue) !important; color: #fff !important;
}
body .main-sidebar .sidebar-menu li a.has-dropdown:after { color: rgba(255,255,255,.5); right: 14px; }
body .main-sidebar .sidebar-menu li ul.dropdown-menu {
    background: transparent !important; padding: 2px 0 6px 0 !important;
}
body .main-sidebar .sidebar-menu li ul.dropdown-menu li a {
    height: 36px !important; padding-left: 43px !important;
    font-size: 13.5px; font-weight: 500;
    color: rgba(255,255,255,.62) !important;
}
body .main-sidebar .sidebar-menu li ul.dropdown-menu li a:hover,
body .main-sidebar .sidebar-menu li ul.dropdown-menu li.active > a,
body .main-sidebar .sidebar-menu li ul.dropdown-menu li a.active {
    color: #fff !important; background: rgba(255,255,255,.06) !important;
}
body .main-sidebar .sidebar-menu li ul.dropdown-menu li a:before { display: none !important; }

/* Sidebar collapsed (mini) keeps icons centred */
body.sidebar-mini .main-sidebar { width: 65px !important; }
body.sidebar-mini .main-sidebar .sidebar-brand .header-logo { max-width: 44px; padding: 2px; }
body.sidebar-mini .main-sidebar .sidebar-menu { padding: 10px 6px; }
body.sidebar-mini .main-sidebar .sidebar-menu li a { justify-content: center; padding: 0 !important; }
body.sidebar-mini .main-sidebar .sidebar-menu li a svg,
body.sidebar-mini .main-sidebar .sidebar-menu li a i { margin-right: 0 !important; }

/* Main area offset */
body .main-content { padding-left: calc(var(--ukp-sidebar-w) + 28px) !important; padding-right: 28px !important; }
body.sidebar-mini .main-content { padding-left: 93px !important; }
body .main-footer { padding-left: calc(var(--ukp-sidebar-w) + 28px) !important; background: transparent; border-top: 1px solid var(--ukp-line); color: var(--ukp-muted); font-size: 13px; }
body.sidebar-mini .main-footer { padding-left: 93px !important; }

@media (max-width: 1024px) {
    body .main-navbar { left: 0 !important; padding: 0 12px !important; }
    body .main-content { padding-left: 16px !important; padding-right: 16px !important; }
    body .main-footer { padding-left: 16px !important; }
    body .main-sidebar { width: var(--ukp-sidebar-w) !important; }
    body.sidebar-mini .main-content,
    body.sidebar-mini .main-footer { padding-left: 16px !important; }
    .ukp-quick .btn span { display: none; }
}
@media (max-width: 575px) {
    .ukp-quick { display: none; }
    .ukp-user .ukp-user-meta { display: none; }
}

/* ---------- Cards ---------- */
body .card {
    background: var(--ukp-card);
    border: 1px solid var(--ukp-line) !important;
    border-radius: var(--ukp-radius) !important;
    box-shadow: none !important;
    margin-bottom: 22px;
}
body .card .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--ukp-line) !important;
    min-height: 60px; padding: 14px 20px !important;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
body .card .card-header h4 {
    color: var(--ukp-text) !important; font-size: 16px !important; font-weight: 700 !important;
    line-height: 1.3; margin: 0;
}
body .card .card-body { padding: 20px !important; }
body .card .card-footer { background: transparent; border-top: 1px solid var(--ukp-line); }
body .section .section-header {
    background: transparent; box-shadow: none; border: 0; padding: 0 0 16px; margin: 0;
}
body .section .section-header h1 { font-size: 22px; font-weight: 800; color: var(--ukp-text); }

/* ---------- Buttons ---------- */
body .btn {
    border-radius: var(--ukp-radius-sm) !important;
    font-weight: 600 !important; font-size: 14px !important;
    padding: 8px 16px; box-shadow: none !important;
    letter-spacing: 0; transition: background .15s ease, border-color .15s ease;
}
body .btn.btn-lg { padding: 10px 20px !important; font-size: 14px !important; }
body .btn.btn-sm { padding: 5px 10px !important; font-size: 12.5px !important; }
body .btn-primary, body .btn-primary:not(:disabled):not(.disabled):active {
    background: var(--ukp-blue) !important; border-color: var(--ukp-blue) !important; color: #fff !important;
}
body .btn-primary:hover, body .btn-primary:focus { background: var(--ukp-blue-dark) !important; border-color: var(--ukp-blue-dark) !important; }
body .btn-secondary, body .btn-dark {
    background: var(--ukp-slate) !important; border-color: var(--ukp-slate) !important; color: #fff !important;
}
body .btn-secondary:hover, body .btn-dark:hover { background: var(--ukp-slate-deep) !important; }
body .btn-info { background: var(--ukp-accent) !important; border-color: var(--ukp-accent) !important; color: #fff !important; }
body .btn-success { background: var(--ukp-green) !important; border-color: var(--ukp-green) !important; }
body .btn-danger { background: var(--ukp-red) !important; border-color: var(--ukp-red) !important; }
body .btn-warning { background: var(--ukp-amber) !important; border-color: var(--ukp-amber) !important; color: #fff !important; }
body .btn-light, body .btn-outline-primary {
    background: #fff !important; border: 1px solid var(--ukp-line) !important; color: var(--ukp-text) !important;
}
body .btn-light:hover, body .btn-outline-primary:hover { border-color: var(--ukp-blue) !important; color: var(--ukp-blue) !important; }
body .btn:focus-visible { outline: 3px solid rgba(81,137,198,.35) !important; outline-offset: 2px; }

/* ---------- Forms ---------- */
body .form-control,
body .custom-select,
body select.form-control,
body .select2-container--default .select2-selection--single,
body .select2-container--default .select2-selection--multiple {
    border: 1px solid #d6dbe4 !important;
    border-radius: var(--ukp-radius-sm) !important;
    background: #fff !important;
    height: 42px; min-height: 42px;
    font-size: 14px; color: var(--ukp-text);
    box-shadow: none !important;
}
body textarea.form-control { height: auto; min-height: 90px; }
body .form-control:focus,
body .select2-container--focus .select2-selection {
    border-color: var(--ukp-blue) !important;
    box-shadow: 0 0 0 3px rgba(81,137,198,.16) !important;
}
body .form-group label, body label {
    font-size: 13px !important; font-weight: 600 !important; color: var(--ukp-slate) !important;
    margin-bottom: 6px;
}
body .input-group-text { background: var(--ukp-blue-soft); border-color: #d6dbe4; color: var(--ukp-slate); }
body .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px; }
body .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }

/* ---------- Tables / DataTables ---------- */
body .table { color: var(--ukp-text); margin-bottom: 0; }
body .table thead th,
body .table:not(.table-sm) thead th {
    background: #f6f8fb !important;
    color: var(--ukp-slate) !important;
    font-size: 12.5px; font-weight: 700; text-transform: none;
    border-bottom: 1px solid var(--ukp-line) !important; border-top: 0 !important;
    padding: 12px 14px !important; height: auto !important; white-space: nowrap;
}
body .table td, body .table:not(.table-sm):not(.table-md):not(.dataTable) td {
    padding: 12px 14px !important; height: auto !important;
    border-top: 1px solid var(--ukp-line) !important; vertical-align: middle !important;
    font-size: 13.5px;
}
body .table-striped tbody tr:nth-of-type(odd) { background: transparent !important; }
body .table-hover tbody tr:hover { background: var(--ukp-blue-soft) !important; }
body .table-responsive { border: 1px solid var(--ukp-line); border-radius: var(--ukp-radius-sm); }
body .dataTables_wrapper .dataTables_filter input,
body .dataTables_wrapper .dataTables_length select {
    border: 1px solid #d6dbe4 !important; border-radius: var(--ukp-radius-sm) !important;
    height: 36px; padding: 4px 10px; margin-left: 6px;
}
body .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--ukp-blue) !important; outline: none; }
body .dataTables_wrapper .dataTables_info { color: var(--ukp-muted); font-size: 13px; padding: 14px; }
body .dataTables_wrapper .dataTables_length,
body .dataTables_wrapper .dataTables_filter { padding: 12px 14px 0; }
body .dataTables_wrapper .dt-buttons { padding: 12px 14px 0; }
body .dataTables_wrapper .dt-buttons .btn,
body .dataTables_wrapper .dt-buttons .dt-button {
    background: #fff !important; border: 1px solid var(--ukp-line) !important; color: var(--ukp-slate) !important;
    border-radius: var(--ukp-radius-sm) !important; padding: 6px 12px !important; font-size: 13px !important; margin-right: 4px;
}
body .page-item .page-link { border-radius: var(--ukp-radius-sm) !important; margin: 0 2px; border: 1px solid var(--ukp-line); color: var(--ukp-slate); }
body .page-item.active .page-link { background: var(--ukp-blue) !important; border-color: var(--ukp-blue) !important; color: #fff; }
body .dataTables_paginate { padding: 10px 14px 14px; }

/* ---------- Badges (order status) ---------- */
body .badge {
    border-radius: 999px !important; padding: 5px 11px !important;
    font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0;
}
body .badge-secondary { background: #e9ebf1 !important; color: var(--ukp-slate) !important; }
body .badge-info { background: #e6e8fd !important; color: #4b59c9 !important; }
body .badge-warning { background: #fbf0d9 !important; color: #9a6a0e !important; }
body .badge-success { background: #dff3ea !important; color: #1f7550 !important; }
body .badge-danger { background: #fde4e5 !important; color: #b5202a !important; }
body .badge-primary { background: var(--ukp-blue-soft) !important; color: var(--ukp-blue-dark) !important; }

/* ---------- Dropdowns / modals / alerts ---------- */
body .dropdown-menu {
    border: 1px solid var(--ukp-line) !important; border-radius: var(--ukp-radius) !important;
    box-shadow: 0 12px 32px rgba(44,43,64,.12) !important; padding: 6px !important;
}
body .dropdown-menu .dropdown-item { border-radius: var(--ukp-radius-sm); font-size: 13.5px; font-weight: 500; padding: 8px 12px; }
body .dropdown-menu .dropdown-item:hover { background: var(--ukp-blue-soft); color: var(--ukp-blue-dark); }
body .dropdown-menu .dropdown-title { font-weight: 700; color: var(--ukp-muted); font-size: 12px; padding: 8px 12px 4px; text-transform: none; letter-spacing: 0; }
body .modal-content { border: 0; border-radius: 14px; overflow: hidden; }
body .modal-header { border-bottom: 1px solid var(--ukp-line); padding: 16px 20px; }
body .modal-header .modal-title { font-weight: 700; font-size: 16px; }
body .modal-body { padding: 20px; }
body .modal-backdrop.show { opacity: .45; }
body .alert { border-radius: var(--ukp-radius); border: 0; font-weight: 500; }
body .alert-success { background: #dff3ea; color: #1f7550; }
body .alert-danger { background: #fde4e5; color: #b5202a; }

/* ---------- Tabs / nav pills ---------- */
body .nav-pills .nav-link.active, body .nav-tabs .nav-link.active { background: var(--ukp-blue) !important; color: #fff !important; border-color: var(--ukp-blue) !important; }
body .nav-pills .nav-link { border-radius: var(--ukp-radius-sm); font-weight: 600; }

/* ---------- FullCalendar (diary) ---------- */
body .fc-toolbar h2 { font-size: 17px !important; font-weight: 700; color: var(--ukp-text); }
body .fc button, body .fc-button {
    background: #fff !important; border: 1px solid var(--ukp-line) !important; color: var(--ukp-slate) !important;
    text-shadow: none !important; box-shadow: none !important; border-radius: var(--ukp-radius-sm) !important;
    height: 34px !important; padding: 0 12px !important; font-weight: 600; text-transform: capitalize;
}
body .fc-state-active, body .fc button.fc-state-active { background: var(--ukp-slate) !important; color: #fff !important; border-color: var(--ukp-slate) !important; }
body .fc-unthemed td, body .fc-unthemed th { border-color: var(--ukp-line) !important; }
body .fc-day-header { background: #f6f8fb; padding: 8px 0 !important; font-weight: 700; color: var(--ukp-slate); font-size: 12.5px; }
body .fc-unthemed td.fc-today { background: var(--ukp-blue-soft) !important; }
body .fc-event { border: 0 !important; border-radius: 4px !important; padding: 2px 5px; font-size: 12px; background: var(--ukp-blue) !important; }

/* ---------- iziToast ---------- */
body .iziToast { border-radius: var(--ukp-radius) !important; font-family: 'Manrope', sans-serif; }

/* ---------- Login pages ---------- */
body.ukp-auth { background: var(--ukp-bg) !important; min-height: 100vh; }
.ukp-auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.ukp-auth-side {
    background: var(--ukp-slate-deep); color: #fff; padding: 56px;
    display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
}
.ukp-auth-side:before {
    content: ""; position: absolute; right: -120px; bottom: -120px; width: 420px; height: 420px;
    border-radius: 50%; border: 60px solid rgba(81,137,198,.35);
}
.ukp-auth-side h1 { color: #fff; font-size: 34px; font-weight: 800; line-height: 1.2; max-width: 420px; }
.ukp-auth-side p { color: rgba(255,255,255,.72); font-size: 15px; max-width: 400px; line-height: 1.6; }
.ukp-auth-side .ukp-auth-logo { background: #fff; border-radius: 10px; padding: 8px 14px; height: 60px; width: auto; object-fit: contain; align-self: flex-start; }
.ukp-auth-form { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.ukp-auth-card { width: 100%; max-width: 400px; }
.ukp-auth-card h2 { font-size: 24px; font-weight: 800; margin-bottom: 6px; }
.ukp-auth-card .ukp-auth-sub { color: var(--ukp-muted); margin-bottom: 28px; }
.ukp-auth-card .btn-primary { width: 100%; height: 46px; font-size: 15px !important; }
@media (max-width: 860px) {
    .ukp-auth-wrap { grid-template-columns: 1fr; }
    .ukp-auth-side { padding: 28px; min-height: auto; }
    .ukp-auth-side h1 { font-size: 24px; }
    .ukp-auth-side:before { display: none; }
}

/* ---------- Dashboard ---------- */
.ukp-dash-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
.ukp-dash-head h1 { font-size: 24px; font-weight: 800; margin: 0; }
.ukp-dash-head .ukp-date { color: var(--ukp-muted); font-size: 14px; margin-top: 4px; }
.ukp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ukp-actions .btn { display: inline-flex; align-items: center; gap: 7px; height: 42px; }
.ukp-actions svg { width: 17px; height: 17px; }

/* Order pipeline — the signature element */
.ukp-pipeline {
    display: grid; grid-template-columns: 1.1fr repeat(4, 1fr);
    background: var(--ukp-card); border: 1px solid var(--ukp-line); border-radius: var(--ukp-radius);
    overflow: hidden; margin-bottom: 22px;
}
.ukp-pipe-total { background: var(--ukp-slate); color: #fff; padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; }
.ukp-pipe-total .lbl { font-size: 13px; color: rgba(255,255,255,.72); font-weight: 600; }
.ukp-pipe-total .num { font-size: 40px; font-weight: 800; line-height: 1.1; color: #fff; }
.ukp-pipe-total a { color: #fff; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; margin-top: 6px; }
.ukp-stage {
    padding: 20px 22px 20px 34px; position: relative; color: var(--ukp-text) !important;
    text-decoration: none !important; border-left: 1px solid var(--ukp-line); transition: background .15s ease;
}
.ukp-stage:hover { background: var(--ukp-blue-soft); }
.ukp-stage:after {
    content: ""; position: absolute; right: -9px; top: 50%; width: 16px; height: 16px;
    background: inherit; border-top: 1px solid var(--ukp-line); border-right: 1px solid var(--ukp-line);
    transform: translateY(-50%) rotate(45deg); z-index: 2; background: var(--ukp-card);
}
.ukp-stage:hover:after { background: var(--ukp-blue-soft); }
.ukp-stage:last-child:after { display: none; }
.ukp-stage .lbl { font-size: 13px; color: var(--ukp-muted); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.ukp-stage .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.ukp-stage .num { font-size: 30px; font-weight: 800; line-height: 1.2; margin-top: 6px; }
.ukp-stage .bar { height: 4px; background: #edf0f5; border-radius: 4px; margin-top: 10px; overflow: hidden; }
.ukp-stage .bar span { display: block; height: 100%; border-radius: 4px; }

/* Money strip */
.ukp-money { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
.ukp-money-item {
    background: var(--ukp-card); border: 1px solid var(--ukp-line); border-radius: var(--ukp-radius);
    padding: 18px 20px; display: flex; gap: 14px; align-items: center; color: var(--ukp-text) !important;
    text-decoration: none !important; transition: border-color .15s ease;
}
a.ukp-money-item:hover { border-color: var(--ukp-blue); }
.ukp-money-item .ico { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ukp-money-item .ico svg { width: 21px; height: 21px; }
.ukp-money-item .lbl { font-size: 13px; color: var(--ukp-muted); font-weight: 600; }
.ukp-money-item .amt { font-size: 21px; font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; }
.ukp-money-item .amt small { font-size: 13px; font-weight: 600; color: var(--ukp-muted); margin-left: 2px; }
.ukp-money-item.is-due { border-left: 4px solid var(--ukp-red); }

.ukp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ukp-grid-2 > .card { margin-bottom: 0; }
.ukp-chart-wrap { position: relative; height: 260px; }
.ukp-dash-diary { margin-top: 22px; }

@media (max-width: 1200px) {
    .ukp-pipeline { grid-template-columns: repeat(2, 1fr); }
    .ukp-pipe-total { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 18px; }
    .ukp-stage { border-top: 1px solid var(--ukp-line); }
    .ukp-stage:after { display: none; }
    .ukp-money { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .ukp-grid-2 { grid-template-columns: 1fr; }
    .ukp-grid-2 > .card { margin-bottom: 22px; }
}
@media (max-width: 520px) {
    .ukp-pipeline, .ukp-money { grid-template-columns: 1fr; }
    .ukp-stage { border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* ---------- Fixes after visual review ---------- */
body .main-sidebar { position: fixed !important; top: 0; bottom: 0; height: 100% !important; }
body .main-sidebar .sidebar-menu li a.has-dropdown:after {
    content: "" !important; width: 7px; height: 7px; border-right: 2px solid rgba(255,255,255,.55);
    border-bottom: 2px solid rgba(255,255,255,.55); transform: translateY(-70%) rotate(45deg);
    position: absolute; top: 50%; right: 16px; transition: transform .15s ease;
}
body .main-sidebar .sidebar-menu li.active > a.has-dropdown:after { transform: translateY(-30%) rotate(-135deg); }
body .main-footer, body .main-footer .footer-left { text-transform: none !important; letter-spacing: 0 !important; }
body .main-sidebar .sidebar-menu li a.has-dropdown:before { content: none !important; display: none !important; }

/* =========================================================
   v2 — polished look: navy + print-registration (CMYK) accent
   ========================================================= */
body h1, body h2, body h3, body h4, .ukp-page-title,
.ukp-pipe-total .num, .ukp-stage .num, .ukp-money-item .amt, .ukp-dash-head h1 {
    font-family: 'Sora', 'Manrope', sans-serif !important; letter-spacing: -0.01em;
}
body .main-sidebar { background: linear-gradient(180deg, #13213E 0%, #0C1830 100%) !important; }
body .main-sidebar .sidebar-brand { background: transparent !important; border-bottom: 1px solid rgba(255,255,255,.06); position: relative; }
body .main-sidebar .sidebar-brand:after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--ukp-cmyk); }
body .main-sidebar .sidebar-brand .header-logo { border-radius: 10px; }
body .main-sidebar .sidebar-menu li.active > a,
body.light-sidebar .main-sidebar .sidebar-menu li.active > a,
body.dark-sidebar .main-sidebar .sidebar-menu li.active > a {
    background: linear-gradient(90deg, #2E6BD1, #3B7BE0) !important;
    box-shadow: 0 6px 16px rgba(46,107,209,.35) !important;
}
body .main-navbar { background: rgba(255,255,255,.92) !important; backdrop-filter: saturate(160%) blur(8px); }
body .ukp-user .ukp-avatar { background: linear-gradient(135deg, #2E6BD1, #16233F); }
body .card { box-shadow: 0 1px 2px rgba(22,35,63,.04), 0 4px 16px rgba(22,35,63,.04) !important; }

/* Dashboard v2 */
.ukp-pipeline { border: 0; box-shadow: 0 1px 2px rgba(22,35,63,.05), 0 8px 24px rgba(22,35,63,.06); position: relative; }
.ukp-pipeline:before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--ukp-cmyk); z-index: 3; }
.ukp-pipe-total { background: radial-gradient(120% 140% at 0% 0%, #2E6BD1 0%, #16233F 62%) !important; padding-top: 26px; }
.ukp-pipe-total .num { font-size: 44px; }
.ukp-stage { padding-top: 24px; }
.ukp-stage .num { font-size: 32px; }
.ukp-money-item { box-shadow: 0 1px 2px rgba(22,35,63,.04), 0 4px 16px rgba(22,35,63,.04); border-color: transparent; }
.ukp-money-item.is-due { border-left: 0; background: linear-gradient(90deg, #FFF1F1 0%, #fff 55%); box-shadow: inset 4px 0 0 var(--ukp-red), 0 4px 16px rgba(22,35,63,.04); }
.ukp-money-item .ico { border-radius: 12px; }

.ukp-row-7-5 { display: grid; grid-template-columns: 7fr 5fr; gap: 22px; margin-top: 22px; }
.ukp-row-7-5 > .card { margin-bottom: 0; }
.ukp-recent { list-style: none; margin: 0; padding: 0; }
.ukp-recent li { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--ukp-line); }
.ukp-recent li:first-child { border-top: 0; }
.ukp-recent li:hover { background: #F8FAFE; }
.ukp-recent .no { width: 44px; height: 44px; border-radius: 10px; background: var(--ukp-blue-soft); color: var(--ukp-blue-dark); font-weight: 800; font-size: 12.5px; display: flex; align-items: center; justify-content: center; }
.ukp-recent .who { font-weight: 700; color: var(--ukp-text); display: block; font-size: 14px; }
.ukp-recent .meta { color: var(--ukp-muted); font-size: 12.5px; }
.ukp-recent a { color: inherit; text-decoration: none; }
.ukp-empty { padding: 28px 20px; color: var(--ukp-muted); text-align: center; }
.ukp-notes { list-style: none; margin: 0; padding: 0; }
.ukp-notes li { display: flex; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--ukp-line); }
.ukp-notes li:first-child { border-top: 0; }
.ukp-notes .d { width: 48px; text-align: center; flex-shrink: 0; border-radius: 10px; background: #FFF6E0; padding: 6px 0; }
.ukp-notes .d b { display: block; font-family: 'Sora', sans-serif; font-size: 18px; color: var(--ukp-text); line-height: 1.1; }
.ukp-notes .d span { font-size: 11px; color: #9A6B00; font-weight: 700; }
.ukp-notes .t { font-size: 14px; font-weight: 600; color: var(--ukp-text); }
.ukp-notes .tm { font-size: 12.5px; color: var(--ukp-muted); }
@media (max-width: 992px) { .ukp-row-7-5 { grid-template-columns: 1fr; } .ukp-row-7-5 > .card { margin-bottom: 22px; } }
/* Login v2 */
.ukp-auth-side { background: radial-gradient(120% 90% at 0% 0%, #2E6BD1 0%, #16233F 55%, #0C1830 100%) !important; }
.ukp-auth-side:after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--ukp-cmyk); }
.ukp-auth-side:before { border-color: rgba(27,163,214,.22) !important; }
.ukp-auth-card h2 { font-family: 'Sora', 'Manrope', sans-serif; }
body .badge-info { background: #E5F4FB !important; color: #0D7FAA !important; }
body .main-sidebar .sidebar-brand { width: 100% !important; }

/* ---------- Due invoices button ---------- */
body .btn.ukp-due-btn {
    background: #FFF1F1 !important; border: 1px solid #F6C9CB !important; color: #B5202A !important;
    display: inline-flex; align-items: center; gap: 8px; height: 42px;
}
body .btn.ukp-due-btn:hover { background: #FDE3E4 !important; border-color: var(--ukp-red) !important; }
.ukp-due-pill { background: var(--ukp-red); color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- Deliveries ---------- */
.ukp-row-top { margin-top: 0; margin-bottom: 22px; }
.ukp-tabs { display: inline-flex; background: #EEF1F6; border-radius: 10px; padding: 3px; gap: 2px; }
.ukp-tab { border: 0; background: transparent; border-radius: 8px; height: 34px; padding: 0 14px; font-weight: 700; font-size: 13.5px; color: var(--ukp-muted); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: inherit; }
.ukp-tab.is-active { background: #fff; color: var(--ukp-text); box-shadow: 0 1px 3px rgba(22,35,63,.12); }
.ukp-tab-count { background: var(--ukp-blue-soft); color: var(--ukp-blue-dark); border-radius: 999px; padding: 0 7px; font-size: 12px; line-height: 20px; min-width: 20px; text-align: center; }
.ukp-tab.is-active .ukp-tab-count { background: var(--ukp-blue); color: #fff; }
.ukp-del-sub { padding: 12px 20px; font-size: 13px; color: var(--ukp-muted); background: #F8FAFD; border-bottom: 1px solid var(--ukp-line); }
.ukp-del-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.ukp-del-due { font-size: 12.5px; font-weight: 800; color: var(--ukp-red); font-variant-numeric: tabular-nums; }
.ukp-del-paid { font-size: 12.5px; font-weight: 700; color: var(--ukp-green); }

/* ---------- 7-day diary ---------- */
.ukp-dash-diary { margin-bottom: 22px; }
.ukp-week-range { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 13.5px; color: var(--ukp-muted); margin-left: 10px; }
.ukp-week-nav { display: flex; gap: 6px; align-items: center; }
.ukp-week-nav .btn { height: 36px; display: inline-flex; align-items: center; gap: 4px; }
.ukp-week-nav svg { width: 16px; height: 16px; }
.ukp-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.ukp-day { border: 1px solid var(--ukp-line); border-radius: 12px; display: flex; flex-direction: column; min-height: 220px; background: #fff; overflow: hidden; }
.ukp-day.is-past { background: #FAFBFD; }
.ukp-day.is-past .ukp-day-head b { color: var(--ukp-muted); }
.ukp-day-head { padding: 10px 12px; border-bottom: 1px solid var(--ukp-line); display: flex; align-items: baseline; gap: 8px; }
.ukp-day-head span { font-size: 12.5px; font-weight: 700; color: var(--ukp-muted); }
.ukp-day-head b { font-family: 'Sora', sans-serif; font-size: 20px; color: var(--ukp-text); line-height: 1; }
.ukp-day-head em { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 800; background: var(--ukp-blue-soft); color: var(--ukp-blue-dark); border-radius: 999px; padding: 1px 8px; }
.ukp-day.is-today { border: 2px solid var(--ukp-blue); box-shadow: 0 8px 20px rgba(46,107,209,.15); }
.ukp-day.is-today .ukp-day-head { background: var(--ukp-blue); border-bottom-color: var(--ukp-blue); }
.ukp-day.is-today .ukp-day-head span, .ukp-day.is-today .ukp-day-head b { color: #fff; }
.ukp-day.is-today .ukp-day-head em { background: #fff; }
.ukp-day-notes { padding: 8px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ukp-note { background: #FFF8E6; border-left: 3px solid var(--ukp-yellow); border-radius: 6px; padding: 6px 8px; font-size: 12.5px; color: var(--ukp-text); line-height: 1.35; word-break: break-word; }
.ukp-note .tm { display: block; font-size: 11px; font-weight: 800; color: #9A6B00; margin-bottom: 2px; }
.ukp-day-empty { font-size: 12px; color: #A7AEBD; text-align: center; margin-top: 18px; }
.ukp-day-add { border: 0; border-top: 1px dashed var(--ukp-line); background: transparent; color: var(--ukp-blue); font-weight: 700; font-size: 12.5px; height: 34px; cursor: pointer; font-family: inherit; }
.ukp-day-add:hover { background: var(--ukp-blue-soft); }
.ukp-week.slide-left { animation: ukpSlideL .25s ease; }
.ukp-week.slide-right { animation: ukpSlideR .25s ease; }
@keyframes ukpSlideL { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes ukpSlideR { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@media (max-width: 1100px) {
    .ukp-week { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 44%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
    .ukp-day { scroll-snap-align: start; }
}
@media (max-width: 575px) {
    .ukp-week { grid-auto-columns: 78%; }
    .ukp-dash-diary .card-header { flex-direction: column; align-items: flex-start; }
    .ukp-week-range { display: block; margin: 4px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .ukp-week.slide-left, .ukp-week.slide-right { animation: none; } }
@media (max-width: 575px) { .ukp-dash-diary .card-header h4 { width: 100%; text-align: left; } }

/* =========================================================
   v5 — shared page head, stats, deliveries widget, tables
   ========================================================= */
.ukp-phead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.ukp-phead h1 { font-size: 24px; font-weight: 800; margin: 0; }
.ukp-phead p { color: var(--ukp-muted); margin: 4px 0 0; font-size: 14px; }
.ukp-phead-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ukp-phead-actions .btn { display: inline-flex; align-items: center; gap: 6px; height: 42px; }
.ukp-phead-actions svg, .ukp-back svg { width: 16px; height: 16px; }
.ukp-back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--ukp-muted) !important; margin-bottom: 6px; }
.ukp-back:hover { color: var(--ukp-blue) !important; }

.ukp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 22px; }
.ukp-stat { background: #fff; border-radius: 12px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(22,35,63,.04), 0 4px 16px rgba(22,35,63,.04); border-top: 3px solid var(--ukp-blue); }
.ukp-stat .lbl { display: block; font-size: 12.5px; font-weight: 700; color: var(--ukp-muted); }
.ukp-stat .val { display: block; font-family: 'Sora', 'Manrope', sans-serif; font-size: 22px; font-weight: 800; color: var(--ukp-text); margin-top: 4px; font-variant-numeric: tabular-nums; }
.ukp-stat .val small { font-size: 12.5px; color: var(--ukp-muted); font-weight: 600; margin-left: 2px; }
.ukp-stat.tone-green { border-top-color: var(--ukp-green); }
.ukp-stat.tone-red { border-top-color: var(--ukp-red); }
.ukp-stat.tone-red .val { color: #B5202A; }
.ukp-stat.tone-amber { border-top-color: var(--ukp-amber); }
.ukp-stat.tone-cyan { border-top-color: var(--ukp-cyan); }
.ukp-stat.tone-magenta { border-top-color: var(--ukp-magenta); }
.ukp-stat.tone-navy { border-top-color: var(--ukp-slate); }
.ukp-stat.tone-hero { background: radial-gradient(120% 140% at 0% 0%, #2E6BD1 0%, #16233F 70%); border-top-color: transparent; }
.ukp-stat.tone-hero .lbl { color: rgba(255,255,255,.72); }
.ukp-stat.tone-hero .val { color: #fff; }

/* Table card: when the page head is used, cards drop their old header */
.ukp-table-card .card-body { padding: 0 !important; }
.ukp-table-card .table-responsive { border: 0; border-radius: 0 0 var(--ukp-radius) var(--ukp-radius); }
.ukp-table-card .dataTables_wrapper .row { margin: 0; }
.ukp-toolbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--ukp-line); }
.ukp-toolbar h4 { margin: 0; font-size: 16px; }
.ukp-toolbar form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 0; }
.ukp-toolbar label { margin-bottom: 4px !important; }
.ukp-toolbar .form-control { height: 40px; min-height: 40px; }
.ukp-toolbar .btn { height: 40px; }

/* Row action buttons -> compact soft icon buttons */
body .table td > .btn, body .table td > a.btn {
    width: 34px; height: 34px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center;
    border-radius: 8px !important; font-size: 13px !important; margin: 2px 1px; border: 0 !important;
}
body .table td > .btn-info, body .table td > a.btn-info { background: #E7F0FD !important; color: #1F54AB !important; }
body .table td > .btn-primary { background: #ECEEF3 !important; color: #16233F !important; }
body .table td > .btn-secondary, body .table td > .btn-dark { background: #F1F3F7 !important; color: #3A4560 !important; }
body .table td > .btn-success { background: #E1F5EC !important; color: #0E7A50 !important; }
body .table td > .btn-danger { background: #FDE6E7 !important; color: #B5202A !important; }
body .table td > .btn:hover { filter: brightness(.95); transform: translateY(-1px); }
body .table td:first-child { font-weight: 700; color: var(--ukp-text); }
.ukp-wa { display: inline-flex; align-items: center; gap: 6px; color: #0E7A50 !important; font-weight: 600; }
.ukp-wa svg { width: 15px; height: 15px; }

/* Deliveries widget */
.ukp-dw { padding: 18px 20px 20px; }
.ukp-dw-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ukp-dw-head h4 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 17px !important; }
.ukp-dw-head h4 svg { width: 20px; height: 20px; }
.ukp-dw-more { font-size: 13.5px; color: var(--ukp-muted) !important; font-weight: 600; }
.ukp-dw-more:hover { color: var(--ukp-blue) !important; }
.ukp-dw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ukp-dw-panel { border-radius: 12px; border: 1px solid; padding: 14px 16px; min-height: 118px; display: flex; flex-direction: column; }
.ukp-dw-panel.is-today { background: #FFF5F5; border-color: #F6CDD0; }
.ukp-dw-panel.is-tomorrow { background: #FFF9EC; border-color: #F3E0B5; }
.ukp-dw-panel-head { display: flex; align-items: baseline; gap: 10px; }
.ukp-dw-panel-head b { font-family: 'Sora', sans-serif; font-size: 18px; }
.ukp-dw-panel.is-today .ukp-dw-panel-head b { color: #B5202A; }
.ukp-dw-panel.is-tomorrow .ukp-dw-panel-head b { color: #8A6100; }
.ukp-dw-panel-head span { font-size: 13.5px; color: var(--ukp-muted); }
.ukp-dw-panel-head em { margin-left: auto; font-style: normal; background: var(--ukp-slate); color: #fff; font-weight: 800; font-size: 12.5px; min-width: 30px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 9px; }
.ukp-dw-empty { margin: auto; color: var(--ukp-muted); font-size: 14.5px; padding: 10px 0; }
.ukp-dw-panel ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.ukp-dw-panel li { background: #fff; border-radius: 10px; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; box-shadow: 0 1px 2px rgba(22,35,63,.06); }
.ukp-dw-panel li a { display: flex; align-items: center; gap: 10px; color: var(--ukp-text) !important; min-width: 0; }
.ukp-dw-panel .no { font-weight: 800; font-size: 12.5px; color: var(--ukp-blue-dark); background: var(--ukp-blue-soft); border-radius: 6px; padding: 3px 7px; flex-shrink: 0; }
.ukp-dw-panel .who { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ukp-dw-panel .who small { display: block; font-weight: 500; font-size: 12px; color: var(--ukp-muted); }
.ukp-dw-panel .right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.ukp-dw-panel .due { font-size: 12.5px; font-weight: 800; color: #B5202A; }
.ukp-dw-panel .paid { font-size: 12.5px; font-weight: 700; color: var(--ukp-green); }
.ukp-dw-foot { margin-top: 10px; font-size: 13px; font-weight: 700; color: #B5202A; text-align: right; }
@media (max-width: 768px) { .ukp-dw-grid { grid-template-columns: 1fr; } }

/* Reports */
.ukp-period { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ukp-period .chip { height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ukp-line); background: #fff; font-weight: 700; font-size: 13.5px; color: var(--ukp-text); cursor: pointer; font-family: inherit; }
.ukp-period .chip.is-active { background: var(--ukp-slate); color: #fff; border-color: var(--ukp-slate); }
.ukp-period .range { display: none; gap: 6px; align-items: center; }
.ukp-period .range.is-open { display: inline-flex; }
.ukp-period .range input { height: 38px; min-height: 38px; width: 150px; }
.ukp-report-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 22px; margin-bottom: 22px; }
.ukp-report-grid > .card { margin-bottom: 0; }
.ukp-kv { list-style: none; margin: 0; padding: 0; }
.ukp-kv li { display: flex; justify-content: space-between; align-items: center; padding: 13px 20px; border-top: 1px solid var(--ukp-line); font-size: 14px; }
.ukp-kv li:first-child { border-top: 0; }
.ukp-kv li span { color: var(--ukp-muted); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.ukp-kv li b { font-family: 'Sora', sans-serif; font-size: 16px; color: var(--ukp-text); font-variant-numeric: tabular-nums; }
.ukp-kv .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.ukp-kv li.total { background: #F6F8FC; }
.ukp-kv li.total b { font-size: 20px; }
.ukp-kv li.good b { color: var(--ukp-green); }
.ukp-kv li.bad b { color: var(--ukp-red); }
.ukp-bar-row { padding: 0 20px 16px; }
.ukp-bar-row .track { height: 10px; border-radius: 6px; background: #EEF1F6; display: flex; overflow: hidden; }
.ukp-bar-row .track span { display: block; height: 100%; }
@media (max-width: 992px) { .ukp-report-grid { grid-template-columns: 1fr; } .ukp-report-grid > .card { margin-bottom: 22px; } }

/* Order / customer detail */
.ukp-detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; align-items: start; }
.ukp-detail-grid > div > .card { margin-bottom: 22px; }
.ukp-info-list { list-style: none; margin: 0; padding: 4px 0; }
.ukp-info-list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 20px; }
.ukp-info-list .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--ukp-blue-soft); color: var(--ukp-blue-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ukp-info-list .ic svg { width: 17px; height: 17px; }
.ukp-info-list small { display: block; font-size: 12px; color: var(--ukp-muted); font-weight: 600; }
.ukp-info-list b { font-size: 14.5px; color: var(--ukp-text); word-break: break-word; }
.ukp-items td, .ukp-items th { white-space: nowrap; }
.ukp-items td.detail { white-space: normal; min-width: 220px; font-weight: 600 !important; }
.ukp-items tfoot td { font-weight: 800; background: #F6F8FC; font-family: 'Sora', sans-serif; }
.ukp-items td.num, .ukp-items th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ukp-avatar-lg { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, #2E6BD1, #16233F); color: #fff; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 22px; display: flex; align-items: center; justify-content: center; }
.ukp-person { display: flex; gap: 14px; align-items: center; padding: 20px; border-bottom: 1px solid var(--ukp-line); }
.ukp-person h3 { font-size: 18px; margin: 0; }
.ukp-person p { margin: 2px 0 0; color: var(--ukp-muted); font-size: 13.5px; }
@media (max-width: 992px) { .ukp-detail-grid { grid-template-columns: 1fr; } }
.ukp-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 320px)); gap: 20px; }
.ukp-choice-card { background: #fff; border: 1px solid var(--ukp-line); border-radius: 16px; padding: 26px; display: flex; flex-direction: column; gap: 8px; color: var(--ukp-text) !important; text-decoration: none !important; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ukp-choice-card:hover { border-color: var(--ukp-blue); box-shadow: 0 16px 34px rgba(46,107,209,.14); transform: translateY(-2px); }
.ukp-choice-card .ic { width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.ukp-choice-card .ic svg { width: 26px; height: 26px; }
.ukp-choice-card b { font-family: 'Sora', sans-serif; font-size: 20px; }
.ukp-choice-card span { color: var(--ukp-muted); font-size: 14px; }
@media (max-width: 600px) { .ukp-choice { grid-template-columns: 1fr; } }
body .card.ukp-table-card .card-body { padding: 0 !important; }
body .card.ukp-table-card .table-responsive { border: 0 !important; border-radius: 0 0 var(--ukp-radius) var(--ukp-radius); }
body .table td:last-child { white-space: nowrap; }
body .table td { min-width: 0; }
body .ukp-table-card .table thead th:first-child, body .ukp-table-card .table td:first-child { padding-left: 20px !important; }

/* =========================================================
   Shop module: POS, receipt, bar chart
   ========================================================= */
.ukp-bars { display: flex; align-items: flex-end; gap: 10px; height: 200px; padding-top: 20px; }
.ukp-bar-col { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.ukp-bar-col .b { width: 100%; max-width: 46px; background: #C9D8F3; border-radius: 6px 6px 2px 2px; transition: background .15s; }
.ukp-bar-col:hover .b { background: var(--ukp-blue); }
.ukp-bar-col.is-today .b { background: var(--ukp-blue); }
.ukp-bar-col .v { font-size: 11px; font-weight: 700; color: var(--ukp-muted); white-space: nowrap; }
.ukp-bar-col .l { font-size: 12px; font-weight: 700; color: var(--ukp-muted); }

.ukp-choice-card { position: relative; }
.ukp-choice-card.is-current, .ukp-choice-card.is-picked { border: 2px solid var(--ukp-blue); }

/* POS */
.ukp-pos { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, 1fr); gap: 18px; align-items: start; }
.ukp-pos .card { margin-bottom: 0; }
.ukp-pos-left { min-height: calc(100vh - 150px); display: flex; flex-direction: column; }
.ukp-pos-search { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--ukp-line); }
.ukp-pos-search svg { width: 20px; height: 20px; color: var(--ukp-muted); flex-shrink: 0; }
.ukp-pos-search input { flex: 1; border: 0; outline: 0; font-size: 16px; font-family: inherit; color: var(--ukp-text); background: transparent; height: 40px; }
.ukp-pos-search .kbd { font-size: 12px; font-weight: 800; background: var(--ukp-blue-soft); color: var(--ukp-blue-dark); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.ukp-pos-cats { display: flex; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--ukp-line); overflow-x: auto; }
.ukp-pos-cats .c { border: 1px solid var(--ukp-line); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700; color: var(--ukp-text); white-space: nowrap; cursor: pointer; font-family: inherit; }
.ukp-pos-cats .c.is-active { background: var(--ukp-slate); border-color: var(--ukp-slate); color: #fff; }
.ukp-pos-list { padding: 14px 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; align-content: start; overflow-y: auto; max-height: calc(100vh - 260px); }
.ukp-pos-item { text-align: left; background: #fff; border: 1px solid var(--ukp-line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; font-family: inherit; transition: border-color .12s, box-shadow .12s, transform .12s; }
.ukp-pos-item:hover { border-color: var(--ukp-blue); box-shadow: 0 8px 18px rgba(46,107,209,.12); transform: translateY(-1px); }
.ukp-pos-item:active { transform: scale(.98); }
.ukp-pos-item .n { font-weight: 800; font-size: 14px; color: var(--ukp-text); line-height: 1.25; }
.ukp-pos-item .g { font-size: 12px; color: var(--ukp-muted); }
.ukp-pos-item .p { font-family: 'Sora', sans-serif; font-weight: 800; color: var(--ukp-blue-dark); font-size: 15px; margin-top: 4px; }
.ukp-pos-item .p small { font-family: 'Manrope', sans-serif; font-weight: 600; color: var(--ukp-muted); font-size: 11.5px; }
.ukp-pos-item .s { font-size: 11.5px; color: var(--ukp-muted); font-weight: 600; }
.ukp-pos-item .s.out { color: #B5202A; }
.ukp-pos-item.is-expired { background: #FFF5F5; border-color: #F6CDD0; }

.ukp-pos-right { position: sticky; top: 84px; display: flex; flex-direction: column; max-height: calc(100vh - 110px); }
.ukp-pos-cust { padding: 14px 16px; border-bottom: 1px solid var(--ukp-line); }
.ukp-pos-cust label { font-size: 12px !important; margin-bottom: 4px !important; }
.ukp-pos-cust .form-control { height: 38px; min-height: 38px; }
.ukp-pos-custinfo { margin-top: 8px; font-size: 13px; color: var(--ukp-muted); }
.ukp-pos-cart { flex: 1; overflow-y: auto; min-height: 140px; }
.ukp-pos-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 36px 20px; color: var(--ukp-muted); text-align: center; font-size: 14px; }
.ukp-pos-empty svg { width: 30px; height: 30px; opacity: .5; }
.ukp-pos-line { display: grid; grid-template-columns: 1fr auto 78px 78px 26px; gap: 8px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--ukp-line); }
.ukp-pos-line.flash { animation: ukpFlash .6s ease; }
@keyframes ukpFlash { from { background: #EAF1FD; } to { background: transparent; } }
.ukp-pos-line .nm b { font-size: 13.5px; display: block; line-height: 1.25; }
.ukp-pos-line .nm .warn { font-size: 11.5px; color: #B5202A; font-weight: 700; }
.ukp-pos-line .qt { display: flex; align-items: center; gap: 3px; }
.ukp-pos-line .qt button { width: 26px; height: 30px; border: 1px solid var(--ukp-line); background: #F6F8FC; border-radius: 6px; font-weight: 800; cursor: pointer; color: var(--ukp-text); }
.ukp-pos-line .qt input { width: 54px; height: 30px; text-align: center; border: 1px solid #D6DBE4; border-radius: 6px; font-weight: 700; font-family: inherit; }
.ukp-pos-line .qt small { font-size: 11px; color: var(--ukp-muted); margin-left: 2px; }
.ukp-pos-line .pr input { width: 100%; height: 30px; text-align: right; border: 1px solid #D6DBE4; border-radius: 6px; font-family: inherit; padding: 0 6px; }
.ukp-pos-line .tt { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.ukp-pos-line .rm { border: 0; background: transparent; color: #B5202A; font-size: 20px; cursor: pointer; line-height: 1; }
.ukp-pos-totals { padding: 12px 16px 16px; border-top: 1px solid var(--ukp-line); background: #FAFBFD; }
.ukp-pos-totals .row-t { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 14px; }
.ukp-pos-totals .row-t span { color: var(--ukp-muted); font-weight: 600; }
.ukp-pos-totals .row-t input { width: 130px; height: 36px; min-height: 36px; text-align: right; }
.ukp-pos-totals .row-t.grand { border-top: 1px dashed #CBD3E1; border-bottom: 1px dashed #CBD3E1; margin: 4px 0 8px; padding: 10px 0; }
.ukp-pos-totals .row-t.grand span { color: var(--ukp-text); font-weight: 800; font-size: 16px; }
.ukp-pos-totals .row-t.grand b { font-family: 'Sora', sans-serif; font-size: 26px; color: var(--ukp-text); }
.ukp-pos-totals .row-t.ok b { color: #13A06A; }
.ukp-pos-totals .row-t.due b { color: #B5202A; }
.ukp-pos-methods { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin: 4px 0 6px; }
.ukp-pos-methods .m { height: 36px; border: 1px solid var(--ukp-line); background: #fff; border-radius: 8px; font-size: 12px; font-weight: 800; color: var(--ukp-text); cursor: pointer; font-family: inherit; padding: 0 2px; }
.ukp-pos-methods .m.is-active { background: var(--ukp-slate); border-color: var(--ukp-slate); color: #fff; }
.ukp-pos-save { height: 50px !important; font-size: 16px !important; margin-top: 10px; }
@media (max-width: 1100px) {
    .ukp-pos { grid-template-columns: 1fr; }
    .ukp-pos-right { position: static; max-height: none; }
    .ukp-pos-left { min-height: 0; }
    .ukp-pos-list { max-height: 420px; }
}

/* Receipt (80mm thermal friendly; also fine on A4) */
.ukp-receipt-wrap { display: grid; grid-template-columns: minmax(0, 380px) 280px; gap: 22px; align-items: start; }
.ukp-receipt { background: #fff; border-radius: 12px; padding: 22px 20px; box-shadow: 0 1px 2px rgba(22,35,63,.05), 0 10px 30px rgba(22,35,63,.08); font-family: 'Manrope', Arial, sans-serif; color: #111; font-size: 13px; }
.ukp-receipt .r-head { text-align: center; border-bottom: 1px dashed #999; padding-bottom: 10px; margin-bottom: 8px; }
.ukp-receipt .r-logo { max-height: 50px; max-width: 160px; object-fit: contain; margin-bottom: 6px; }
.ukp-receipt .r-shop { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 18px; }
.ukp-receipt .r-sub { font-size: 12px; color: #444; }
.ukp-receipt .r-meta { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; }
.ukp-receipt .r-items { width: 100%; border-collapse: collapse; margin: 8px 0; }
.ukp-receipt .r-items th { font-size: 11.5px; text-align: left; border-top: 1px dashed #999; border-bottom: 1px dashed #999; padding: 5px 0; }
.ukp-receipt .r-items td { padding: 5px 0; vertical-align: top; border-bottom: 1px dotted #ddd; }
.ukp-receipt .n { text-align: right; white-space: nowrap; padding-left: 6px !important; }
.ukp-receipt .r-tot div { display: flex; justify-content: space-between; padding: 2px 0; }
.ukp-receipt .r-tot .big { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 17px; border-top: 1px dashed #999; border-bottom: 1px dashed #999; padding: 6px 0; margin: 4px 0; }
.ukp-receipt .r-tot .due { font-weight: 800; }
.ukp-receipt .r-foot { text-align: center; margin-top: 12px; font-size: 12px; }
.ukp-receipt .r-foot small { color: #777; }
@media (max-width: 800px) { .ukp-receipt-wrap { grid-template-columns: 1fr; } }
@media print {
    body * { visibility: hidden !important; }
    #receipt, #receipt * { visibility: visible !important; }
    #receipt { position: absolute; left: 0; top: 0; width: 76mm; box-shadow: none; border-radius: 0; padding: 0; font-size: 12px; }
    @page { margin: 4mm; }
}

/* Free trial bar + welcome */
.ukp-trialbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: #EAF1FD; border: 1px solid #C9D8F3; color: var(--ukp-blue-dark); border-radius: 12px; padding: 10px 14px 10px 18px; margin-bottom: 18px; font-size: 14px; }
.ukp-trialbar b { color: var(--ukp-text); }
.ukp-trialbar.is-urgent { background: #FFF1F1; border-color: #F6C9CB; color: #B5202A; }
.ukp-trialbar .btn { height: 34px; display: inline-flex; align-items: center; }
.ukp-welcome { background: radial-gradient(120% 160% at 0% 0%, #2E6BD1 0%, #16233F 65%); color: #fff; border-radius: 16px; padding: 22px 24px; margin-bottom: 22px; position: relative; overflow: hidden; }
.ukp-welcome:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--ukp-cmyk); }
.ukp-welcome-head { display: flex; justify-content: space-between; gap: 12px; }
.ukp-welcome h3 { color: #fff !important; font-size: 20px; margin: 0 0 4px; }
.ukp-welcome p { color: rgba(255,255,255,.75); margin: 0 0 16px; }
.ukp-welcome .close { color: #fff; opacity: .7; text-shadow: none; font-size: 26px; }
.ukp-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ukp-steps li { counter-increment: s; }
.ukp-steps a { display: block; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 14px 14px 14px 52px; position: relative; color: #fff !important; text-decoration: none !important; height: 100%; transition: background .15s; }
.ukp-steps a:hover { background: rgba(255,255,255,.18); }
.ukp-steps a:before { content: counter(s); position: absolute; left: 14px; top: 14px; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--ukp-slate); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.ukp-steps b { display: block; font-size: 14.5px; }
.ukp-steps span { display: block; font-size: 12.5px; color: rgba(255,255,255,.72); margin-top: 2px; }
@media (max-width: 768px) { .ukp-steps { grid-template-columns: 1fr; } }

/* Super admin */
.ukp-sa-actions { display: flex; gap: 6px; align-items: center; }
.ukp-sa-actions form { margin: 0; }
.ukp-sa-actions .btn-success { width: 34px; height: 34px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; background: #E1F5EC !important; border: 0 !important; color: #0E7A50 !important; }
.ukp-sa-actions .btn-success svg { width: 16px; height: 16px; }
.ukp-sa-actions .btn-sm { height: 34px; }
/* Sidebar submenus: no box around open dropdowns */
body .main-sidebar .sidebar-menu li ul.dropdown-menu { border: 0 !important; box-shadow: none !important; margin: 0 !important; border-radius: 0 !important; position: static !important; }
body .main-sidebar .sidebar-menu li a.has-dropdown:after { transform: translateY(-70%) rotate(45deg) !important; }
body .main-sidebar .sidebar-menu li.active > a.has-dropdown:after,
body .main-sidebar .sidebar-menu li a.has-dropdown.toggled:after { transform: translateY(-30%) rotate(-135deg) !important; }
body .main-sidebar .sidebar-menu li ul.dropdown-menu { padding: 2px 0 6px 0 !important; background: transparent !important; }

/* Segmented control + pickers (super admin) */
.ukp-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; background: #EEF1F6; padding: 4px; border-radius: 10px; }
.ukp-seg a, .ukp-seg button { border: 0; background: transparent; border-radius: 8px; padding: 7px 12px; font-weight: 700; font-size: 13px; color: var(--ukp-muted) !important; cursor: pointer; font-family: inherit; text-decoration: none !important; white-space: nowrap; }
.ukp-seg a span { font-weight: 800; color: var(--ukp-text); margin-left: 2px; }
.ukp-seg a.is-on, .ukp-seg button.is-on { background: #fff; color: var(--ukp-text) !important; box-shadow: 0 1px 3px rgba(22,35,63,.12); }
.ukp-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ukp-pick label { margin: 0 !important; cursor: pointer; }
.ukp-pick input { position: absolute; opacity: 0; }
.ukp-pick span { display: inline-flex; align-items: center; height: 42px; padding: 0 16px; border: 1px solid #D6DBE4; border-radius: 10px; font-weight: 700; font-size: 14px; color: var(--ukp-text); background: #fff; }
.ukp-pick input:checked + span { border: 2px solid var(--ukp-blue); background: var(--ukp-blue-soft); color: var(--ukp-blue-dark); }
.ukp-pick input:focus-visible + span { outline: 3px solid rgba(46,107,209,.3); }
.ukp-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.ukp-plan-card { margin-bottom: 0 !important; border-top: 4px solid var(--ukp-green) !important; }
.ukp-plan-card.is-trial { border-top-color: var(--ukp-cyan) !important; }
.ukp-plan-card h3 { font-size: 19px; margin: 10px 0 4px; }
.ukp-plan-card p { color: var(--ukp-muted); font-size: 13.5px; min-height: 40px; margin: 0 0 12px; }
.ukp-plan-card .price b { font-family: 'Sora', sans-serif; font-size: 30px; }
.ukp-plan-card .price span { color: var(--ukp-muted); font-weight: 600; }
.ukp-plan-card .id { margin-top: 12px; font-size: 12px; color: var(--ukp-muted); word-break: break-all; }
.ukp-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; border: 1px solid var(--ukp-line); }

/* Panel messages */
.ukp-flash { display: flex; align-items: flex-start; gap: 10px; border-radius: 12px; font-weight: 600; padding: 12px 44px 12px 14px; }
.ukp-flash > svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.ukp-flash .close { position: absolute; right: 10px; top: 8px; }
.alert.alert-danger.ukp-flash { background: #FDECEC; color: #9E1C24; border: 1px solid #F6C4C6; }
.alert.alert-success.ukp-flash { background: #E6F6EF; color: #0B6B45; border: 1px solid #BFE6D3; }
.alert.alert-warning.ukp-flash { background: #FFF6DD; color: #7A5600; border: 1px solid #F5DE9C; }
.alert.alert-info.ukp-flash { background: #EAF1FD; color: #1D4F9F; border: 1px solid #C9DAF7; }

/* ---------- Orders & invoices lists ---------- */
body .dataTables_wrapper .ukp-dt-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--ukp-line); }
body .dataTables_wrapper .ukp-dt-top .dt-buttons, body .dataTables_wrapper .ukp-dt-top .dataTables_filter { padding: 0 !important; float: none !important; }
body .dataTables_wrapper .ukp-dt-top .dataTables_filter label { margin: 0; font-size: 0; }
body .dataTables_wrapper .ukp-dt-top .dataTables_filter input { margin: 0 !important; width: 260px; max-width: 100%; height: 38px; font-size: 14px; padding-left: 34px !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237A8499' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center; }
body .dataTables_wrapper .ukp-dt-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
body .dataTables_wrapper .ukp-dt-bottom .dataTables_info, body .dataTables_wrapper .ukp-dt-bottom .dataTables_paginate { float: none !important; }
.ukp-hint { display: inline-flex; align-items: center; gap: 6px; color: #0B6B45; font-weight: 600; font-size: 13px; }
.ukp-hint svg { width: 15px; height: 15px; }
.ukp-seg a.is-due span { color: #B5202A; }
.ukp-seg a.is-due.is-on { color: #B5202A !important; }

.ukp-orders td { vertical-align: middle !important; }
.ukp-orders .num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ukp-ono { font-family: 'Sora', 'Manrope', sans-serif; font-weight: 800; font-size: 14.5px; color: var(--ukp-text) !important; }
.ukp-ono:hover { color: var(--ukp-blue) !important; }
.ukp-sub { display: block; font-size: 12.5px; font-weight: 500; color: var(--ukp-muted); margin-top: 2px; }
a.ukp-sub.ukp-wa { color: #0E7A50 !important; font-weight: 600; display: inline-block; }
.ukp-cust { font-weight: 700; color: var(--ukp-text); }
.ukp-due, .ukp-paid { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.ukp-due { background: #FDECEC; color: #B5202A; }
.ukp-paid { background: #E6F6EF; color: #0B6B45; }
.ukp-orders .num .ukp-due, .ukp-orders .num .ukp-paid { display: inline-block; }
.ukp-in { color: #0B6B45; font-weight: 800; }
.ukp-flag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; vertical-align: 1px; }
.ukp-flag.is-late { background: #FDECEC; color: #B5202A; }
.ukp-flag.is-today { background: #FFF1D6; color: #8A5A00; }
.ukp-flag.is-soon { background: #EAF1FD; color: #1D4F9F; }
.ukp-method { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.ukp-method svg { width: 15px; height: 15px; color: var(--ukp-muted); }
tr.is-cancelled td { opacity: .55; }
tr.is-cancelled td:last-child { opacity: 1; }

.ukp-acts { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }
.ukp-ic { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--ukp-line); background: #fff; color: var(--ukp-slate, #475069) !important; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; flex-shrink: 0; transition: background .15s, border-color .15s; }
.ukp-ic:hover { background: var(--ukp-blue-soft); border-color: #C9DAF7; color: var(--ukp-blue) !important; }
.ukp-ic:focus-visible { outline: 3px solid rgba(46,107,209,.35); outline-offset: 1px; }
.ukp-ic svg { width: 16px; height: 16px; }
.ukp-ic.is-wa { color: #128C4A !important; border-color: #BFE6D3; background: #F1FBF6; }
.ukp-ic.is-wa:hover { background: #E1F6EB; color: #0B6B45 !important; }
.ukp-ic.is-wa.is-remind { background: #25D366; border-color: #25D366; color: #fff !important; }
.ukp-ic.is-wa.is-remind:hover { background: #1EB857; }
.ukp-ic.is-pay { color: var(--ukp-blue) !important; }
.ukp-ic.is-ok { color: #0B6B45 !important; }
.ukp-ic.is-danger { color: #B5202A !important; }
.ukp-ic.is-danger:hover { background: #FDECEC; border-color: #F6C4C6; }
@media (max-width: 768px) {
    body .dataTables_wrapper .ukp-dt-top .dataTables_filter input { width: 100%; }
    body .dataTables_wrapper .ukp-dt-top .dataTables_filter, body .dataTables_wrapper .ukp-dt-top .dataTables_filter label { width: 100%; }
}
.ukp-orders td:first-child .ukp-sub { white-space: nowrap; }
.ukp-orders a.ukp-sub.ukp-wa { display: block; width: fit-content; margin-top: 2px; }
.ukp-orders .num b { display: block; }
.ukp-orders .num .ukp-due, .ukp-orders .num .ukp-paid { margin-top: 3px; }
body .dataTables_wrapper .ukp-dt-top .dataTables_filter input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237A8499' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 11px center !important; }
body.ukp-panel .main-content { padding-bottom: 96px; }

/* ---------- New order form ---------- */
.ukp-order-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.ukp-order-grid > div > .card { margin-bottom: 22px; }
.ukp-order-side { position: sticky; top: 84px; }
.ukp-quickdates { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ukp-quickdates button { border: 1px solid var(--ukp-line); background: #fff; border-radius: 999px; padding: 4px 11px; font-size: 12.5px; font-weight: 700; color: var(--ukp-slate, #475069); cursor: pointer; }
.ukp-quickdates button:hover { border-color: var(--ukp-blue); color: var(--ukp-blue); }
.ukp-lines { padding: 6px 16px 0; }
.ukp-line { display: grid; gap: 8px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--ukp-line); }
.ukp-lines.is-flex .ukp-line { grid-template-columns: minmax(170px, 2.2fr) repeat(5, minmax(64px, .8fr)) minmax(90px, 1fr) 34px; }
.ukp-lines.is-offset .ukp-line { grid-template-columns: minmax(200px, 3fr) minmax(80px, 1fr) minmax(70px, .8fr) minmax(70px, .8fr) minmax(100px, 1.1fr) 34px; }
.ukp-line-head { padding: 8px 0; border-bottom: 0; }
.ukp-line-head span { font-size: 11.5px; font-weight: 800; color: var(--ukp-muted); text-transform: uppercase; letter-spacing: .04em; }
.ukp-line-head .num, .ukp-line input.num { text-align: right; }
.ukp-cell { margin: 0 !important; display: block; min-width: 0; }
.ukp-cell .lbl { display: none; }
.ukp-line .form-control { height: 40px; min-height: 40px; padding: 6px 10px; }
.ukp-line textarea.form-control { height: auto; min-height: 40px; resize: none; overflow: hidden; line-height: 1.4; padding-top: 9px; }
.ukp-line .is-calc { background: #F6F8FC !important; font-weight: 700; }
.ukp-line .js-remove { margin-top: 3px; }
.ukp-line .js-remove:disabled { opacity: .35; cursor: default; }
.ukp-lines-foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 16px; }
.ukp-lines-foot .btn svg { width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; }
.ukp-sum-card .card-body { padding: 20px !important; }
.ukp-sum-row { display: flex; justify-content: space-between; padding: 5px 0; color: var(--ukp-muted); font-weight: 600; }
.ukp-sum-row b { color: var(--ukp-text); }
.ukp-sum-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--ukp-line); font-weight: 800; }
.ukp-sum-total b { font-family: 'Sora', 'Manrope', sans-serif; font-size: 26px; font-variant-numeric: tabular-nums; }
.ukp-sum-total small, .ukp-sum-due small { font-size: 13px; color: var(--ukp-muted); font-weight: 700; }
.ukp-sum-due { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 12px; background: #FDECEC; color: #9E1C24; font-weight: 800; }
.ukp-sum-due b { font-family: 'Sora', 'Manrope', sans-serif; font-size: 20px; }
.ukp-sum-due.is-zero { background: #E6F6EF; color: #0B6B45; }
.ukp-pick-sm { gap: 6px; }
.ukp-pick-sm span { height: 36px; padding: 0 12px; font-size: 13px; }
.ukp-err { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #FDECEC; color: #9E1C24; font-weight: 600; font-size: 13.5px; }
@media (max-width: 1100px) { .ukp-order-grid { grid-template-columns: 1fr; } .ukp-order-side { position: static; } }
@media (max-width: 900px) {
    .ukp-line-head { display: none; }
    .ukp-lines.is-flex .ukp-line, .ukp-lines.is-offset .ukp-line { grid-template-columns: repeat(2, minmax(0, 1fr)) 34px; background: #fff; }
    .ukp-cell-detail { grid-column: 1 / 3; }
    .ukp-line .js-remove { grid-column: 3; grid-row: 1; }
    .ukp-cell .lbl { display: block; font-size: 11.5px; font-weight: 800; color: var(--ukp-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
}
body .ukp-line textarea.form-control { min-height: 40px !important; height: 40px; }
@media (max-width: 900px) {
    .ukp-line { position: relative; }
    body .ukp-lines.is-flex .ukp-line, body .ukp-lines.is-offset .ukp-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ukp-cell-detail { grid-column: 1 / -1; padding-right: 44px; }
    .ukp-line .js-remove { position: absolute; top: 28px; right: 0; margin: 0; }
}

/* ---------- List pages (Orders, Invoices, Customers) ---------- */
.ukp-list-card { border-radius: 18px !important; overflow: hidden; }
.ukp-list-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 22px 26px; border-bottom: 1px solid var(--ukp-line); }
.ukp-list-head h2 { margin: 0; font-size: 21px; font-weight: 700; color: var(--ukp-text); display: flex; align-items: baseline; gap: 10px; }
.ukp-list-head h2 span { font-size: 15px; font-weight: 600; color: var(--ukp-muted); }
.ukp-list-head-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ukp-list-cta { height: 48px; padding: 0 24px !important; font-size: 16px !important; font-weight: 700 !important; border-radius: 10px !important; display: inline-flex !important; align-items: center; }
.ukp-list-note { margin: 18px 26px 0; color: var(--ukp-slate, #475069); font-size: 15px; }
.ukp-list-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 16px 26px 0; }
.ukp-list-tabs a { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--ukp-line); font-size: 13px; font-weight: 700; color: var(--ukp-slate, #475069) !important; text-decoration: none !important; background: #fff; }
.ukp-list-tabs a span { color: var(--ukp-muted); margin-left: 2px; }
.ukp-list-tabs a:hover { border-color: #C9D1DE; }
.ukp-list-tabs a.is-on { background: var(--ukp-navy, #16233F); border-color: var(--ukp-navy, #16233F); color: #fff !important; }
.ukp-list-tabs a.is-on span { color: rgba(255,255,255,.7); }
.ukp-list-tabs a.is-due span { color: #C62828; }
.ukp-list-tabs a.is-due.is-on { background: #C62828; border-color: #C62828; }
.ukp-list-tabs a.is-due.is-on span { color: rgba(255,255,255,.8); }
.ukp-list-card .table-responsive { border: 0 !important; padding: 0 26px 10px; }

body .ukp-list-card .dataTables_wrapper .ukp-dt-top { border-bottom: 0; padding: 18px 0 16px; }
body .ukp-list-card .dataTables_wrapper .dt-buttons .dt-button, body .ukp-list-card .dataTables_wrapper .dt-buttons .btn { height: 44px; padding: 0 16px !important; font-size: 15px !important; font-weight: 600 !important; color: var(--ukp-text) !important; border-radius: 10px !important; margin-right: 8px; display: inline-flex; align-items: center; gap: 8px; }
.dt-buttons .fa-file-excel { color: #1D6F42; } .dt-buttons .fa-file-pdf { color: #C62828; } .dt-buttons .fa-print { color: var(--ukp-text); }
body .ukp-list-card .dataTables_wrapper .ukp-dt-top .dataTables_filter label { font-size: 15px; font-weight: 600; color: var(--ukp-slate, #475069); display: flex; align-items: center; gap: 10px; }
body .ukp-list-card .dataTables_wrapper .ukp-dt-top .dataTables_filter input { height: 44px; width: 264px; border-radius: 10px !important; padding-left: 12px !important; background-image: none !important; }
body .ukp-list-card .dataTables_wrapper .ukp-dt-bottom { padding: 6px 0 8px; }

.ukp-list thead th { background: #F7F7F5 !important; color: #5B6679 !important; font-size: 12.5px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .06em; padding: 14px !important; border: 0 !important; white-space: nowrap; }
.ukp-list tbody td { padding: 14px !important; border-top: 1px solid #EFEFEC !important; vertical-align: middle !important; font-size: 15px; color: var(--ukp-text); }
.ukp-list tbody tr:nth-child(even) td { background: #FAFAF8; }
.ukp-list tbody tr:hover td { background: #F3F6FC !important; }
.ukp-list .ukp-ono { font-size: 16px; }
.ukp-list .ukp-sub { font-size: 14px; }
.ukp-cc { display: flex; align-items: center; gap: 12px; min-width: 200px; padding: 0; border: 0; }
.ukp-av { width: 40px; height: 40px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: .02em; }
.ukp-person-txt { display: flex; flex-direction: column; min-width: 0; }
.ukp-person-name { font-weight: 600; color: var(--ukp-text) !important; font-size: 15.5px; line-height: 1.3; }
a.ukp-person-name:hover { color: var(--ukp-blue) !important; }
.ukp-person-wa { color: #14803C !important; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; width: fit-content; }
.ukp-person-wa.is-plain { color: var(--ukp-muted) !important; }
.ukp-person-wa i { font-size: 14px; }
.ukp-type { display: inline-block; padding: 5px 11px; border-radius: 8px; font-size: 13.5px; font-weight: 600; }
.ukp-type.is-offset { background: #FFF1E0; color: #B25E00; }
.ukp-type.is-flex { background: #EEF1F6; color: #3D4A63; }
.ukp-date { display: block; }
.ukp-when { display: block; font-size: 14px; font-weight: 600; margin-top: 2px; }
.ukp-when.is-late { color: #C62828; }
.ukp-when.is-today { color: #A35F00; }
.ukp-when.is-soon { color: #1F5FA8; }
.ukp-amt { font-weight: 700; font-size: 15.5px; font-variant-numeric: tabular-nums; }
.ukp-amt.is-paid { color: #9A5B00; }
.ukp-amt.is-red { color: #C62828; }
.ukp-amt.is-green { color: #14803C; }
.ukp-fully { color: #14803C; font-weight: 700; }
.ukp-chip { display: inline-block; margin-top: 4px; padding: 3px 10px; border-radius: 7px; background: #EFEFEC; font-size: 13px; font-weight: 600; color: var(--ukp-slate, #475069); }
.ukp-list .ukp-acts { justify-content: flex-start; }
.ukp-list .ukp-ic { width: 38px; height: 38px; border-radius: 10px; border-color: #E4E4E0; font-size: 15px; color: var(--ukp-text) !important; }
.ukp-ic.is-amber { color: #B25E00 !important; }
.ukp-ic.is-green { color: #14803C !important; }
.ukp-ic.is-green:hover { background: #E8F6EE; border-color: #BFE6D3; }
.ukp-list tr.is-cancelled td { opacity: .55; }
.ukp-list tr.is-cancelled td:last-child { opacity: 1; }
@media (max-width: 768px) {
    .ukp-list-head, .ukp-list-tabs { padding-left: 16px; padding-right: 16px; }
    .ukp-list-card .table-responsive { padding: 0 12px 10px; }
    body .ukp-list-card .dataTables_wrapper .ukp-dt-top .dataTables_filter input { width: 100%; }
    .ukp-list-cta { height: 42px; }
}
.ukp-st { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.ukp-st.is-new { background: #FDECEF; color: #C2185B; }
.ukp-st.is-working { background: #FFF3DC; color: #9A5B00; }
.ukp-st.is-designer { background: #E8F0FD; color: #1F5FA8; }
.ukp-st.is-done { background: #E3F5EA; color: #14803C; }
.ukp-st.is-cancel { background: #EFEFEC; color: #6B7280; }
body .table.ukp-list { border-collapse: collapse !important; border-spacing: 0 !important; margin: 0 !important; }
body .table.ukp-list td, body .table.ukp-list th { border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important; box-shadow: none !important; }
.ukp-list .ukp-date, .ukp-list td:first-child .ukp-sub, .ukp-list .ukp-person-name, .ukp-list .ukp-person-wa, .ukp-list .ukp-amt { white-space: nowrap; }
body .dataTables_wrapper .dt-buttons .dt-button > span { display: inline-flex; align-items: center; gap: 8px; }
body .dataTables_wrapper .dt-buttons .dt-button i { display: inline-block; font-size: 15px; }
body .ukp-list-card .dataTables_wrapper .dt-buttons .dt-button { display: inline-flex !important; flex-direction: row !important; }
body .dataTables_wrapper .dt-buttons .btn > span { display: inline-flex; align-items: center; gap: 8px; }
body .dataTables_wrapper .dt-buttons .btn i { display: inline-block; font-size: 15px; }
body .ukp-list-card .dataTables_wrapper .dt-buttons.btn-group { display: flex; gap: 8px; }
body .ukp-list-card .dataTables_wrapper .dt-buttons .btn { display: inline-flex !important; align-items: center; box-shadow: none !important; }
body .ukp-list-card .dataTables_wrapper .dt-buttons .btn { width: auto !important; min-width: 0 !important; flex: 0 0 auto !important; white-space: nowrap; }
.ukp-list .ukp-nopay { white-space: nowrap; color: var(--ukp-muted); font-size: 14px; }
body .table.ukp-list thead th { text-transform: uppercase !important; letter-spacing: .06em !important; background: #F7F7F5 !important; }
.ukp-list .ukp-ic { width: 36px !important; height: 36px !important; }
.ukp-list .ukp-acts { gap: 5px; }
.ukp-list td .ukp-sub { white-space: nowrap; }
.ukp-list tbody td { padding: 13px 12px !important; }
.ukp-list thead th { padding: 14px 12px !important; }

/* ---------- Sign-in pages (extra) ---------- */
.ukp-auth-kicker { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #F2B91B; margin-bottom: 10px; }
.ukp-auth-points { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; max-width: 420px; }
.ukp-auth-points li { display: flex; gap: 12px; align-items: flex-start; color: rgba(255,255,255,.8); font-size: 15px; line-height: 1.5; }
.ukp-auth-points b { color: #fff; }
.ukp-auth-points i { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.1); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; }
.ukp-auth-foot { font-size: 13px; margin: 0; }
.ukp-auth-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: #F3EEFB; color: #5B2C83; font-weight: 800; font-size: 12.5px; margin-bottom: 14px; }
.ukp-auth-alert { padding: 11px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; margin-bottom: 16px; line-height: 1.45; }
.ukp-auth-alert.is-err { background: #FDECEC; color: #9E1C24; border: 1px solid #F6C4C6; }
.ukp-auth-alert.is-ok { background: #E6F6EF; color: #0B6B45; border: 1px solid #BFE6D3; }
.ukp-auth-inline-err { padding: 10px 12px; border-radius: 10px; background: #FDECEC; color: #9E1C24; font-weight: 600; font-size: 13.5px; margin: 0 0 12px; }
.ukp-pass { position: relative; }
.ukp-pass .form-control { padding-right: 48px; }
.ukp-pass-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 38px; border: 0; background: transparent; color: var(--ukp-muted); border-radius: 8px; cursor: pointer; }
.ukp-pass-toggle:hover { color: var(--ukp-text); background: #F1F3F7; }
.ukp-auth-card .form-control { height: 48px; font-size: 15px; }
.ukp-auth-help { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--ukp-line); color: var(--ukp-muted); font-size: 13.5px; }
.ukp-auth-help p { margin: 0 0 8px; }
.ukp-auth-help a { font-weight: 700; }
@media (max-width: 900px) {
    .ukp-auth-points { display: none; }
    .ukp-auth-side h1 { margin-bottom: 0; }
    .ukp-auth-foot { display: none; }
    .ukp-auth-form { padding: 28px 18px 40px; align-items: flex-start; }
}

/* ---------- Designer panel ---------- */
.ukp-dz-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.ukp-dz-head h1 { font-size: 26px; margin: 0; }
.ukp-dz-head p { margin: 4px 0 0; color: var(--ukp-muted); }
.ukp-dz-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.ukp-dz-stat { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 16px; padding: 18px; text-decoration: none !important; color: var(--ukp-text) !important; box-shadow: 0 1px 2px rgba(22,35,63,.05), 0 6px 18px rgba(22,35,63,.05); border: 1px solid transparent; transition: border-color .15s; }
.ukp-dz-stat:hover { border-color: #C9DAF7; }
.ukp-dz-stat .ic { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.ukp-dz-stat b { display: block; font-family: 'Sora', 'Manrope', sans-serif; font-size: 26px; line-height: 1.1; }
.ukp-dz-stat span:last-child { color: var(--ukp-muted); font-weight: 600; }
.ukp-dz-stat.is-new .ic { background: #FDECEF; color: #C2185B; }
.ukp-dz-stat.is-working .ic { background: #FFF3DC; color: #9A5B00; }
.ukp-dz-stat.is-done .ic { background: #E3F5EA; color: #14803C; }
.ukp-dz-stat.is-all .ic { background: #EAF1FD; color: #1F5FA8; }
.ukp-jobs { padding: 6px 12px 12px; }
.ukp-job { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; text-decoration: none !important; color: var(--ukp-text) !important; border-bottom: 1px solid #EFEFEC; }
.ukp-job:hover { background: #F3F6FC; }
.ukp-job-main { min-width: 0; display: flex; flex-direction: column; }
.ukp-job-main b { font-size: 15.5px; }
.ukp-job-main span { color: var(--ukp-muted); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ukp-job-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.ukp-job-side .ukp-when { margin: 0; font-size: 13px; }
.ukp-note { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px dashed var(--ukp-line); }
.ukp-note.is-past { opacity: .7; }
.ukp-note small { display: block; color: var(--ukp-muted); font-size: 12.5px; margin-top: 2px; }
.ukp-note-date { width: 46px; flex-shrink: 0; text-align: center; background: #F3F6FC; border-radius: 10px; padding: 4px 0; font-size: 11.5px; font-weight: 700; color: var(--ukp-muted); text-transform: uppercase; }
.ukp-note-date b { display: block; font-size: 18px; color: var(--ukp-text); line-height: 1.1; }
.ukp-note-form { margin-top: 14px; }
.ukp-note-body { font-size: 15px; line-height: 1.6; }
.ukp-photo-row { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.ukp-photo { width: 72px !important; height: 72px !important; border-radius: 50%; object-fit: cover; font-size: 22px !important; }
.ukp-open-btn { height: 36px; padding: 0 16px !important; display: inline-flex !important; align-items: center; }
@media (max-width: 992px) { .ukp-dz-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ukp-dz-stat { padding: 14px; gap: 10px; } .ukp-dz-stat .ic { width: 38px; height: 38px; } .ukp-dz-stat b { font-size: 22px; } .ukp-dz-head h1 { font-size: 22px; } }
.ukp-order-pick { display: grid; gap: 8px; }
.ukp-order-opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--ukp-line); border-radius: 12px; cursor: pointer; margin: 0 !important; }
.ukp-order-opt:hover { border-color: #C9DAF7; }
.ukp-order-opt input { accent-color: var(--ukp-blue); width: 18px; height: 18px; flex-shrink: 0; }
.ukp-order-opt span { flex: 1; min-width: 0; }
.ukp-order-opt small { display: block; color: var(--ukp-muted); font-size: 12.5px; }
.ukp-order-opt em { font-style: normal; font-weight: 800; color: #B5202A; white-space: nowrap; }
.ukp-order-opt:has(input:checked) { border: 2px solid var(--ukp-blue); background: var(--ukp-blue-soft); }

/* ---------- Older table cards: same look as list pages ---------- */
body .ukp-table-card { border-radius: 18px !important; overflow: hidden; }
body .ukp-table-card .table thead th { background: #F7F7F5 !important; color: #5B6679 !important; font-size: 12.5px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .06em !important; padding: 14px 12px !important; border: 0 !important; white-space: nowrap; }
body .ukp-table-card .table tbody td { padding: 13px 12px !important; border-top: 1px solid #EFEFEC !important; vertical-align: middle !important; font-size: 15px; }
body .ukp-table-card .table tbody tr:nth-child(even) td { background: #FAFAF8; }
body .ukp-table-card .table { border-collapse: collapse !important; }
body .ukp-table-card .dataTables_wrapper .ukp-dt-top { padding: 16px 20px; border-bottom: 0; }
body .ukp-table-card .dataTables_wrapper .dt-buttons .btn { width: auto !important; flex: 0 0 auto !important; height: 42px; padding: 0 14px !important; font-size: 14.5px !important; font-weight: 600 !important; border-radius: 10px !important; display: inline-flex !important; align-items: center; box-shadow: none !important; background: #fff !important; border: 1px solid var(--ukp-line) !important; color: var(--ukp-text) !important; }
body .ukp-table-card .dataTables_wrapper .dt-buttons.btn-group { display: flex; gap: 8px; }
body .ukp-table-card .dataTables_wrapper .ukp-dt-top .dataTables_filter label { font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
body .ukp-table-card .dataTables_wrapper .ukp-dt-top .dataTables_filter input { height: 42px; width: 240px; border-radius: 10px !important; padding-left: 12px !important; background-image: none !important; }
body .ukp-table-card .dataTables_wrapper .ukp-dt-bottom { padding: 6px 20px 10px; }
body .ukp-list-card .dt-buttons .btn { background: #fff !important; border: 1px solid var(--ukp-line) !important; }
.ukp-list-cta-light { background: #fff !important; border: 1px solid var(--ukp-line) !important; color: var(--ukp-text) !important; }

/* ---------- Phones: tables become cards ---------- */
@media (max-width: 768px) {
    table.ukp-rt thead { display: none; }
    table.ukp-rt, table.ukp-rt tbody, table.ukp-rt tfoot, table.ukp-rt tr, table.ukp-rt td { display: block; width: 100% !important; }
    table.ukp-rt tbody tr, table.ukp-rt tfoot tr { background: #fff; border: 1px solid #E7E7E3; border-radius: 14px; margin: 0 0 12px; padding: 4px 14px; box-shadow: 0 1px 2px rgba(22,35,63,.04); }
    table.ukp-rt tbody tr:nth-child(even) td, table.ukp-rt tbody tr td { background: transparent !important; }
    table.ukp-rt td { display: flex !important; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0 !important; border: 0 !important; border-top: 1px dashed #ECECE8 !important; text-align: right; min-height: 44px; font-size: 15px; }
    table.ukp-rt td:first-child { border-top: 0 !important; }
    table.ukp-rt td::before { content: attr(data-label); font-size: 11.5px; font-weight: 800; color: #6B7686; text-transform: uppercase; letter-spacing: .05em; text-align: left; flex-shrink: 0; }
    table.ukp-rt td[data-label=""]::before, table.ukp-rt td:not([data-label])::before { display: none; }
    table.ukp-rt td[data-label=""] { justify-content: flex-start; }
    table.ukp-rt td > * { text-align: right; }
    table.ukp-rt td .ukp-cc, table.ukp-rt td .ukp-acts { justify-content: flex-end; flex-wrap: wrap; }
    table.ukp-rt td[data-label=""] .ukp-acts { justify-content: flex-start; }
    table.ukp-rt td .ukp-cc { text-align: left; min-width: 0; }
    table.ukp-rt td .ukp-person-txt { align-items: flex-end; text-align: right; }
    table.ukp-rt tr.is-cancelled { opacity: .7; }
    table.ukp-rt td.dataTables_empty { justify-content: center; }
    table.ukp-rt td.dataTables_empty::before { display: none; }
    .ukp-list-card .table-responsive, .ukp-table-card .table-responsive { overflow: visible; padding: 0 12px 6px !important; }
    body .ukp-list-card .dataTables_wrapper .ukp-dt-top, body .ukp-table-card .dataTables_wrapper .ukp-dt-top { padding: 12px 0; flex-direction: column; align-items: stretch; }
    body .dataTables_wrapper .dt-buttons.btn-group { justify-content: flex-start; }
    body .dataTables_wrapper .dataTables_filter label { width: 100%; }
    body .dataTables_wrapper .dataTables_filter input { width: 100% !important; flex: 1; }
    body .dataTables_wrapper .ukp-dt-bottom { justify-content: center; }
    .ukp-list-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .ukp-list-tabs a { flex-shrink: 0; }
    .ukp-list-head h2 { font-size: 19px; }
    .ukp-list-cta { height: 42px; padding: 0 16px !important; font-size: 15px !important; }
    .ukp-list-note { margin: 12px 16px 0; font-size: 14px; }
}
@media (max-width: 768px) {
    table.ukp-rt, table.ukp-rt tbody, table.ukp-rt tr, table.ukp-rt td { min-width: 0 !important; max-width: 100% !important; }
    table.ukp-rt td .ukp-person-name, table.ukp-rt td .ukp-person-wa { white-space: normal; }
    .dataTables_wrapper.container-fluid { padding: 0 !important; }
}
@media (max-width: 768px) {
    table.ukp-rt td { display: grid !important; grid-template-columns: minmax(84px, auto) 1fr; column-gap: 12px; row-gap: 2px; align-items: center; padding: 8px 0 !important; min-height: 40px; }
    table.ukp-rt td::before { grid-column: 1; grid-row: 1 / span 6; align-self: center; }
    table.ukp-rt td > * { grid-column: 2; justify-self: end; margin-top: 0 !important; }
    table.ukp-rt td[data-label=""] { grid-template-columns: 1fr; }
    table.ukp-rt td[data-label=""] > * { grid-column: 1; justify-self: start; }
    table.ukp-rt td .ukp-sub { margin: 0; }
}
.ukp-img-pick { display: flex; gap: 12px; align-items: center; }
.ukp-img-logo { width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--ukp-line); border-radius: 10px; background: #fff; flex-shrink: 0; }
.ukp-img-banner { display: block; width: 100%; height: auto; border: 1px solid var(--ukp-line); border-radius: 10px; margin-bottom: 8px; }
.ukp-designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; padding: 18px 26px 26px; }
.ukp-design { border: 1px solid var(--ukp-line); border-radius: 14px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.ukp-design .img { display: block; aspect-ratio: 4 / 3; background: #F3F5F9; }
.ukp-design .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ukp-design .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ukp-design h3 { font-size: 15px; margin: 0; line-height: 1.35; }
.ukp-design .foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
@media (max-width: 768px) { .ukp-designs { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 14px 12px 16px; } }
.ukp-cust-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 24px; border-radius: 18px !important; }
.ukp-cust-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ukp-cust-id h1 { font-size: 24px; margin: 2px 0 2px; }
.ukp-cust-id .ukp-back { font-size: 13px; }
@media (max-width: 768px) { .ukp-cust-head { padding: 16px; } .ukp-cust-head .ukp-list-head-btns { width: 100%; } .ukp-cust-head .ukp-list-head-btns .btn { flex: 1; justify-content: center; } }
.ukp-dz-stat span:last-child b { color: var(--ukp-text); }
.ukp-detail-grid > *, .ukp-order-grid > * { min-width: 0; }
.card.ukp-cust-head { flex-direction: row !important; }
/* Old pages pushed the backdrop behind everything; keep it just under the dialog */
body .modal-backdrop { z-index: 1040 !important; }
body .modal { z-index: 1050 !important; }

/* ---- Super admin: reset account ---- */
.card.ukp-danger-card { border: 1px solid #F3C9CD !important; }
.card.ukp-danger-card .card-header h4 { color: #B5202A !important; }
.ukp-danger-note { font-size: 13px; color: #5B6478; margin: 0 0 10px; line-height: 1.5; }
.ukp-reset-list { list-style: none; margin: 0 0 12px; padding: 0; border: 1px solid #E6EAF2; border-radius: 10px; overflow: hidden; }
.ukp-reset-list li { display: flex; justify-content: space-between; padding: 7px 12px; font-size: 13px; border-top: 1px solid #EEF1F6; }
.ukp-reset-list li:first-child { border-top: 0; }
.ukp-reset-list li b { font-family: 'Sora', sans-serif; color: #16233F; }
.ukp-danger-box { background: #FDECEE; border: 1px solid #F3C9CD; color: #8E1A22; border-radius: 10px; padding: 10px 12px; font-size: 13.5px; line-height: 1.5; }

/* ---- Super admin: SEO ---- */
.ukp-seo-warn { margin: 16px 26px 0; background: #FFF6DD; border: 1px solid #F2D58A; color: #6B4E00; border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.5; }
.ukp-seo-pages { display: grid; gap: 10px; }
.ukp-seo-page { border: 1px solid #E6EAF2; border-radius: 14px; background: #fff; }
.ukp-seo-page[open] { border-color: #C9D6EE; box-shadow: 0 8px 24px rgba(22,35,63,.06); }
.ukp-seo-page > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.ukp-seo-page > summary::-webkit-details-marker { display: none; }
.ukp-seo-score { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 15px; flex-shrink: 0; }
.ukp-seo-score.is-good, .ukp-count.is-good { background: #E3F5EC; color: #0E7A50; }
.ukp-seo-score.is-mid, .ukp-count.is-mid { background: #FFF3D6; color: #8A5A00; }
.ukp-seo-score.is-bad, .ukp-count.is-bad { background: #FDECEE; color: #B5202A; }
.ukp-seo-sum { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.ukp-seo-sum b { color: #16233F; font-size: 15px; }
.ukp-seo-sum small { color: #6B7489; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ukp-seo-edit { font-size: 13px; font-weight: 700; color: #2E6BD1; padding: 6px 12px; border-radius: 999px; background: #EAF1FD; }
.ukp-seo-page[open] .ukp-seo-edit { background: #16233F; color: #fff; }
.ukp-seo-body { padding: 4px 16px 16px; border-top: 1px solid #EEF1F6; }
.ukp-serp { margin: 14px 0; padding: 14px 16px; border-radius: 12px; background: #F8FAFD; border: 1px solid #EEF1F6; font-family: Arial, sans-serif; max-width: 640px; }
.ukp-serp-url { font-size: 13px; color: #202124; margin-bottom: 4px; }
.ukp-serp-title { font-size: 19px; color: #1A0DAB; line-height: 1.3; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ukp-serp-desc { font-size: 14px; color: #4D5156; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ukp-seo-checks { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.ukp-seo-checks li { font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.ukp-seo-checks li.ok { background: #E3F5EC; color: #0E7A50; }
.ukp-seo-checks li.bad { background: #FDECEE; color: #B5202A; }
.ukp-seo-form label small, .ukp-seo-settings label small { font-weight: 600; color: #6B7489; }
.ukp-count { float: right; padding: 1px 8px; border-radius: 999px; font-size: 11.5px !important; background: #F1F3F8; }
.ukp-seo-hint { font-size: 12.5px; color: #6B7489; margin: -4px 0 10px; }
.ukp-seo-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ukp-seo-reset { margin-top: 6px; }
.ukp-seo-reset .btn-link { padding: 0; font-size: 13px; color: #6B7489 !important; }
.ukp-seo-img { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; }
.ukp-seo-img img { width: 120px; height: 63px; object-fit: cover; border-radius: 8px; border: 1px solid #E6EAF2; }
.ukp-seo-settings h3 { font-size: 16px; margin: 22px 0 12px; color: #16233F; }
.ukp-seo-settings h3:first-of-type { margin-top: 4px; }
.ukp-seo-health { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; }
.ukp-seo-health li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid #E6EAF2; border-radius: 12px; }
.ukp-seo-health .dot { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
.ukp-seo-health li.ok .dot { background: #E3F5EC; color: #0E7A50; }
.ukp-seo-health li.bad { border-color: #F3C9CD; background: #FFFAFA; }
.ukp-seo-health li.bad .dot { background: #B5202A; color: #fff; }
.ukp-seo-health li span:last-child { display: flex; flex-direction: column; gap: 2px; }
.ukp-seo-health small { color: #5B6478; font-size: 13px; }
.ukp-seo-guide { background: #F4F7FC; border-radius: 14px; padding: 18px 20px; }
.ukp-seo-guide h3 { font-size: 17px; margin: 0 0 8px; color: #16233F; }
.ukp-seo-guide ol { padding-left: 20px; margin: 10px 0 12px; }
.ukp-seo-guide li { margin-bottom: 8px; line-height: 1.5; }
@media (max-width: 768px) { .ukp-seo-edit { display: none; } .ukp-serp-title { white-space: normal; } }