/* Frontend SaaS-like UI (forced light theme) */

.smd-app{
  --smd-bg:#f5f7fb;
  --smd-card:#ffffff;
  --smd-border:#e6e8ef;
  --smd-text:#111827;
  --smd-muted:#6b7280;
  --smd-accent:#2563eb;
  --smd-ok:#16a34a;
  --smd-warn:#d97706;
  --smd-bad:#dc2626;

  color-scheme: light;
  max-width:1100px;
  margin:28px auto;
  padding:0 16px;
  font-family:'Poppins', Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color:var(--smd-text) !important;
}

.smd-app *{box-sizing:border-box}
.smd-app a{color:var(--smd-accent) !important}
.smd-app a:hover{opacity:.9}

.smd-topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.smd-h1{font-size:28px;line-height:1.2;margin:6px 0 0 0;color:var(--smd-text) !important}
.smd-h2{font-size:16px;margin:0 0 12px 0;color:var(--smd-text) !important}
.smd-kicker{color:var(--smd-muted) !important;font-size:12px;text-transform:uppercase;letter-spacing:.12em}
.smd-muted{color:var(--smd-muted) !important;font-size:13px}
.smd-links a{color:var(--smd-muted) !important;text-decoration:none}
.smd-links a:hover{color:var(--smd-text) !important}

.smd-card{
  background:var(--smd-card) !important;
  border:1px solid var(--smd-border) !important;
  border-radius:18px;
  padding:16px;
  margin:12px 0;
  box-shadow:0 10px 30px rgba(17,24,39,.06);
}

.smd-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.smd-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){.smd-grid3,.smd-grid2{grid-template-columns:1fr}}

.smd-stat{font-size:20px;font-weight:700;margin-top:6px;color:var(--smd-text) !important}
.smd-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;font-size:12px;border:1px solid var(--smd-border) !important;background:#fff !important;color:var(--smd-text) !important}
.smd-pill--ok{border-color:rgba(22,163,74,.35) !important;background:rgba(22,163,74,.08) !important}
.smd-pill--warn{border-color:rgba(217,119,6,.35) !important;background:rgba(217,119,6,.08) !important}
.smd-pill--bad{border-color:rgba(220,38,38,.35) !important;background:rgba(220,38,38,.08) !important}

.smd-hours{display:flex;gap:18px}
.smd-big{font-size:28px;font-weight:800;color:var(--smd-text) !important}

.smd-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.smd-actions{display:flex;gap:10px;flex-wrap:wrap}
.smd-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--smd-border) !important;
  background:#fff !important;
  color:var(--smd-text) !important;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  font-size:13px;
  min-height:44px;
}
.smd-btn:hover{border-color:rgba(37,99,235,.35) !important}
.smd-btn--primary{background:var(--smd-accent) !important;border-color:transparent !important;color:#fff !important}
.smd-btn--primary:hover{filter:brightness(1.03)}

.smd-list{list-style:none;padding:0;margin:0}
.smd-list li{padding:10px 0;border-bottom:1px solid var(--smd-border) !important}
.smd-list li:last-child{border-bottom:0}

.smd-tablewrap{overflow:auto}
.smd-table{width:100%;border-collapse:collapse}
.smd-table th{font-size:12px;color:var(--smd-muted) !important;text-transform:uppercase;letter-spacing:.12em;padding:10px;border-bottom:1px solid var(--smd-border) !important;text-align:left}
.smd-table td{padding:12px 10px;border-bottom:1px solid var(--smd-border) !important;vertical-align:top;color:var(--smd-text) !important}
.smd-table tr:hover td{background:rgba(37,99,235,.04) !important}

/* Responsive table: stack rows into cards on small screens */
@media (max-width:700px){
  .smd-table{border-collapse:separate;border-spacing:0 10px}
  .smd-table thead{display:none}
  .smd-table, .smd-table tbody{display:block;width:100%}
  .smd-table tr{
    display:block;
    background:var(--smd-card) !important;
    border:1px solid var(--smd-border) !important;
    border-radius:16px;
    overflow:hidden;
  }
  .smd-table td{
    display:grid;
    grid-template-columns:110px 1fr;
    gap:10px;
    padding:12px 12px;
    border-bottom:1px solid var(--smd-border) !important;
  }
  .smd-table td:last-child{border-bottom:0}
  .smd-table td::before{
    content:attr(data-label);
    color:var(--smd-muted) !important;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:600;
    line-height:1.2;
    padding-top:2px;
  }
  .smd-table tr:hover td{background:transparent !important}
}

@media (max-width:520px){
  .smd-topbar{flex-direction:column;align-items:stretch}
  .smd-actions{width:100%}
  .smd-actions .smd-btn{flex:1 1 100%;width:100%}
  .smd-hours{flex-direction:column;gap:10px}
  .smd-h1{font-size:24px}
}

.smd-field{margin-bottom:12px}
.smd-field label{display:block;color:var(--smd-muted) !important;font-size:12px;margin:0 0 6px 0}
.smd-field input,.smd-field textarea,.smd-field select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--smd-border) !important;
  background:#fff !important;
  color:var(--smd-text) !important;
  outline:none;
}
.smd-field input:focus,.smd-field textarea:focus,.smd-field select:focus{border-color:rgba(37,99,235,.6) !important;box-shadow:0 0 0 4px rgba(37,99,235,.12)}

.smd-notice{border-radius:14px;padding:12px 14px;border:1px solid var(--smd-border) !important;background:#fff !important}
.smd-notice--info{border-color:rgba(37,99,235,.25) !important;background:rgba(37,99,235,.06) !important}
.smd-notice--error{border-color:rgba(220,38,38,.25) !important;background:rgba(220,38,38,.06) !important}

.smd-note{border-top:1px solid var(--smd-border) !important;padding-top:12px;margin-top:12px}
.smd-live-pillwrap{display:flex;gap:8px;align-items:center}

/* WP login form inside the portal */
.smd-app #smd-loginform{
  margin-top:14px;
}
.smd-app #smd-loginform p{margin:0 0 12px 0}
.smd-app #smd-loginform label{color:var(--smd-muted) !important;font-size:12px}
.smd-app #smd-loginform input[type="text"],
.smd-app #smd-loginform input[type="password"]{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--smd-border) !important;
  background:#fff !important;
  color:var(--smd-text) !important;
}
.smd-app #smd-loginform input[type="submit"]{
  border:0;
  background:var(--smd-accent) !important;
  color:#fff !important;
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
}
.smd-app #smd-loginform input[type="submit"]:hover{filter:brightness(1.03)}