:root{
  --bg:#f6f8ff;
  --card:rgba(255,255,255,.82);
  --cardSolid:#fff;
  --text:#0f172a;
  --muted:#64748b;
  --line:rgba(148,163,184,.28);

  --brand1:#4f46e5; /* indigo */
  --brand2:#7c3aed; /* violet */
  --brand3:#ec4899; /* pink */

  --ok:#10b981;
  --bad:#ef4444;
  --warn:#f59e0b;

  --radius:18px;
  --radiusSm:14px;

  --shadowSm:0 8px 20px rgba(2,6,23,.08);
  --shadowMd:0 14px 40px rgba(2,6,23,.12);
  --shadowGlow:0 18px 55px rgba(79,70,229,.18);

  --grad:linear-gradient(135deg,var(--brand1),var(--brand2) 45%,var(--brand3));
  --gradSoft:linear-gradient(135deg,rgba(79,70,229,.14),rgba(124,58,237,.10) 45%,rgba(236,72,153,.10));
}

/* Tailwind-like helpers used in templates (fallbacks if Tailwind config doesn’t load) */
.bg-rainbow{ background: linear-gradient(90deg, #6366F1 0%, #22D3EE 25%, #10B981 50%, #F59E0B 75%, #EF4444 100%); }
.text-brand-primary{ color: var(--brand1); }
.brand-icon svg{ stroke:#fff !important; }

/* Base */
*{box-sizing:border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;}
html{font-size:16px;}
body{
  margin:0;
  color:var(--text);
  line-height:1.5;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(79,70,229,.18), transparent 55%),
    radial-gradient(700px 420px at 90% 10%, rgba(236,72,153,.14), transparent 55%),
    radial-gradient(600px 420px at 50% 90%, rgba(34,197,94,.10), transparent 55%),
    radial-gradient(2px 2px at 20% 40%, rgba(2,6,23,.09) 40%, transparent 41%),
    radial-gradient(2px 2px at 60% 70%, rgba(2,6,23,.07) 40%, transparent 41%),
    radial-gradient(2px 2px at 80% 30%, rgba(2,6,23,.07) 40%, transparent 41%),
    var(--bg);
  background-size:auto,auto,auto,120px 120px,140px 140px,160px 160px,auto;
}

main{flex:1;}

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

/* Layout helpers */
.wrap{max-width:1180px;margin:0 auto;padding:18px;}

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  margin:14px 0;
  box-shadow:0 14px 40px rgba(2,6,23,.06);
  backdrop-filter:blur(12px);
}
.card h2{margin:0 0 14px 0;font-size:24px;font-weight:800;letter-spacing:-.01em;}
.card h3{margin:0 0 12px 0;font-size:18px;font-weight:800;letter-spacing:-.01em;}
.small{font-size:13.5px;color:var(--muted);}
.kpi{font-size:28px;font-weight:800;letter-spacing:-.01em;}

/* Grid */
/*
  Tailwind uses `.grid`. We must NOT override it.
  Use `.cp-grid` for our legacy 12-column layout.
*/
.cp-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;}
.col-6{grid-column:span 6;}
.col-12{grid-column:span 12;}

/* Forms */
label{display:block;margin:8px 0 8px;color:var(--muted);font-size:14px;font-weight:600;}

/* Form controls (text-like only)
   IMPORTANT: do NOT apply to checkbox/radio/file/button inputs.
*/
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
select,
textarea{
  width:100%;
  box-sizing:border-box;
  padding:12px 14px !important;
  line-height:1.35;
  min-height:44px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.30);
  background:rgba(255,255,255,.88);
  color:var(--text);
  outline:none;
  box-shadow:0 10px 26px rgba(2,6,23,.05);
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  letter-spacing:.01em;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
select:focus,
textarea:focus{
  border-color:rgba(79,70,229,.45);
  box-shadow:0 14px 35px rgba(79,70,229,.10);
}

/* Checkbox / radio: small + consistent */
input[type="checkbox"], input[type="radio"]{
  width:16px;
  height:16px;
  padding:0;
  border-radius:6px;
  border:1px solid rgba(148,163,184,.55);
  background:#fff;
  box-shadow:none;
  accent-color: var(--brand2);
  vertical-align:middle;
}

/* Utility: full-width buttons (OTP screens, mobile forms, etc.) */
.btn-block{ width:100%; }
input[type="radio"]{
  border-radius:999px;
}

input:focus,select:focus,textarea:focus{
  border-color:rgba(79,70,229,.45);
  box-shadow:0 16px 44px rgba(79,70,229,.16);
}
textarea{resize:vertical;min-height:110px;}

/* Utility: some pages use class="input" on form controls */
.input{ width:100% !important; display:block; }

/* Keep selects consistent */
select{
  -webkit-appearance:none;
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(15,23,42,.55) 50%),
    linear-gradient(135deg, rgba(15,23,42,.55) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-right:44px;
}

/* Buttons */
button,
.actions a,
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-sizing:border-box;
  min-height:44px;
  padding:12px 18px !important;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.24);
  background:rgba(255,255,255,.85);
  color:var(--text);
  cursor:pointer;
  font-size:14.5px;
  line-height:1.2;
  /* Allow long labels ("Send test ...") to wrap instead of overflowing */
  white-space:normal;
  text-align:center;
  max-width:100%;
  font-weight:600;
  box-shadow:0 12px 30px rgba(2,6,23,.07);
  transition:transform .08s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
}
button:hover,.actions a:hover,.btn:hover{transform:translateY(-1px);box-shadow:var(--shadowSm);border-color:rgba(79,70,229,.28);}
button:active,.actions a:active,.btn:active{transform:translateY(0);box-shadow:0 8px 18px rgba(2,6,23,.08);}

button[type="submit"],
button.primary{
  border:none;
  background:var(--grad);
  color:#fff;
  box-shadow:0 18px 60px rgba(79,70,229,.20);
}
button[type="submit"]:hover,button.primary:hover{filter:brightness(1.02);}

button.btn-sm{min-height:38px;padding:8px 14px;font-size:13.5px;}

/* Badges */
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.24);
  background:rgba(255,255,255,.80);
  color:rgba(15,23,42,.72);
  font-size:12px;
  font-weight:600;
}

/* Flash */
.flash{padding:12px 14px;border-radius:14px;margin:12px 0;border:1px solid rgba(148,163,184,.24);background:rgba(255,255,255,.80);box-shadow:0 12px 30px rgba(2,6,23,.06);}
.flash.success{border-color:rgba(16,185,129,.35);} 
.flash.error{border-color:rgba(239,68,68,.35);} 
.flash.warn{border-color:rgba(245,158,11,.35);} 

/* Tables */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 12px;
  table-layout:auto;
}
.table thead th{
  border:none;
  padding:10px 14px;
  color:rgba(15,23,42,.58);
  font-size:13.5px;
  font-weight:600;
  text-align:left;
  white-space:nowrap;
}
.table tbody tr{
  background:rgba(255,255,255,.82);
  box-shadow:0 10px 28px rgba(2,6,23,.06);
}
.table tbody td{
  border:none;
  padding:16px 14px;
  font-size:14.5px;
  vertical-align:middle;
}
.table tbody tr td:first-child{border-top-left-radius:14px;border-bottom-left-radius:14px;}
.table tbody tr td:last-child{border-top-right-radius:14px;border-bottom-right-radius:14px;}

/* Base tables */
.table{width:100%;}

/*
  MOBILE TABLES (stacked cards)
  Opt-in: add class="table table-stack" and add data-label="..." on each <td>.
  Desktop stays a normal table.
*/
@media (max-width: 768px){
  .table.table-stack{border:0;}
  .table.table-stack thead{display:none;}
  .table.table-stack tbody,
  .table.table-stack tr,
  .table.table-stack td{display:block;width:100%;}

  .table.table-stack tbody tr{
    background: rgba(255,255,255,.75);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 18px;
    padding: 12px;
    margin: 12px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,.05);
  }

  .table.table-stack tbody td{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap: 12px;
    padding: 8px 0;
    border: 0 !important;
    white-space: normal;
    word-break: break-word;
  }

  .table.table-stack tbody td::before{
    content: attr(data-label);
    flex: 0 0 42%;
    font-weight: 700;
    color: rgba(0,0,0,.55);
  }

  .table.table-stack tbody td:last-child{
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px solid rgba(0,0,0,.06) !important;
  }

  /* Action area: full width button */
  .table.table-stack tbody td.actions,
  .table.table-stack tbody td[data-label="Action"]{
    display:block;
  }
  .table.table-stack tbody td.actions::before,
  .table.table-stack tbody td[data-label="Action"]::before{display:none;}
  .table.table-stack tbody td.actions .btn,
  .table.table-stack tbody td.actions a,
  .table.table-stack tbody td[data-label="Action"] .btn,
  .table.table-stack tbody td[data-label="Action"] a{width:100%;}
}

/* Prevent any table-driven horizontal scroll on mobile */
@media (max-width: 768px){
  .table{max-width:100%;}
}

/*
  Buttons on mobile
  Make CTAs readable & tappable.
*/
@media (max-width: 768px){
  main .btn,
  main button.btn,
  main button[type="submit"],
  main a.btn{
    width:100%;
    min-height:48px;
  }
  .btn-stack{display:grid;gap:12px;}
}

/*
  Mobile pills / tabs: horizontal scroll, no wrapping.
*/
@media (max-width: 768px){
  .pills-bar{
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 10px !important;
    padding-bottom: 6px;
  }
  .pills-bar::-webkit-scrollbar{display:none;}
  .pills-bar .pill{white-space: nowrap;}
}

/* OTP page helpers */
@media (max-width: 768px){
  .otp-input{
    width:100% !important;
    text-align:center;
    letter-spacing: 6px;
    font-size: 18px;
  }
  .otp-actions{display:grid;gap:12px;}
}

/* Mobile tables -> stacked cards (opt-in with .table-stack) */
@media (max-width: 768px){
  table.table.table-stack{border:0;}
  table.table.table-stack thead{display:none;}
  table.table.table-stack tbody,
  table.table.table-stack tr,
  table.table.table-stack td{display:block;width:100%;}
  table.table.table-stack tbody tr{
    margin: 12px 0;
    padding: 12px 14px;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 16px;
    background: rgba(255,255,255,.75);
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
  }
  table.table.table-stack tbody td{
    border: 0 !important;
    padding: 8px 0 !important;
    display:flex;
    justify-content: space-between;
    align-items:flex-start;
    gap: 12px;
  }
  table.table.table-stack tbody td::before{
    content: attr(data-label);
    font-weight: 700;
    color: rgba(0,0,0,.55);
    flex: 0 0 42%;
    max-width: 42%;
  }
  table.table.table-stack tbody td > *{
    max-width: 58%;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  table.table.table-stack tbody td.actions{
    display:block;
  }
  table.table.table-stack tbody td.actions::before{content:"";display:none;}
  table.table.table-stack tbody td.actions a,
  table.table.table-stack tbody td.actions button{
    width:100%;
  }
}

/* Header (Tailwind page) safety overrides */
header svg.feather{width:16px;height:16px;}
header a.bg-brand-primary,
header a.bg-indigo-600,
header a.border-brand-primary,
header a.border-indigo-600,
header a[href*="post-job"],
header a[href*="create-appointment"]{
  font-size:14px !important;
  padding:10px 14px !important;
  border-radius:999px !important;
}
header a[href*="logout"],
header a[href*="/auth/logout"]{font-size:14px !important;}

/* Auth pages: keep forms from stretching too wide */
.page-auth-login .card form,
.page-auth-register .card form,
.page-auth-forgot .card form{
  max-width:720px;
  margin:0 auto;
}

/* Footer always at bottom */
footer{margin-top:auto;}

/* Responsive */
@media (max-width: 860px){
  .wrap{padding:14px;}
  .col-6{grid-column:span 12;}
  .card{padding:18px;}
  .card h2{font-size:22px;}
  .table thead th,.table tbody td{padding:14px 12px;}
  /* Keep other tables scrollable on small screens, but NOT the stacked-card tables */
  .table:not(.table-stack){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .table thead,.table tbody{display:table;width:100%;}
  button,.actions a,.btn{min-height:40px;padding:9px 14px;}
}

@media (max-width: 520px){
  html{font-size:15.5px;}
  .card h2{font-size:20px;}
  .card{border-radius:16px;}
  header a[href*="post-job"],
  header a[href*="create-appointment"]{padding:9px 12px !important;}
}

/* Create appointment page only */
.page-create-appointment{
  padding: 22px;
}

.page-create-appointment label{
  margin: 10px 0 8px;
}

.page-create-appointment input,
.page-create-appointment textarea,
.page-create-appointment select{
  border-radius: 14px;
  padding: 12px 14px;
  line-height: 1.25;
}

/* Modern select styling (no outdated tight borders) */
.page-create-appointment select{
  -webkit-appearance: none;
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, rgba(15,23,42,.55) 50%),
    linear-gradient(135deg, rgba(15,23,42,.55) 50%, transparent 50%),
    linear-gradient(to right, rgba(148,163,184,.20), rgba(148,163,184,.20));
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%,
    calc(100% - 42px) 50%;
  background-size:
    6px 6px,
    6px 6px,
    1px 22px;
  background-repeat: no-repeat;
  padding-right: 54px;
}

/* Make the dropdown options readable (browser-limited, but helps on most) */
.page-create-appointment select option{
  padding: 10px 12px;
}

/* Buttons: ensure text never touches border */
.page-create-appointment button{
  padding: 12px 20px;
  border-radius: 999px;
  line-height: 1;
}

/* File input spacing */
.page-create-appointment input[type="file"]{
  padding: 12px 14px;
}

/* Mobile: stack properly */
@media (max-width: 860px){
  .page-create-appointment{
    padding: 18px;
  }
}

/* Phones: global action sizing */
@media (max-width: 480px){
  main .btn,
  main button,
  main input[type="submit"],
  main a.btn{
    width: 100%;
    min-height: 48px;
    border-radius: 999px;
  }
  /* Space between stacked actions */
  main .btn + .btn,
  main button + button,
  main input[type="submit"] + input[type="submit"],
  main .btn + button,
  main button + .btn{
    margin-top: 12px;
  }
}

/* Always push footer to bottom */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
footer { margin-top: auto; }