/* ============================================================
   IMAR SRL - TeamPass Custom Theme
   Inspired by BookmarkShare / UserAssetBase design
   Supports: Light / Dark / System theme modes
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

/* ============================================================
   CSS Variables
   ============================================================ */

:root {
    --imar-brand: #DC2626;
    --imar-brand-hover: #B91C1C;
    --imar-brand-light: #FEF2F2;
    --imar-brand-dark: #450A0A;

    --bg-body: #f9fafb;
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-navbar: #ffffff;
    --bg-input: #ffffff;
    --bg-hover: #f2f4f7;
    --bg-active: var(--imar-brand);

    --text-primary: #1d2939;
    --text-secondary: #667085;
    --text-muted: #98a2b3;
    --text-on-brand: #ffffff;

    --border-color: #e4e7ec;
    --border-input: #d0d5dd;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.05);
    --radius: 8px;
    --radius-lg: 12px;
}

/* Dark mode variables */
body.dark-mode,
html.dark body {
    --bg-body: #101828;
    --bg-card: #1d2939;
    --bg-sidebar: #101828;
    --bg-navbar: #101828;
    --bg-input: #101828;
    --bg-hover: rgba(255,255,255,0.05);
    --bg-active: var(--imar-brand);

    --text-primary: #f3f4f6;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;

    --border-color: #374151;
    --border-input: #374151;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.3);
}

/* ============================================================
   Global
   ============================================================ */

body:not(.login-page) {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background-color: var(--bg-body) !important;
    color: var(--text-primary) !important;
}

/* ============================================================
   Navbar
   ============================================================ */

.main-header.navbar {
    background-color: var(--bg-navbar) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: none !important;
    min-height: 80px !important;
    height: 80px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
}

.main-header .navbar-nav .nav-link {
    color: var(--text-secondary) !important;
}

.main-header .navbar-nav .nav-link:hover {
    color: var(--text-primary) !important;
}

.main-header .btn-primary.dropdown-toggle {
    background-color: var(--imar-brand) !important;
    border-color: var(--imar-brand) !important;
    border-radius: var(--radius) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    padding: 6px 16px !important;
}

.main-header .btn-primary.dropdown-toggle:hover {
    background-color: var(--imar-brand-hover) !important;
}

.main-header .dropdown-menu {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
    padding: 8px !important;
}

.main-header .dropdown-item {
    color: var(--text-primary) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
}

.main-header .dropdown-item:hover {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

.main-header .dropdown-divider {
    border-top-color: var(--border-color) !important;
}

/* ============================================================
   Theme Toggle Button
   ============================================================ */

/* Hide the old triple-button toggle */
#tp-theme-toggle { display: none !important; }

.tp-theme-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    /* color: var(--text-muted); */
    cursor: pointer;
    transition: all 0.2s;
    margin: 0 2px;
    font-size: 16px;
}

.tp-theme-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

body.dark-mode .tp-icon-dark { display: none !important; }
body.dark-mode .tp-icon-light { display: inline !important; }
body:not(.dark-mode) .tp-icon-dark { display: inline !important; }
body:not(.dark-mode) .tp-icon-light { display: none !important; }

/* ============================================================
   Sidebar Logo: light/dark switching
   ============================================================ */

body:not(.dark-mode) .tp-logo-light:not(.tp-logo-mini) { display: inline-block !important; }
body:not(.dark-mode) .tp-logo-dark { display: none !important; }
body.dark-mode .tp-logo-light { display: none !important; }
body.dark-mode .tp-logo-dark:not(.tp-logo-mini) { display: inline-block !important; }

/* ============================================================
   Sidebar
   ============================================================ */

.main-sidebar {
    background-color: var(--bg-sidebar) !important;
    border-right: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}

.main-sidebar,
.main-sidebar::before {
    background-color: var(--bg-sidebar) !important;
}

/* Brand link / Logo area */
.brand-link {
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--border-color) !important;
    background-color: var(--bg-sidebar) !important;
}

.brand-link .brand-image {
    max-height: 60px !important;
    margin: 0 !important;
    float: none !important;
}

.brand-link .brand-text {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    font-family: 'Outfit', sans-serif !important;
}

/* Sidebar navigation */
.sidebar {
    background-color: var(--bg-sidebar) !important;
    padding-top: 8px !important;
}

.nav-sidebar .nav-item > .nav-link {
    color: var(--text-secondary) !important;
    border-radius: var(--radius) !important;
    margin: 2px 12px !important;
    padding: 8px 12px !important;
    width: calc(100% - 24px) !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.15s ease !important;
}

.nav-sidebar .nav-item > .nav-link:hover {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

.nav-sidebar .nav-item > .nav-link.active,
.nav-sidebar .nav-item.menu-open > .nav-link {
    background-color: var(--imar-brand) !important;
    color: #ffffff !important;
}

.nav-sidebar .nav-item > .nav-link.active .nav-icon,
.nav-sidebar .nav-item.menu-open > .nav-link .nav-icon {
    color: #ffffff !important;
}

.nav-sidebar .nav-icon {
    color: var(--text-muted) !important;
    width: 20px !important;
    font-size: 15px !important;
}

.nav-sidebar .nav-link:hover .nav-icon {
    color: var(--text-primary) !important;
}

/* Sub-menu (treeview) */
.nav-sidebar .nav-treeview {
    background-color: transparent !important;
}

.nav-sidebar .nav-treeview .nav-link {
    padding-left: 40px !important;
    font-size: 13px !important;
    color: var(--text-muted) !important;
}

.nav-sidebar .nav-treeview .nav-link:hover {
    color: var(--text-primary) !important;
}

.nav-sidebar .nav-treeview .nav-link.active {
    background-color: var(--imar-brand) !important;
    color: #ffffff !important;
}

/* Sidebar header/section titles */
.nav-sidebar .nav-header {
    color: var(--text-muted) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-weight: 600 !important;
    padding: 16px 20px 8px !important;
}

/* Sidebar footer */
.menu-footer,
#sidebar-footer {
    border-top: 1px solid var(--border-color) !important;
    padding: 12px 16px !important;
    background-color: var(--bg-sidebar) !important;
}

#sidebar-footer i,
#sidebar-footer a {
    color: var(--text-muted) !important;
}

#sidebar-footer i:hover,
#sidebar-footer a:hover {
    color: var(--imar-brand) !important;
}

/* Sidebar info icons override */
#sidebar-footer i.text-info,
#sidebar-footer a.text-info {
    color: var(--text-muted) !important;
}

#sidebar-footer i.text-info:hover,
#sidebar-footer a.text-info:hover {
    color: var(--imar-brand) !important;
}

/* Sidebar collapsed */
.sidebar-mini.sidebar-collapse .main-sidebar:hover {
    width: 250px;
}

/* Mini logo: always hidden by default */
.tp-logo-mini {
    display: none !important;
}

/* Collapsed: hide ALL logos first */
body.sidebar-mini.sidebar-collapse .brand-link .tp-logo-full.tp-logo-light,
body.sidebar-mini.sidebar-collapse .brand-link .tp-logo-full.tp-logo-dark,
body.sidebar-mini.sidebar-collapse .brand-link .tp-logo-mini.tp-logo-light,
body.sidebar-mini.sidebar-collapse .brand-link .tp-logo-mini.tp-logo-dark {
    display: none !important;
}

/* Collapsed: show only the correct mini logo */
body:not(.dark-mode).sidebar-mini.sidebar-collapse .brand-link .tp-logo-mini.tp-logo-light {
    display: inline-block !important;
}

body.dark-mode.sidebar-mini.sidebar-collapse .brand-link .tp-logo-mini.tp-logo-dark {
    display: inline-block !important;
}

body.sidebar-mini.sidebar-collapse .brand-link {
    padding: 10px !important;
    justify-content: center !important;
}

body.sidebar-mini.sidebar-collapse .brand-link .tp-logo-mini {
    max-height: 40px !important;
}

/* Hover on collapsed: hide mini, show full */
body.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-link .tp-logo-mini {
    display: none !important;
}

body:not(.dark-mode).sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-link .tp-logo-full.tp-logo-light {
    display: inline-block !important;
}

body.dark-mode.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-link .tp-logo-full.tp-logo-dark {
    display: inline-block !important;
}

body.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-link {
    padding: 12px 16px !important;
}

/* ============================================================
   jsTree - Folder Tree (IDE/TailAdmin style)
   ============================================================ */

/* Container */
#jstree {
    padding: 8px 4px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
}

/* Remove default tree dots/lines */
.jstree-default .jstree-node,
.jstree-default .jstree-icon {
    background-image: none !important;
}

/* Node row */
.jstree-default .jstree-node {
    margin-left: 0 !important;
}

/* Anchor (clickable row) */
.jstree-default .jstree-anchor {
    padding: 5px 8px !important;
    border-radius: 6px !important;
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    height: auto !important;
    transition: background-color 0.12s ease, color 0.12s ease !important;
}

.jstree-default .jstree-anchor:hover,
.jstree-default .jstree-anchor.jstree-hovered {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
}

/* Selected node */
.jstree-default .jstree-anchor.jstree-clicked {
    background-color: rgba(220, 38, 38, 0.1) !important;
    color: #DC2626 !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.jstree-default .jstree-anchor.jstree-clicked .tree-folder {
    color: #DC2626 !important;
}

body.dark-mode .jstree-default .jstree-anchor.jstree-clicked {
    background-color: rgba(220, 38, 38, 0.15) !important;
    color: #f87171 !important;
}

body.dark-mode .jstree-default .jstree-anchor.jstree-clicked .tree-folder {
    color: #f87171 !important;
}

/* Folder icons - yellow Windows style */
.jstree-default .tree-folder {
    color: #eab308 !important;
    font-size: 14px !important;
    transition: color 0.12s ease !important;
}

/* Toggle arrow (open/close) — chevron style */
.jstree-default .jstree-ocl {
    background-image: none !important;
    position: relative !important;
    width: 20px !important;
    height: 24px !important;
    cursor: pointer !important;
}

.jstree-default .jstree-ocl::before {
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    content: '\f105' !important; /* angle-right */
    font-size: 11px !important;
    color: var(--text-muted) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 24px !important;
    transition: transform 0.15s ease !important;
}

/* Rotate when open */
.jstree-default .jstree-open > .jstree-ocl::before {
    content: '\f107' !important; /* angle-down */
}

/* Hide on leaf nodes */
.jstree-default .jstree-leaf > .jstree-ocl::before {
    content: '' !important;
}

/* Children indent */
.jstree-default .jstree-children {
    padding-left: 12px !important;
}

/* Search match */
.jstree-default .jstree-search {
    font-style: normal !important;
    color: #DC2626 !important;
    font-weight: 600 !important;
}

/* Loading spinner */
.jstree-default .jstree-loading {
    background-image: none !important;
}

/* ============================================================
   Content Area
   ============================================================ */

.content-wrapper {
    background-color: var(--bg-body) !important;
    min-height: calc(100vh - 60px) !important;
}

.content-header {
    padding: 16px 24px 0 !important;
}

.content-header h1 {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    font-size: 20px !important;
}

/* ============================================================
   Cards
   ============================================================ */

.card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: none !important;
}

.card-header {
    background-color: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 16px 20px !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

.card-header .card-title {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
}

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

.card-footer {
    background-color: var(--bg-card) !important;
    border-top: 1px solid var(--border-color) !important;
}

.card-primary:not(.card-outline) > .card-header {
    background-color: var(--imar-brand) !important;
}

.card-info:not(.card-outline) > .card-header {
    background-color: var(--imar-brand) !important;
    border-bottom-color: var(--imar-brand-hover) !important;
}

/* ============================================================
   Buttons
   ============================================================ */

.btn-primary {
    background-color: var(--imar-brand) !important;
    border-color: var(--imar-brand) !important;
    border-radius: var(--radius) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    transition: background-color 0.2s !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--imar-brand-hover) !important;
    border-color: var(--imar-brand-hover) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

.btn-info {
    background-color: var(--imar-brand) !important;
    border-color: var(--imar-brand) !important;
    color: #ffffff !important;
    border-radius: var(--radius) !important;
}

.btn-info:hover,
.btn-info:focus {
    background-color: var(--imar-brand-hover) !important;
    border-color: var(--imar-brand-hover) !important;
}

.btn-outline-primary {
    color: var(--imar-brand) !important;
    border-color: var(--imar-brand) !important;
    border-radius: var(--radius) !important;
}

.btn-outline-primary:hover {
    background-color: var(--imar-brand) !important;
    color: #ffffff !important;
}

.btn-outline-info {
    color: var(--imar-brand) !important;
    border-color: var(--imar-brand) !important;
    background: transparent !important;
    border-radius: var(--radius) !important;
}

.btn-outline-info:hover {
    background-color: var(--imar-brand) !important;
    color: #ffffff !important;
}

.btn-secondary,
.btn-default {
    background-color: var(--bg-hover) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius) !important;
}

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

.btn-danger {
    border-radius: var(--radius) !important;
}

.btn-success {
    border-radius: var(--radius) !important;
}

.btn-warning {
    border-radius: var(--radius) !important;
}

/* ============================================================
   Form Elements
   ============================================================ */

.form-control {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-input) !important;
    border-radius: var(--radius) !important;
    color: var(--text-primary) !important;
    font-size: 14px !important;
    padding: 8px 12px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    font-family: 'Outfit', sans-serif !important;
}

.form-control:focus {
    border-color: var(--imar-brand) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

.form-control::placeholder {
    color: var(--text-muted) !important;
}

.input-group-text {
    background-color: var(--bg-hover) !important;
    border: 1px solid var(--border-input) !important;
    color: var(--text-muted) !important;
    border-radius: var(--radius) 0 0 var(--radius) !important;
}

.input-group .form-control {
    border-radius: 0 var(--radius) var(--radius) 0 !important;
}

.select2-container--bootstrap4 .select2-selection {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-input) !important;
    border-radius: var(--radius) !important;
    color: var(--text-primary) !important;
}

.select2-container--bootstrap4 .select2-selection:focus,
.select2-container--bootstrap4.select2-container--focus .select2-selection {
    border-color: var(--imar-brand) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

.select2-dropdown {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
}

.select2-results__option--highlighted {
    background-color: var(--imar-brand) !important;
}

/* Custom checkbox/radio */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--imar-brand) !important;
    border-color: var(--imar-brand) !important;
}

/* ============================================================
   Tables
   ============================================================ */

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

.table thead th {
    background-color: var(--bg-hover) !important;
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    padding: 12px 16px !important;
}

.table td {
    border-top: 1px solid var(--border-color) !important;
    padding: 10px 16px !important;
    color: var(--text-primary) !important;
    vertical-align: middle !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,0.015) !important;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255,255,255,0.02) !important;
}

.table-hover tbody tr:hover {
    background-color: var(--bg-hover) !important;
}

/* DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--imar-brand) !important;
    border-color: var(--imar-brand) !important;
    color: #ffffff !important;
    border-radius: var(--radius) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--imar-brand-hover) !important;
    border-color: var(--imar-brand-hover) !important;
    color: #ffffff !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info {
    color: var(--text-secondary) !important;
    font-size: 13px !important;
}

/* ============================================================
   Tabs
   ============================================================ */

.nav-tabs .nav-link {
    color: var(--text-secondary) !important;
    border-radius: var(--radius) var(--radius) 0 0 !important;
}

.nav-tabs .nav-link.active {
    color: var(--imar-brand) !important;
    border-color: var(--border-color) var(--border-color) #fff !important;
    background-color: var(--bg-card) !important;
}

.nav-tabs .nav-link:hover {
    color: var(--imar-brand) !important;
}

/* ============================================================
   Badges
   ============================================================ */

.badge-primary {
    background-color: var(--imar-brand) !important;
}

.badge-info {
    background-color: var(--imar-brand) !important;
    color: #ffffff !important;
}

/* ============================================================
   Alerts
   ============================================================ */

.alert {
    border-radius: var(--radius) !important;
}

.alert-info {
    background-color: #EFF6FF !important;
    border-color: #BFDBFE !important;
    color: #1D4ED8 !important;
}

body.dark-mode .alert-info {
    background-color: rgba(30, 58, 138, 0.2) !important;
    border-color: #1e3a8a !important;
    color: #93c5fd !important;
}

/* ============================================================
   Modals
   ============================================================ */

.modal-content {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
}

.modal-header {
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.modal-footer {
    border-top: 1px solid var(--border-color) !important;
}

/* ============================================================
   Scrollbar
   ============================================================ */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #2a3a4e;
}

/* ============================================================
   Bootstrap Info/Primary Color Overrides
   ============================================================ */

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

a.text-info:hover,
a.text-info:focus {
    color: var(--imar-brand) !important;
}

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

.bg-primary {
    background-color: var(--imar-brand) !important;
}

.bg-info {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

.border-info {
    border-color: var(--imar-brand) !important;
}

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

/* ============================================================
   Pagination & Nav Pills
   ============================================================ */

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--imar-brand) !important;
    color: #ffffff !important;
}

.page-item.active .page-link {
    background-color: var(--imar-brand) !important;
    border-color: var(--imar-brand) !important;
}

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

.page-link:hover {
    color: var(--imar-brand-hover) !important;
}

/* ============================================================
   Miscellaneous UI Elements
   ============================================================ */

/* Countdown timer */
#countdown {
    margin-right: 5px !important;
    color: var(--text-secondary) !important;
    font-size: 13px !important;
}

/* Control sidebar */
.control-sidebar {
    background-color: var(--bg-card) !important;
    border-left: 1px solid var(--border-color) !important;
}

/* Progress bars */
.progress-bar {
    background-color: var(--imar-brand) !important;
}

/* Links */
a {
    color: var(--imar-brand);
}

a:hover {
    color: var(--imar-brand-hover);
}

/* Breadcrumb */
.breadcrumb {
    background-color: transparent !important;
}

/* iCheck overrides */
.iradio_flat-blue.checked,
.icheckbox_flat-blue.checked {
    border-color: var(--imar-brand) !important;
}

/* List group active */
.list-group-item.active {
    background-color: var(--imar-brand) !important;
    border-color: var(--imar-brand) !important;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 991px) {
    .main-sidebar {
        margin-left: -250px;
    }

    .sidebar-open .main-sidebar {
        margin-left: 0;
    }
}

/* ============================================================
   Login Page
   ============================================================ */

.login-page {
    background-image: none !important;
    background-color: #ffffff !important;
}

.login-page .card,
.login-page .card-body,
.login-page .tp-login-left,
.login-page .tp-login-form {
    background-color: #ffffff !important;
    color: #1d2939 !important;
}

.login-page .tp-form-input {
    background-color: #ffffff !important;
    color: #1d2939 !important;
    border-color: #d1d5db !important;
}

/* Login page: force white on EVERYTHING regardless of dark mode */
body.login-page .card,
body.login-page .card-body,
body.login-page .card-header,
body.login-page .card-footer,
body.dark-mode.login-page .card,
body.dark-mode.login-page .card-body,
body.dark-mode.login-page .card-header,
body.dark-mode.login-page .card-footer,
html.dark body.login-page .card,
html.dark body.login-page .card-body {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #1d2939 !important;
    border-color: transparent !important;
}

body.login-page,
body.dark-mode.login-page,
html.dark body.login-page {
    background-color: #ffffff !important;
    background-image: none !important;
}

body.dark-mode.login-page .tp-form-input,
html.dark body.login-page .tp-form-input {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #1d2939 !important;
    border-color: #d1d5db !important;
}

body.dark-mode.login-page .tp-form-label,
html.dark body.login-page .tp-form-label {
    color: #374151 !important;
}

body.dark-mode.login-page .tp-login-appname,
html.dark body.login-page .tp-login-appname {
    color: #1f2937 !important;
}

body.dark-mode.login-page .tp-login-footer,
html.dark body.login-page .tp-login-footer {
    color: #9ca3af !important;
}

/* Fix: override AdminLTE dark-mode autofill on login page */
body.login-page.dark-mode input:-webkit-autofill,
body.login-page.dark-mode input:-webkit-autofill:hover,
body.login-page.dark-mode input:-webkit-autofill:focus,
body.login-page.dark-mode textarea:-webkit-autofill,
body.login-page.dark-mode select:-webkit-autofill,
.dark-mode.login-page input:-webkit-autofill,
.dark-mode.login-page input:-webkit-autofill:hover,
.dark-mode.login-page input:-webkit-autofill:focus {
    -webkit-text-fill-color: #1d2939 !important;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    background-color: #ffffff !important;
    color: #1d2939 !important;
}

/* ============================================================
   FontAwesome - override line-height
   ============================================================ */

.fa, .fa-brands, .fa-classic, .fa-regular, .fa-sharp, .fa-solid, .fab, .far, .fas {
    line-height: inherit !important;
}

/* ============================================================
   Items list - vertical alignment
   ============================================================ */

.list-item-row-description {
    display: inline-flex !important;
    align-items: center !important;
}

/* ============================================================
   Items list - Action icons (TailAdmin style)
   ============================================================ */

/* Action icon containers - colored circles */
.list-item-actions .fa-stack {
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: all 0.15s ease !important;
}

/* Default light background circles per action */
.list-item-actions .list-item-clicktoshow { background-color: #eff6ff !important; }
.list-item-actions .list-item-clicktoedit { background-color: #fffbeb !important; }
.list-item-actions .fa-clickable-login { background-color: #eef2ff !important; }
.list-item-actions .fa-clickable-password { background-color: #f0fdf4 !important; }
.list-item-actions .fa-stack:has(.fa-link) { background-color: #f0f9ff !important; }
.list-item-actions .item-favourite { background-color: #fefce8 !important; }
.list-item-actions .list-item-clicktodelete { background-color: #fef2f2 !important; }

/* Hover: slightly darker bg */
.list-item-actions .list-item-clicktoshow:hover { background-color: #dbeafe !important; }
.list-item-actions .list-item-clicktoedit:hover { background-color: #fef3c7 !important; }
.list-item-actions .fa-clickable-login:hover { background-color: #e0e7ff !important; }
.list-item-actions .fa-clickable-password:hover { background-color: #dcfce7 !important; }
.list-item-actions .fa-stack:has(.fa-link):hover { background-color: #e0f2fe !important; }
.list-item-actions .item-favourite:hover { background-color: #fef9c3 !important; }
.list-item-actions .list-item-clicktodelete:hover { background-color: #fee2e2 !important; }

/* Dark mode circles */
body.dark-mode .list-item-actions .list-item-clicktoshow { background-color: rgba(59, 130, 246, 0.12) !important; }
body.dark-mode .list-item-actions .list-item-clicktoedit { background-color: rgba(247, 144, 9, 0.12) !important; }
body.dark-mode .list-item-actions .fa-clickable-login { background-color: rgba(99, 102, 241, 0.12) !important; }
body.dark-mode .list-item-actions .fa-clickable-password { background-color: rgba(18, 183, 106, 0.12) !important; }
body.dark-mode .list-item-actions .fa-stack:has(.fa-link) { background-color: rgba(11, 165, 236, 0.12) !important; }
body.dark-mode .list-item-actions .item-favourite { background-color: rgba(234, 179, 8, 0.12) !important; }
body.dark-mode .list-item-actions .list-item-clicktodelete { background-color: rgba(240, 68, 56, 0.12) !important; }

body.dark-mode .list-item-actions .list-item-clicktoshow:hover { background-color: rgba(59, 130, 246, 0.2) !important; }
body.dark-mode .list-item-actions .list-item-clicktoedit:hover { background-color: rgba(247, 144, 9, 0.2) !important; }
body.dark-mode .list-item-actions .fa-clickable-login:hover { background-color: rgba(99, 102, 241, 0.2) !important; }
body.dark-mode .list-item-actions .fa-clickable-password:hover { background-color: rgba(18, 183, 106, 0.2) !important; }
body.dark-mode .list-item-actions .fa-stack:has(.fa-link):hover { background-color: rgba(11, 165, 236, 0.2) !important; }
body.dark-mode .list-item-actions .item-favourite:hover { background-color: rgba(234, 179, 8, 0.2) !important; }
body.dark-mode .list-item-actions .list-item-clicktodelete:hover { background-color: rgba(240, 68, 56, 0.2) !important; }

/* Hide the circle background */
.list-item-actions .fa-stack .fa-circle.fa-stack-2x {
    display: none !important;
}

/* Reset inner icon from stacked/inverse to normal */
.list-item-actions .fa-stack .fa-stack-1x {
    font-size: 15px !important;
    position: relative !important;
    color: inherit !important;
}

/* Individual icon colors */
.list-item-actions .list-item-clicktoshow .fa-stack-1x {
    color: #3b82f6 !important; /* blue - Open */
}

.list-item-actions .list-item-clicktoedit .fa-stack-1x {
    color: #f79009 !important; /* orange - Edit */
}

.list-item-actions .fa-clickable-login .fa-stack-1x {
    color: #6366f1 !important; /* indigo - Copy login */
}

.list-item-actions .fa-clickable-password .fa-stack-1x {
    color: #12b76a !important; /* green - Copy password */
}

.list-item-actions .fa-stack .fa-link {
    color: #0ba5ec !important; /* cyan - Open URL */
}

.list-item-actions .item-favourite .fa-stack-1x {
    color: #eab308 !important; /* yellow - Favourite */
}

.list-item-actions .list-item-clicktodelete .fa-stack-1x {
    color: #f04438 !important; /* red - Delete */
}

/* Hover: darken icons */
.list-item-actions .list-item-clicktoshow:hover .fa-stack-1x { color: #2563eb !important; }
.list-item-actions .list-item-clicktoedit:hover .fa-stack-1x { color: #dc6803 !important; }
.list-item-actions .fa-clickable-login:hover .fa-stack-1x { color: #4f46e5 !important; }
.list-item-actions .fa-clickable-password:hover .fa-stack-1x { color: #059669 !important; }
.list-item-actions .fa-stack:hover .fa-link { color: #0284c7 !important; }
.list-item-actions .item-favourite:hover .fa-stack-1x { color: #ca8a04 !important; }
.list-item-actions .list-item-clicktodelete:hover .fa-stack-1x { color: #dc2626 !important; }

/* Fix link inside stack */
.list-item-actions .fa-stack a.no-link {
    color: inherit !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Dark mode icon colors - slightly brighter */
body.dark-mode .list-item-actions .list-item-clicktoshow .fa-stack-1x { color: #60a5fa !important; }
body.dark-mode .list-item-actions .list-item-clicktoedit .fa-stack-1x { color: #fbbf24 !important; }
body.dark-mode .list-item-actions .fa-clickable-login .fa-stack-1x { color: #818cf8 !important; }
body.dark-mode .list-item-actions .fa-clickable-password .fa-stack-1x { color: #34d399 !important; }
body.dark-mode .list-item-actions .fa-stack .fa-link { color: #38bdf8 !important; }
body.dark-mode .list-item-actions .item-favourite .fa-stack-1x { color: #facc15 !important; }
body.dark-mode .list-item-actions .list-item-clicktodelete .fa-stack-1x { color: #f87171 !important; }

/* ============================================================
   Pace.js - Centered spinner loader
   ============================================================ */

/* Hide default pace elements */
.pace .pace-progress,
.pace .pace-activity {
    display: none !important;
}

/* Overlay */
.pace.pace-active::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    z-index: 99998;
    pointer-events: none;
}

body.dark-mode .pace.pace-active::before {
    background: rgba(16, 24, 40, 0.6);
}

/* Spinner */
.pace.pace-active::after {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    border: 4px solid var(--border-color);
    border-top-color: var(--imar-brand);
    border-right-color: var(--imar-brand);
    border-radius: 50%;
    animation: tp-spin 0.6s linear infinite;
    z-index: 99999;
}

@keyframes tp-spin {
    to { transform: rotate(360deg); }
}

/* When pace is done, hide everything */
.pace.pace-inactive::before,
.pace.pace-inactive::after {
    display: none;
}

/* ============================================================
   Toastr - Light/Dark Toast Notifications
   ============================================================ */

/* ---- Base ---- */
#toast-container > div {
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    padding: 16px 44px 16px 20px !important;
    font-family: 'Outfit', sans-serif !important;
    opacity: 1 !important;
    background-image: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 320px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* ---- Light Mode Toasts ---- */

#toast-container > .toast-success {
    background-color: #F0FDF4 !important;
    background-image: none !important;
    color: #1d2939 !important;
    border: 1px solid #BBF7D0 !important;
}

#toast-container > .toast-error {
    background-color: #FEF2F2 !important;
    background-image: none !important;
    color: #1d2939 !important;
    border: 1px solid #FECACA !important;
}

#toast-container > .toast-info {
    background-color: #EFF6FF !important;
    background-image: none !important;
    color: #1d2939 !important;
    border: 1px solid #BFDBFE !important;
}

#toast-container > .toast-warning {
    background-color: #FFFBEB !important;
    background-image: none !important;
    color: #1d2939 !important;
    border: 1px solid #FDE68A !important;
}

/* ---- Dark Mode Toasts ---- */

body.dark-mode #toast-container > .toast-success {
    background-color: #12b76a !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
}

body.dark-mode #toast-container > .toast-error {
    background-color: #f04438 !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
}

body.dark-mode #toast-container > .toast-info {
    background-color: #3b82f6 !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
}

body.dark-mode #toast-container > .toast-warning {
    background-color: #f79009 !important;
    background-image: none !important;
    border: none !important;
}

/* ---- Icon Badges ---- */

#toast-container > .toast-success::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 8px;
    background-color: #12b76a;
    color: #ffffff;
    font-size: 16px;
}

#toast-container > .toast-error::before {
    content: '\f00d';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 8px;
    background-color: #f04438;
    color: #ffffff;
    font-size: 16px;
}

#toast-container > .toast-info::before {
    content: '\f129';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 8px;
    background-color: #3b82f6;
    color: #ffffff;
    font-size: 16px;
}

#toast-container > .toast-warning::before {
    content: '\21';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 8px;
    background-color: #f79009;
    color: #ffffff;
    font-size: 16px;
}

/* Dark mode icon badges */
body.dark-mode #toast-container > .toast-success::before,
body.dark-mode #toast-container > .toast-error::before,
body.dark-mode #toast-container > .toast-info::before,
body.dark-mode #toast-container > .toast-warning::before {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* ---- Toast Title ---- */
#toast-container > div .toast-title {
    font-weight: 700 !important;
    font-size: 15px !important;
    margin-bottom: 2px !important;
    display: block !important;
    color: #1d2939 !important;
}

body.dark-mode #toast-container > div .toast-title {
    color: #ffffff !important;
}

/* ---- Toast Message ---- */
#toast-container > div .toast-message {
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #667085 !important;
}

body.dark-mode #toast-container > div .toast-message {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ---- Close Button ---- */
#toast-container .toast-close-button {
    color: #98a2b3 !important;
    font-weight: 300 !important;
    font-size: 20px !important;
    opacity: 1 !important;
    text-shadow: none !important;
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

#toast-container .toast-close-button:hover {
    color: #1d2939 !important;
}

body.dark-mode #toast-container .toast-close-button {
    color: rgba(255, 255, 255, 0.4) !important;
}

body.dark-mode #toast-container .toast-close-button:hover {
    color: #ffffff !important;
}

/* ---- Progress Bar ---- */
#toast-container .toast-progress {
    background-color: rgba(0, 0, 0, 0.06) !important;
    border-radius: 0 0 16px 16px !important;
    height: 3px !important;
}

body.dark-mode #toast-container .toast-progress {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* ---- Center Position ---- */
#toast-container.toast-center {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    max-width: 420px !important;
    margin: 0 !important;
}

/* ---- Login Page Toasts: always light style + centered ---- */

body.login-page #toast-container,
body.login-page #toast-container.toast-top-center,
body.login-page #toast-container.toast-top-right,
body.login-page #toast-container.toast-top-left,
body.login-page #toast-container.toast-bottom-center,
body.login-page #toast-container.toast-bottom-right,
body.login-page #toast-container.toast-bottom-left,
body.login-page #toast-container.toast-bottom-full-width,
body.login-page #toast-container.toast-top-full-width {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    max-width: 420px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================================
   Login page toast: exact style from screenshot_05365
   White background, colored border, icon badge, centered
   ============================================================ */

/* All login toasts: white bg, subtle border, centered */
body.login-page #toast-container > div,
body.login-page.dark-mode #toast-container > div,
body.dark-mode.login-page #toast-container > div {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #1d2939 !important;
    border: 1px solid #d1fae5 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    padding: 16px 44px 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 320px !important;
}

/* Login toast title: bold dark */
body.login-page #toast-container > div .toast-title,
body.login-page.dark-mode #toast-container > div .toast-title,
body.dark-mode.login-page #toast-container > div .toast-title {
    font-weight: 700 !important;
    font-size: 15px !important;
    color: #1d2939 !important;
    margin-bottom: 2px !important;
}

/* Login toast message: gray */
body.login-page #toast-container > div .toast-message,
body.login-page.dark-mode #toast-container > div .toast-message,
body.dark-mode.login-page #toast-container > div .toast-message {
    font-weight: 400 !important;
    font-size: 14px !important;
    color: #667085 !important;
    line-height: 1.5 !important;
}

/* Login toast close button: gray, centered vertically */
body.login-page #toast-container .toast-close-button,
body.login-page.dark-mode #toast-container .toast-close-button,
body.dark-mode.login-page #toast-container .toast-close-button {
    color: #98a2b3 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    font-weight: 300 !important;
    font-size: 20px !important;
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Login toast icons: always use colored badge (not dark-mode transparent) */
body.login-page #toast-container > .toast-success::before,
body.login-page.dark-mode #toast-container > .toast-success::before,
body.dark-mode.login-page #toast-container > .toast-success::before {
    background-color: #12b76a !important;
}

body.login-page #toast-container > .toast-error::before,
body.login-page.dark-mode #toast-container > .toast-error::before,
body.dark-mode.login-page #toast-container > .toast-error::before {
    background-color: #f04438 !important;
}

body.login-page #toast-container > .toast-info::before,
body.login-page.dark-mode #toast-container > .toast-info::before,
body.dark-mode.login-page #toast-container > .toast-info::before {
    background-color: #3b82f6 !important;
}

body.login-page #toast-container > .toast-warning::before,
body.login-page.dark-mode #toast-container > .toast-warning::before,
body.dark-mode.login-page #toast-container > .toast-warning::before {
    background-color: #f79009 !important;
}

/* Login toast: center on left panel only */
body.login-page #toast-container,
body.login-page #toast-container.toast-top-center,
body.login-page #toast-container.toast-top-right,
body.login-page #toast-container.toast-top-left,
body.login-page #toast-container.toast-bottom-center,
body.login-page #toast-container.toast-bottom-right,
body.login-page #toast-container.toast-bottom-left,
body.login-page #toast-container.toast-bottom-full-width,
body.login-page #toast-container.toast-top-full-width,
body.login-page #toast-container.toast-center {
    position: fixed !important;
    top: 50% !important;
    left: 25% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    max-width: 400px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 100000 !important;
}

@media (max-width: 1023px) {
    body.login-page #toast-container,
    body.login-page #toast-container.toast-top-center,
    body.login-page #toast-container.toast-top-right,
    body.login-page #toast-container.toast-top-left,
    body.login-page #toast-container.toast-bottom-center,
    body.login-page #toast-container.toast-bottom-right,
    body.login-page #toast-container.toast-bottom-left,
    body.login-page #toast-container.toast-bottom-full-width,
    body.login-page #toast-container.toast-top-full-width,
    body.login-page #toast-container.toast-center {
        left: 50% !important;
    }
}

/* Custom toast class without background-image pattern */
#toast-container > .toast-info-custom {
    background-image: none !important;
    background: #ffffff !important;
}

#toast-container > .toast-info-custom::before {
    content: '\f129' !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 8px !important;
    background-color: #3b82f6 !important;
    color: #ffffff !important;
    font-size: 14px !important;
}

/* Navbar items: center vertically in header */
.main-header .navbar-nav {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

.main-header .navbar-nav .nav-item {
    display: flex !important;
    align-items: center !important;
}

.main-header .navbar-nav .nav-link {
    display: flex !important;
    align-items: center !important;
}

.main-header .navbar-nav .dropdown {
    display: flex !important;
    align-items: center !important;
}

.main-header .navbar-nav .dropdown .btn {
    display: flex !important;
    align-items: center !important;
}

#countdown {
    margin-right: 5px !important;
    display: flex !important;
    align-items: center !important;
}

/* Override AdminLTE sidebar margin-top for 80px header */
.layout-navbar-fixed .wrapper .sidebar {
    margin-top: 80px !important;
}

.layout-navbar-fixed.layout-fixed .wrapper .sidebar {
    margin-top: 80px !important;
}

/* Override AdminLTE content-wrapper margin-top for 80px header */
.layout-navbar-fixed .content-wrapper {
    margin-top: 80px !important;
}

.layout-navbar-fixed.layout-fixed .content-wrapper {
    margin-top: 80px !important;
}

/* Folder tree: no scroll, show all items */
#jstree {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}

#folder-tree-container .card-body {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}

#folder-tree-container .card {
    overflow: visible !important;
}

#folders-tree-card {
    height: auto !important;
}

/* Content wrapper: increase inner padding */
.content-wrapper > .content {
    padding: 24px !important;
}

.content-wrapper > .content-header {
    padding: 24px 24px 0 !important;
}

/* Folder tree: clean background like BookmarkShare */
#jstree {
    background-color: var(--bg-card) !important;
}

#jstree .jstree-node,
#jstree .jstree-anchor {
    color: var(--text-primary) !important;
}

#jstree .jstree-hovered {
    background-color: var(--bg-hover) !important;
    border-radius: 6px !important;
}

#jstree .jstree-clicked {
    background-color: var(--imar-brand-light) !important;
    color: var(--imar-brand) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

body.dark-mode #jstree .jstree-clicked {
    background-color: rgba(220, 38, 38, 0.15) !important;
    color: #f87171 !important;
}

/* Remove default jstree dark background */
#jstree.jstree-default-dark .jstree-node,
#jstree.jstree-default-dark .jstree-anchor {
    color: var(--text-primary) !important;
}

#jstree.jstree-default-dark {
    background-color: var(--bg-card) !important;
}

#jstree.jstree-default-dark .jstree-hovered {
    background-color: var(--bg-hover) !important;
}

#jstree.jstree-default-dark .jstree-clicked {
    background-color: rgba(220, 38, 38, 0.15) !important;
    color: #f87171 !important;
}

/* Folder tree: margin-top */
#jstree {
    margin-top: 15px !important;
}

/* Navbar right items: reduce gap to 10px */
.main-header .navbar-nav.ml-auto > li,
.main-header .navbar-nav.ml-auto > .nav-item {
    margin-left: 5px !important;
    margin-right: 0 !important;
}

.main-header .navbar-nav.ml-auto > li:first-child {
    margin-left: 0 !important;
}