/* =========================================================
   Site-wide theme tokens.
   Defined here (loaded on every page via base.html) rather than
   in a page-specific stylesheet, so every page's CSS references
   the same source of truth instead of duplicating hex values.

   SITE-WIDE LIGHT THEME. The project no longer ships a dark
   theme anywhere: every shared/unscoped rule below (header,
   footer, nav, #con_list, #con_set, .con_form, form fields,
   Select2, DataTables) now uses the light "Citron CMS" (--cms-*)
   palette as its actual default, not just as an override bolted
   on per page. Previously these shared rules still used the old
   dark --hm-* tokens, and because several of them (.con_form,
   .con_form .form-control, the mobile nav drawer) have higher
   specificity than the light overrides individual page
   stylesheets were adding, the dark styling was silently winning
   in places — nested form cards and form inputs in particular.
   Fixed at the source here instead of chasing it per page.
   The --hm-* tokens themselves are kept defined below, unused,
   purely so nothing breaks if some other file not covered by
   this pass still references them directly; nothing in this
   file uses them anymore. */
:root {
    /* -------- Slate + Gold (deprecated, unused — kept only for
       compatibility with any other file that might still
       reference these tokens directly) -------- */
    --hm-primary: #173f67;
    --hm-primary-deep: #0d2945;
    --hm-accent: #ffc902;
    --hm-ink: #eef1f4;
    --hm-sub: #9aa5b1;
    --hm-border: rgba(255, 255, 255, .10);
    --hm-surface: #1e2229;
    --hm-surface-muted: #262b33;
    --hm-shadow: 0 4px 16px rgba(0, 0, 0, .35);
    --hm-shadow-hover: 0 8px 24px rgba(0, 0, 0, .45);
    --hm-radius: 12px;

    /* -------- Citron CMS light theme (landing / login) --------
       Values as provided in the project's own design-system
       :root block — reproduced here so every page can reference
       them, not just whichever page's CSS originally declared
       them. Only the subset confirmed against the actual landing
       screenshot is included; the rest of that design-system file
       (typography scale, spacing scale, transitions, etc.) is
       page-specific enough that it should stay in index.css /
       login-modern.css rather than move here — token values used
       for color/surface consistency are what belongs site-wide. */
    --cms-primary: #fc7c0a;
    --cms-primary-light: #fda95e;
    --cms-primary-dark: #ca6002;
    --cms-accent: #fc7c0a;
    --cms-accent-soft: #fedfc3;

    --cms-bg: #f6f4ec;
    --cms-surface: #fdfbf6;
    --cms-surface-soft: #f4f1e8;

    --cms-text: #263238;
    --cms-text-dark: #172027;
    --cms-text-light: #607d8b;
    --cms-text-muted: #78909c;
    --cms-text-on-dark: #f5f5f5;

    --cms-border: rgba(60, 70, 75, 0.18);
    --cms-border-light: rgba(255, 255, 255, 0.55);
    --cms-border-dark: rgba(252, 124, 10, 0.22);
    --cms-radius: 5px;

    /* Present in the original design-system file but not yet seen
       in use on any confirmed page — kept for compatibility so
       nothing breaks if login.css/index.css already reference
       them, but flagged: verify against the real files before
       building anything new on top of these two. */
    --cms-dark-bg: #07110f;
    --cms-dark-surface: #101d1a;
}

/* =========================================================
   RESPONSIVE BREAKPOINT SCALE — mobile-first.

   CSS custom properties can't be read inside @media conditions,
   so these are documented here as the single source of truth and
   used as literal px values everywhere below. Every rule in this
   file is written unscoped (= XXSM, the base case) first; each
   tier after that only ADDS or OVERRIDES what actually needs to
   change at that width, via min-width, so the cascade reads top
   to bottom as progressive enhancement rather than a desktop
   layout being shrunk back down.

     XXSM   0px+      extremely small mobile      (base, no query)
     XS     360px+    small mobile
     SM     576px+    standard mobile / small tablet
     MD     768px+    tablet                       (Bootstrap's own
                                                     navbar-expand-md
                                                     switch also sits
                                                     here)
     LG     992px+    small desktop / laptop
     XL     1200px+   desktop
     XXL    1400px+   large desktop
     XXLG   1920px+   extra-large / very large desktop

   Orientation/height are handled separately from the width tiers
   above wherever viewport HEIGHT — not width — is the binding
   constraint (short mobile/tablet landscape, the login screen,
   the mobile nav drawer): see "ORIENTATION & HEIGHT-AWARE RULES"
   near the end of this file.
   ========================================================= */

body {
    margin: 0 auto;
    width: 100%;        /* was: 100vw — included the scrollbar gutter,
                            a common cause of horizontal overflow */
    min-height: 100vh;  /* was: height: 100vh (previously 99vh) — a
                            hard cap meant a genuinely tall page had
                            nowhere to grow and got squeezed by
                            justify-content: space-between instead */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--cms-bg);
    color: var(--cms-text);

    /* Global type foundation. IBM Plex Sans was already being
       loaded in base.html's <head> but was previously applied
       nowhere except one scoped rule (body.page-home nav links) —
       every other element fell back to the Bootstrap default
       stack. font-size/line-height are declared explicitly at
       Bootstrap's own existing defaults (1rem / 1.5) so the values
       are documented and predictable, without changing any
       rendered size. */
    font-family: 'IBM Plex Sans', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

/* XXSM base: a fixed-height header is fine down to the smallest
   phones (60px against a ~28px logo still has headroom), but the
   horizontal gutter and logo scale up in stages as width allows —
   see the XS/SM/MD enhancements below instead of a single desktop
   value getting clamped back down on small screens. */
#con_head {
    height: 60px;
    min-height: 60px;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    position: relative;
    z-index: 10;
    background: var(--cms-surface);
    box-shadow: 0 1px 0 var(--cms-border), 0 2px 12px rgba(23, 32, 39, .05);
}

.head_menu {
    flex: 1 1 auto;
    min-width: 0;
}

.head_menu .navbar {
    width: 100%;
}

.head_menu .navbar-collapse {
    width: 100%;
}

.logo_img {
    height: 28px;
    width: auto;
    display: block;
    font-size: 0.9rem;
}
.head_title{
    font-size: 10pt;
    font-weight: 300;
    padding: 0 5px;
    align-items: flex-start;
}

#con_head a{
    text-decoration: unset;
}

/* Base nav-link affordances the "Modern Corporate" block below
   doesn't redeclare (hit target padding, the background half of the
   hover transition). Color, letter-spacing, border-radius, and the
   Bootstrap-specificity workaround now live in that block only —
   they used to be duplicated up here with different values, which
   is exactly the source-order/specificity trap this file's header
   comment warns about, so keep this rule to non-overlapping props. */
.navbar-custom a{
    padding: 8px 14px !important;
    transition: color .15s ease, background .15s ease;
}

.dropdown-custom, .dropdown-custom:hover{
    background: transparent;
}

/* -------- Navbar retheme — Modern Corporate, site-wide --------
   Originally built for home.php only (scoped under body.page-home)
   and later promoted to every page that renders the nav, so the
   header/menu look identical everywhere instead of home.php having
   a distinct treatment. Trending patterns applied here:
   frosted-glass floating header (gains a shadow once scrolled),
   an animated sliding underline indicator that tracks hover/active
   state behind the nav links instead of each link animating its
   own background independently, and a soft fade+lift entrance on
   the dropdown instead of Bootstrap's instant show/hide. The JS
   half of this (positioning the indicator, toggling the scrolled
   state) lives in base.html and now runs on every page that has a
   nav (it no-ops safely where there isn't one). */

#con_head {
    background: rgba(253, 251, 246, .78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--cms-border);
    box-shadow: none;
    transition: box-shadow .2s ease, background .2s ease;
}

#con_head.is_scrolled {
    background: rgba(253, 251, 246, .94);
    box-shadow: 0 8px 24px rgba(23, 32, 39, .08);
}

.navbar-nav {
    position: relative;
}

/* Sliding underline — replaces the earlier filled-pill treatment.
   Same JS positioning logic as before (translateX + width tracking
   the hovered/active .nav-item's actual bounding box); only the
   visual style changed here, from a full-height rounded rect to a
   thin bar sitting just under the text. */
.nav_indicator {
    position: absolute;
    left: 0;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--cms-primary);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: transform .25s cubic-bezier(.4, 0, .2, 1),
                width .25s cubic-bezier(.4, 0, .2, 1),
                opacity .15s ease;
}

@media (max-width: 767.98px) {
    .nav_indicator {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .nav_indicator {
        display: block;
    }
}

.navbar-nav.is_active .nav_indicator {
    opacity: 1;
}

.navbar-custom a,
.navbar-custom .nav-link {
    position: relative;
    z-index: 1;
    color: var(--cms-text);
    /* font-family removed — now inherited from body */
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: 8px;
    transition: color .15s ease;
}

/* Text takes the brand/logo color on hover — the sliding underline
   handles the positional highlight, so no background fill needed
   on the link itself. */
.navbar-custom a:hover,
.navbar-custom .nav-link:hover {
    color: var(--cms-primary);
}

/* The button still carries Bootstrap's built-in navbar-toggler-icon
   span; we override its background-image so the bars render in the
   theme's dark text color instead of Bootstrap's near-white
   navbar-dark default, which was made for a dark header and was
   nearly invisible against this light frosted one. Color matches
   --cms-text-dark (#172027) at 85% opacity, same softened-black
   treatment Bootstrap's own navbar-light icon uses. */
.navbar-custom .navbar-toggler {
    border-color: var(--cms-border);
    border-radius: 8px;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.navbar-custom .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(23, 32, 39, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Hover/focus affordances matching the nav links' own treatment —
   a soft accent tint plus the same brand-colored focus ring used on
   form fields elsewhere ( var(--cms-primary) at low opacity). */
.navbar-custom .navbar-toggler:hover {
    background: var(--cms-accent-soft);
    border-color: var(--cms-border-dark);
}

.navbar-custom .navbar-toggler:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(252, 124, 10, .25);
}

.nav-item {
    border-bottom: none;
}

.nav-item:hover {
    border-bottom: none;
    background: none;
}

.active {
    border-bottom: none;
}

/* Active page: brand-colored text, permanent underline (positioned
   by JS on load/mouseleave) — same visual language as hover instead
   of a separate filled-pill treatment, so the two states read as
   variations of one idea rather than two different UI patterns. */
.active .nav-link,
.active a {
    color: var(--cms-primary) !important;
    background: rgba(255, 201, 2, .08);
}

.active .nav-link:hover {
    color: var(--cms-primary-dark) !important;
}

.dropdown-menu {
    background-color: var(--cms-surface);
    border: 1px solid var(--cms-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(23, 32, 39, .14);
    padding: 8px;
    margin-top: 10px;
    /* Bootstrap toggles the .show class on open/close via its own
       dropdown JS — this just animates that same state transition
       (fade + slight lift) instead of the library's default
       instant display swap. display:block is intentional here so
       the opacity/transform transition has something to animate;
       pointer-events:none keeps it non-interactive while hidden. */
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease;
    /*display: block;*/
    pointer-events: none;
}

.dropdown-menu.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.dropdown-item {
    border-radius: 8px;
}

.dropdown-item:hover {
    background: var(--cms-accent-soft);
    color: var(--cms-primary-dark);
}

.dropdown-custom a {
    color: var(--cms-text-light);
    border-radius: 6px;
}

.dropdown-custom a:hover {
    color: var(--cms-primary-dark);
    background: var(--cms-accent-soft);
}

@media (prefers-reduced-motion: reduce) {
    .nav_indicator,
    .dropdown-menu,
    #con_head {
        transition: none !important;
    }
}


#con_nav a{
    color: var(--cms-text-light);
}

#con_nav:hover a{
    color: var(--cms-primary) !important;
}

/* XXSM base: single-column flow, tight gutters. Widens in stages
   at SM/MD/LG/XL rather than a desktop 24px/20px gutter being
   squeezed down on phones. */
#con_main {
    flex: 1 1 auto;
    min-height: 0;
    flex-flow: column wrap;
    /* was: align-items: center; justify-content: space-around —
       combined with no padding at all, this meant content sat
       flush against the header with zero top gap on tall pages,
       and floated vertically centered on short ones (wrong for a
       dashboard app). flex-start lets each page's own centered
       panels, e.g. #con_list's margin: 0 auto, still center
       themselves without a second layer of centering fighting it. */
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    padding: 16px 12px;
    background: var(--cms-bg);
    color: var(--cms-text);
}

/* Removed: ".page-index #con_main > div" (dark glass-card block).
   This was a leftover from an earlier design iteration — the real
   index/landing page uses a separate light --cms-* palette entirely
   (confirmed against the actual index screenshot), so this dark
   rule never matched any current page. Keeping it scoped behind a
   page class rather than deleting it would have preserved dead,
   misleading CSS; removed outright instead. */


#con_logo{
    display: flex;
    align-items: center;
    font-size: 1.5em;
}

/* Replaces the inline style="display:flex;align-items:center;
   text-decoration:none;" that was previously on the logo <a> in
   base.html — same three declarations, moved into the stylesheet. */
.logo_link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo_cms_text {
    margin-left: 8px;
    font-size: .95rem;
    line-height: 1;
    border-left: 2px solid var(--cms-border-dark);
    padding-left: 8px;
    color: var(--cms-primary-dark);
    letter-spacing: .5px;
}

#btn_add{
    margin-bottom: 5px;
}

#con_foot {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 12px;
    background: var(--cms-surface);
    border-top: 1px solid var(--cms-border);
}

#foot_txt {
    color: var(--cms-text-muted);
    text-decoration: unset;
    letter-spacing: .05em;
    font-size: .72rem;
    font-weight: 600;
    padding: 0;
    text-align: center;
}

#ft_msg {
    display: none;
}
.con_common{
    display: flex;
    border: 0px dashed #acaccf;
}


#con_list{
    /* width: 70% removed — conflicted with per-page #con_list rules
       (max-width: 1100px; width: 100%), which now win only because
       they load after this and happen to have matching specificity.
       Left as dead weight otherwise. */

    /* Generic data-list panel look — moved here from home.css /
       mytickets.css (both defined this identically), so every page
       using this markup gets it without redeclaring it per page. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 20px;
    padding: 14px;

    background: var(--cms-surface);
    border: 1px solid var(--cms-border);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(23, 32, 39, .07);
    color: var(--cms-text-dark);
}

/* Universal table-overflow protection. Every page's #con_list wraps
   a #tbl_data DataTable; on narrow screens a table with several
   columns (issue lists, user lists) is wider than the viewport.
   Without this, the table either breaks the page's layout width or
   gets silently clipped — instead it now scrolls horizontally inside
   its own box, leaving the rest of the page layout untouched. */
#con_list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#tbl_data{
    width: 100%;
    min-width: 560px; /* keeps columns readable instead of crushing to fit;
                          #con_list's overflow-x:auto scrolls this container
                          rather than forcing the page to overflow */
    font-size: 0.72rem;
    line-height: 1;
}

#tbl_data th{
    line-height: 1;
}

/* -------- Generic settings / detail-form panel --------
   Same reasoning as #con_list above: identical block previously
   duplicated in home.css and mytickets.css. */
/* XXSM base: one column, tight padding. #con_set naturally stacks
   its .con_form children into a single column because each one is
   flex-basis 320px and the viewport is narrower than that — no
   extra rule needed for the stack itself, just the spacing scale. */
#con_set {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 16px;

    background: var(--cms-surface);
    border: 1px solid var(--cms-border);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(23, 32, 39, .07);
}

#frm_set {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    padding: 4px;
}

/* flex: 1 1 320px lets two .con_form panels sit side by side once
   MD+ gives them room (see the ticket info / ticket details example
   in the MD tier below), and stack cleanly on anything narrower —
   the same rule serves both cases via ordinary flex-wrap. */
.con_form {
    flex: 1 1 320px;
    min-width: 0;
    padding: 14px;

    background: var(--cms-surface-soft);
    border: 1px solid var(--cms-border);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(23, 32, 39, .05);
    color: var(--cms-text-dark);
}

/* XXSM base: labels sit ABOVE their control (a plain block stack)
   rather than sharing a row — this is the one property that most
   needs to differ for touch/narrow screens, so it's the mobile
   default instead of something bolted on via a max-width override
   further down. SM+ switches these back into inline label/control
   rows once there's width to spare. */
.con_form .form-group.row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 14px;
}

.con_form .form-group.row:last-child {
    margin-bottom: 0;
}

.con_form .col-form-label {
    color: var(--cms-text-light);
    font-weight: 700;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    display: flex;
    align-items: flex-start;
    padding: 0 0 6px;
}

.con_form .col-sm-3,
.con_form .col-sm-8,
.con_form .col-sm-9 {
    max-width: 100%;
    flex: 1 1 100%;
    width: 100%;
}

.con_form .form-control {
    background: var(--cms-surface);
    border: 1px solid var(--cms-border);
    color: var(--cms-text-dark);
}

.con_form .form-control:focus {
    background: var(--cms-surface);
    border-color: var(--cms-primary);
    color: var(--cms-text-dark);
    box-shadow: 0 0 0 2px rgba(252, 124, 10, .15);
}

.con_form select[disabled].form-control {
    opacity: .6;
    cursor: not-allowed;
}

/* Legacy plain (non-Bootstrap) form fields — kept for any page
   still using raw input types without the .form-control class. */
.con_form input[type="text"],
.con_form input[type="password"],
.con_form input[type="email"],
.con_form textarea,
.con_form select {
    background: var(--cms-surface);
    border: 1px solid var(--cms-border);
    color: var(--cms-text-dark);
}

/* -------- Button toolbar -------- */
/* XXSM base: buttons stack full-width in a single column — the
   easiest, most reliable touch target on a narrow phone. SM+
   switches this to a row of auto-width buttons once there's room
   for them to sit side by side without crowding. */
#con_btns {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    background: var(--cms-surface-soft);
    padding: 12px 14px;
    margin: 4px 0 0;
    border-radius: 10px;
    border: 1px solid var(--cms-border);
}

#con_btns .btn,
#con_btns button,
#con_btns input[type="button"],
#con_btns input[type="submit"] {
    width: 100%;
    border-radius: 8px;
    font-weight: 700;
    font-size: .88rem;
    padding: 9px 24px;
    min-width: 96px;
    min-height: 44px; /* comfortable touch target at every tier */
}

#con_btns .btn-primary,
#con_btns #btn_add {
    background: var(--cms-primary) !important;
    border-color: var(--cms-primary) !important;
    color: #fff !important;
}

#con_btns .btn-primary:hover,
#con_btns #btn_add:hover {
    background: var(--cms-primary-light) !important;
    border-color: var(--cms-primary-light) !important;
}

#con_btns .btn-outline-primary {
    color: var(--cms-primary-dark);
    border-color: var(--cms-primary);
    background: transparent;
    font-weight: 700;
}

#con_btns .btn-outline-primary:hover {
    background: var(--cms-primary);
    color: #fff;
    border-color: var(--cms-primary);
}

/* Submit is the primary action — give it a filled look so it's
   visually distinct from Back, instead of both sharing the same
   outline treatment */
#con_btns input[type="submit"] {
    background: var(--cms-primary) !important;
    color: #fff !important;
    border-color: var(--cms-primary) !important;
}

#con_btns input[type="submit"]:hover {
    background: var(--cms-primary-light) !important;
    border-color: var(--cms-primary-light) !important;
}

/* -------- Select2 light theme -------- */
.select2-container {
    width: 100% !important;
}

.select2-container .select2-selection--single {
    height: 38px !important;
    background: var(--cms-surface-soft) !important;
    border: 1px solid var(--cms-border) !important;
    border-radius: 6px !important;
    display: flex;
    align-items: center;
    padding: 0 10px;
}

.select2-container .select2-selection__rendered {
    color: var(--cms-text-dark) !important;
    line-height: 36px !important;
}

.select2-dropdown {
    background: var(--cms-surface) !important;
    border: 1px solid var(--cms-border) !important;
}

.select2-results__option {
    color: var(--cms-text-dark) !important;
}

.select2-results__option--highlighted {
    background: var(--cms-primary) !important;
    color: #fff !important;
}

/* The library's default theme has higher specificity than a bare
   class selector, so it was silently winning over the rules above —
   these matching-specificity overrides make sure the light styling
   actually applies once the dropdown is open. */
.select2-container--default .select2-dropdown {
    background: var(--cms-surface) !important;
    border-color: var(--cms-border) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--cms-surface-soft) !important;
    color: var(--cms-text-dark) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--cms-surface) !important;
    border: 1px solid var(--cms-border) !important;
    color: var(--cms-text-dark) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--cms-text-light) transparent transparent transparent !important;
}

/* -------- DataTables light theme --------
   table.dataTable is the class DataTables' JS adds at runtime on
   top of #tbl_data — min-width is intentionally NOT repeated here,
   since #tbl_data above already sets it once for the same element. */
table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0;
    background: var(--cms-surface);
    color: var(--cms-text-dark);
}

table.dataTable thead th {
    background: var(--cms-surface-soft);
    color: var(--cms-primary-dark);
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 2px solid var(--cms-border) !important;
}

table.dataTable tbody td {
    border-color: var(--cms-border) !important;
}

table.dataTable tbody tr:hover {
    background: var(--cms-surface-soft);
}

/* XXSM base: DataTables' own markup floats these side by side via
   Bootstrap's row/col classes, which crowds a phone-width viewport.
   Stack them full-width instead; SM+ restores the side-by-side row
   once there's width to spare (see the SM tier below). */
#con_list .dataTables_wrapper .dataTables_length,
#con_list .dataTables_wrapper .dataTables_filter,
#con_list .dataTables_wrapper .dataTables_info {
    float: none;
    width: 100%;
    text-align: left;
    margin-bottom: 8px;
    color: var(--cms-text-light);
    font-size: .8rem;
}

#con_list .dataTables_wrapper .dataTables_filter input,
#con_list .dataTables_wrapper .dataTables_length select {
    width: 100%;
    max-width: 100%;
    margin-left: 0 !important;
    background: var(--cms-surface-soft);
    border: 1px solid var(--cms-border);
    color: var(--cms-text-dark);
    border-radius: 6px;
    padding: 6px 8px;
    min-height: 38px;
}

#con_list .dataTables_wrapper .dataTables_filter input:focus,
#con_list .dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    border-color: var(--cms-primary);
    box-shadow: 0 0 0 2px rgba(252, 124, 10, .15);
}

#con_list .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: var(--cms-surface-soft) !important;
    border: 1px solid var(--cms-border) !important;
    color: var(--cms-text-dark) !important;
    border-radius: 6px;
    margin-left: 4px;
    padding: 4px 10px;
}

#con_list .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--cms-primary) !important;
    color: #fff !important;
    border-color: var(--cms-primary) !important;
}

#con_list .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--cms-primary) !important;
    color: #fff !important;
    border-color: var(--cms-primary) !important;
    font-weight: 700;
}

#con_list .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: .4;
    cursor: default;
}

/* -------- Bootstrap tables (.table / .table-striped / .table-bordered) -------- */
#con_list .table {
    color: var(--cms-text-dark);
    background: var(--cms-surface);
    border-color: var(--cms-border);
}

#con_list .table-bordered,
#con_list .table-bordered th,
#con_list .table-bordered td {
    border-color: var(--cms-border) !important;
}

#con_list .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--cms-surface-soft);
}

#con_list .table thead th {
    background: var(--cms-surface-soft);
    color: var(--cms-primary-dark);
    border-color: var(--cms-border);
}

#con_list .table td,
#con_list .table th {
    border-color: var(--cms-border);
}

/* XXSM base: these legacy two/three-column float layouts collapse
   to a single stacked column on narrow screens instead of forcing
   two 50%-wide (or three 30/30/40%-wide) slices to compete for a
   phone's width. MD+ restores the original float widths below. */
.tcollft,
.tcolrgt,
.bcollft,
.bcolmdl,
.bcolrgt {
    float: none;
    width: 100%;
}

.dtbtn{
    display: inline;
}

/* =========================================================
   MOBILE NAV DRAWER — XXSM base.

   #con_head has a fixed height (60px) and centers its children
   vertically. The collapsed Bootstrap nav is a normal in-flow
   block, so when it expands (stacked nav-items) it tries to grow
   taller than that 60px box and ends up overflowing both above and
   below it instead of dropping down as a visible menu — which is
   what makes the items appear to vanish.

   Detaching it into an absolutely-positioned panel below the header
   fixes this regardless of how many nav items or dropdowns it has,
   since it's no longer constrained by the header's fixed height.
   This is written as the unscoped (mobile) default; the MD tier
   below switches it back to Bootstrap's normal inline desktop nav
   rather than this file assuming desktop and clawing it back down. */
.head_menu {
    position: static;
}

/* Bootstrap's base .navbar sets position:relative by default, which
   makes <nav> — not #con_head — the containing block for the
   absolutely-positioned collapse below. Since <nav> is only as wide
   as its own content (the toggler button) when collapsed, the
   drawer would size to that narrow width instead of the full
   header. Removing it lets positioning bubble up to #con_head. */
.head_menu .navbar {
    position: static;
}

.head_menu .navbar-collapse {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 20;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    background: var(--cms-surface);
    box-shadow: 0 12px 28px rgba(23, 32, 39, .18);
    border-top: 1px solid var(--cms-border);
    padding: 8px 15px 14px;
}

.head_menu .navbar-nav {
    flex-direction: column;
    width: 100%;
}

.head_menu .nav-item {
    width: 100%;
}

.head_menu .nav-link {
    padding: 13px 10px !important;
    min-height: 44px; /* comfortable touch target */
    display: flex;
    align-items: center;
}

/* Bootstrap's dropdown-menu is position:absolute by default, which
   on a narrow viewport can render off-screen or overlap the item
   above/below it. Inside the mobile overlay it should behave like
   an accordion section instead: static, full width. */
.head_menu .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    margin: 4px 0 8px 12px;
    box-shadow: none;
}

/* Touch-target sizing for the toggler button itself. This has to
   stay scoped below MD (rather than living unscoped as a true
   "base" rule) because it ties in specificity against Bootstrap's
   own ".navbar-expand-md .navbar-toggler { display: none }" desktop
   rule; loaded after Bootstrap, an unscoped "display: flex" here
   would win that tie and keep the toggler visible at every width.
   The max-width below is the exact width Bootstrap itself uses to
   hide the toggler, so this still reads as "mobile only," not a
   separate ad hoc breakpoint. */
@media (max-width: 767.98px) {
    .navbar-custom .navbar-toggler {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        /* .navbar-collapse is position:absolute (see MOBILE NAV
           DRAWER above), so it's out of flex flow and the toggler
           is .navbar's only flex child — justify-content:space-between
           has nothing to space it from and falls back to flex-start,
           leaving it stuck against the logo. margin-left:auto pushes
           it to the header's right edge regardless. */
        margin-left: auto;
    }
}

/* =========================================================
   XS — 360px+  (small mobile)
   ========================================================= */
@media (min-width: 360px) {
    .logo_cms_text {
        font-size: 1.1rem;
        margin-left: 10px;
        padding-left: 10px;
        letter-spacing: 0.5px;
    }

    .logo_img {
        height: 32px;
    }
}

/* =========================================================
   SM — 576px+  (standard mobile / small tablet)
   ========================================================= */
@media (min-width: 576px) {
    #con_head {
        padding: 5px 15px;
    }

    #con_main {
        padding: 20px 16px;
    }

    #con_list,
    #con_set {
        padding: 16px;
    }

    .logo_cms_text {
        font-size: 1.4rem;
        letter-spacing: 1px;
    }

    .logo_img {
        height: 38px;
    }

    #con_foot {
        padding: 10px 16px;
    }

    #foot_txt {
        font-size: .78rem;
    }

    /* Selected controls (the button toolbar) can share a row again
       once a phone is wide enough for them not to crowd each other. */
    #con_btns {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    #con_btns .btn,
    #con_btns button,
    #con_btns input[type="button"],
    #con_btns input[type="submit"] {
        width: auto;
    }

    /* Label/control rows go back to sharing a line now that there's
       width for a label column beside the input. */
    .con_form .form-group.row {
        flex-direction: row;
        align-items: center;
    }

    .con_form .col-form-label {
        padding-top: 0;
        padding-bottom: 0;
        justify-content: flex-start;
    }

    /* Textarea rows (History): align the label to the top instead of
       centering it, since the field is taller than one line. */
    .con_form .form-group.row:has(textarea) .col-form-label {
        align-items: flex-start;
        padding-top: 8px;
    }

    /* DataTables' own length/filter/info controls go back to sharing
       a row (Bootstrap's own col-* classes handle the split) now that
       there's room; the input/select no longer need to be full width. */
    #con_list .dataTables_wrapper .dataTables_length,
    #con_list .dataTables_wrapper .dataTables_filter,
    #con_list .dataTables_wrapper .dataTables_info {
        width: auto;
        margin-bottom: 0;
    }

    #con_list .dataTables_wrapper .dataTables_filter input,
    #con_list .dataTables_wrapper .dataTables_length select {
        width: auto;
        display: inline-block;
    }
}

/* =========================================================
   MD — 768px+  (tablet)

   This is also where Bootstrap's own navbar-expand-md switches the
   nav from the collapsible mobile drawer to a normal inline bar —
   the overrides below undo the mobile-drawer positioning to match,
   so the two systems change together instead of drifting apart.
   ========================================================= */
@media (min-width: 768px) {
    .head_title {
        padding: 0 5px;
        font-size: 11pt;
        font-weight: 400;
        letter-spacing: 1pt;
    }

    .head_menu {
        font-size: 9pt;
    }

    .head_menu .navbar-collapse {
        position: static;
        max-height: none;
        overflow-y: visible;
        background: none;
        box-shadow: none;
        border-top: none;
        padding: 0;
    }

    .head_menu .navbar-nav {
        flex-direction: row;
        width: auto;
    }

    .head_menu .nav-item {
        width: auto;
    }

    .head_menu .nav-link {
        padding: 8px 14px !important;
        min-height: 0;
    }

    .head_menu .dropdown-menu {
        position: absolute;
        float: left;
        width: auto;
        margin: 0;
        box-shadow: 0 8px 24px rgba(23, 32, 39, .12);
    }

    /* Two-column layouts become worthwhile at tablet width — e.g. a
       ticket-info panel beside a ticket-details panel inside
       #con_set/#frm_set. .con_form's flex: 1 1 320px (declared once,
       above) already lets two panels sit side by side as soon as
       they both fit; this just widens the shared container so that
       actually happens instead of everything still wrapping to one
       column at exactly 768px. Legacy float columns also resume
       their original proportions here. */
    #con_set,
    #frm_set {
        flex-wrap: nowrap;
    }

    .tcollft,
    .tcolrgt {
        float: left;
        width: 50%;
    }

    .bcollft,
    .bcolmdl {
        float: left;
        width: 30%;
    }

    .bcolrgt {
        float: left;
        width: 40%;
    }

    #tbl_data {
        font-size: .82rem;
    }
}

/* =========================================================
   LG — 992px+  (small desktop / laptop)
   ========================================================= */
@media (min-width: 992px) {
    #con_head {
        padding: 5px 20px;
    }

    .head_title {
        font-size: 1.2rem;
        font-weight: bolder;
        letter-spacing: normal;
    }

    #con_main {
        flex-flow: row wrap;
        padding: 24px 20px;
    }

    #con_list,
    #con_set {
        padding: 24px;
    }

    #con_list {
        margin-bottom: 28px;
    }

    #con_set {
        margin-bottom: 20px;
        gap: 16px;
    }

    #frm_set {
        gap: 16px;
    }

    .con_form {
        padding: 20px;
    }

    .con_form .form-group.row {
        margin-bottom: 14px;
    }

    .logo_img {
        height: 50px;
    }

    .logo_cms_text {
        margin-left: 16px;
        font-size: 1.8rem;
        padding-left: 16px;
        letter-spacing: 3px;
    }

    #foot_txt {
        font-size: .8rem;
    }

    #con_btns {
        padding: 14px 22px;
        gap: 12px;
    }

    #tbl_data {
        font-size: .85rem;
    }
}

/* =========================================================
   XL — 1200px+  (desktop)
   ========================================================= */
@media (min-width: 1200px) {
    #con_main {
        padding: 28px 24px;
    }
}

/* =========================================================
   XXL — 1400px+  (large desktop)

   Content stops growing horizontally past this point — a centered
   max-width column with extra breathing room on either side reads
   better than text stretching edge to edge on a wide monitor.
   #con_list/#con_set already center themselves via margin: 0 auto,
   so widening #con_main's own effective max-width is what keeps the
   whole page, not just those two panels, from feeling adrift.
   ========================================================= */
@media (min-width: 1400px) {
    #con_main {
        max-width: 1400px;
        margin: 0 auto;
        width: 100%;
        padding: 32px 32px;
    }
}

/* =========================================================
   XXLG — 1920px+  (extra-large / very large desktop)

   Same application hierarchy, same control and type sizes as XL/XXL
   — only the surrounding whitespace grows. Content keeps the same
   max-width as XXL so line lengths and table columns stay readable
   instead of stretching across a 4K monitor.
   ========================================================= */
@media (min-width: 1920px) {
    #con_main {
        max-width: 1400px;
        padding: 40px 32px;
    }
}

/* =========================================================
   ORIENTATION & HEIGHT-AWARE RULES

   Width tiers alone assume width is always the binding constraint,
   which is false for short landscape viewports (phones and tablets
   turned sideways): here viewport HEIGHT is what's scarce, so these
   rules trigger on max-height rather than width, and apply across
   any of the width tiers above rather than duplicating them.
   ========================================================= */

/* Short mobile/tablet landscape — reclaim vertical space from the
   header and main gutters instead of letting a 60px header plus
   generous padding push page content (or, worse, the nav drawer)
   partly off-screen. */
@media (orientation: landscape) and (max-height: 500px) {
    #con_head {
        height: 44px;
        min-height: 44px;
        padding-top: 2px;
        padding-bottom: 2px;
    }

    .logo_img {
        height: 26px;
    }

    #con_main {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    #con_list,
    #con_set {
        padding: 12px;
        margin-bottom: 12px;
    }

    #con_btns {
        padding: 8px 12px;
    }

    /* The nav drawer's own top offset and max-height are keyed to
       #con_head's height, which just shrank for this orientation —
       keep the drawer's math in sync so it still sits flush under
       the header and still scrolls internally instead of running
       past the bottom of a short viewport. */
    .head_menu .navbar-collapse {
        top: 44px;
        max-height: calc(100vh - 44px);
    }
}

/* Login screen specifically: it's usually a vertically-centered
   panel, which is the layout most likely to clip in short landscape
   viewports if it's pinned to a fixed height instead of allowed to
   scroll. */
@media (orientation: landscape) and (max-height: 500px) {
    body.page-login #con_main {
        align-items: flex-start;
        overflow-y: auto;
    }
}

.modal{
    color: var(--cms-text-dark); /* was: black — same rendered result
                                     (#172027 vs #000 is imperceptible
                                     at body text sizes), now tracks
                                     the theme token instead of a raw
                                     hex value */
}