/* ═══════════════════════════════════════════════════════════
   CITYSTAY Design System
   Brand tokens extracted from login.css
   Primary: #ffae00 | Font: Titillium Web
   ═══════════════════════════════════════════════════════════ */

/* ── Default page card spacing ──
   Any card that is a direct child of the main content container
   gets mt-2 mb-4 by default — no explicit classes needed on new pages. */
.app-content .container-fluid > .card {
    margin-top:    0.5rem;   /* equivalent to mt-2 */
    margin-bottom: 1.5rem;   /* equivalent to mb-4 */
}

:root {
    --cs-primary:       #ffae00;
    --cs-primary-dark:  #cc8c00;
    --cs-primary-light: rgba(255, 174, 0, 0.12);
    --cs-input-bg:      #e6e6e6;
    --cs-input-radius:  10px;

    /* Bootstrap 5 overrides */
    --bs-primary:            #ffae00;
    --bs-primary-rgb:        255, 174, 0;
    --bs-link-color:         #cc8c00;
    --bs-link-hover-color:   #a07000;
    --bs-body-font-family:   "Titillium Web", "Source Sans 3", sans-serif;
    --bs-btn-border-radius:  10px;
    --bs-border-radius:      10px;
}

/* ── 1. Font ── */
body, input, button, select, textarea {
    font-family: "Titillium Web", "Source Sans 3", sans-serif;
}

/* ── 2. Primary buttons ── */
.btn-primary {
    background-color: var(--cs-primary) !important;
    border-color:     var(--cs-primary) !important;
    color:            #000 !important;
    border-radius:    var(--cs-input-radius);
    font-weight:      600;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--cs-primary-dark) !important;
    border-color:     var(--cs-primary-dark) !important;
    color:            #000 !important;
}

/* ── 3. Outline-primary buttons ── */
.btn-outline-primary {
    color:        var(--cs-primary-dark) !important;
    border-color: var(--cs-primary) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.active,
.btn-outline-primary:active,
.btn-check:checked + .btn-outline-primary {
    background-color: var(--cs-primary) !important;
    border-color:     var(--cs-primary) !important;
    color:            #000 !important;
}

/* ── 4. All buttons — rounded ── */
.btn {
    border-radius: var(--cs-input-radius);
}

/* ── 5. Links ── */
a:not(.nav-link):not(.btn):not(.dropdown-item):not(.brand-link) {
    color: var(--cs-primary-dark);
}
a:not(.nav-link):not(.btn):not(.dropdown-item):not(.brand-link):hover {
    color: var(--cs-primary);
}

/* ── 6. Form controls ── */
.form-control,
.form-select {
    border-radius:    var(--cs-input-radius);
    background-color: var(--cs-input-bg);
    border:           1px solid rgba(0, 0, 0, 0.1);
}
.form-control:focus,
.form-select:focus {
    border-color:     var(--cs-primary);
    box-shadow:       0 0 0 3px rgba(255, 174, 0, 0.2);
    background-color: #f0f0f0;
}
.input-group > .form-control:not(:first-child),
.input-group > .form-control:not(:last-child) {
    border-radius: 0;
}
.input-group > .form-control:first-child {
    border-radius: var(--cs-input-radius) 0 0 var(--cs-input-radius);
}
.input-group > .form-control:last-child {
    border-radius: 0 var(--cs-input-radius) var(--cs-input-radius) 0;
}

/* ── 7. Cards ── */
.card {
    border-radius: var(--cs-input-radius);
}
.card-header {
    border-left: 3px solid var(--cs-primary);
    font-weight: 600;
}

/* ── 8. Sidebar – active & hover states ──
   AdminLTE 4 uses its own CSS vars on .sidebar-wrapper.
   Override them at the aside level so they cascade correctly. */
.app-sidebar {
    --lte-sidebar-submenu-active-color: var(--cs-primary);
    --lte-sidebar-submenu-active-bg:    var(--cs-primary-light);
    --lte-sidebar-hover-color:          var(--cs-primary);
    --lte-sidebar-hover-bg:             var(--cs-primary-light);
}
/* Fallback explicit rules in case the vars aren't enough */
.sidebar-wrapper .nav-treeview > .nav-item > .nav-link.active,
.sidebar-wrapper .nav-treeview > .nav-item > .nav-link.active:hover,
.sidebar-wrapper .nav-treeview > .nav-item > .nav-link.active:focus {
    color:            var(--cs-primary) !important;
    background-color: var(--cs-primary-light) !important;
}
.sidebar-wrapper .nav-treeview > .nav-item > .nav-link:not(.active):hover {
    color: var(--cs-primary) !important;
}
/* Active icon dot */
.sidebar-wrapper .nav-treeview > .nav-item > .nav-link.active .nav-icon {
    color: var(--cs-primary) !important;
}

/* ── 9. Sidebar brand text ── */
.sidebar-brand .brand-text {
    color: var(--cs-primary) !important;
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* ── 10. Page titles / headings ── */
.card-title {
    font-weight: 700;
}

/* ── 11. Focus ring ── */
*:focus-visible {
    outline:        2px solid var(--cs-primary);
    outline-offset: 2px;
}

/* ── 12. Badges ── */
.badge.bg-primary {
    background-color: var(--cs-primary) !important;
    color: #000 !important;
}

/* ── 13. Sidebar user panel (bottom) ── */
.sidebar-wrapper .btn-outline-secondary {
    border-color: rgba(0,0,0,0.2);
    color: #555;
}
.sidebar-wrapper .btn-outline-secondary:hover {
    background-color: var(--cs-primary-light);
    border-color: var(--cs-primary);
    color: var(--cs-primary-dark);
}

.dropdown-menu {
    min-height: 550px;
    min-width: 350px;
}


/* Custom CSS styles for tooltips and table filters */
tr.has-tooltip {
    cursor: help;
}
tr.has-tooltip:hover {
    background-color: #f8f9fa;
}

.tooltip-inner {
    max-width: 600px !important;
    background-color: #e4e4e4 !important;
	font-size: large;
    color: #111 !important;
    text-align: start !important;
    border-radius: 6px !important;
    padding: 10px !important;
    border: 1px solid #ccc;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.tooltip-inner hr {
    margin: 8px 0;
    opacity: 0.2;
    border-top: 1px solid #000;
}

/* Styles for DataTable column filters*/

thead tr.filters th {
    padding: 4px;
}
thead tr.filters input,
thead tr.filters select {
    width: 100%;
    font-size: 0.85em;
}