/* ===================================
   SPADE Framework - Consolidated Styles
   =================================== */

/* ===================
   Reset & Base Styles
   =================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
    width: 100%;
    font-family: Arial, Helmet, Freesans, sans-serif;
    font-size: 16px;
}

body {
    width: inherit;
    margin: 0 auto;
    background: #ffffff;
    color: black;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

/* ===================
   Dark Mode
   =================== */
.dark body, .dark #content {
    background-color: #1f2937;
    color: #ffffff;
}

.dark *:not(input):not(select):not(textarea):not(button) {
    background-color: inherit;
    color: inherit;
}

.dark div, .dark section, .dark article, .dark main {
    background-color: inherit;
    color: inherit;
}

.dark button {
    border: 1px solid #888;
    border-radius: 8px;
    background-color: inherit;
}

.dark a {
    color: #fff !important;
    background-color: transparent;
    /* opacity: 1; */
}

.dark #header, .dark #smartlinks {
    background-color: inherit;
}

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
    color: #fff;
}

.dark input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.dark textarea,
.dark select {
    background-color: #374151 !important;
    color: #e5e7eb !important;
    border-color: #4b5563 !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #9ca3af !important;
}

.dark input:focus:not([type="submit"]):not([type="button"]),
.dark textarea:focus,
.dark select:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
}

.dark input.error,
.dark textarea.error {
    border-color: #ef4444 !important;
}

.dark input.error:focus,
.dark textarea.error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.dark input:disabled,
.dark textarea:disabled,
.dark select:disabled {
    background-color: #1f2937 !important;
    color: #6b7280 !important;
    cursor: not-allowed;
    opacity: 0.6;
}

/* ===================
   Layout & Container
   =================== */
#content {
    min-width: 90%;
    min-height: 500px;
    margin: 0 auto;
    padding: 10px 25px;
}

.containered {
    width: 100%;
}

.container {
    width: 100%;
    margin: auto;
    overflow: hidden;
}

.page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.25rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.dark .page-container {
    background-color: #1f2937;
    color: #ffffff;
}

.pageroot {
    padding: 1.5rem;
    min-height: 100vh;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}

.dark .pageroot {
    background-color: #1f2937;
    color: #ffffff;
}

#main {
    background-color: #ffffff;
}

.dark #main {
    background-color: #1f2937;
    color: #ffffff;
}

/* ===================
     Header & Footer
   =================== */


#sidebar {
    background-color: #f9f9f9;
    display: none; /* Hidden by default */
}

.dark #sidebar {
    background-color: #1f2937;
    border-right: 1px solid #374151;
}

/* Desktop: Normal sidebar in grid */
@media (min-width: 721px) {
    #sidebar {
        display: block;
        position: static; /* Normal document flow */
        width: auto; /* Use grid column width */
        height: auto; /* Natural height */
    }
}

/* Mobile: Full screen overlay when shown */
@media (max-width: 720px) {
    #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: #fff;
        z-index: 998;
        overflow-y: auto;
    }
    
    #sidebar.show {
        display: block;
    }
}


#header {
    background-color: inherit;
    margin: 0 auto 0 auto;
    padding: 0px;
    width: 100%;
    height: 46px;
}

#headbar div,
#headbar span,
#headbar a {
    background-color: transparent;
    border: none !important;
}

#headbar > div {
    background-color: transparent;
}

#smartlinks {
    background-color: inherit;
    border-top: 0px solid #ccc;
    margin: 0 auto 0 auto;
    padding: 0px;
    width: 100%;
    height: 32px;
}

#smartlinks tr td, #smartlinks tr td a {
    color: #fff;
    font-size: 1.1em;
}

#footer {
    color: #3399FF;
    font-size: 11px;
    padding-top: 120px;
    font-family: Arial, Helvetica, sans-serif;
}

div#header a {
    padding-left: 8px;
}

div#header img {
    outline: none;
    border: 0;
}

.logo {
    float: left;
    height: 120px;
    width: 700px;
    background: #1f2937;
}

/* ===================
   Typography
   =================== */
h1, h2, h3, h4, h5, h6 {
    margin: 3px;
    padding: 3px;
    margin-bottom: 1rem;
    color: #333;
}

p {
    margin-bottom: 1rem;
}

a {
    font-family: Arial, Helmet, sans-serif;
}

a:hover {
    text-decoration: underline;
}

/* Font Sizes */
.rem1-25 { font-size: 1.25rem; }
.rem1-5 { font-size: 1.5rem; }
.rem1-75 { font-size: 1.75rem; }
.rem2 { font-size: 2rem; }
.rem2-25 { font-size: 2.25rem; }
.rem2-5 { font-size: 2.5rem; }
.rem2-75 { font-size: 2.75rem; }
.rem3 { font-size: 3rem; }
.rem4 { font-size: 4rem; }
.text-1 { font-size: 1rem; }
.text-2 { font-size: 2rem; }

/* Text Styles */
.b, .bold { font-weight: bold; }
.ub { font-weight: normal; }
.i { font-style: italic; }
.u { text-decoration: underline; }
.nu, .no-underline { text-decoration: none; }
.uc, .text-uppercase { text-transform: uppercase; }
.ucfirst, .text-capitalize { text-transform: capitalize; }
.selected { font-weight: bold; }

/* Text Alignment */
.text-left { text-align: left !important; }
.text-center, .center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
div.left { float: left; }
div.right { float: right; }
div.center, div.center > table, div.center > div {
    margin-left: auto;
    margin-right: auto;
}

/* ===================
   Colors
   =================== */
/* Text Colors */
.white { color: #fff; }
.black, .text-black { color: #000; }
.blue, .text-blue { color: #0000FF; }
.red, .text-red { color: #FF3300 !important; }
.green, .text-green { color: #00FF00; }
.orange { color: orange; }
.pink { color: pink; }
.gray { color: gray; }
.brown { color: brown; }
.yellow { color: yellow; }
.maroon { color: #800000; }
.gold, .text-gold { color: gold; }
.text-brown { color: #8B4513 !important; }

/* Specific Color Variants */
.blue-1st { color: #0044FF; }
.blue-2nd { color: #3288FF; }
.green-1st { color: #006400; }
.green-2nd { color: #32CD32; }
.red-1st { color: #B22222; }
.red-2nd { color: #FF6347; }
.yellow-1st { color: #FFD800; }
.yellow-2nd { color: #FFEE00; }
.brown-1st { color: #8B4513; }
.brown-2nd { color: #A0522D; }
.maroon-1st { color: #800000; }
.maroon-2nd { color: #B03060; }
.gold-1st { color: #FF4500; }
.gold-2nd { color: #FFA500; }
.violet-1st { color: #9400D3; }
.violet-2nd { color: #8A2BE2; }
.pink-1st { color: #FF1493; }
.pink-2nd { color: #FFB6C1; }
.gray-1st { color: #708090; }
.gray-2nd { color: #D3D3D3; }

/* Background Colors */
.bg-white { background-color: #fff; }
.bg-black { background-color: #1f2937; }
.bg-blue { background-color: #0000FF; }
.bg-red { background-color: #FF0000 !important; }
.bg-green { background-color: #00FF00; }
.bg-gray, .bg-lightgray { background-color: #E8E8E8; }
.bg-pink { background-color: pink; }
.bg-lightblue { background-color: lightblue; }
.bg-lightgreen { background-color: lightgreen; }
.bg-lightyellow { background-color: lightyellow; }
.bg-lightred { background-color: lightcoral; }
.bg-violet { background-color: #9400D3; }
.bg-yellow { background-color: #FFFF00; }
.bg-gold { background-color: #FFD700; }
.bg-pula { background-color: red; }

/* Background Color Variants */
.bg-blue-1st { background-color: #0044FF; color: white; }
.bg-blue-2nd { background-color: #3288FF; color: white; }
.bg-green-1st { background-color: #006400; color: white; }
.bg-green-2nd { background-color: #32CD32; color: white; }
.bg-red-1st { background-color: #B22222; color: white; }
.bg-red-2nd { background-color: #FF6347; color: white; }
.bg-yellow-1st { background-color: #FFD800; color: white; }
.bg-yellow-2nd { background-color: #FFEE00; color: white; }
.bg-brown-1st { background-color: #8B4513; color: white; }
.bg-brown-2nd { background-color: #A0522D; color: white; }
.bg-maroon-1st { background-color: #800000; color: white; }
.bg-maroon-2nd { background-color: #B03060; color: white; }
.bg-gold-1st { background-color: #FF4500; color: white; }
.bg-gold-2nd { background-color: #FFA500; color: white; }
.bg-violet-1st { background-color: #9400D3; color: white; }
.bg-violet-2nd { background-color: #8A2BE2; color: white; }
.bg-pink-1st { background-color: #FF1493; color: white; }
.bg-pink-2nd { background-color: #FFB6C1; color: white; }
.bg-gray-1st { background-color: #708090; color: white; }
.bg-gray-2nd { background-color: #D3D3D3; color: white; }

/* Dark Mode Color Overrides */
.dark .bg-lightyellow {
    background-color: #FFFFE0;
    color: #1f2937;
}

/* Header Row Colors */
.grayscale, .headrow, .current, .bg-blue2 {
    background: #ccc;
    color: #2f2f2f;
}

.headrow-indigo { background-color: #4B0082; }
.headrow-green { background-color: #00FF00; }
.headrow-orange { background-color: #FF7F00; }
.headrow-gray { background-color: #E8E8E8; }

.dark .headrow-gray {
    background-color: #374151;
    color: #e5e7eb;
}

.dark .accorHeadrow, .dark .headrow {
    background-color: #374151;
    color: #ffffff;
}

.dark .grayscale, .dark .current, .dark .bg-blue2 {
    background-color: #374151;
    color: #e5e7eb;
}

/* ===================
   Tables
   =================== */
table, tr, td, th {
    border-collapse: collapse;
    vertical-align: top;
    text-align: left;
    padding: 0em .3em;
}

/* Table Alignment */
table.center tr td, table.center tr th { text-align: center; }
table.right tr td, table.right tr th { text-align: right; }
table.left tr td, table.left tr th { text-align: left; }
td.left, th.left { text-align: left; }
tr.center > th, tr.center > td { text-align: center; }
tr.right > th, tr.right > td { text-align: right; }
tr.b > td, tr.b > th, tr.bold > td, tr.bold > th { font-weight: bold; }
tr.no-padding > th, tr.no-padding > td { padding: 0px; }
tr.red > td, tr.red > th { color: #FF3300; }
tr.headrow > td, tr.headrow > th, tr.bgheadrow > th { }
tr.rc > td:first-child { width: 20px; }
tr.text-header td, tr.text-header th { color: #020202; }
tr.text-top th, tr.text-top td { vertical-align: top; }
tr.align-bottom th { vertical-align: bottom; }

/* Dark Mode Table Text */
.dark tr.text-header td, .dark tr.text-header th { color: #fff; }

/* Table Borders */
.bordered { border: 1px solid #1f2937; }
.unbordered, .no-border { border: none !important; }
.border-red { border-color: red; }

.gis-table-bordered, .table-bordered {
    border: 1px solid #ddd;
}

.gis-table-bordered th, .gis-table-bordered td,
.table-bordered th, .table-bordered td {
    border: 1px solid #ddd;
    padding: 4px 10px;
}

.gis-table-bordered thead th, .gis-table-bordered thead td,
.table-bordered thead th, .table-bordered thead td {
    border-bottom-width: 2px;
}

.dark .gis-table-bordered, .dark .table-bordered {
    border-color: #374151;
}

.dark .gis-table-bordered th, .dark .gis-table-bordered td,
.dark .table-bordered th, .dark .table-bordered td {
    color: white;
    border-color: #374151;
}

.dark .gis-table-bordered thead th, .dark .gis-table-bordered thead td,
.dark .table-bordered thead th, .dark .table-bordered thead td {
    background-color: #374151;
}

.no-gis-table-bordered {
    border-left: 0;
    border-top: 0;
}

.no-gis-table-bordered th, .no-gis-table-bordered td {
    padding: 3px 10px;
}

table.tdbordered tr td, table.tdbordered tr th {
    border: 1px solid black;
}

/* Table Styles */
.table-center th, .table-center td, .table-center td input { text-align: center; }
.table-vcenter th, .table-vcenter td { vertical-align: middle; }
.table-center * { text-align: center; vertical-align: middle; }
.table-padding-none th, .table-padding-none td { padding: 0; }
.table-padding-lg th, .table-padding-lg td { padding: 0; }
.table-gap td, .table-gap th { padding-right: 1.6rem; }
.table-header th, .table-header td { color: black; background: #ccc; }
.dark .table-header th, .dark .table-header td { color: white; background: #1f2937; }

/* Table Hover Effects */
.table-fx tr:not(:first-child):hover th,
.table-fx tr:not(:first-child):hover td {
    background-color: #e8e8e8;
}

.dark .table-fx tr:hover td, .dark .table-fx tr:hover th {
    background-color: #374151;
}

/* Table Row Alternating Colors */
.table-altrow tr:nth-child(even) { background-color: #f9f9f9; }
.table-altrow tr:nth-child(odd) { background-color: #ffffff; }

.odd { background-color: #ccc; }

.dark .odd { background-color: rgba(55, 65, 81, 0.5); }

.dark .table-altrow tr:nth-child(even) {
    background-color: rgba(55, 65, 81, 0.3);
}

.dark .table-altrow tr:nth-child(odd) {
    background-color: transparent;
}

.dark .table-altrow tr:hover {
    background-color: #374151;
}

/* Highlighted Rows */
.highlightedRow { background: #E8E8E8; }

.dark .highlightedRow, .dark .colshading, .dark .tdscore {
    background: rgba(55, 65, 81, 0.5);
    color: white;
}

.colshadingbg { background-color: #E8E8E8; }

.dark .colshadingbg {
    background-color: #374151;
}

/* Custom Bordered Table */
.cbt {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 1rem;
    overflow: auto;
}

.cbt th, .cbt td {
    border-bottom: 1px solid #ddd;
    padding: 8px;
}

.cbt tr:last-child td { border-bottom: none; }

.dark .cbt {
    border-color: #374151;
    background-color: #1f2937;
}

.dark .cbt th, .dark .cbt td {
    border-bottom-color: #374151;
    color: #e5e7eb;
}

/* Filament Table Styles */
.golds-table, .filament-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.golds-table th, .filament-table th {
    background-color: #f9fafb;
    color: #4b5563;
    padding: 10px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #e5e7eb;
}

.dark .golds-table th, .dark .filament-table th {
    background-color: #374151;
    color: white;
}

.golds-table td, .filament-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.golds-table tr:nth-child(even), .filament-table tr:nth-child(even) { background-color: #f9fafb; }
.golds-table tr:hover, .filament-table tr:hover { background-color: #f1f5f9; }

.dark .golds-table, .dark .filament-table {
    background-color: #1f2937;
    border-color: #374151;
}

.dark .golds-table td, .dark .filament-table td {
    border-bottom-color: #374151;
    color: #e5e7eb;
}

.dark .golds-table tr:nth-child(even), .dark .filament-table tr:nth-child(even) {
    background-color: rgba(55, 65, 81, 0.3);
}

.dark .golds-table tr:hover, .dark .filament-table tr:hover {
    background-color: #374151;
}

.golds-table input[type="password"], .filament-table input[type="password"],
.golds-table input[type="text"], .filament-table input[type="text"],
.golds-table input[type="email"], .filament-table input[type="email"],
.golds-table input[type="number"], .filament-table input[type="number"] {
    padding: 8px;
    font-size: 14px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

.dark .golds-table input[type="password"], .dark .filament-table input[type="password"],
.dark .golds-table input[type="text"], .dark .filament-table input[type="text"],
.dark .golds-table input[type="email"], .dark .filament-table input[type="email"],
.dark .golds-table input[type="number"], .dark .filament-table input[type="number"] {
    background-color: #374151;
    color: #e5e7eb;
    border-color: #4b5563;
}

/* ===================
   Forms & Inputs
   =================== */
/* Standard Input Styles */
input:not([type="submit"]),
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea {
    display: inline-block;
    padding: 10px 15px;
    font-size: 16px;
    font-family: inherit;
    color: #333;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Input Focus States */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
    outline: none;
}

/* Input Error States */
input.error, textarea.error {
    border-color: #dc3545;
}

input.error:focus, textarea.error:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
    outline: none;
}

/* Input Disabled States */
input:disabled,
textarea:disabled,
select:disabled {
    background-color: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Input Placeholder */
input::placeholder, textarea::placeholder {
    color: #999;
    opacity: 1;
}

/* Select and Textarea */
select, textarea {
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
}

textarea {
    width: 100%;
}

/* Checkbox */
input[type="checkbox"],
input[type="radio"] {
    width: 1.2rem;
    height: 1.2rem;
    cursor: pointer;
}

.dark input[type="checkbox"],
.dark input[type="radio"] {
    accent-color: #60a5fa;
}

.checkbox { width: 20px; check: true; }
.checkbox tr td { border: 1px solid #ccc; min-width: 16px; }

/* Input Sizes */
input.qty { width: 50px; }
input.memo { width: 300px; height: 60px; }
.full, textarea.full, input.full, select.full,
input.w-full, select.w-full {
    width: 100%;
}

/* Form Styles */
.form-w-full input, .form-w-full select,
.form-w-full textarea, table.w-full {
    width: 100%;
}

.custom input, .custom select {
    padding: 8px 12px;
}

.input-cols-width input { width: 100px; }

.input-w-full input, .input-w-full select {
    width: calc(100% - 1rem);
    padding: 10px;
    margin: 5px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* ===================
   Buttons & Actions
   =================== */
.btn,
input[type="submit"],
button,
button[type="submit"],
select,
textarea {
    display: inline-block;
    padding: 4px 12px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
}

input[type="submit"],
button[type="submit"],
button {
    color: #fff;
    background-color: #007bff;
}

input[type="button"] {
    color: white !important;
    background-color: #3b82f6 !important;
}

/* Button Hover Effects */
input[type="submit"]:hover,
button:hover {
    background-color: #0056b3;
}

/* Button Active/Focus Effects */
input[type="submit"]:active,
input[type="submit"]:focus,
button:active,
button:focus {
    background-color: #004080;
    outline: none;
}

/* Button Disabled State */
input[type="submit"]:disabled,
button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    transform: none;
}

/* Button Variants */
.btn-primary {
    color: #fff;
    background-color: #007bff;
}

.dark .btn-primary {
    color: #fff;
    background-color: #007bff;
}

.btn-secondary, .btn-cancel {
    background-color: #6c757d;
    color: #fff;
}

.dark .btn-secondary, .dark .btn-cancel {
    background-color: #6c757d;
    color: #fff;
}

.btn-danger {
    background-color: #dc3545;
}

input[type="submit"].btn-danger {
    background-color: red;
}

.btn-success, .btn-add, .btn-go {
    background-color: #4CAF50;
}

.btn-success:hover, .btn-add:hover, .btn-go:hover {
    background-color: #45A049;
}

.btn-edit {
    background-color: #FFC107;
}

.btn-edit:hover {
    background-color: #FFB300;
}

.btn-gray { background-color: gray !important; }
.btn-green { background-color: green !important; }

.btn-padding { padding: 4px 8px; }
.btn-b { border: 1px solid #ccc; border-radius: 8px; }

/* Action Styles */
.action, .row-button, .row-action {
    background-color: #eee;
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
}

.action-link {
    display: inline-block;
    padding: 4px 8px;
    background-color: #f8f9fa;
    color: #495057;
    text-decoration: none;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease-in-out;
    margin-right: 4px;
}

.action-link:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
    color: #212529;
    text-decoration: none;
}

.action-link:active {
    background-color: #dee2e6;
    border-color: #6c757d;
}

/* ===================
   Layout Components
   =================== */
/* Dividers and Sections */
div.divider { float: left; width: 5px; padding: 2px 2px; }
div.half { float: left; width: 50%; padding: 5px 3px; }
div.third { float: left; width: 25%; padding: 3px 0; }
div.fourth { float: left; width: 22%; padding: 3px 0; }
div.fifth { float: left; width: 18%; padding: 3px 0; }
div.page { border: 1px solid none; }

/* Heights */
.ht50 { min-height: 50px; }
.ht100 { min-height: 100px; }
.ht150 { min-height: 150px; }
.ht200 { min-height: 200px; }
.ht300 { min-height: 300px; }
.ht500 { min-height: 500px; }

/* Specific Heights */
.h-10px { height: 10px; }
.h-20px { height: 20px; }
.h-30px { height: 30px; }
.h-40px { height: 40px; }
.h-50px { height: 50px; }
.h-60px { height: 60px; }
.h-70px { height: 70px; }
.h-80px { height: 80px; }
.h-90px { height: 90px; }
.h-100px { height: 100px; }
.h-110px { height: 110px; }
.h-120px { height: 120px; }
.h-130px { height: 130px; }
.h-140px { height: 140px; }
.h-150px { height: 150px; }
.h-160px { height: 160px; }
.h-170px { height: 170px; }
.h-180px { height: 180px; }
.h-190px { height: 190px; }
.h-200px { height: 200px; }
.h-250px { height: 250px; }
.h-300px { height: 300px; }
.h-350px { height: 350px; }
.h-400px { height: 400px; }
.h-450px { height: 450px; }
.h-500px { height: 500px; }
.h-600px { height: 600px; }
.h-700px { height: 700px; }
.h-800px { height: 800px; }
.h-900px { height: 900px; }

/* Widths */
.vc20 { width: 20px; }
.vc25 { width: 2.5rem !important; }
.vc30 { width: 3rem !important; }
.vc40 { width: 4rem !important; }
.vc50 { width: 5rem !important; }
.vc60 { width: 6rem !important; }
.vc70 { width: 7rem !important; }
.vc75 { width: 7.5rem !important; }
.vc80 { width: 8rem !important; }
.vc90 { width: 9rem !important; }
.vc100 { width: 10rem !important; }
.vc120 { width: 120px; }
.vc150 { width: 150px; }
.iw200, .vc200 { width: 200px; }
.iw250, .vc250 { width: 250px; }
.vc300 { width: 300px; }
.vc350 { width: 350px; }
.vc500 { width: 500px; }
.vc1000 { width: 1000px; }
.vc1100 { width: 1100px; }
.vc1200 { width: 1200px; }

/* Specific Widths */
.w-10px { width: 10px; }
.w-20px { width: 20px; }
.w-30px { width: 30px; }
.w-40px { width: 40px; }
.w-50px { width: 50px; }
.w-60px { width: 60px; }
.w-70px { width: 70px; }
.w-80px { width: 80px; }
.w-90px { width: 90px; }
.w-100px { width: 100px; }
.w-110px { width: 110px; }
.w-120px { width: 120px; }
.w-130px { width: 130px; }
.w-140px { width: 140px; }
.w-150px { width: 150px; }
.w-160px { width: 160px; }
.w-170px { width: 170px; }
.w-180px { width: 180px; }
.w-190px { width: 190px; }
.w-200px { width: 200px; }
.w-250px { width: 250px; }
.w-300px { width: 300px; }
.w-350px { width: 350px; }
.w-400px { width: 400px; }
.w-450px { width: 450px; }
.w-500px { width: 500px; }
.w-600px { width: 600px; }
.w-700px { width: 700px; }
.w-800px { width: 800px; }
.w-900px { width: 900px; }

/* Padding */
.pdl05 { padding-left: 5px; }
.pdl10 { padding-left: 10px; margin-left: 10px; }
.pdr05 { padding-right: 5px; }
.pdr10 { padding-right: 10px; }

/* ===================
   UI Components
   =================== */
/* Capsule/Badge Styles */
.capsulebox > * {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 8px 16px;
}

.capsule {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 8px 16px;
}

.badge {
    border: 1px solid #1f2937;
    padding: 3px 6px;
    border-radius: 3px;
}

/* Info Wrapper */
.info-wrapper {
    display: flex;
    flex-wrap: wrap;
    column-gap: 2px;
}

/* Page Elements */
.pageinfo {
    padding: 1rem 2rem;
    margin: 1rem auto;
    display: flex;
    justify-content: center;
}

.pagetitle {
    font-size: 1.5rem;
    font-weight: 600;
}

.title, .page-title, .page-header, .gis-title, .gis-header {
    font-size: 1.0rem;
    margin-bottom: 1rem;
    display: flex;
    gap: 0.6rem;
}

.dark .title {
    color: #fff;
}

/* Title Bar */
.titlebar {
    display: flex;
    justify-content: flex-start;
}

.titlebar * {
    padding: 8px;
}

.dark .titlebar * {
    color: white;
    background-color: #1f2937;
}

.titlebar > *:last-child {
    flex-grow: 1;
}

/* Navigation & Links */

/* Linkbar: Flexible group of links/buttons with border and hover effects */
.linkbar {
    display: flex;
    flex-wrap: wrap;
    row-gap: 2rem;
    column-gap: 12px;
    align-items: center;
}

.linkbar > * {
    padding: 8px 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
    color: #374151;
    text-decoration: none;
}

.linkbar > *:hover {
    background-color: #e5e7eb;
    border-color: #1f2937;
    color: #111827;
}


.link-bar {
    display: flex;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 12px;
    align-items: center;
    padding: 8px;
}

.link-bar .link-item {
    border-radius: 6px;
    margin: 4px;
    border: 1px solid #ccc;
    background-color: #f8f9fa;
    color: #333;
}

.link-item {
    padding: 8px 12px;
    text-decoration: none;
}

.dark .link-bar .link-item {
    border: 1px solid #666;
    background-color: #333;
    color: #fff;
}

.pagebar, .mainbar {
    display:flex;
    flex-wrap:wrap;
    gap: 0.75rem 0.75rem;      
    align-items:center;
    align-content:center;    
    min-width:0;        
}

.pagebar span > a,
.child-bordered > span {
    font-size: 0.875rem;
    padding: 6px 12px !important;
    border: 1px solid #ccc;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
    color: #374151;
    text-decoration: none;
}

.pagebar span > a:hover,
.child-bordered > span:hover {
    background-color: #e5e7eb;
    border-color: #1f2937;
    color: #111827;
}

.dark .pagebar span > a:hover,
.dark .child-bordered > span:hover {
    color: black !important;
}


/* Button Group */
.button-group {
    display: flex;
    gap: 0.6rem;
}

.button-group * {
    padding: 8px 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
}

/* Menu Styles */
.menu > * {
    width: 100%;
    box-sizing: border-box;
}

.menu-div {
    border-radius: 0rem;
}

.dark .menu-div {
    background-color: #1f2937;
}

.menu-table {
    border-radius: 0.5rem;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    border-radius: 0.8rem;
    overflow: hidden;
}

.menu-table th, .menu-table td {
    padding: 8px;
}

.menu-table tr:last-child td {
    border: none;
}

.menu-table a {
    border: none;
}

.link-header:hover, .link-item:hover {
    background-color: #d3d3d3 !important;
}

tr.link-item td {
    border: none;
}

tr.link-group-css th, tr.link-group-css td {
    border-bottom: 2px solid #b3842b;
    color: #b3842b;
    text-transform: uppercase;
    text-align: center;
}

/* Indentation */
.indent {
    padding-left: 1.2rem !important;
}

.indent-descendants * {
    padding-left: 1.2rem;
}

/* GIS Menu */
.gismenu-dropdown {
    display: flex;
    justify-content: space-between;
}

/* ===================
   Special Components
   =================== */
/* Accordion */
.accordParent div {
    background-color: lightblue;
    width: 200px;
    border-bottom: 2px solid #cfc;
    padding: 2px 20px;
}

.accorHeadrow {
    height: 38px;
    vertical-align: middle;
    text-align: center;
    width: 256px;
    background-color: #007bff;
    color: white;
}

.row-body {
    display: none;
}

/* Filter Names */
#names {
    overflow-y: auto;
    max-height: 70vh;
    background-color: #fff;
    color: #222;
    min-width: 40%;
    position: absolute;
    top: 20%;
    left: 20%;
    padding: 1.2rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    z-index: 100;
}

.dark #names {
    background: #1f2937;
    color: #fff;
}

/* Error Message */
#error_message {
    color: red;
    font-size: 3rem;
    padding: 2rem;
    border: 1px solid red;
    border-radius: 1rem;
    width: 80%;
    margin: 0 auto;
}

/* Flash Message */
.flashMessage {
    padding: 0 50px;
    margin: 0;
    border: 2px solid brown;
    width: 80%;
    margin: 1rem auto;
    text-align: center;
    border-radius: 1rem;
    font-size: 2rem;
}

/* ===================
   GIS Modal Styles (Custom Implementation)
   =================== */
/* GIS Modal Styles - Renamed to avoid Tailwind conflicts */
.gis-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.gis-modal-body {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    border-radius: 1rem;
    width: 70%;
}

/* Legacy GIS Modal Styles (kept for compatibility) */
.gis-modal-backdrop {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.gis-modal-overlay {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    border-radius: 8px;
    max-width: 80%;
    height: 80%;
    overflow: auto;
}

.dark .gis-modal-backdrop {
    background-color: darkgray;
}

.dark .gis-modal-overlay {
    background-color: #1f2937;
    color: #fff;
}

.gis-modal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.gis-modal-close:hover,
.gis-modal-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.gis-modal-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

/* ===================
   Responsive Tables
   =================== */
.flex-table { width: 100%; }
.flex-table tr { display: flex; flex-direction: column; }
.flex-table th, .flex-table td { width: 100%; text-align: left; padding: 4px 8px; }

@media (min-width: 768px) {
    .flex-table tr { flex-direction: row; }
    .flex-table th { width: 20%; }
    .flex-table.bordered tr:not(:last-child) {
        border-bottom: 1px solid #ccc;
    }
    .flex-table th, .flex-table td { padding: 8px 12px; }
}

.flex-table.bordered {
    border: 1px solid #ccc;
}






/* ===================
   Utility Classes
   =================== */
.full, .clear { clear: both; }
.hc { margin-left: 700px; }
.scroll { overflow: scroll; min-height: 10px; border: 1px solid black; }
.textwide { width: 100%; min-height: 100px; }
.pagebreak { page-break-after: always; }
.outlined { border-width: 1px; border-style: solid; border-radius: 1rem; overflow: auto; }
.active_link { width: 100%; background-color: #ccc; font-weight: bold; }
.text-important { font-size: 1rem; font-weight: bold; }
span.links { display: inline-block; }
a.nu:hover, a.unlink:hover { text-decoration: none; color: inherit; }

/* Lists */
ul, ol {
    margin-bottom: 1rem;
}

/* ===================
   Media Queries
   =================== */
@media print {
    div.page { height: 1020px; }
    .screen { display: none !important; }
    div.portrait { size: portrait; }
    div.landscape { size: landscape; }
    .page-container {
        max-width: none;
        margin: 0;
        padding: 0;
        box-shadow: none;
    }
}

@media screen {
    .print-only { display: none; }
}

@media (max-width: 768px) {
    .page-container {
        padding: 1rem;
        margin: 0 1rem;
    }
}

/* Responsive width utility classes */
.half-full {
    width: 100%;
    max-width: 100%;
}

.three-quarter {
    width: 100%;
    max-width: 100%;
}

.full-width {
    width: 100%;
    max-width: 100%;
}

@media (min-width: 640px), (min-width: 768px) {
    .half-full {
        max-width: 768px;
        width: 50%;
    }
    
    .three-quarter {
        max-width: 1024px;
        width: 75%;
    }
    
    .full-width {
        max-width: 1200px;
        width: 100%;
    }
}


/* golds-bar golds-css */

/* Base bar */
.golds-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
  
    width: 100%;
    min-height: 64px;            /* give it a visible height */
    padding: 12px 16px;          /* space for content */
  
    border-bottom: 2px solid #d1d5db; /* gray-300 */
  
    /* Slightly transparent gradient so backdrop blur shows */
    background: linear-gradient(
      to right,
      rgba(96, 165, 250, 0.88),  /* blue-400/90 approx */
      rgba(37, 99, 235, 0.88),   /* blue-600/90 approx */
      rgba(30, 64, 175, 0.88)    /* blue-800/90 approx */
    );
  
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Safari */
  
    color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  }
  
  /* Dark mode (supports both Tailwind's .dark strategy and system dark mode) */
  .dark .golds-bar {
    border-bottom-color: #4b5563; /* gray-600 */
    /* If you want a pure black bar in dark mode: */
    background: linear-gradient(to right, rgba(0,0,0,0.9), rgba(0,0,0,0.9));
    box-shadow: 0 4px 6px rgba(0,0,0,0.10);
  }
  
  @media (prefers-color-scheme: dark) {
    .golds-bar {
      border-bottom-color: #4b5563; /* gray-600 */
      /* If you want a pure black bar in dark mode: */
      background: linear-gradient(to right, rgba(0,0,0,0.9), rgba(0,0,0,0.9));
      box-shadow: 0 4px 6px rgba(0,0,0,0.10);
    }
  }
  


  /* compact-hero */

  /* Compact Hero Section */
.compact-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-height: 12rem;
    min-height: 8rem;       /* so it still looks substantial */
    padding: 1.5rem 2rem;
    
    border-radius: 0.25rem;
    
    /* teal to emerald 
    background: linear-gradient(
      to right,
      rgba(45, 212, 191, 0.95), 
      rgba(5, 150, 105, 0.95)   
    );  */
  
    /* gold-bar   
    background: linear-gradient(to right, #fbbf24, #d97706); 
    background: linear-gradient(to right, #d4af37, #b8860b, #8b6914);
  
    */
  
  
  
    /* gray-bar
    background: linear-gradient(to right, #f3f4f6, #e5e7eb); 
    */
  
    /* teal-bar or green
    background: linear-gradient(to right, #2dd4bf, #0d9488); 
    */
    background: linear-gradient(to right, #2dd4bf, #0d9488); 
    
  
    /* background: linear-gradient(to right, #6366f1, #7c3aed); */
  
  
    color: white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  }
  
.dark  .compact-hero  {
   background: inherit;
   border: 2px solid rgba(255,255,255,0.2) !important;
   box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
   border-radius: 0.6rem;
}
  

  .compact-hero h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
  }


/* ===================================
   Pageheader Styles
   =================================== */
.pageheader {
    margin-bottom: 2.25rem;
}

.pageheader > .title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
}

.dark .pageheader > .title {
    color: #ffffff;
}

.pageheader > .description {
    color: #4b5563;
}

.dark .pageheader > .description {
    color: #9ca3af;
}

/* ===================================
   Pagelinks Styles
   =================================== */
.pagelinks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.9rem;

}

.pagelinks a {
    padding: 0.25rem 0.65rem;
    border-radius: 0.375rem;   /* subtle rounding */
    text-decoration: none;
    color: #374151;

    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pagelinks a:hover {
    background: #f3f4f6;       /* soft gray */
    border: 1px solid #aaa; /* light border on hover */
    color: #111827;
}

.pagelinks a.active {
    background: #e5e7eb;      
    border: 1px solid #d1d5db;
    font-weight: 500;
    color: #111827;
}
 

.dark .pagelinks a:hover {
    background-color: inherit !important;
}

.dark .pagelinks a{
    color: #ccc;
}

.dark .pagelinks a:hover{
    color: #1f2937;
}


.records {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.records > * {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    padding: 1rem;
    background: #fff;
}



.dark .alert {
    background-color: inherit;
}