/* Always reserved space for vertical scrollbar */
/*html {*/
/*    scrollbar-gutter: stable;*/
/*}*/

/* ===== CSS VARIABLES ===== */
:root {
    --bs-body-font-family: "Inter", sans-serif;
    --color-primary: #0F4C75;
    --color-primary-hover: #3282B8;
    --color-primary-dark: #1d4ed8;

    --sidebar-bg: #212529;
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --sidebar-text: rgba(255, 255, 255, 0.55);
    --sidebar-text-hover: rgba(255, 255, 255, 0.9);
    --sidebar-accent: var(--color-primary);
    --sidebar-item-active-bg: rgba(59, 130, 246, 0.12);
    --sidebar-item-hover-bg: rgba(255, 255, 255, 0.06);
}

body {
    font-family: "Inter", sans-serif !important;
}


/* Animation for sidebar menu @keyframes is part of it */
.nav-link.active {
    animation: fadeIn 0.2s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (min-width: 992px) {
    .custom-sidebar {
        min-width: 280px;
        width: 280px;
        position: sticky;
        top: 0;
        align-self: flex-start;
    }
}

.text-primary {
    color: var(--color-primary) !important;
}

/* Hide asterisk (*) in crispy forms */
.asteriskField {
    display: none;
}

/* Tickets & Records table styles starts */
.tickets-table,
.records-table {
    font-size: 14px;
}

.records-table .material-symbols-outlined {
    font-size: 18px;
}

/* Minimum table width to prevent excessive column compression.
   When the viewport is narrower, the table-responsive wrapper
   provides a horizontal scrollbar instead of squishing columns. */
.tickets-table {
    min-width: 900px;
    table-layout: fixed;
    width: 100%;
}

/* Constrain the table wrapper height to the visible viewport so the
   table scrolls vertically inside the container. The horizontal scrollbar
   is always visible at the bottom of the wrapper, not at the bottom of
   the full page. Adjust the offset (180px) to match your header height. */
.table-responsive {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}

/* Keep the header row visible while scrolling vertically inside
   the table-responsive container. */
.tickets-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.tickets-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tickets-table thead tr th,
.records-table thead tr th {
    background-color: var(--color-primary);
}

.ticket-row-link,
.ticket-attachment-row {
    color: var(--color-primary);
    text-decoration: none;
}

.tickets-table thead th,
.records-table thead th {
    padding: 8px 12px;
}

/* Prevent header cells and data cells from wrapping to multiple lines.
   This ensures every row stays on a single line regardless of content length. */
.tickets-table th,
.tickets-table td,
.records-table th {
    white-space: nowrap;
}

/* Header sort links use flexbox so the column label and sort icon always
   stay on a single line. Using float: right on the icon (the Bootstrap/
   django-tables2 default) causes the icon to wrap onto a second line when
   the column is narrow — flexbox with margin-left: auto avoids this. */
.tickets-table thead th a,
.records-table thead th a {
    display: flex;
    align-items: center;
    white-space: nowrap;
    color: white;
    text-decoration: none;
}

/* Sort icons — default (unsorted) state */
.tickets-table thead th.orderable a::after,
.records-table thead th.orderable a::after {
    font-family: 'Material Symbols Outlined';
    content: 'unfold_more';
    opacity: 0.4;
    font-size: 16px;
    float: none; /* override any inherited float */
    margin-left: auto; /* push icon to the right via flexbox */
}

/* Sort icons — ascending state */
.tickets-table thead th.asc a::after,
.records-table thead th.asc a::after {
    font-family: 'Material Symbols Outlined';
    content: 'keyboard_arrow_up';
    opacity: 1;
    float: none;
    margin-left: auto;
}

/* Sort icons — descending state */
.tickets-table thead th.desc a::after,
.records-table thead th.desc a::after {
    font-family: 'Material Symbols Outlined';
    content: 'keyboard_arrow_down';
    opacity: 1;
    float: none;
    margin-left: auto;
}

/* Tickets & Records table styles ends*/

.create-ticket-form .form-control,
.create-ticket-form .form-select {
    font-size: 14px;
    padding: 6px 8px;
}

.create-ticket-form .form-label {
    font-size: 14px;
    margin-bottom: 2px;
}

.create-ticket-form .mb-3 {
    margin-bottom: 8px !important;
}

.ticket-entry-form .form-control,
.ticket-entry-form .form-select {
    font-size: 14px;
    padding: 6px 8px;
}

.ticket-entry-form .form-label {
    font-size: 14px;
    margin-bottom: 2px;
}

.ticket-entry-form .mb-3 {
    margin-bottom: 8px !important;
}

#ticket-filter-form .form-control,
#ticket-filter-form .form-select,
#record-filter-form .form-control,
#record-filter-form .form-select {
    font-size: 14px;
    padding: 6px 8px;
}

#ticket-filter-form .form-label,
#record-filter-form .form-label {
    font-size: 14px;
    margin-bottom: 2px;
}

#ticket-filter-form .mb-3,
#record-filter-form .mb-3 {
    margin-bottom: 8px !important;
}

/* Buttons + paginations */
.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.btn-primary:hover {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
}

.page-item.active .page-link {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #f8f9fa !important;
}

.page-link {
    color: var(--color-primary) !important;
}

.btn-outline-primary {
    color: var(--color-primary) !important;
    border-color: #dee2e6 !important;
}

.btn-outline-primary:hover {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #f8f9fa !important;
}

.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.show {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #f8f9fa !important;
}

.form-check-input:checked {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.dropdown-item:hover {
    background-color: #f0f0f0 !important;
    color: #1e2433 !important;
}

.ts-wrapper.has-items .ts-control input::placeholder {
    color: transparent;
}

.ts-control {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: hidden;
    align-items: center;
}

.ts-control .item {
    flex: 0 0 auto;
    white-space: nowrap;
}

.ts-control input {
    flex: 1 1 auto !important;
    min-width: 1rem !important;
}

.records-table {
    table-layout: fixed;
    width: 100%;
}

.records-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#ticket-subheader {
    cursor: pointer;
    transition: color 0.2s ease-in-out;
}

#ticket-subheader:hover {
    color: var(--color-primary);
}

#ticket-header {
    position: relative;
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

#copy-notification {
    display: inline;
    margin-left: 12px;
    font-size: 12px;
    color: var(--color-primary);
    opacity: 0;
    pointer-events: none;
}

#copy-notification.animate {
    animation: fadeInOut 1.5s ease-in-out forwards;
}

.record-action-btn {
    color: #adb5bd;
    transition: color 0.2s;
    text-decoration: none;
}

.record-action-edit:hover {
    color: var(--color-primary);
}

.record-action-delete:hover {
    color: #dc3545;
}

.record-action-send-mail:hover {
    color: var(--color-primary);
}

.record-action-disabled {
    color: #dee2e6;
    cursor: default;
}

/* === BADGE SYSTEM === */
.sd-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 10px 1px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid transparent;
}

.sd-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* STATUS */
.sd-badge-new {
    background: #dbeafe;
    color: #1e40af;
    border-color: #bfdbfe;
}

.sd-badge-new::before {
    background: #3b82f6;
    box-shadow: 0 0 0 2px #bfdbfe;
}

.sd-badge-accepted {
    background: #f1f5f9;
    color: #475569;
    border-color: #e2e8f0;
}

.sd-badge-accepted::before {
    background: #94a3b8;
}

.sd-badge-inprogress {
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
}

.sd-badge-inprogress::before {
    background: #f59e0b;
}

.sd-badge-waiting {
    background: #ede9fe;
    color: #5b21b6;
    border-color: #ddd6fe;
}

.sd-badge-waiting::before {
    background: #8b5cf6;
}

.sd-badge-resolved {
    background: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
}

.sd-badge-resolved::before {
    background: #22c55e;
}

.sd-badge-closed {
    background: #f1f5f9;
    color: #1e293b;
    border-color: #cbd5e1;
}

.sd-badge-closed::before {
    background: #334155;
}

/* PRIORITY */
.sd-badge-low {
    background: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
}

.sd-badge-low::before {
    background: #4ade80;
}

.sd-badge-normal {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.sd-badge-normal::before {
    background: #60a5fa;
}

.sd-badge-high {
    background: #fff7ed;
    color: #9a3412;
    border-color: #fed7aa;
}

.sd-badge-high::before {
    background: #fb923c;
}

.sd-badge-critical {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

.sd-badge-critical::before {
    background: #ef4444;
    box-shadow: 0 0 0 2px #fecaca;
}


/* ===== SIDEBAR ===== */
.custom-sidebar {
    background: var(--sidebar-bg) !important;
    border-right: 1px solid var(--sidebar-border);
}

/* Logo */
.sidebar-logo {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.01em;
}

.sidebar-logo-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--sidebar-accent);
    border-radius: 50%;
    margin-right: 7px;
    margin-bottom: 2px;
}

/* Nav items */
.custom-sidebar .nav-link {
    color: var(--sidebar-text);
    padding: 8px 12px;
    border-radius: 7px;
    font-size: 13.5px;
    font-weight: 500;
    border-left: 2px solid transparent;
    margin-bottom: 2px;
    transition: all 0.15s ease;
    animation: none !important;
}

.custom-sidebar .nav-link:hover {
    color: var(--sidebar-text-hover);
    background: var(--sidebar-item-hover-bg);
    transform: translateX(2px);
}

.custom-sidebar .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-left-color: #fff;
    border-left-width: 3px;
}

.custom-sidebar .nav-link .material-symbols-outlined {
    font-size: 18px;
    opacity: 0.75;
}

.custom-sidebar .nav-link.active .material-symbols-outlined {
    opacity: 1;
}

/* Sidebar section label */
.sidebar-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.22);
    padding: 0 12px;
    margin: 10px 0 4px;
}

/* Dividers */
.custom-sidebar hr {
    border-color: var(--sidebar-border) !important;
    opacity: 1 !important;
}

/* User profile */
.sidebar-user {
    padding: 8px 12px;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.sidebar-user:hover {
    background: var(--sidebar-item-hover-bg);
}

.user-account-profile-picture {
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, var(--color-primary), #6366f1);
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.sidebar-user-name {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.3;
}

.user-profile-mail {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.38);
    line-height: 1.3;
}

/* Dropdown */
.dropdown-menu-dark {
    background: #181e2a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 5px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.dropdown-menu-dark .dropdown-item {
    border-radius: 6px;
    font-size: 13px;
    padding: 7px 10px;
    color: rgba(255, 255, 255, 0.65);
    transition: all 0.1s ease;
}

.dropdown-menu-dark .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.dropdown-menu-dark .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.08);
    margin: 4px 0;
}

/* Dashboard cards */
.dashboard-card {
    border: 0 !important;
    border-left: 3px solid var(--sidebar-accent) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.dashboard-card .material-symbols-outlined {
    font-size: 22px;
    color: #adb5bd;
}

.settings-page {
    font-size: 14px;
}

.settings-page .ts-wrapper.multi .ts-control {
    flex-wrap: wrap;
    flex-direction: row;
}

.settings-option {
    max-width: 600px;
}

.settings-option-grid {
    display: grid;
    grid-template-columns: 1fr auto;
}

.todos-icon:hover {
    color: var(--color-primary-hover) !important;
}

.todos-checkbox:hover {
    color: var(--color-primary-hover) !important;
}

.trash-icon:hover {
    color: #dc3545 !important;
}

.save-task:hover {
    color: #166534 !important;
}

.task-input[readonly] {
    border: none;
    border-bottom: 3px solid #21252908;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.todos-mdi {
    cursor: pointer;
    font-size: 18px;
}

.todo-item .edit-task,
.todo-item .remove-task {
    visibility: hidden;
}

.todo-item:hover .edit-task,
.todo-item:hover .remove-task {
    visibility: visible;
}

.todo-item:hover {
    background-color: #f8f9fa;
    border-radius: 4px;
}

.todo-card-body {
    overflow-y: auto;
    max-height: 300px;
    padding-top: 2px;
}

.card-header {
    padding: 6px 12px;
    font-size: 14px;
}

.sd-table {
    max-width: 100%;
    width: 100%;
    overflow-x: auto;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    border-radius: 6px
}

.sd-table .tabulator-header .tabulator-col {
    font-size: 14px;
}

.sd-table .tabulator-row .tabulator-cell {
    padding: 6px 8px;
    font-size: 13px;
}

.sd-table .tabulator-row {
    min-height: 32px;
}

.sd-table .tabulator-header .tabulator-col {
    background-color: var(--color-primary) !important;
    color: white !important;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-height: 36px;
}

.sd-table .tabulator-col-title-holder {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.sd-table .tabulator-col-sorter {
    position: static !important;
}

.sd-table .tabulator-col-content {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

.sd-table .tabulator-header .tabulator-col:hover {
    background-color: var(--color-primary-hover, #0a3d63) !important;
}

.sd-table .tabulator-cell input[type="checkbox"] {
    display: block;
    margin: auto;
}

.sd-table .tabulator-header input[type="checkbox"] {
    display: block;
    margin: auto;
}

.sd-table .tabulator-col[aria-sort="ascending"] .tabulator-arrow,
.sd-table .tabulator-col[aria-sort="descending"] .tabulator-arrow {
    border-bottom-color: white !important;
    border-top-color: white !important;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {
    padding-right: 5px;
}

.sd-table .tabulator-footer {
    background: white !important;
    border-top: 1px solid #e9ecef !important;
    padding: 3px 4px !important;
}

.sd-table .tabulator-page {
    background: none !important;
    border: none !important;
    color: #6c757d !important;
    padding: 2px 6px !important;
    font-size: 14px !important;
    margin: 0 1px !important;
    min-width: unset !important;
}

.sd-table .tabulator-page:hover:not(.active) {
    color: #212529 !important;
}

.sd-table .tabulator-page.active {
    color: var(--color-primary) !important;
    font-weight: 600 !important;
    background: none !important;
}

.sd-table .tabulator-page-size-label {
    font-weight: normal !important;
    font-size: 14px !important;
    color: #6c757d !important;
}

.sd-table .tabulator-footer label {
    font-weight: normal !important;
    font-size: 14px !important;
    color: #6c757d !important;
}

.sd-table .tabulator-page-counter {
    font-size: 14px !important;
    color: #6c757d !important;
}

.sd-table select.tabulator-page-size {
    border: 1px solid #dee2e6 !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    padding: 1px 4px !important;
    color: #6c757d !important;
}
.sd-table .tabulator-page[data-page="first"] { font-size: 0 !important; }
.sd-table .tabulator-page[data-page="first"]::after { content: "«"; font-size: 14px !important; }

.sd-table .tabulator-page[data-page="prev"] { font-size: 0 !important; }
.sd-table .tabulator-page[data-page="prev"]::after { content: "‹"; font-size: 14px !important; }

.sd-table .tabulator-page[data-page="next"] { font-size: 0 !important; }
.sd-table .tabulator-page[data-page="next"]::after { content: "›"; font-size: 14px !important; }

.sd-table .tabulator-page[data-page="last"] { font-size: 0 !important; }
.sd-table .tabulator-page[data-page="last"]::after { content: "»"; font-size: 14px !important; }


@media (max-width: 767px) {
    .sd-table .tabulator-footer .tabulator-page-counter {
        display: none !important;
    }
}

.full-text-search {
    max-width: 400px;
}