/* Global Solar Management System — solar blue, white and green theme */
:root {
  --gsm-blue: #0d4fa3;
  --gsm-blue-dark: #083872;
  --gsm-blue-light: #e8f1fc;
  --gsm-green: #22a45d;
  --gsm-green-light: #e6f6ed;
  --gsm-sun: #f5b301;
  --gsm-bg: #f4f7fb;
  --gsm-sidebar-w: 248px;
  --bs-primary: #0d4fa3;
  --bs-primary-rgb: 13, 79, 163;
  --bs-success: #22a45d;
  --bs-success-rgb: 34, 164, 93;
  --bs-link-color: #0d4fa3;
  --bs-link-color-rgb: 13, 79, 163;
  --bs-body-bg: #f4f7fb;
}
body { background: var(--gsm-bg); font-size: .925rem; }
.btn-primary { --bs-btn-bg: var(--gsm-blue); --bs-btn-border-color: var(--gsm-blue); --bs-btn-hover-bg: var(--gsm-blue-dark); --bs-btn-hover-border-color: var(--gsm-blue-dark); --bs-btn-active-bg: var(--gsm-blue-dark); }
.btn-success { --bs-btn-bg: var(--gsm-green); --bs-btn-border-color: var(--gsm-green); --bs-btn-hover-bg: #1b8a4d; --bs-btn-hover-border-color: #1b8a4d; }
.btn-outline-primary { --bs-btn-color: var(--gsm-blue); --bs-btn-border-color: var(--gsm-blue); --bs-btn-hover-bg: var(--gsm-blue); --bs-btn-hover-border-color: var(--gsm-blue); }
.text-primary { color: var(--gsm-blue) !important; }
.bg-primary { background-color: var(--gsm-blue) !important; }
.bg-success { background-color: var(--gsm-green) !important; }
a { text-decoration: none; }
:focus-visible { outline: 3px solid #ffbf47 !important; outline-offset: 1px; }

/* ---------- layout */
.gsm-shell { display: flex; min-height: 100vh; }
.gsm-sidebar {
  width: var(--gsm-sidebar-w); flex-shrink: 0; background: linear-gradient(180deg, var(--gsm-blue-dark) 0%, var(--gsm-blue) 100%);
  color: #dbe8fb; position: sticky; top: 0; height: 100vh; overflow-y: auto; transition: width .2s ease, transform .2s ease; z-index: 1030;
}
.gsm-sidebar .brand { display: flex; align-items: center; gap: .6rem; padding: 1rem 1rem .75rem; color: #fff; font-weight: 700; letter-spacing: .2px; }
.gsm-sidebar .brand .sun { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle, #ffd54a 30%, var(--gsm-sun) 70%); display: grid; place-items: center; color: var(--gsm-blue-dark); flex-shrink: 0; }
.gsm-sidebar .brand small { display: block; font-weight: 400; font-size: .72rem; color: #b8cdee; }
.gsm-sidebar .menu-section { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #9fbbe6; padding: .9rem 1.1rem .3rem; }
.gsm-sidebar .nav-link { color: #e3edfc; padding: .45rem 1.1rem; display: flex; align-items: center; gap: .65rem; border-left: 3px solid transparent; font-size: .9rem; }
.gsm-sidebar .nav-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.gsm-sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.gsm-sidebar .nav-link.active { background: rgba(255,255,255,.14); border-left-color: var(--gsm-green); color: #fff; font-weight: 600; }
body.sidebar-collapsed .gsm-sidebar { width: 68px; }
body.sidebar-collapsed .gsm-sidebar .label, body.sidebar-collapsed .gsm-sidebar .menu-section, body.sidebar-collapsed .gsm-sidebar .brand-text { display: none; }
body.sidebar-collapsed .gsm-sidebar .nav-link { justify-content: center; padding: .6rem 0; }
.gsm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gsm-topbar { background: #fff; border-bottom: 1px solid #e3e9f2; padding: .5rem 1rem; display: flex; align-items: center; gap: .75rem; position: sticky; top: 0; z-index: 1020; }
.gsm-topbar .company { font-weight: 600; color: var(--gsm-blue-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsm-topbar .company img { height: 30px; margin-right: .5rem; }
.gsm-content { padding: 1.25rem; flex: 1; }
.gsm-footer { padding: .75rem 1.25rem; font-size: .78rem; color: #6c7a91; border-top: 1px solid #e3e9f2; background: #fff; }
@media (max-width: 991.98px) {
  .gsm-sidebar { position: fixed; transform: translateX(-100%); }
  body.sidebar-open .gsm-sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.35); }
  body.sidebar-collapsed .gsm-sidebar { width: var(--gsm-sidebar-w); }
  body.sidebar-collapsed .gsm-sidebar .label, body.sidebar-collapsed .gsm-sidebar .menu-section, body.sidebar-collapsed .gsm-sidebar .brand-text { display: initial; }
  .gsm-content { padding: .75rem; }
}
.sidebar-backdrop { display: none; }
@media (max-width: 991.98px) { body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 1025; } }

/* ---------- page furniture */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.page-head h1 { font-size: 1.35rem; margin: 0; color: var(--gsm-blue-dark); font-weight: 700; }
.page-head .sub { color: #6c7a91; font-size: .85rem; }
.card { border: 1px solid #e1e8f2; border-radius: .6rem; box-shadow: 0 1px 2px rgba(16,40,80,.04); }
.card-header { background: #fff; font-weight: 600; color: var(--gsm-blue-dark); border-bottom-color: #e8eef6; }
.kpi { border-radius: .7rem; padding: .9rem 1rem; background: #fff; border: 1px solid #e1e8f2; height: 100%; display: flex; gap: .8rem; align-items: flex-start; color: inherit; }
.kpi:hover { border-color: var(--gsm-blue); }
.kpi .icon { width: 42px; height: 42px; border-radius: .6rem; display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0; }
.kpi .value { font-size: 1.35rem; font-weight: 700; line-height: 1.1; color: #18294a; }
.kpi .label { font-size: .8rem; color: #5b6a82; }
.kpi .sub { font-size: .75rem; color: #7d8aa0; }
.icon-primary { background: var(--gsm-blue-light); color: var(--gsm-blue); }
.icon-success { background: var(--gsm-green-light); color: var(--gsm-green); }
.icon-warning { background: #fff6dc; color: #b77f00; }
.icon-danger { background: #fde8e8; color: #c62828; }
.icon-info { background: #e3f6fb; color: #0b7da0; }
.icon-secondary { background: #eef1f5; color: #5b6a82; }
.icon-dark { background: #e7eaee; color: #212529; }
.table { --bs-table-hover-bg: #f0f6ff; }
.table thead th { background: #eef4fb; color: #22385e; font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.table td { vertical-align: middle; }
.table-sm td, .table-sm th { padding: .35rem .5rem; }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.filter-bar { background: #fff; border: 1px solid #e1e8f2; border-radius: .6rem; padding: .75rem; margin-bottom: 1rem; }
.form-label { font-weight: 500; font-size: .85rem; margin-bottom: .2rem; color: #2a3b5a; }
.form-label .req { color: #c62828; }
.section-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gsm-blue); font-weight: 700; margin: 1rem 0 .5rem; border-bottom: 1px solid #e3e9f2; padding-bottom: .25rem; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: #6c7a91; }
.empty-state i { font-size: 2.4rem; color: #b6c7e0; display: block; margin-bottom: .5rem; }
.dl-grid { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; font-size: .9rem; }
.dl-grid dt { color: #5b6a82; font-weight: 500; }
.dl-grid dd { margin: 0; }
.badge { font-weight: 600; }

/* ---------- workflow timeline */
.stage-track { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0; padding-bottom: .4rem; }
.stage-track .st { min-width: 92px; text-align: center; font-size: .7rem; color: #7d8aa0; position: relative; padding-top: 22px; }
.stage-track .st::before { content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 3px; background: #dbe3ee; }
.stage-track .st .dot { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); width: 15px; height: 15px; border-radius: 50%; background: #dbe3ee; border: 2px solid #fff; z-index: 1; }
.stage-track .st.done::before, .stage-track .st.done .dot { background: var(--gsm-green); }
.stage-track .st.current .dot { background: var(--gsm-blue); box-shadow: 0 0 0 4px rgba(13,79,163,.2); }
.stage-track .st.current { color: var(--gsm-blue-dark); font-weight: 700; }
.stage-track .st.done { color: #2b5b3c; }

/* ---------- field (mobile-friendly) screens */
.field-card .btn { min-height: 46px; }
.field-actions { position: sticky; bottom: 0; background: #fff; padding: .6rem; border-top: 1px solid #e3e9f2; z-index: 5; }
.signature-pad { border: 2px dashed #9bb3d6; border-radius: .5rem; width: 100%; height: 180px; touch-action: none; background: #fff; }
.line-items td { min-width: 90px; }
.line-items td.wide { min-width: 220px; }

/* ---------- print */
.print-only { display: none; }
@media print {
  .gsm-sidebar, .gsm-topbar, .gsm-footer, .no-print, .btn, .filter-bar, nav.pagination-wrap { display: none !important; }
  .print-only { display: block; }
  body { background: #fff; font-size: 11px; }
  .gsm-content { padding: 0; }
  .card { border: none; box-shadow: none; }
  .table thead th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: #000; }
}
.doc-sheet { background: #fff; max-width: 980px; margin: 0 auto; padding: 1.5rem; border: 1px solid #e1e8f2; }
.doc-sheet .doc-head { display: flex; justify-content: space-between; border-bottom: 2px solid var(--gsm-blue); padding-bottom: .6rem; margin-bottom: .8rem; }
.doc-sheet .doc-title { font-size: 1.2rem; font-weight: 700; color: var(--gsm-blue-dark); text-transform: uppercase; }
.auth-wrap { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, var(--gsm-blue-dark), var(--gsm-blue) 55%, var(--gsm-green)); padding: 1rem; }
.auth-card { width: 100%; max-width: 420px; }

/* sortable grid headers */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable::after { content: "\2195"; opacity: .35; margin-left: .25rem; font-size: .8em; }
th.sortable[aria-sort="ascending"]::after { content: "\2191"; opacity: .9; }
th.sortable[aria-sort="descending"]::after { content: "\2193"; opacity: .9; }
th.sortable:focus-visible { outline: 2px solid var(--bs-primary, #0d4fa3); outline-offset: -2px; }
a.sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
a.sort-link:hover { text-decoration: underline; }