/* ══════════════════════════════════════════════════════════════
   GMES — UI Components
   Native replacement for jquery-ui.min.css button/widget styles.
   Class names (.ui-button, .ui-corner-all, .ui-widget) are kept
   so no HTML or JS changes are needed.
   ══════════════════════════════════════════════════════════════ */

/* ── Base button (replaces jQuery UI .ui-button) ───────────── */
.ui-button {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    gap:              0.3em;
    padding:          0.4em 0.95em;
    line-height:      1.25;
    cursor:           pointer;
    font-size:        0.85rem;
    font-weight:      600;
    font-family:      inherit;
    border:           1px solid #b0c8e8;
    border-radius:    4px;
    background:       #eef4fc;
    color:            #143a5c;
    vertical-align:   middle;
    white-space:      nowrap;
    user-select:      none;
    -webkit-user-select: none;
    box-sizing:       border-box;
    text-decoration:  none;
    transition:       background 0.1s, border-color 0.12s, box-shadow 0.12s;
}

.ui-corner-all { border-radius: 4px; }
.ui-widget     { font-family: inherit; font-size: inherit; }

.ui-button:hover {
    background:   #d8e6f8;
    border-color: #8bb0dd;
    color:        #0d2a45;
    box-shadow:   0 1px 3px rgba(0,0,0,0.12);
}

.ui-button:active {
    background:  #c4d8f5;
    border-color: #7ba3d4;
    box-shadow:  none;
    transform:   translateY(1px);
}

.ui-button:disabled,
.ui-button[disabled] {
    opacity:        0.5;
    cursor:         default;
    box-shadow:     none;
    transform:      none;
    background:     #eef4fc;
    border-color:   #cdd9e6;
}

.ui-button:focus-visible {
    outline:        2px solid rgba(12, 110, 106, 0.6);
    outline-offset: 2px;
}

/* Coloured action buttons — beat the neutral .ui-button fill via the
   compound selector. Used for Sign Out (red) / Sign In (green) so they
   stand out from the regular blue buttons. Background uses the themed
   --clr-soft-* vars so it adapts to dark mode automatically. */
.ui-button.softRed {
    background:   var(--clr-soft-red);
    border-color: #e09a9a;
    color:        #8a2222;
}
.ui-button.softRed:hover {
    background:   #ffbdbd;
    border-color: #d07a7a;
    color:        #6f1a1a;
}
.ui-button.softGreen {
    background:   var(--clr-soft-green);
    border-color: #8fce9d;
    color:        #1c6b32;
}
.ui-button.softGreen:hover {
    background:   #b9f5c5;
    border-color: #6db97f;
    color:        #15592a;
}

/* Buttons in jQuery UI dialog footers get a minimum width */
.ui-dialog-buttonset .ui-button {
    min-width: 76px;
}

/* ── Button size modifiers ─────────────────────────────────── */
.btnSide {
    width:         100%;
    margin-bottom: 0.2em;
    text-align:    center;
}

.btnHead {
    width: 110px;
}

.KeyBtn {
    width: 11em;
}

/* ── Autocomplete dropdown ─────────────────────────────────── */
.ui-autocomplete {
    max-height:  300px;
    overflow-y:  auto;
    overflow-x:  hidden;
    background:  #fff;
    border:      1px solid #ccc;
    border-radius: 4px;
    box-shadow:  0 4px 10px rgba(0,0,0,0.12);
    padding:     2px 0;
    list-style:  none;
    margin:      0;
}

.ui-menu-item {
    padding:   5px 10px;
    cursor:    pointer;
    font-size: 0.875rem;
}

.ui-menu-item:hover,
.ui-menu-item.ui-state-active {
    background: rgba(12, 110, 106, 0.08);
}

/* ── Loading indicator ─────────────────────────────────────── */
#loading {
    display:        none;
    position:       fixed;
    bottom:         16px;
    right:          48px;
    z-index:        9998;
    pointer-events: none;
}

#loading_text {
    font-family:  monospace;
    font-size:    1.2em;
    position:     absolute;
    left:         10px;
    top:          38px;
    background:   rgba(255,255,255,0.92);
    padding:      2px 8px;
    border-radius: 3px;
    white-space:  nowrap;
    box-shadow:   0 1px 4px rgba(0,0,0,0.1);
}

/* ── Context / IR popup menus ──────────────────────────────── */
#contectMenu, #IRMenu {
    display:       none;
    position:      absolute;
    background:    #fff;
    border:        1px solid #ddd;
    border-radius: 5px;
    min-width:     150px;
    box-shadow:    0 4px 12px rgba(0,0,0,0.15);
    overflow:      hidden;
    z-index:       9999;
}

.cmitem {
    padding:       6px 14px;
    font-size:     0.85em;
    background:    linear-gradient(180deg, #f4f7f6 0%, #e4e9e8 100%);
    cursor:        pointer;
    border-bottom: 1px solid #dce4e3;
}

.cmitem:last-child { border-bottom: none; }
.cmitem:hover      { background: rgba(12, 110, 106, 0.10); color: #0a6e6a; }
.cmitem:active     { background: rgba(12, 110, 106, 0.18); }

/* ── Tooltip ───────────────────────────────────────────────── */
.tooltip {
    width:          140px;
    background:     rgba(25,25,25,0.9);
    color:          #fff;
    text-align:     center;
    border-radius:  5px;
    padding:        6px 8px;
    font-size:      0.8em;
    pointer-events: none;
    box-shadow:     0 2px 8px rgba(0,0,0,0.25);
    line-height:    1.4;
}

/* ── Drag handle ───────────────────────────────────────────── */
.dragBox {
    width:         9px;
    height:        9px;
    border-radius: 50%;
    background:    #2ecc71;
}

/* ── Floater (positioned overlay container) ────────────────── */
.floater {
    position: absolute;
}

/* ── Progress bar popup ────────────────────────────────────── */
#progressBarPopup {
    text-align: center;
}

progress {
    width:        260px;
    height:       12px;
    border-radius: 6px;
    overflow:     hidden;
    accent-color: rgb(12, 110, 106);
}

/* ── User option box (top-right profile menu) ──────────────── */
#user_Option_box {
    display:       none;
    padding:       0.4em;
    border:        0.15em #333 solid;
    border-radius: 5px;
    position:      absolute;
    top:           3.5em;
    right:         var(--pagepad);
    background:    #fff;
    box-shadow:    0 3px 10px rgba(0,0,0,0.15);
    z-index:       200;
    min-width:     120px;
}

/* ── Error splash overlay ──────────────────────────────────── */
.splasherror {
    display:       none;
    position:      absolute;
    width:         min(720px, 90vw);
    height:        300px;
    margin:        0 auto;
    left:          0;
    right:         0;
    border-radius: 32px;
    text-align:    center;
    top:           300px;
    background:    radial-gradient(circle, rgba(238,106,28,0.46) 0%, rgba(255,255,255,0) 100%);
}

/* ── Form containers (permit request / data admin) ─────────── */
.form-container {
    display:       grid;
    background:    #fff;
    box-shadow:    0 4px 6px rgba(0,0,0,0.1);
    border-radius: 8px;
    padding:       16px;
    margin:        auto;
}

.form-container h2 {
    font-size:     1.25rem;
    font-weight:   600;
    margin-bottom: 16px;
}

.form-label {
    display:       block;
    margin-bottom: 8px;
    font-weight:   500;
}

.form-input, .form-select, .form-textarea {
    width:         100%;
    border:        1px solid #ccc;
    padding:       8px;
    border-radius: 4px;
    margin-bottom: 16px;
    box-sizing:    border-box;
}

.comment-suggestions {
    display:    flex;
    flex-wrap:  wrap;
    gap:        8px;
    margin-top: 8px;
}

.comment-button {
    background:     #e8e8e8;
    padding:        6px 12px;
    border-radius:  4px;
    font-size:      0.875rem;
    cursor:         pointer;
    border:         1px solid #ccc;
    text-align:     center;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    transition:     background 0.15s;
    width:          100%;
}

.comment-button:hover { background: #d4d4d4; }

/* ── Top-bar theme toggle ──────────────────────────────────── */
.gm-theme-toggle {
    background:      transparent;
    border:          1px solid rgba(0,0,0,0.14);
    border-radius:   40px;
    padding:         3px 9px 3px 10px;
    cursor:          pointer;
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    font-size:       0.72rem;
    font-weight:     500;
    color:           rgba(0,0,0,0.45);
    transition:      background 0.2s, border-color 0.2s;
    white-space:     nowrap;
    vertical-align:  middle;
    font-family:     inherit;
}

.gm-theme-toggle:hover {
    background:   rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.25);
}

.gm-toggle-track {
    width:         30px;
    height:        16px;
    background:    rgba(0,0,0,0.18);
    border-radius: 8px;
    position:      relative;
    transition:    background 0.2s;
    flex-shrink:   0;
}

.gm-toggle-track.on { background: rgb(var(--gm-green1)); }

.gm-toggle-thumb {
    position:      absolute;
    top:           2px;
    left:          2px;
    width:         12px;
    height:        12px;
    background:    #fff;
    border-radius: 50%;
    transition:    left 0.2s;
    box-shadow:    0 1px 3px rgba(0,0,0,0.3);
}

.gm-toggle-track.on .gm-toggle-thumb { left: 16px; }

[data-theme="dark"] .gm-theme-toggle {
    border-color: rgba(255,255,255,0.18);
    color:        rgba(255,255,255,0.5);
}

[data-theme="dark"] .gm-theme-toggle:hover {
    background:   rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.3);
}

/* ── Dark theme — buttons & menus ──────────────────────────── */
[data-theme="dark"] .ui-button {
    background:   #2a3744;
    border-color: #3f5a72;
    color:        #cfe0f3;
}

[data-theme="dark"] .ui-button:hover {
    background:   #34485c;
    border-color: #5a7ea3;
    color:        #fff;
}

[data-theme="dark"] .ui-button:active {
    background:   #243240;
    border-color: #4a6a8a;
}

[data-theme="dark"] .ui-button:disabled,
[data-theme="dark"] .ui-button[disabled] {
    opacity:      0.45;
    background:   #2a3744;
    border-color: #36495c;
}

/* Dark theme — coloured action buttons (bg comes from the themed var) */
[data-theme="dark"] .ui-button.softRed {
    border-color: rgba(220, 90, 90, 0.6);
    color:        #ffb3b3;
}
[data-theme="dark"] .ui-button.softRed:hover {
    background:   rgba(220, 60, 60, 0.45);
    border-color: rgba(230, 110, 110, 0.75);
    color:        #ffd0d0;
}
[data-theme="dark"] .ui-button.softGreen {
    border-color: rgba(70, 180, 90, 0.6);
    color:        #9be8aa;
}
[data-theme="dark"] .ui-button.softGreen:hover {
    background:   rgba(55, 160, 70, 0.45);
    border-color: rgba(90, 200, 110, 0.75);
    color:        #c2f5cd;
}

[data-theme="dark"] #contectMenu,
[data-theme="dark"] #IRMenu {
    background:   #2a2a2a;
    border-color: #444;
    color:        #e0e0e0;
}

[data-theme="dark"] .cmitem {
    background:    linear-gradient(180deg, #2e2e2e 0%, #262626 100%);
    border-color:  #3a3a3a;
}

[data-theme="dark"] .cmitem:hover { background: rgba(12, 110, 106, 0.22); color: #6ececa; }

[data-theme="dark"] #loading_text {
    background:  rgba(42,42,42,0.92);
    color:       #e0e0e0;
    box-shadow:  0 1px 4px rgba(0,0,0,0.4);
}

/* ── Settings dialog layout ────────────────────────────────── */
.settings-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   1.4em 2.5em;
    padding:               0.8em 0.2em;
}

.settings-section {
    display:        flex;
    flex-direction: column;
    gap:            0.4em;
}

.settings-label {
    font-weight:    600;
    font-size:      0.78em;
    color:          rgb(var(--gm-gray1));
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.settings-section select,
.settings-section button {
    width:      100%;
    box-sizing: border-box;
}

/* ── Count badge (e.g. unseen site issues on the sidebar button) ── */
.gm-count-badge {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       18px;
    height:          18px;
    padding:         0 5px;
    margin-left:     7px;
    border-radius:   9px;
    background:      #d64545;
    color:           #fff;
    font-size:       0.74rem;
    font-weight:     700;
    line-height:     1;
    vertical-align:  middle;
}