/*
 * CANDY ERP — Web Design System Base
 *
 * Include this in every standalone custom www page:
 *   <link rel="stylesheet" href="/assets/candy_framework/css/candy_web_base.css"/>
 *
 * DO NOT load via web_include_css (would affect Frappe portal pages).
 */

/* ── FONTS ──────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Mono:wght@400;500&display=swap');

/* ── DESIGN TOKENS ──────────────────────── */
:root {
  /* Spacing scale */
  --sp-1:4px;  --sp-2:8px;   --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:28px;  --sp-8:32px; --sp-10:40px; --sp-12:48px;

  /* Accent colour (teal) */
  --accent:#3fe0d0;
  --accent-dk:#2bbfb0;
  --accent-lt:rgba(63,224,208,.12);
  --accent-rgb:63,224,208;

  /* Surface palette */
  --bg:#f0f4fa;
  --surface:#ffffff;
  --surface2:#f5f7fb;

  /* Borders */
  --border:rgba(26,60,120,.09);
  --border2:rgba(26,60,120,.18);

  /* Text */
  --text:#0f1c35;
  --text2:#5a6a84;
  --text3:#9aaabb;

  /* Shadows */
  --sh:0 2px 16px rgba(20,50,120,.07);
  --sh-lg:0 8px 40px rgba(20,50,120,.14);
  --sh-menu:0 8px 32px rgba(20,50,120,.16);

  /* Typography */
  --font:'DM Sans',system-ui,sans-serif;
  --mono:'DM Mono',monospace;

  /* Border radii */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-full:9999px;
}

/* ── RESET ───────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

/* Full-screen layout used by all custom standalone pages */
html,body{height:100%;overflow:hidden;}
body{font-family:var(--font);background:var(--bg);color:var(--text);}

/* ── DOT-GRID BACKGROUND ─────────────────── */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle,rgba(var(--accent-rgb),.08) 1px,transparent 1px);
  background-size:28px 28px;
}

/* ── PRIMARY BUTTON ─────────────────────── */
.btn-primary{
  height:44px;background:var(--accent);color:#fff;
  border:none;border-radius:10px;
  font-family:var(--font);font-size:14px;font-weight:600;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
  transition:background .18s,box-shadow .18s,transform .1s;
}
.btn-primary:hover{background:var(--accent-dk);box-shadow:0 var(--sp-1) 14px rgba(var(--accent-rgb),.35);}
.btn-primary:active{transform:scale(.98);}
.btn-primary:disabled{opacity:.55;cursor:not-allowed;transform:none;}

/* Loading state */
.btn-primary.loading .btn-label{display:none;}
.btn-primary.loading .spin{display:block;}

/* ── SPINNER ─────────────────────────────── */
.spin{
  width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:candy-spin .7s linear infinite;
  display:none;
}
@keyframes candy-spin{to{transform:rotate(360deg);}}

/* ── FORM FIELD ──────────────────────────── */
.field{display:flex;flex-direction:column;margin-bottom:var(--sp-3);}
.field label{font-size:12.5px;font-weight:500;color:var(--text2);margin-bottom:5px;}
.field input{
  height:40px;border:1px solid var(--border2);border-radius:var(--r-sm);
  padding:0 var(--sp-3);
  font-family:var(--font);font-size:13.5px;color:var(--text);
  background:var(--surface2);outline:none;
  transition:border-color .18s,box-shadow .18s;
}
.field input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15);
}

/* ── ERROR MESSAGE ───────────────────────── */
.error-msg{
  display:none;align-items:center;gap:var(--sp-2);
  background:#fef2f2;border:1px solid #fecaca;border-radius:var(--r-sm);
  padding:var(--sp-2) var(--sp-3);font-size:12.5px;color:#b91c1c;
  margin-bottom:var(--sp-3);
}
.error-msg.visible{display:flex;}