@import url("icons.css");

/*
 * Centralized branding. Everything below reads from these CSS variables,
 * so re-skinning the whole app is just changing these values
 * (or via Admin > Settings > Branding, which writes them inline in <head>).
 */
:root{
  --primary-color:#25D366;
  --primary-dark:#128C7E;
  --primary-light:#DCF8C6;
  --chat-background:#EFEAE2;
  --incoming-message:#FFFFFF;
  --outgoing-message:#D9FDD3;
  --text-primary:#111B21;
  --text-secondary:#667781;
  --border-color:#E9EDEF;
  --panel-bg:#F0F2F5;
  --danger:#EF4444;
  --warning:#F59E0B;
  --info:#3B82F6;

  /* Spacing scale — consistent gaps/padding throughout instead of ad-hoc
     pixel values scattered per component. */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;

  /* Typography scale — one consistent set of sizes/weights for headings,
     body text, and small/meta text across every screen. */
  --font-size-xs:11px;
  --font-size-sm:12px;
  --font-size-base:14px;
  --font-size-lg:16px;
  --font-size-xl:20px;
  --font-size-2xl:24px;
  --font-weight-normal:400;
  --font-weight-medium:500;
  --font-weight-semibold:600;
  --font-weight-bold:700;

  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:12px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 2px 8px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text-primary)}
a{color:inherit}
button{font-family:inherit}
.badge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600}
.badge-hot{background:#FEE2E2;color:#B91C1C}
.badge-warm{background:#FEF3C7;color:#92400E}
.badge-cold{background:#DBEAFE;color:#1D4ED8}
.badge-unset{background:#E5E7EB;color:#4B5563}
.badge-lost{background:#F3F4F6;color:#1F2937;text-decoration:line-through;text-decoration-color:#9CA3AF}

/* Password field visibility toggle (shared: login, staff creation, etc.) */
.pw-field-wrap{position:relative}
.pw-field-wrap input{padding-right:38px !important}
.pw-toggle-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;
  font-size:15px;color:var(--text-secondary);padding:4px;line-height:1}
.pw-toggle-btn:hover{color:var(--text-primary)}
.badge-open{background:#DCFCE7;color:#166534}
.badge-pending{background:#FEF3C7;color:#92400E}
.badge-resolved{background:#E5E7EB;color:#374151}
.badge-waiting{background:#FDE68A;color:#78350F}

/* Shared empty/loading states — every list/table across Admin and Staff
   should use these instead of inventing its own "No data" text each time,
   so the app feels consistent rather than like separately-built screens. */
.empty-state{padding:var(--space-5) var(--space-4);text-align:center;color:var(--text-secondary);font-size:var(--font-size-base)}
.loading-state{padding:var(--space-5) var(--space-4);text-align:center;color:var(--text-secondary);font-size:var(--font-size-sm)}
.loading-state::after{content:'';display:inline-block;width:14px;height:14px;margin-left:8px;border:2px solid var(--border-color);
  border-top-color:var(--primary-color);border-radius:50%;vertical-align:middle;animation:ssc-spin .7s linear infinite}
@keyframes ssc-spin{to{transform:rotate(360deg)}}
.section-title{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.04em;font-weight:var(--font-weight-semibold);
  color:var(--text-secondary);margin:0 0 var(--space-2)}