/* ══════════════════════════════════════════════════════════════
   GMES — Core Layout & Utilities
   Page structure, CSS variables, and shared utility classes.

   Other style files:
     components.css  — buttons, loading, tooltips, popups
     table.css       — createTable() output styles
     ir.css          — inspection report styles
     db.css          — circuit / DB testing styles
     planner.css     — planner calendar styles
     key.css         — key & permit page styles
   ══════════════════════════════════════════════════════════════ */

/* ── CSS custom properties ─────────────────────────────────── */
:root {
    /* Layout */
    --gm1:        0,0,0;
    --gm-yellow:  250,235,72;
    --gm-green1:  12,110,106;
    --gm-gray1:   91,90,91;
    --gm-gray2:   156,156,157;
    --low-alpha:  0.1;
    --mid-alpha:  0.25;
    --topth:      2.1em;
    --sidewi:     9em;
    --pagepad:    0.3em;

    /* ── Status / utility colour palette ───────────────────────
       Single source of truth. Update here and every file that
       uses var(--clr-*) updates automatically — including both
       the general utility class AND the table-scoped override.  */
    --clr-soft-red:          #ffd3d3;
    --clr-full-red:          #ff4c4c;
    --clr-super-soft-red:    rgba(225, 145, 145, 0.21);
    --clr-soft-gray:         #ededed;
    --clr-soft-green:        #d3ffda;
    --clr-soft-blue:         rgba(86, 170, 254, 0.6);
    --clr-fault:             #c0392b;
    --clr-fault-text:        #ffffff;
    --clr-warn:              #e67e22;
    --clr-warn-text:         #ffffff;
    --clr-note:              rgba(46, 204, 113, 0.75);
    --clr-attention:         #faeb48;
    --clr-attention-text:    #1a1a1a;
}

/* ── Global input / select baseline ───────────────────────── */
input[type="text"],
input[type="number"],
input[type="date"],
select {
    -webkit-box-sizing: border-box;
    box-sizing:         border-box;
    border:             1px solid #999;
    border-radius:      0.4em;
    background-color:   rgba(239, 255, 145, 0.23);
    margin:             0 0 0.1em 0;
}

input[type="text"]:disabled,
input[type="number"]:disabled,
select:disabled {
    cursor:           default;
    background-color: rgba(239,239,239,0.3);
    border-color:     rgba(118,118,118,0.3);
}

/* ── Three-panel page layout ───────────────────────────────── */
#div_top {
    border-radius:    0.5em 0 0.5em 0;
    padding:          var(--pagepad);
    border:           0.05em rgb(var(--gm1)) solid;
    position:         absolute;
    top:              var(--pagepad);
    left:             var(--pagepad);
    width:            calc(100% - var(--pagepad) * 4);
    height:           var(--topth);
    background-color: rgba(12, 110, 106, 0.07); /* subtle brand teal */
}

#div_sidePanel {
    border-radius:    0 0.5em 0 0.5em;
    padding:          var(--pagepad);
    border:           0.05em rgb(var(--gm1)) solid;
    position:         absolute;
    top:              calc(var(--topth) + var(--pagepad) * 4);
    left:             var(--pagepad);
    width:            var(--sidewi);
    height:           calc(100% - var(--topth) - var(--pagepad) * 7);
    background-color: rgba(12, 110, 106, 0.05); /* very subtle brand teal */
}

#div_main {
    border-radius: 0 0.5em 0 0.5em;
    padding:       var(--pagepad);
    border:        0.05em rgb(var(--gm1)) solid;
    position:      absolute;
    top:           calc(var(--topth) + var(--pagepad) * 4);
    left:          calc(var(--sidewi) + var(--pagepad) * 4);
    height:        calc(100% - var(--topth) - var(--pagepad) * 7);
    width:         calc(100% - var(--sidewi) - var(--pagepad) * 7);
    overflow:      auto;
}

/* ── Top bar elements ──────────────────────────────────────── */
#app_display {
    display:   block;
    position:  relative;
    float:     left;
    font-size: 1.5em;
}

#app_display img {
    display: block;
    height:  2.2rem;
    width:   auto;
    padding-left: 0.4rem;
}

#hambuger {
    float: left;
}

.fRight {
    display:  block;
    position: relative;
    float:    right;
}

/* ── Content containers ────────────────────────────────────── */
.content-box {
    position: relative;
    margin:   var(--pagepad);
    padding:  var(--pagepad);
}

.content-box-border {
    border:        0.05em rgba(12,110,106,0.45) solid;
    border-radius: 0.5em;
}

/* ── Project header grid ───────────────────────────────────── */
.img-box {
    display: inline;
}

#div-project-title {
    display:   inline;
    font-size: 28px;
}

#div-Project-header {
    display:               grid;
    grid-auto-flow:        column;
    grid-template-columns: 10% auto 10% auto 200px 200px;
    grid-template-rows:    repeat(6, auto);
}

.projectLabel {
    justify-self: end;
    padding:      4px 6px;
}

.projectDetail       { width: 100%; }
.projectLabelLeft    { grid-column: 1; }
.projectDetailLeft   { grid-column: 2; }
.projectLabelRight   { grid-column: 3; }
.projectDetailRight  { grid-column: 4; }

#div-Project-image {
    grid-column: 5;
    grid-row:    1 / span 10;
}

#div-client-image {
    grid-column: 6;
    grid-row:    1 / span 10;
}

/* ── Status & alert colours ────────────────────────────────── */
.BGgreen { background-color: green; color: white; }
.BGred   { background-color: red;   color: white; }

.softRed         { background-color: var(--clr-soft-red); }
.fullRed         { background-color: var(--clr-full-red); color: #fff; }
.superSoftRed    { background-color: var(--clr-super-soft-red); }
.softGray        { background-color: var(--clr-soft-gray); }
.softGreen       { background-color: var(--clr-soft-green); }
.softBlue        { background-color: var(--clr-soft-blue); }

.fault     { background-color: var(--clr-fault)     !important; color: var(--clr-fault-text)     !important; }
.warn      { background-color: var(--clr-warn)      !important; color: var(--clr-warn-text)      !important; }
.note      { background-color: var(--clr-note)      !important; }
.attention { background-color: var(--clr-attention) !important; color: var(--clr-attention-text) !important; }

/* ── Layout utilities ──────────────────────────────────────── */
.centre   { text-align: center; }
.centered { display: flex; align-items: center; justify-content: center; }

.startHidden { display: none; }
.fullRadius4 { border-radius: 0.4em; }
.noArrow     { appearance: none; }

/* ── Miscellaneous ─────────────────────────────────────────── */
/* Hides the default number input spinners in cctDetail */
.cctDetail input::-webkit-outer-spin-button,
.cctDetail input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ── Dark theme baseline ───────────────────────────────────── */
[data-theme="dark"] {
    color-scheme: dark;
}

[data-theme="dark"] body {
    background-color: #121212;
    color:            #e0e0e0;
}

[data-theme="dark"] #div_top {
    background-color: rgba(12, 110, 106, 0.18);
    border-color:     rgba(255,255,255,0.08);
}

[data-theme="dark"] #div_sidePanel {
    background-color: rgba(12, 110, 106, 0.14);
    border-color:     rgba(255,255,255,0.08);
}

[data-theme="dark"] #div_main {
    background-color: #1c1c1c;
    border-color:     rgba(255,255,255,0.08);
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] textarea {
    background-color: rgba(255,255,255,0.07);
    border-color:     #555;
    color:            #e0e0e0;
}

[data-theme="dark"] select {
    background-color: #2e2e2e;
    border-color:     #555;
    color:            #e0e0e0;
    /* Tells the browser to render the native dropdown popup in dark OS style */
    color-scheme:     dark;
}

[data-theme="dark"] select option {
    background-color: #2e2e2e;
    color:            #e0e0e0;
}

[data-theme="dark"] select option:checked {
    background-color: rgba(12, 110, 106, 0.55);
    color:            #ffffff;
}

[data-theme="dark"] .content-box-border {
    border-color: rgba(12, 110, 106, 0.28);
}

/* Redefine status palette so both utility classes (.softRed etc.)
   and table cclass rules (.gmes-table__cell.softRed etc.) inherit
   dark-safe colours without any extra selectors needed. */
[data-theme="dark"] {
    --clr-soft-red:          rgba(220,  60,  60, 0.30);
    --clr-full-red:          #c0392b;
    --clr-super-soft-red:    rgba(200,  80,  80, 0.18);
    --clr-soft-gray:         #3d3d3d;
    --clr-soft-green:        rgba( 55, 160,  70, 0.30);
    --clr-soft-blue:         rgba( 50, 120, 200, 0.40);
    --clr-fault:             #a83020;
    --clr-fault-text:        #ffffff;
    --clr-warn:              #b05810;
    --clr-warn-text:         #ffffff;
    --clr-note:              rgba( 30, 120,  55, 0.70);
    --clr-attention:         rgba(170, 150,   0, 0.65);
    --clr-attention-text:    #e8e8e8;
}
#connectionStatusBanner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100000;
	padding: 9px 16px;
	background: #a51d24;
	color: #fff;
	font-weight: 700;
	text-align: center;
	box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

#connectionStatusBanner[hidden] { display: none; }