/* ==========================================================================
   SHADCN UI ULTRA-MODERN THEME OVERRIDES (Admin & Customer Complete Redesign)
   ========================================================================== */

/* 1. Root Design Tokens */
:root {
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --background: #f8fafc;
    --foreground: #0f172a;
    --card: #ffffff;
    --card-foreground: #0f172a;
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-foreground: #ffffff;
    --secondary: #f1f5f9;
    --secondary-foreground: #0f172a;
    --muted: #f8fafc;
    --muted-foreground: #64748b;
    --border: #e2e8f0;
    --input: #cbd5e1;
    --ring: #2563eb;
    --radius: 0.5rem;
}

/* 2. Global Resets & Typography */
body, html {
    font-family: var(--font-sans) !important;
    background-color: #f8fafc !important;
    color: #0f172a !important;
    -webkit-font-smoothing: antialiased !important;
}

.wrapper, .main, .main__content, .content-wrapper {
    background-color: #f8fafc !important;
}

/* ==========================================================================
   3. LEFT SIDEBAR OVERHAUL (FIX OVERLAPPING SUBMENU TEXT)
   ========================================================================== */
.main-menu {
    background-color: #0f172a !important;
    border-right: 1px solid #1e293b !important;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.05) !important;
}

/* Top Logo Header */
.navbar__header {
    height: 60px !important;
    padding: 0 16px !important;
    border-bottom: 1px solid #1e293b !important;
    display: flex !important;
    align-items: center !important;
}

.navbar__toggler {
    width: 36px !important;
    color: #94a3b8 !important;
    display: flex !important;
    align-items: center !important;
}

.navbar__toggler .icon {
    width: 20px !important;
    height: 20px !important;
    fill: currentColor !important;
}

.navbar__logo {
    font-family: var(--font-sans) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -0.02em !important;
}

/* Main Navigation Item List */
.navbar__list {
    padding: 12px 8px !important;
}

/* Hide legacy horizontal divider lines */
.navbar__list li.separator {
    display: none !important;
}

/* List Item Container - MUST BE height: auto to allow submenus to expand! */
.navbar__list .listitem {
    margin: 3px 0 !important;
    border-radius: 8px !important;
    transition: background-color 0.15s ease-in-out !important;
    background-color: transparent !important;
    border: none !important;
    height: auto !important; /* CRITICAL: Prevents text overlap on expanded submenus */
    min-height: 44px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    color: #94a3b8 !important;
    position: relative !important;
    overflow: visible !important;
}

/* Active Main Nav Item (Non-submenu) */
.navbar__list .listitem.current:not(.submenu),
.navbar__list .listitem.is-active:not(.submenu) {
    background-color: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

.navbar__list .listitem:hover:not(.submenu-is-opened) {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #f8fafc !important;
}

.navbar__list .listitem.current:not(.submenu) .listitem__caption,
.navbar__list .listitem.is-active:not(.submenu) .listitem__caption,
.navbar__list .listitem.current:not(.submenu) .listitem__icon,
.navbar__list .listitem.is-active:not(.submenu) .listitem__icon {
    color: #ffffff !important;
}

/* Icon box */
.navbar__list .listitem__icon {
    width: 42px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: inherit !important;
}

.navbar__list .listitem__icon .icon {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
    color: currentColor !important;
}

/* Text caption & submenu container */
.navbar__list .listitem__menu {
    width: calc(100% - 42px) !important;
    display: flex !important;
    flex-direction: column !important;
}

.navbar__list .listitem__caption {
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    color: inherit !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    width: 100% !important;
}

/* Caret Arrow for expandable menus */
.listitem.submenu:after {
    right: 14px !important;
    top: 20px !important;
    border-color: transparent transparent currentColor !important;
    opacity: 0.7 !important;
}

/* Submenu Trees (No dark bars, no lines, no overlapping text!) */
.navbar__list li .submenu__list .submenu__listitem.current::before,
.navbar__list li .submenu__list .submenu__listitem::before,
.submenu__listitem::before,
.submenu__listitem::after,
.submenu__listitem:hover::before,
.listitem .submenu__listitem::before {
    display: none !important;
    content: none !important;
    border: none !important;
    background: transparent !important;
}

.submenu__list {
    width: 100% !important;
    background-color: transparent !important;
    border-left: 2px solid rgba(255, 255, 255, 0.12) !important;
    margin: 4px 0 8px 0 !important;
    padding: 0 0 0 10px !important;
    display: none;
    box-shadow: none !important;
}

.listitem.submenu-is-opened .submenu__list,
.listitem.is-active .submenu__list {
    display: block !important;
}

.submenu__listitem {
    height: 36px !important;
    margin: 2px 0 !important;
    padding: 0 10px !important;
    border-radius: 6px !important;
    background-color: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

.submenu__listitem a {
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
}

.submenu__listitem:hover,
.submenu__listitem a:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
}

.submenu__listitem.current,
.submenu__listitem.is-active {
    background-color: rgba(37, 99, 235, 0.2) !important;
    border-radius: 6px !important;
}

.submenu__listitem.current a,
.submenu__listitem.is-active a {
    color: #60a5fa !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   4. TOP HEADER NAVIGATION BAR
   ========================================================================== */
.headers, .params--bar, header.header, .header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.03) !important;
    padding: 12px 24px !important;
}

/* 5. Filter Pills / Top Status Tabs */
html body .quick-links {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
}

html body .filters__listing {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

html body .filters__listing .btn,
html body .filters__listing a.btn-transparent,
html body .filters__listing a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 34px !important;
    padding: 0 12px !important;
    border-radius: 6px !important;
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.15s ease-in-out !important;
    box-shadow: none !important;
}

html body .filters__listing .btn:hover,
html body .filters__listing a:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

html body .filters__listing .btn.is-selected,
html body .filters__listing .btn.active,
html body .filters__listing a.is-selected,
html body .filters__listing .btn.is-bookmarks.is-selected,
html body .filters__listing .btn.is-due-soon.is-selected,
html body .filters__listing .btn.is-overdue.is-selected {
    background-color: #0f172a !important;
    color: #ffffff !important;
    border-color: #0f172a !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

html body .filters__listing .btn.is-selected *,
html body .filters__listing a.is-selected * {
    color: #ffffff !important;
}

html body .filters__btn-value {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1px 7px !important;
    border-radius: 9999px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    background-color: #e2e8f0 !important;
    color: #334155 !important;
}

html body .filters__listing .btn.is-selected .filters__btn-value,
html body .filters__listing a.is-selected .filters__btn-value {
    background-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

/* 6. Datatables Overhaul (High-Contrast Clean Text - FIX INVISIBLE HEADERS) */
html body table,
html body .table,
html body .sindu-table,
html body .sindu_origin_table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
}

/* Force dark slate readable text on all table header elements */
html body table thead,
html body .table thead,
html body .sindu-table thead,
html body .sindu_origin_table thead,
html body table thead tr,
html body .table thead tr,
html body table thead th,
html body .table thead th,
html body .sindu-table thead th,
html body table thead th a,
html body .table thead th a,
html body .sindu-table thead th a,
html body table thead th a *,
html body .table thead th a *,
html body table thead .sort,
html body .table thead .sort,
html body .sindu-table thead .sort,
html body table thead .sort *,
html body .table thead .sort *,
html body .table thead th span,
html body .table th,
html body .table th * {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    fill: #0f172a !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-decoration: none !important;
}

html body table thead th,
html body .table thead th,
html body .sindu-table thead th,
html body .sindu_origin_table thead th,
html body .table th {
    padding: 14px 16px !important;
    border-bottom: 2px solid #cbd5e1 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

html body .table thead th .sort {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #0f172a !important;
}

html body .table thead th a:hover,
html body .table thead th a:hover * {
    color: #2563eb !important;
}

/* Sorting handles / arrows in header */
html body .table thead th .handle::before,
html body .sindu-table thead th .handle::before {
    border-bottom-color: #475569 !important;
}
html body .table thead th .handle::after,
html body .sindu-table thead th .handle::after {
    border-top-color: #475569 !important;
}
html body .table thead th.asc .handle::before,
html body .sindu-table thead th.asc .handle::before {
    border-bottom-color: #2563eb !important;
}
html body .table thead th.desc .handle::after,
html body .sindu-table thead th.desc .handle::after {
    border-top-color: #2563eb !important;
}

td, .table td {
    padding: 14px 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    color: #0f172a !important;
    font-size: 13px !important;
    vertical-align: middle !important;
}

.table tbody tr {
    background-color: #ffffff !important;
    transition: background-color 0.15s ease-in-out !important;
}

tr:hover td, .table tr:hover td, .table tbody tr:hover td {
    background-color: #f8fafc !important;
}

.table tbody td a.link,
.table tbody td a {
    color: #2563eb !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

.table tbody td a.link:hover,
.table tbody td a:hover {
    text-decoration: underline !important;
    color: #1d4ed8 !important;
}

/* 7. Card Panels & Container Grouping */
.block, 
.ticket, 
.panel, 
.card, 
.white-box, 
.box, 
.form-submit-ticket, 
#divShow,
.filter-form,
.search-form {
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04) !important;
    background-color: #ffffff !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

.block__title,
.card-title,
.panel-title,
h2.title,
h3.title,
h4.title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* 8. Modern Buttons (Shadcn Specs) */
.btn, .btn-full, .btn-primary, .btn-main, input[type="submit"].btn {
    font-family: var(--font-sans) !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    height: 38px !important;
    padding: 0 16px !important;
    transition: all 0.15s ease-in-out !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

.btn-full, .btn-primary, .btn-main, input[type="submit"].btn {
    background-color: #2563eb !important;
    border: 1px solid #2563eb !important;
    color: #ffffff !important;
}

.btn-full:hover, .btn-primary:hover, .btn-main:hover, input[type="submit"].btn:hover {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}

.btn-secondary, .btn-border, .btn-default, .btn-transparent {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}

.btn-secondary:hover, .btn-border:hover, .btn-default:hover, .btn-transparent:hover {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* 9. Form Control Inputs & Selects */
input.form-control, select.form-control, textarea.form-control, .form-control, .selectize-input {
    font-family: var(--font-sans) !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

input.form-control:focus, select.form-control:focus, textarea.form-control:focus, .form-control:focus, .selectize-input.focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
    outline: none !important;
}

/* 10. Status Badges */
.status-tag,
.tag-status {
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px 10px !important;
    border-radius: 9999px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.replied {
    color: #2563eb !important;
    font-weight: 600 !important;
}

.open, .new {
    color: #dc2626 !important;
    font-weight: 600 !important;
}

.waitingreply {
    color: #d97706 !important;
    font-weight: 600 !important;
}

.resolved {
    color: #16a34a !important;
    font-weight: 600 !important;
}

/* 11. Bulk Action Toolbar */
.table-footer,
.bulk-actions,
.with-selected {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 14px 20px !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    margin-top: 16px !important;
    margin-bottom: 24px !important;
}