/* =====================================================================
   COMPONENTS: forms, buttons, tables, badges, flash, header widgets, etc.
   ===================================================================== */

/* ----- Forms ----- */
label{
  display:block;
  font-weight:600;
  margin:0 0 6px 0;
  font-size:0.9rem;
  color:var(--chip-text);
}

input, select, textarea{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--input-border);
  background:var(--input-bg);
  color:var(--text);
  font-size:0.95rem;
  transition:0.2s;
}

input:focus, select:focus, textarea:focus{
  border-color:var(--input-focus);
  outline:none;
  box-shadow:0 0 0 3px var(--input-focus-ring);
}

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

select{ color-scheme:light; }
html[data-theme="dark"] select{ color-scheme:dark; }

/* ----- Buttons (keeps your .primary/.secondary/.danger) ----- */
button{
  padding:10px 18px;
  border:0;
  border-radius:15px;
  font-size:0.95rem;
  font-weight:600;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

button.primary{ background:var(--btn-primary); color:var(--btn-primary-text); }
button.secondary{ background:var(--btn-secondary); color:var(--btn-secondary-text); }
button.danger{ background:var(--btn-danger); color:var(--btn-danger-text); }

button.primary:hover,
button.secondary:hover,
button.danger:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  filter:brightness(1.06);
}

button.primary:active,
button.secondary:active,
button.danger:active{
  transform:translateY(0);
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  filter:brightness(1);
}

button.off{ opacity:0.5; cursor:default; }
.btn-full{ width:100%; }

/* dark hover tuning */
html[data-theme="dark"] button.primary:hover{
  background:#2563eb;
  box-shadow:0 4px 14px rgba(59,130,246,0.35);
}
html[data-theme="dark"] button.secondary:hover{ background:#3a3f45; }
html[data-theme="dark"] button.danger:hover{
  background:#dc2626;
  box-shadow:0 4px 14px rgba(220,38,38,0.35);
}

/* ----- Back button ----- */
.back-bar{ margin-top:8px; margin-bottom:16px; position:sticky; }

.back-button{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  background:var(--back-bg);
  border:1px solid var(--back-border);
  border-radius:30px;
  color:var(--back-text);
  font-size:0.9rem;
  font-weight:500;
  transition:all 0.15s ease;
  text-decoration:none;
  position:sticky;
}

.back-button:hover{
  background:var(--back-hover-bg);
  border-color:var(--back-hover-border);
  transform:translateY(-1px);
}
.back-button:active{ transform:translateY(0); }
.back-button.disabled{ opacity:0.5; pointer-events:none; background:var(--back-bg); }

/* ----- Flash banner (your base.html uses: flash-banner flash-success/error/warning) ----- */
.flash-banner{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);

  border-radius:14px;
  padding:10px 16px;
  font-size:15px;
  font-weight:600;
  white-space:nowrap;

  opacity:1;
  transition:opacity .35s ease, transform .35s ease;
  animation:flashPop .18s ease;
  z-index:50;
  pointer-events:none;
}

.flash-banner.flash-success{ background:var(--flash-success-bg); color:var(--flash-success-text); }
.flash-banner.flash-error{ background:var(--flash-error-bg); color:var(--flash-error-text); }
.flash-banner.flash-warning{ background:var(--flash-warning-bg); color:var(--flash-warning-text); }

.flash-banner .flash-line{ margin:2px 0; }

@keyframes flashPop{
  from { opacity:0; transform:translate(-50%, calc(-50% - 6px)); }
  to   { opacity:1; transform:translate(-50%, -50%); }
}

.flash-hide{ opacity:0; transform:translate(-50%, calc(-50% - 10px)); }

@media (max-width:720px){
  .flash-banner{ max-width:70vw; overflow:hidden; text-overflow:ellipsis; }
}

/* ----- Tables ----- */
.table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

table{ width:100%; border-collapse:collapse; margin:10px 0; }
th, td{ border-bottom:1px solid var(--row-border); padding:12px 10px; text-align:left; vertical-align:top; }
th{ background:var(--th); font-weight:600; }
th a:hover{ text-decoration:underline; }

.sort-indicator{ display:inline-block; margin-left:5px; font-weight:700; }

tr:hover{ background-color:var(--hover) !important; cursor:pointer; }
tr:hover td{ background-color:var(--hover); }
tr td a{ position:relative; z-index:2; }

/* ----- Badges ----- */
.badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:50px;
  font-size:0.8rem;
  font-weight:600;
}

.badge-mini{
  font-size:0.75rem;
  padding:4px 10px;
  border-radius:20px;
  background:var(--chip-bg);
  color:var(--chip-text);
  border:1px solid var(--chip-border);
}

.badge-active{ background:var(--badge-active-bg); color:var(--badge-active-text); }
.badge-warning{ background:var(--badge-warning-bg); color:var(--badge-warning-text); }
.badge-off{ background:var(--badge-off-bg); color:var(--badge-off-text); }
.badge-waiting{ background:var(--badge-waiting-bg); color:var(--badge-waiting-text); }
.badge-approved{ background:var(--badge-approved-bg); color:var(--badge-approved-text); }

/* ----- Expander (details) ----- */
.expander{ border:0; }
.expander__summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.expander__summary::-webkit-details-marker{ display:none; }
.expander__title{ display:flex; align-items:center; gap:10px; }
.expander__chev{ font-size:18px; transform:rotate(0deg); transition:transform .15s ease; color:var(--chev); }
.expander[open] .expander__chev{ transform:rotate(180deg); }
.expander__content{ margin-top:14px; }

/* ----- Pager ----- */
.svc-pager{
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

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

.svc-pager-btn{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--pager-border);
  background:var(--pager-bg);
  color:var(--pager-text);
  text-decoration:none;
  font-weight:600;
  font-size:0.9rem;
}

.svc-pager-btn:hover{ background:var(--pager-hover); }
.svc-pager-btn.is-disabled{ opacity:.5; pointer-events:none; }

/* ----- Signature box / photos (used in services & detail) ----- */
.sigbox{
  border:1px dashed var(--sig-border);
  border-radius:16px;
  padding:16px;
  background:var(--sig-bg);
}

canvas{
  width:100%;
  height:160px;
  border:1px solid var(--input-border);
  border-radius:12px;
  background:var(--card);
  touch-action:none;
}

.photo{
  max-width:200px;
  max-height:150px;
  border-radius:10px;
  border:1px solid var(--border);
  object-fit:cover;
}

/* ----- Theme toggle (header) ----- */
.theme-control{
  display:flex;
  align-items:center;
  gap:8px;
  margin-right:16px;
  font-size:14px;
  color:var(--muted);
}

.theme-switch-simple{ position:relative; width:38px; height:20px; }
.theme-switch-simple input{ opacity:0; width:0; height:0; }

.slider-simple{
  position:absolute;
  inset:0;
  background:#cbd5e1;
  border-radius:20px;
  transition:.2s ease;
}

.slider-simple::before{
  content:"";
  position:absolute;
  height:14px;
  width:14px;
  left:3px;
  top:3px;
  background:white;
  border-radius:50%;
  transition:.2s ease;
}

.theme-switch-simple input:checked + .slider-simple{ background:#334155; }
.theme-switch-simple input:checked + .slider-simple::before{ transform:translateX(18px); }

.top-right-vertical{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  text-align:center;
}

/* ----- Brand ----- */
.brand{ margin:0; text-align:center; }

.brand-link,
.brand-link:visited,
.brand-link:hover,
.brand-link:active,
.brand-link:focus{
  display:inline-block;
  text-decoration:none;
  color:var(--text);
  outline:none;
}

.brand-link{ transition:transform 160ms ease, filter 160ms ease; position:relative; }

.brand-main{
  display:block;
  font-size:3rem;
  font-weight:700;
  letter-spacing:10px;
  line-height:1.05;
  white-space:nowrap;
  transition:color 160ms ease, text-shadow 200ms ease;
  text-shadow:0 0 0 rgba(96,165,250,0);
}

.brand-sub{
  display:block;
  font-size:0.65rem;
  letter-spacing:3px;
  text-transform:uppercase;
  opacity:0.6;
  line-height:1.15;
  transition:opacity 160ms ease, filter 160ms ease;
}

.brand-link:hover,
.brand-link:focus-visible{ transform:translateY(-1px); }

.brand-link:hover .brand-main,
.brand-link:focus-visible .brand-main{
  color:#93c5fd;
  text-shadow:
    0 0 4px rgba(96,165,250,0.65),
    0 0 10px rgba(59,130,246,0.45),
    0 0 18px rgba(37,99,235,0.25);
}

.brand-link:hover .brand-sub,
.brand-link:focus-visible .brand-sub{
  opacity:0.85;
  filter:drop-shadow(0 0 6px rgba(59,130,246,0.25));
}

.brand-link:active{ transform:translateY(0px) scale(0.99); }

/* ----- Chips in dark mode (if you use .chip or .quick-tag anywhere) ----- */
html[data-theme="dark"] .chip,
html[data-theme="dark"] .quick-tag{
  background:var(--chip-bg);
  color:var(--chip-text);
  border:1px solid var(--chip-border);
  transition:0.2s ease;
}

html[data-theme="dark"] .chip:hover,
html[data-theme="dark"] .quick-tag:hover{
  background:rgba(59,130,246,0.18);
  box-shadow:0 0 0 1px var(--accent-glow);
}

/* ----- Small helpers used across services ----- */
.travel-row{
  padding:10px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--panel-bg);
  margin-top:10px;
}

.db-update-row{ display:flex; align-items:center; gap:10px; margin-top:8px; font-size:.9rem; opacity:.9; }
.db-update-row--center{ justify-content:center; }
.db-update-row--right{ justify-content:flex-end; }
.db-update-row input{ margin:0; }
.db-update-row input[type="checkbox"]{ width:16px; height:16px; margin:0; }
.db-update-row label{ margin:0; cursor:pointer; line-height:1; }