/* Wallbox Billing – Custom Styles */

/* ── Roboto (Material theme) ──────────────────────────────────────────────── */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/vendor/fonts/roboto-400.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/vendor/fonts/roboto-500.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/vendor/fonts/roboto-700.woff2") format("woff2");
}

/* ── Utility ──────────────────────────────────────────────────────────────── */
.tile-label  { font-size:.8rem; color:var(--pico-muted-color); margin-bottom:.25rem }
.tile-value  { font-size:1.8rem; font-weight:700; margin:0 }
.tile-pv     { border-top:3px solid #f59e0b }
.tile-grid   { border-top:3px solid #ef4444 }
.tile-wallbox{ border-top:3px solid #3b82f6 }
.tile-house  { border-top:3px solid #6366f1 }

.notice { padding:.75rem 1rem; border-radius:var(--pico-border-radius); margin-bottom:1rem }
.notice.error   { background:#fee2e2; color:#991b1b }
.notice.success { background:#dcfce7; color:#166534 }
.notice.warning { background:#fef3c7; color:#92400e }

table.compact td, table.compact th { padding:.4rem .6rem; font-size:.9rem }
.amount-positive { color:#16a34a; font-weight:600 }
.amount-negative { color:#dc2626; font-weight:600 }
nav a[aria-current] { font-weight:700 }


/* ══════════════════════════════════════════════════════════════════════════
   Theme: Apple  — iOS / macOS Human Interface Guidelines
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Type & shape ─────────────────────────────────────────────────────────── */
:root[data-design="apple"] {
  --pico-font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pico-font-size:         17px;   /* iOS body */
  --pico-line-height:       1.47059; /* 25/17 */
  --pico-border-radius:     10px;

  /* iOS Blue (light mode tint) */
  --ios-tint:               #007AFF;
  --pico-primary:                  #007AFF;
  --pico-primary-background:       #007AFF;
  --pico-primary-border:           #007AFF;
  --pico-primary-underline:        rgba(0,122,255,.5);
  --pico-primary-hover:            #0051D4;
  --pico-primary-hover-background: #0051D4;
  --pico-primary-hover-border:     #0051D4;
  --pico-primary-hover-underline:  #0051D4;
  --pico-primary-focus:            rgba(0,122,255,.2);
  --pico-primary-inverse:          #ffffff;
}

/* ── Light mode (system colors) ───────────────────────────────────────────── */
:root[data-design="apple"][data-theme="light"] {
  /* Backgrounds – Apple system tokens */
  --pico-background-color:          #F2F2F7; /* systemGroupedBackground */
  --pico-card-background-color:     #FFFFFF; /* systemBackground */
  --pico-card-sectioning-background-color: #F2F2F7;
  --pico-card-border-color:         transparent;
  --pico-card-box-shadow:
    0 0 0 0.33px rgba(0,0,0,.14),
    0 2px 8px rgba(0,0,0,.06);

  /* Labels */
  --pico-color:              #000000; /* label */
  --pico-muted-color:        rgba(60,60,67,.60); /* secondaryLabel */

  /* Separators */
  --pico-muted-border-color: rgba(60,60,67,.29);

  /* Inputs (filled rounded) */
  --pico-form-element-background-color:  rgba(118,118,128,.12);
  --pico-form-element-border-color:      transparent;
  --pico-form-element-placeholder-color: rgba(60,60,67,.30);
  --pico-form-element-focus-color:       #007AFF;
}

/* ── Dark mode (system colors) ────────────────────────────────────────────── */
:root[data-design="apple"][data-theme="dark"] {
  /* iOS Dark Blue tint */
  --pico-primary:                  #0A84FF;
  --pico-primary-background:       #0A84FF;
  --pico-primary-border:           #0A84FF;
  --pico-primary-hover:            #409CFF;
  --pico-primary-hover-background: #409CFF;
  --pico-primary-hover-border:     #409CFF;
  --pico-primary-focus:            rgba(10,132,255,.25);

  --pico-background-color:          #000000; /* systemGroupedBackground dark */
  --pico-card-background-color:     #1C1C1E; /* systemBackground dark */
  --pico-card-sectioning-background-color: #2C2C2E;
  --pico-card-border-color:         transparent;
  --pico-card-box-shadow:           none;

  --pico-color:              #FFFFFF;                    /* label dark */
  --pico-muted-color:        rgba(235,235,245,.60);     /* secondaryLabel dark */
  --pico-muted-border-color: rgba(84,84,88,.65);        /* separator dark */

  --pico-form-element-background-color:  rgba(118,118,128,.24);
  --pico-form-element-border-color:      transparent;
  --pico-form-element-placeholder-color: rgba(235,235,245,.30);
  --pico-form-element-focus-color:       #0A84FF;
}

/* ── Navigation bar ───────────────────────────────────────────────────────── */
[data-design="apple"] nav.container-fluid {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
[data-design="apple"][data-theme="light"] nav.container-fluid {
  background: rgba(242,242,247,.88) !important;
  border-bottom: 0.33px solid rgba(0,0,0,.20);
  box-shadow: none;
}
[data-design="apple"][data-theme="dark"] nav.container-fluid {
  background: rgba(28,28,30,.88) !important;
  border-bottom: 0.33px solid rgba(255,255,255,.12);
  box-shadow: none;
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
[data-design="apple"] article {
  border: none !important;
  border-radius: 10px !important;
}
[data-design="apple"][data-theme="dark"] article {
  outline: 0.33px solid rgba(255,255,255,.07);
  outline-offset: 0;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
[data-design="apple"] button,
[data-design="apple"] [type="submit"],
[data-design="apple"] [type="button"] {
  border-radius: 12px;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
}
/* Smaller secondary/outline actions */
[data-design="apple"] button.outline,
[data-design="apple"] button.secondary {
  border-radius: 8px;
  font-size: 15px; /* Subhead */
  font-weight: 600;
}

/* ── Form inputs (iOS filled rounded) ────────────────────────────────────── */
[data-design="apple"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
[data-design="apple"] select,
[data-design="apple"] textarea {
  border-radius: 10px;
}
[data-design="apple"][data-theme="light"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
[data-design="apple"][data-theme="light"] select,
[data-design="apple"][data-theme="light"] textarea {
  background: rgba(118,118,128,.12);
  border: none;
}
[data-design="apple"][data-theme="dark"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
[data-design="apple"][data-theme="dark"] select,
[data-design="apple"][data-theme="dark"] textarea {
  background: rgba(118,118,128,.24);
  border: none;
}

/* ── Tables ───────────────────────────────────────────────────────────────── */
[data-design="apple"] table {
  border-radius: 10px;
  overflow: hidden;
}
/* Inset separator lines */
[data-design="apple"] td, [data-design="apple"] th {
  border-bottom-width: 0.33px;
}

/* ── Design-picker: reset theme button overrides ─────────────────────────── */
.design-picker button {
  border-radius: 6px !important;
  font-size: .82rem !important;
  font-weight: normal !important;
  letter-spacing: normal !important;
  min-height: unset !important;
  padding: .35rem .65rem !important;
  border: none !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
}
.design-picker button.active {
  background: var(--pico-primary) !important;
  color: var(--pico-primary-inverse, #fff) !important;
}
.nav-icon-btn {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  min-height: unset !important;
  padding: .2rem .4rem !important;
  color: inherit !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   Theme: Material Design 3  — Android / Google
   https://m3.material.io
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Type & shape ─────────────────────────────────────────────────────────── */
:root[data-design="material"] {
  --pico-font-family:
    "Roboto", "Google Sans", "Noto Sans",
    system-ui, "Helvetica Neue", Arial, sans-serif;
  --pico-font-size:   16px;  /* Body Large */
  --pico-line-height: 1.5;   /* 24/16 */

  /* M3 Shape scale */
  --m3-shape-xs:  4px;
  --m3-shape-sm:  8px;
  --m3-shape-md:  12px;
  --m3-shape-lg:  16px;
  --m3-shape-xl:  28px;
  --m3-shape-full:50%;
  --pico-border-radius: var(--m3-shape-md); /* default: Medium */

  /* M3 Elevation shadows */
  --m3-elev1: 0px 1px 2px rgba(0,0,0,.30), 0px 1px 3px 1px rgba(0,0,0,.15);
  --m3-elev2: 0px 1px 2px rgba(0,0,0,.30), 0px 2px 6px 2px rgba(0,0,0,.15);
  --m3-elev3: 0px 4px 8px 3px rgba(0,0,0,.15), 0px 1px 3px rgba(0,0,0,.30);
}

/* ── Light mode (M3 baseline purple scheme) ───────────────────────────────── */
:root[data-design="material"][data-theme="light"] {
  /* Primary */
  --m3-primary:           #6750A4;
  --m3-on-primary:        #FFFFFF;
  --m3-primary-container: #EADDFF;
  --m3-on-primary-container: #21005D;

  /* Secondary */
  --m3-secondary:           #625B71;
  --m3-secondary-container: #E8DEF8;

  /* Surface */
  --m3-surface:         #FFFBFE;
  --m3-surface-variant: #E7E0EC;
  --m3-on-surface:      #1C1B1F;
  --m3-on-surface-var:  #49454F;
  --m3-outline:         #79747E;
  --m3-outline-variant: #CAC4D0;
  --m3-background:      #FFFBFE;

  /* Map to PicoCSS vars */
  --pico-primary:                  var(--m3-primary);
  --pico-primary-background:       var(--m3-primary);
  --pico-primary-border:           var(--m3-primary);
  --pico-primary-underline:        rgba(103,80,164,.5);
  --pico-primary-hover:            #4F378B;
  --pico-primary-hover-background: #4F378B;
  --pico-primary-hover-border:     #4F378B;
  --pico-primary-hover-underline:  #4F378B;
  --pico-primary-focus:            rgba(103,80,164,.12);
  --pico-primary-inverse:          var(--m3-on-primary);

  --pico-background-color:         var(--m3-background);
  --pico-card-background-color:    var(--m3-surface);
  --pico-card-border-color:        transparent;
  --pico-card-box-shadow:          var(--m3-elev1);

  --pico-color:              var(--m3-on-surface);
  --pico-muted-color:        var(--m3-on-surface-var);
  --pico-muted-border-color: var(--m3-outline-variant);

  --pico-form-element-background-color: var(--m3-surface-variant);
  --pico-form-element-border-color:     var(--m3-outline);
  --pico-form-element-focus-color:      var(--m3-primary);
}

/* ── Dark mode (M3 baseline purple scheme, dark) ──────────────────────────── */
:root[data-design="material"][data-theme="dark"] {
  --m3-primary:           #D0BCFF;
  --m3-on-primary:        #381E72;
  --m3-primary-container: #4F378B;
  --m3-on-primary-container: #EADDFF;

  --m3-secondary:           #CCC2DC;
  --m3-secondary-container: #4A4458;

  /* M3 dark surface: background + 5% primary tint at level 1 */
  --m3-surface:         #1C1B1F;
  --m3-surface-variant: #49454F;
  --m3-on-surface:      #E6E1E5;
  --m3-on-surface-var:  #CAC4D0;
  --m3-outline:         #938F99;
  --m3-outline-variant: #49454F;
  --m3-background:      #1C1B1F;

  --pico-primary:                  var(--m3-primary);
  --pico-primary-background:       var(--m3-primary);
  --pico-primary-border:           var(--m3-primary);
  --pico-primary-underline:        rgba(208,188,255,.5);
  --pico-primary-hover:            #E8DEF8;
  --pico-primary-hover-background: #E8DEF8;
  --pico-primary-hover-border:     #E8DEF8;
  --pico-primary-focus:            rgba(208,188,255,.15);
  --pico-primary-inverse:          var(--m3-on-primary);

  --pico-background-color:         var(--m3-background);
  --pico-card-background-color:    #28243A; /* surface + primary 8% overlay = level 1 */
  --pico-card-border-color:        transparent;
  --pico-card-box-shadow:          none; /* M3 dark uses tonal color, not shadow */

  --pico-color:              var(--m3-on-surface);
  --pico-muted-color:        var(--m3-on-surface-var);
  --pico-muted-border-color: var(--m3-outline-variant);

  --pico-form-element-background-color: var(--m3-surface-variant);
  --pico-form-element-border-color:     var(--m3-outline);
  --pico-form-element-focus-color:      var(--m3-primary);
}

/* ── Top App Bar ──────────────────────────────────────────────────────────── */
[data-design="material"] nav.container-fluid {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: none;
}
[data-design="material"][data-theme="light"] nav.container-fluid {
  background: var(--m3-surface, #FFFBFE) !important;
  box-shadow: var(--m3-elev2);
}
[data-design="material"][data-theme="dark"] nav.container-fluid {
  /* Dark Top App Bar: surface + 8% primary overlay */
  background: #28243A !important;
  box-shadow: none;
  border-bottom: 1px solid var(--m3-outline-variant, #49454F);
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
[data-design="material"] article {
  border: none !important;
  border-radius: var(--m3-shape-md, 12px) !important;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
[data-design="material"] button,
[data-design="material"] [type="submit"],
[data-design="material"] [type="button"] {
  /* M3 Filled button: Extra-Large shape (pill) */
  border-radius: var(--m3-shape-xl, 28px);
  font-weight: 500;
  font-size: 14px;      /* Label Large */
  letter-spacing: .006em;
  min-height: 40px;
}
/* Outlined / secondary */
[data-design="material"] button.outline,
[data-design="material"] button.secondary {
  border-radius: var(--m3-shape-xl, 28px);
}

/* ── Form inputs (M3 Outlined style) ─────────────────────────────────────── */
[data-design="material"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
[data-design="material"] select,
[data-design="material"] textarea {
  border-radius: var(--m3-shape-xs, 4px);
}

/* ── Tables ───────────────────────────────────────────────────────────────── */
[data-design="material"] table {
  border-radius: var(--m3-shape-md, 12px);
  overflow: hidden;
}