/* ==========================================================
   Meteolab Cloud – UI polish 1.3.1
   Load AFTER v2.css and phase1_3.css
   ========================================================== */

:root{
  --ml-primary:#002050;
  --ml-primary-hover:#0a2f63;
  --ml-primary-active:#00183d;
  --ml-primary-soft:#edf3fa;

  --ml-bg:#f4f7fb;
  --ml-surface:#ffffff;
  --ml-surface-2:#f8fafc;

  --ml-text:#172235;
  --ml-text-2:#53647a;
  --ml-muted:#748398;

  --ml-border:#d9e2ec;
  --ml-border-strong:#bdcad8;

  --ml-success:#1d8c59;
  --ml-warning:#c98a16;
  --ml-danger:#b94444;

  --ml-radius:9px;
  --ml-radius-lg:13px;

  --ml-shadow:0 7px 24px rgba(16,36,62,.06);
  --ml-focus:0 0 0 3px rgba(0,32,80,.13);
}

/* ---------- Global controls ---------- */

button,
input,
select,
textarea{
  font:inherit;
}

button{
  appearance:none;
  -webkit-appearance:none;
  min-height:38px;
  padding:9px 14px;
  border-radius:var(--ml-radius);
  border:1px solid var(--ml-border-strong);
  background:#eef3f8;
  color:#263b55;
  font-weight:650;
  line-height:1.2;
  cursor:pointer;
  transition:
    background-color .14s ease,
    border-color .14s ease,
    color .14s ease,
    box-shadow .14s ease,
    transform .05s ease;
}

button:hover{
  background:#e3ebf4;
  border-color:#aebdcd;
  color:#12283f;
}

button:active{
  transform:translateY(1px);
}

button:focus-visible{
  outline:none;
  box-shadow:var(--ml-focus);
}

button:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
}

/*
 * IMPORTANT:
 * We explicitly override old rules that made primary buttons too light
 * or combined a light background with white text.
 */
button.primary,
.btn-primary,
button[type="submit"]{
  background:var(--ml-primary) !important;
  border-color:var(--ml-primary) !important;
  color:#fff !important;
  box-shadow:none;
}

button.primary:hover,
.btn-primary:hover,
button[type="submit"]:hover{
  background:var(--ml-primary-hover) !important;
  border-color:var(--ml-primary-hover) !important;
  color:#fff !important;
}

button.primary:active,
.btn-primary:active,
button[type="submit"]:active{
  background:var(--ml-primary-active) !important;
}

/* Cancel / secondary buttons */
button.secondary,
.btn-secondary,
button[type="button"]:not(.primary){
  background:#edf2f7;
  color:#29405b;
  border-color:#cfd9e4;
}

button.secondary:hover,
.btn-secondary:hover,
button[type="button"]:not(.primary):hover{
  background:#e3ebf4;
  color:#172d46;
  border-color:#b9c7d6;
}

/* ---------- Inputs ---------- */

input,
select,
textarea{
  width:auto;
  max-width:100%;
  min-height:38px;
  padding:9px 11px;
  border:1px solid var(--ml-border);
  border-radius:var(--ml-radius);
  background:#fff;
  color:var(--ml-text);
  outline:none;
  transition:border-color .14s ease, box-shadow .14s ease;
}

input:hover,
select:hover,
textarea:hover{
  border-color:var(--ml-border-strong);
}

input:focus,
select:focus,
textarea:focus{
  border-color:#738da9;
  box-shadow:var(--ml-focus);
}

input[type="checkbox"]{
  width:16px;
  height:16px;
  min-height:auto;
  padding:0;
  accent-color:var(--ml-primary);
}

input[type="color"]{
  width:46px !important;
  min-width:46px;
  height:36px;
  min-height:36px;
  padding:3px;
  cursor:pointer;
}

input[type="date"]{
  min-width:155px;
  padding-right:10px;
  color-scheme:light;
}

input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:.78;
  cursor:pointer;
  padding:4px;
  border-radius:4px;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover{
  background:#edf3f8;
}

/* ---------- Panels / toolbar ---------- */

.panel{
  border-color:var(--ml-border);
  border-radius:var(--ml-radius-lg);
  box-shadow:var(--ml-shadow);
}

.ph{
  min-height:56px;
  gap:12px;
  background:var(--ml-surface);
}

.toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.toolbar button{
  min-width:76px;
}

/* Make selected period/action easier to distinguish if .active/.on is used */
.toolbar button.active,
.toolbar button.on{
  background:var(--ml-primary);
  border-color:var(--ml-primary);
  color:#fff;
}

/* ---------- Archive calendar ---------- */

.archive-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.archive-nav input[type="date"]{
  background:#fff;
  border-color:#cbd7e3;
  font-weight:600;
}

/* ---------- Tables ---------- */

.table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
}

.table{
  width:100%;
  min-width:760px;
  border-collapse:separate;
  border-spacing:0;
}

.table th{
  background:var(--ml-surface-2);
  color:#596a7f;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.035em;
}

.table th,
.table td{
  border-bottom:1px solid #e8edf3;
  vertical-align:middle;
}

.table tbody tr:hover td{
  background:#fafcff;
}

.table td input,
.table td select{
  max-width:100%;
}

/* Parameter editor inputs must not force the whole table outside viewport */
.table td .dn,
.table td .sm{
  width:100%;
  min-width:150px;
}

.table td .du{
  width:90px !important;
  min-width:80px;
}

.table td .dd{
  width:64px !important;
  min-width:58px;
}

/* ---------- Graph page ---------- */

.chart-pref-panel{
  overflow:hidden;
}

/*
 * Previous grid had fixed columns and overflowed the content area.
 * The parameter name gets remaining space; controls have bounded widths.
 */
.chart-pref-row{
  display:grid !important;
  grid-template-columns:
    minmax(170px, 1.6fr)
    minmax(54px, .42fr)
    minmax(100px, .7fr)
    minmax(58px, .45fr)
    minmax(82px, .55fr)
    minmax(88px, .55fr)
    minmax(76px, .5fr)
    minmax(76px, .5fr) !important;
  gap:10px !important;
  align-items:center;
  width:100%;
  max-width:100%;
  padding:10px 14px !important;
}

.chart-pref-row.header{
  background:var(--ml-surface-2) !important;
  color:#69798c;
  font-size:9px !important;
  letter-spacing:.055em;
}

.chart-pref-row > *{
  min-width:0;
}

.chart-pref-row .name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.chart-pref-row select,
.chart-pref-row input[type="number"]{
  width:100%;
  min-width:0;
}

.chart-pref-row input[type="color"]{
  width:44px !important;
  justify-self:start;
}

/* Saved views */
.view-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.view-chip{
  background:var(--ml-primary-soft) !important;
  color:#183b61 !important;
  border-color:#cbd9e8 !important;
}

.view-chip:hover{
  background:#dde8f4 !important;
  color:#102f51 !important;
}

/* ---------- Admin station/source editor ---------- */

#adminStationForm,
#sourceForm{
  color:var(--ml-text);
}

#adminStationForm label,
#sourceForm label{
  color:#52647a;
  font-size:11px;
  font-weight:700;
}

#adminStationForm label > input,
#adminStationForm label > select,
#sourceForm label > input,
#sourceForm label > select{
  margin-top:6px;
}

/* ---------- Header station picker ---------- */

.station-picker select{
  min-width:210px;
  background:#fff;
  font-weight:600;
}

/* ---------- Status / helper text ---------- */

small{
  color:var(--ml-muted);
}

.warn{
  border:1px solid #eed69f;
}

.warn.critical,
.critical{
  border:1px solid #efc3c3;
}

/* ---------- Login ---------- */

.login-logo{
  display:block;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* ---------- Responsive graph settings ---------- */

@media(max-width:1250px){
  .chart-pref-row{
    grid-template-columns:
      minmax(180px,1.5fr)
      58px
      105px
      58px
      88px
      90px !important;
  }

  .chart-pref-row > *:nth-child(7),
  .chart-pref-row > *:nth-child(8){
    display:none;
  }
}

@media(max-width:900px){
  .hero{
    align-items:flex-start;
    flex-direction:column;
  }

  .archive-nav{
    justify-content:flex-start;
  }

  .chart-pref-row{
    grid-template-columns:minmax(160px,1fr) 55px 105px 58px !important;
  }

  .chart-pref-row > *:nth-child(5),
  .chart-pref-row > *:nth-child(6),
  .chart-pref-row > *:nth-child(7),
  .chart-pref-row > *:nth-child(8){
    display:none;
  }

  .station-picker select{
    min-width:150px;
  }
}

@media(max-width:620px){
  .chart-pref-row{
    grid-template-columns:minmax(145px,1fr) 52px 95px !important;
  }

  .chart-pref-row > *:nth-child(4),
  .chart-pref-row > *:nth-child(n+5){
    display:none;
  }

  .toolbar{
    width:100%;
  }

  .toolbar button{
    flex:1 1 auto;
  }
}