/* /invoicing/theme.css – Luxury gold theme (global) */
:root{
  --gold:#d4af37;
  --gold-dark:#b38e2e;
  --bg:#fdfdfb;
  --white:#fff;
  --text:#333;

  /* Controls */
  --ctrl-h:44px;          /* comfortable mobile height */
  --ctrl-pad:8px 12px;    /* compact vertical padding */
  --ctrl-radius:8px;
  --ctrl-fs:16px;         /* keep >=16px to avoid iOS zoom */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body.lux{ font-family:'Inter',sans-serif; background:var(--bg); margin:0; padding:20px; color:var(--text); }

.container{ max-width:1100px; margin:0 auto; padding:0 12px; }

.logo-wrapper{ text-align:center; margin-bottom:20px; }
.logo{ height:44px; width:auto; display:block; object-fit:contain; }

.nav-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  overflow: hidden;
}

/* Desktop / mobile toggle */
.desktop-only { display:flex; align-items:center; }
.mobile-only { display:none; }
@media (max-width:910px){
  .desktop-only{ display:none; }
  .mobile-only{ display:block; }
}

/* =========================
   Header + Navigation
   ========================= */
.site-header{
  --header-h:58px;
  background: linear-gradient(180deg, #fff, #fffdf9 60%, transparent);
  padding:10px 0;
}
.site-header .header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height: var(--header-h);
  position:relative;
}

/* Nav strip (desktop) */
.nav{
  display:flex;
  gap:8px;
  overflow-x:auto;
  scroll-behavior:smooth;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.nav::-webkit-scrollbar{ display:none; }

@media (min-width:910px){
  .site-header .nav{
    flex-wrap:nowrap;
    overflow-x:auto; overflow-y:hidden;
  }
  .site-header .nav .btn{ flex:0 0 auto; padding:10px 16px; border-radius:10px; line-height:1.2; }
}

/* Active nav button */
.nav a.active{
  background: var(--gold);
  color:#000;
  font-weight:700;
  border-color: var(--gold-dark);
  box-shadow:0 0 6px rgba(0,0,0,.25);
}
.nav a.active:hover{ filter:brightness(0.95); }

/* Arrows */
.nav-arrow{
  background: var(--gold);
  border:none;
  color:#fff;
  font-size:20px;
  padding:6px 10px;
  border-radius:8px;
  cursor:pointer;
  transition:.2s;
}
.nav-arrow:hover{ filter:brightness(0.9); }

/* Holidays button special */
.btn.holidays{
  background: linear-gradient(135deg, #1e90ff, #005bbb);
  border: 1px solid #005bbb;
  color:#fff;
}
.btn.holidays:hover{ filter:brightness(0.95); }

/* Default (desktop) */
.hamburger { 
  display: none;              /* hide on desktop */
  flex-direction: column;
  justify-content: space-around;
  width: 28px; height: 22px;
  background: transparent; border: 0; padding: 0; cursor: pointer;
}
.hamburger span { display:block; height:3px; width:100%; background: var(--gold); border-radius:2px; }

/* Your main nav visible on desktop */
.site-nav { display: flex; }

/* Mobile only */
@media (max-width: 900px) {
  .hamburger { display: flex; }   /* show button */
  .site-nav { display: none; }    /* hide full nav; use drawer instead */
}
.menu-toggle{
  appearance:none; background:#fff; border:1px solid #e9e2c4; padding:8px; cursor:pointer;
  border-radius:10px; display:none;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  position:relative;
}
.menu-toggle:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.menu-toggle .bar{
  width:24px; height:2px; background:#333; margin:5px 0; border-radius:2px;
  transition: transform .25s ease, opacity .2s ease;
}
body.nav-open .menu-toggle .bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.nav-open .menu-toggle .bar:nth-child(2){ opacity:0; }
body.nav-open .menu-toggle .bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
@media (max-width:910px){
  .nav{
    position:fixed;
    inset:0 0 0 auto;
    width:88vw; max-width:420px; height:100vh;
    padding:14px;
    flex-direction:column; gap:10px;
    background: linear-gradient(180deg, #fff 60%, #fffaf0);
    border-left:1px solid #e9e2c4;
    box-shadow:-18px 0 36px rgba(0,0,0,.18);
    z-index:1001;

    transform:translateX(100%);
    opacity:0; visibility:hidden;
    transition:transform .28s cubic-bezier(.22,.61,.36,1), opacity .2s ease, visibility .2s step-end;
  }
  .nav.open{
    transform:translateX(0);
    opacity:1; visibility:visible;
    transition:transform .32s cubic-bezier(.22,.61,.36,1), opacity .24s ease, visibility 0s step-start;
  }

  .nav a{
    display:block; width:100%;
    padding:14px 16px;
    border-radius:14px; border:1px solid #e9e2c4;
    background:#fff; color:var(--text);
    text-decoration:none; font-weight:600;
    box-shadow:0 1px 0 rgba(0,0,0,.02);
  }
  .nav a + a{ margin-top:6px; }
  .nav a:hover{ background:#fffdf2; }
  .nav a.btn.gold{
    background: linear-gradient(135deg, var(--gold), #f1c40f);
    color:#fff;
    border-color:var(--gold);
  }

  body.nav-open{ overflow:hidden; }
}

/* Backdrop */
.nav-backdrop{
  position:fixed; inset:0;
  background:rgba(10,10,10,.28);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0; visibility:hidden;
  transition:opacity .2s ease, visibility .2s step-end;
  z-index:1000;
}
.nav-backdrop.show{
  opacity:1; visibility:visible;
  transition:opacity .24s ease, visibility 0s step-start;
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .nav, .nav-backdrop, .menu-toggle .bar{ transition:none !important; }
}

/* =========================
   Typography / Utilities
   ========================= */
.title{ text-align:center; font-weight:600; font-size:28px; margin:0 0 20px; color:var(--gold-dark); }
.right{ text-align:right; }
.center{ text-align:center; }
.muted{ opacity:.85; }
.money{ white-space:nowrap; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.flex-right{ display:flex; justify-content:flex-end; }

.grid-1{ display:grid; grid-template-columns:1fr; gap:20px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.grid-2-small{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.inline-grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.row-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; align-items:end; }

/* =========================
   Cards / Tables / Forms
   ========================= */
.card{ background:var(--white); border-radius:16px; padding:24px; box-shadow:0 10px 40px rgba(0,0,0,.06); border:2px solid var(--gold); }
.card.gold{ border-color:var(--gold); }

.table, .items{ width:100%; border-collapse:collapse; }
.table th, .table td, .items th, .items td{ border:1px solid #e3d6a2; padding:10px; }
.table th, .items th{ background:#fffaf0; text-align:left; }

label{ display:block; font-weight:500; margin:10px 0 6px; }

/* ===== Base input appearance ===== */
input,textarea,select{
  width:100%;
  padding:10px 14px;
  border:1px solid var(--gold);
  border-radius:var(--ctrl-radius);
  font-size:15px;
  background:#fffdf9;
  color:var(--text);
  line-height:1.2;
}

/* ===== Tight, consistent date/time sizing (iOS-friendly) ===== */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"]{
  height:var(--ctrl-h);
  padding:var(--ctrl-pad);
  font-size:var(--ctrl-fs);   /* avoid iOS zoom */
  border-radius:var(--ctrl-radius);
  -webkit-appearance:none;
  appearance:none;
}

/* Align webkit internal value box vertically */
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value,
input[type="month"]::-webkit-date-and-time-value{
  min-height:calc(var(--ctrl-h) - 2px);
  display:inline-flex;
  align-items:center;
}

/* Keep indicators from adding height */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator{
  padding:0 6px;
  margin:0;
}

/* Optional: ensure exact height on iOS Safari */
@supports (-webkit-touch-callout: none) {
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"]{ height:44px; }
}

textarea{ resize:vertical; }

.alert{ background:#fff3cd; border:1px solid #ffe69c; color:#664d03; padding:10px 12px; border-radius:8px; margin-bottom:12px; }

/* Buttons */
.submit-btn, .btn{
  background:linear-gradient(135deg, var(--gold), #f1c40f); color:#fff; font-weight:600; font-size:16px;
  border:none; border-radius:8px; padding:12px 24px; cursor:pointer; display:inline-block; text-decoration:none;
  transition:filter .2s ease;
}
.btn:hover, .submit-btn:hover{ filter:brightness(.95); }
.btn.small{ padding:6px 10px; font-size:14px; }
.btn.subtle{ background:#fff; color:var(--text); border:1px solid var(--gold); }
.btn.gold{ background:linear-gradient(135deg, var(--gold), #f1c40f); color:#fff; border:1px solid var(--gold); }

/* Section headings */
.form-section{ margin-bottom:30px; }
.form-section h3{ font-size:20px; color:var(--gold); border-bottom:1px solid var(--gold); padding-bottom:6px; margin-bottom:20px; }

/* =========================
   Invoice-specific helpers
   ========================= */
.mini{ padding:6px 8px; font-size:14px; }
.mini.center{ text-align:center; }

.gold-input{
  background:#fff7e0; border:1px solid var(--gold); box-shadow: inset 0 0 0 1px rgba(212,175,55,.15);
}
.gold-input:focus{
  outline:none; box-shadow:0 0 0 2px rgba(212,175,55,.35), inset 0 0 0 1px rgba(212,175,55,.2);
  border-color:#caa431;
}
.gold-label{ color:#7f5a00; font-weight:600; }
th.gold-col{ background:#fff3d1 !important; color:#6e4f00; }
td.gold-col{ background:#fffaf0; }

.totals-card{
  border:1px solid var(--gold);
  background: linear-gradient(#fffdf7,#fff7e0);
  border-radius:14px; padding:14px 16px;
  box-shadow: 0 2px 10px rgba(212,175,55,.12);
}
.totals-row{ display:flex; justify-content:space-between; align-items:baseline; margin:8px 0; }
.totals-row .label{ color:#6b5b2b; }
.totals-row .money{ font-variant-numeric: tabular-nums; font-weight:600; }
.totals-divider{ height:1px; background:linear-gradient(to right, transparent, #e9d9a8, transparent); margin:8px 0; border:0; }
.totals-total{ font-size:1.15rem; font-weight:700; }

.vat-wrap{ position:relative; display:inline-block; }
.vat-input{
  width:64px; text-align:right; padding:4px 18px 4px 6px; border-radius:10px;
  border:1px solid #e9c66a; background:#fffdf7; font-variant-numeric: tabular-nums;
}
.vat-wrap::after{
  content:'%'; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  color:#6b5b2b; opacity:.8; font-size:.85em; pointer-events:none;
}
.vat-input::-webkit-outer-spin-button, .vat-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.vat-input[type=number]{ -moz-appearance:textfield; }

/* =========================
   Responsive tweaks
   ========================= */
@media (max-width:1024px){ .row-4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:911px){
  body.lux{ padding:10px; }
  .grid-2{ grid-template-columns:1fr; }
  .title{ font-size:22px; }
  .btn, .submit-btn{ font-size:14px; padding:10px 20px; }
}
@media (max-width:640px){ .row-4{ grid-template-columns:1fr; } }