/* =========================
   EstimateApp — Apple Clean v2
   (polish: spacing, hierarchy, topbar, inputs, tables, dropdown)
   ========================= */

:root{
  --maxw: 1180px;
  --radius: 18px;
  --radius-sm: 12px;
  --pad: 18px;
  --gap: 16px;

  --font: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Arial;
  --fz: 14px;
  --fz-sm: 12px;
  --fz-lg: 18px;

  /* dark */
  --bg0: #070A12;
  --bg1: #0A1020;

  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.04);
  --line: rgba(255,255,255,.10);

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);
  --muted2: rgba(255,255,255,.45);

  --input: rgba(255,255,255,.06);
  --input2: rgba(255,255,255,.10);

  --primary: #5B6CFF;
  --primary2:#8A7DFF;

  --danger: #FF4D6D;
  --ok: #34D399;
  --warn: #FBBF24;

  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --shadow2: 0 10px 26px rgba(0,0,0,.35);
  --blur: blur(14px);

  --focus: rgba(91,108,255,.55);
}

[data-theme="light"]{
  --bg0: #F6F7FB;
  --bg1: #EEF1F9;

  --card: rgba(255,255,255,.78);
  --card2: rgba(255,255,255,.60);
  --line: rgba(15,23,42,.10);

  --text: rgba(15,23,42,.92);
  --muted: rgba(15,23,42,.62);
  --muted2: rgba(15,23,42,.48);

  --input: rgba(15,23,42,.06);
  --input2: rgba(15,23,42,.10);

  --shadow: 0 20px 55px rgba(15,23,42,.12);
  --shadow2: 0 12px 28px rgba(15,23,42,.10);

  --focus: rgba(91,108,255,.40);
}

/* ===== base ===== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font);
  font-size: var(--fz);
  color: var(--text);
  background:
    radial-gradient(1200px 800px at 10% 0%, rgba(91,108,255,.22), transparent 55%),
    radial-gradient(900px 700px at 95% 10%, rgba(52,211,153,.12), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0) 55%, var(--bg0));
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }

/* ===== containers ===== */
.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 18px 44px;
}

/* ===== topbar (polish) ===== */
.topbar{
  position: sticky;
  top: 0;
  z-index: 30;

  display:flex;
  justify-content: space-between;
  align-items:center;

  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(10,16,32,.58);
  backdrop-filter: var(--blur);
}

[data-theme="light"] .topbar{
  background: rgba(246,247,251,.78);
}

.brand{
  font-size: 16px;
  font-weight: 780;
  letter-spacing: .2px;
}

.actions{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* ===== cards ===== */
.card{
  background: linear-gradient(180deg, var(--card), var(--card2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  backdrop-filter: var(--blur);
  padding: 18px;
  overflow: hidden;
}

.cardHead{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.title{
  font-size: var(--fz-lg);
  font-weight: 800;
  letter-spacing: .2px;
}

.sub{
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--fz-sm);
  line-height: 1.35;
}

/* ===== grids ===== */
.appGrid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--gap);
}
@media (max-width: 980px){ .appGrid{ grid-template-columns: 1fr; } }

.formGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 12px;
  margin-top: 8px;
}
@media (max-width: 720px){ .formGrid{ grid-template-columns: 1fr; } }

.field label{
  display:block;
  color: var(--muted);
  font-size: var(--fz-sm);
  margin: 0 0 7px;
}

/* ===== inputs (Apple feel) ===== */
input, select, textarea{
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--input);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 12px;
  outline: none;

  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .05s ease;
}

textarea{
  min-height: 86px;
  resize: vertical;
}

input:focus, select:focus, textarea:focus{
  background: var(--input2);
  border-color: var(--focus);
  box-shadow: 0 0 0 4px rgba(91,108,255,.15);
}

::placeholder{ color: var(--muted2); }

/* remove ugly inner spin on mac safari for number */
input[type="number"]{ -moz-appearance:textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }

/* ===== buttons (hierarchy) ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;

  padding: 10px 14px;
  border-radius: 999px; /* Apple pill */
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);

  cursor:pointer;
  user-select:none;

  transition: transform .05s ease, background .15s ease, border-color .15s ease, opacity .15s ease, box-shadow .15s ease;
  font-weight: 720;
  letter-spacing: .1px;
}

.btn:hover{
  background: rgba(255,255,255,.10);
}
.btn:active{
  transform: translateY(1px);
}

.btn.primary{
  background: linear-gradient(180deg, rgba(138,125,255,.98), rgba(91,108,255,.98));
  border-color: rgba(91,108,255,.50);
  box-shadow: 0 10px 22px rgba(91,108,255,.22);
}
.btn.primary:hover{ filter: brightness(1.03); }

.btn.danger{
  background: rgba(255,77,109,.14);
  border-color: rgba(255,77,109,.30);
}
.btn.danger:hover{ background: rgba(255,77,109,.18); }

.btn:disabled{
  opacity: .55;
  cursor: not-allowed;
}

/* Topbar buttons a bit tighter */
.actions .btn{ padding: 10px 16px; }

/* Theme button - icon only, perfect circle */
#btnTheme{
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 999px;
}

/* ===== messages ===== */
.msg{
  margin-top: 10px;
  color: var(--muted);
  font-size: var(--fz-sm);
  min-height: 16px;
}

/* ===== divider ===== */
.hr{
  height: 1px;
  background: var(--line);
  margin: 16px 0;
}

/* ===== chips ===== */
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  font-size: var(--fz-sm);
  color: var(--text);
  line-height: 1;
}

.chip .dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
}

.chip.draft .dot{ background: var(--muted); }
.chip.pending .dot{ background: var(--warn); }
.chip.done .dot{ background: var(--ok); }
.chip.canceled .dot{ background: var(--danger); }

/* ===== tables (premium) ===== */
.tableWrap{
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(255,255,255,.03);
}

/* Allow table scroll without breaking layout */
.tableScroll{
  overflow:auto;
  max-height: 460px; /* good default for history */
}

.table{
  width:100%;
  border-collapse: collapse;
}

.table thead th{
  position: sticky; /* sticky header */
  top: 0;
  z-index: 2;

  text-align: left;
  font-size: var(--fz-sm);
  color: var(--muted);
  font-weight: 720;
  padding: 12px 12px;

  background: rgba(255,255,255,.06);
  backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--line);
}

[data-theme="light"] .table thead th{
  background: rgba(255,255,255,.82);
}

.table tbody td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  vertical-align: middle;
}

[data-theme="light"] .table tbody td{
  border-bottom: 1px solid rgba(15,23,42,.06);
}

.table tbody tr:hover{
  background: rgba(255,255,255,.04);
}

.table tbody tr:last-child td{ border-bottom: none; }

.table td:last-child{ text-align: right; }

/* Compact buttons inside tables */
.table .btn{
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
}

/* Inline inputs inside table rows look consistent */
.table input[type="number"]{
  padding: 9px 10px;
  border-radius: 10px;
}

/* ===== Login view ===== */
.loginShell{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 26px 16px;
}
.loginCard{
  width: 100%;
  max-width: 520px;
}

/* ===== Dropdown suggestions (id-based) ===== */
#suggestions{
  position: relative;
}

#suggestions .dropdown,
#suggestions ul{
  margin: 8px 0 0;
  padding: 6px;
  list-style: none;

  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(10,16,32,.78);
  backdrop-filter: var(--blur);
  box-shadow: var(--shadow2);

  max-height: 260px;
  overflow:auto;
}

[data-theme="light"] #suggestions .dropdown,
[data-theme="light"] #suggestions ul{
  background: rgba(255,255,255,.88);
}

#suggestions li{
  padding: 10px 10px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text);
}

#suggestions li:hover{
  background: rgba(255,255,255,.08);
}

#suggestions small{
  color: var(--muted);
}

/* ===== Better spacing for the draft bar buttons on small screens ===== */
@media (max-width: 520px){
  .actions{ gap: 8px; }
  .actions .btn{ padding: 10px 12px; }
  #btnTheme{ width: 40px; height: 40px; }
}
/* history status dropdown */
.statusSelect{
  width: 150px;
  margin-right: 10px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 720;
}
.statusSelect:focus{
  border-color: var(--focus);
  box-shadow: 0 0 0 4px rgba(91,108,255,.12);
}
/* ===== History filters ===== */
.historyFilters{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 180px 180px;
  gap: 12px;
  margin: 10px 0 14px;
}

@media (max-width: 1100px){
  .historyFilters{ grid-template-columns: 1fr 1fr; }
}
/* ===== analytics ===== */
.grid4{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
@media (max-width: 980px){ .grid4{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .grid4{ grid-template-columns: 1fr; } }
.card.mini{ padding:14px 16px; }
.big{ font-size: 22px; font-weight: 800; margin-top: 6px; letter-spacing: .2px; }