/* ============================================
   Yati Provisioning — Shared CSS
   Applied to all provisioning system pages
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --teal:#00897B;--teal-dark:#00695C;--teal-darker:#003E33;--teal-light:#4DB6AC;--teal-pale:#E0F2F1;
  --coral:#FF6B35;--coral-dark:#E55A2B;--coral-pale:#FBE9E7;
  --gold:#FFB300;--gold-pale:#FFF8E1;
  --success:#43A047;--success-pale:#E8F5E9;
  --warning:#FFB300;--warning-pale:#FFF8E1;
  --error:#E53935;--error-pale:#FFEBEE;
  --info:#1E88E5;--info-pale:#E3F2FD;
  --n0:#FFFFFF;--n50:#FAFAFA;--n100:#F5F5F0;--n200:#ECECE7;--n300:#D7D6CE;
  --n400:#A8A69B;--n500:#787571;--n600:#5F5D58;--n700:#4A4844;--n800:#333128;--n900:#1A1815;
  --text:#263238;--text-muted:#5F5D58;--text-faint:#A8A69B;
  --border:rgba(0,0,0,0.06);--border-strong:#D7D6CE;
  --shadow-sm:0 2px 8px rgba(38,50,56,0.06);--shadow-md:0 4px 16px rgba(38,50,56,0.08);
  --shadow-lg:0 8px 32px rgba(38,50,56,0.10);--shadow-xl:0 18px 50px rgba(38,50,56,0.14);
  --shadow-teal:0 8px 30px rgba(0,137,123,0.25);--shadow-coral:0 8px 30px rgba(255,107,53,0.25);
  --grad-brand:linear-gradient(135deg,#00897B 0%,#26A69A 50%,#4DB6AC 100%);
  --grad-warm:linear-gradient(135deg,#FF6B35 0%,#FFB300 100%);
  --grad-hero:linear-gradient(160deg,#003E33 0%,#00695C 40%,#00897B 100%);
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--font);
  background-color:var(--n50);
  background-image:
    url('/static/aymara-side-bands.svg'),
    url('/static/aymara-weave-bg.svg'),
    linear-gradient(180deg,#fbfaf7 0%,#f7f4ee 100%);
  background-repeat:no-repeat,repeat,repeat;
  background-position:center top,left top,left top;
  background-size:1280px 900px,360px 360px,auto;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- Layout ---- */
.container{max-width:1000px;margin:0 auto;padding:2rem 1.5rem}
.container-sm{max-width:480px;margin:0 auto;padding:2rem 1.5rem}
.shell{max-width:980px;margin:0 auto;padding:2rem 1.2rem 4rem}

/* ---- Nav ---- */
.top-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.top-bar a{color:var(--text-muted);font-size:.85rem;font-weight:500}
.top-bar a:hover{color:var(--teal)}
.lang-toggle a{padding:.3rem .7rem;border-radius:999px;font-size:.78rem;font-weight:600;border:1px solid var(--n200);margin-left:.3rem;color:var(--text-muted)}
.lang-toggle a.active{background:var(--teal-pale);color:var(--teal-dark);border-color:var(--teal-light)}

/* ---- Logo ---- */
.logo{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;color:var(--text)}
.logo span{color:var(--coral)}
.logo-sub{font-size:.8rem;color:var(--text-muted);margin-bottom:1.5rem}

/* ---- Cards ---- */
.card{background:#fff;border:1px solid var(--border);border-radius:24px;padding:1.5rem;box-shadow:var(--shadow-sm);transition:all .25s cubic-bezier(.16,1,.3,1)}
.card-hover:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.card-accent-teal{border-top:4px solid var(--teal)}
.card-accent-coral{border-top:4px solid var(--coral)}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.65rem 1.2rem;border-radius:999px;border:none;font-family:inherit;font-weight:700;font-size:.88rem;cursor:pointer;transition:all .25s cubic-bezier(.16,1,.3,1);text-decoration:none;white-space:nowrap}
.btn:hover{transform:translateY(-1px);text-decoration:none}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--teal);color:#fff;box-shadow:var(--shadow-teal)}
.btn-primary:hover{background:var(--teal-dark)}
.btn-accent{background:var(--coral);color:#fff;box-shadow:var(--shadow-coral)}
.btn-accent:hover{background:var(--coral-dark)}
.btn-secondary{background:transparent;color:var(--text);border:1.5px solid var(--n300)}
.btn-secondary:hover{border-color:var(--teal);color:var(--teal)}
.btn-ghost{background:transparent;color:var(--teal);padding:.4rem .8rem}
.btn-danger{background:var(--error);color:#fff;font-size:.78rem;padding:.35rem .8rem}
.btn-success{background:var(--success);color:#fff;font-size:.78rem;padding:.35rem .8rem}
.btn-warn{background:var(--warning);color:var(--n900);font-size:.78rem;padding:.35rem .8rem}
.btn-sm{padding:.3rem .7rem;font-size:.75rem;border-radius:8px}
.btn-block{width:100%;padding:.95rem;font-size:1rem}

/* ---- Forms ---- */
.field{margin-bottom:1rem}
.label{display:block;font-size:.75rem;font-weight:600;color:var(--text-muted);margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.05em}
.label .req{color:var(--coral)}
.input,.select,.textarea{width:100%;padding:.85rem 1rem;border-radius:16px;border:1.5px solid var(--n300);background:var(--n50);color:var(--text);font-size:1rem;font-family:inherit;outline:none;transition:all .2s}
.input:focus,.select:focus,.textarea:focus{border-color:var(--teal-light);background:#fff;box-shadow:0 0 0 3px rgba(0,137,123,.1)}
.input::placeholder{color:var(--text-faint)}
.textarea{min-height:100px;resize:vertical}
.select{appearance:auto}

/* ---- Badges ---- */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:999px;font-size:.72rem;font-weight:600}
.badge-teal{background:var(--teal-pale);color:var(--teal-dark)}
.badge-coral{background:var(--coral-pale);color:var(--coral-dark)}
.badge-success{background:var(--success-pale);color:#2E7D32}
.badge-error{background:var(--error-pale);color:var(--error)}
.badge-warning{background:var(--warning-pale);color:#8D6E63}
.badge-neutral{background:var(--n100);color:var(--text-muted)}

/* ---- Flash ---- */
.flash{padding:.7rem 1rem;border-radius:14px;margin-bottom:1rem;font-size:.88rem;font-weight:500}
.flash-info{background:var(--teal-pale);border:1px solid rgba(0,137,123,.2);color:var(--teal-dark)}
.flash-success{background:var(--success-pale);border:1px solid rgba(67,160,71,.2);color:#2E7D32}
.flash-error{background:var(--error-pale);border:1px solid rgba(229,57,53,.2);color:var(--error)}
.flash-warning{background:var(--warning-pale);border:1px solid rgba(255,179,0,.2);color:#8D6E63}

/* ---- Tables ---- */
.table{width:100%;border-collapse:collapse;margin-top:1rem}
.table th{padding:.6rem .8rem;text-align:left;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);border-bottom:2px solid var(--n200)}
.table td{padding:.7rem .8rem;border-bottom:1px solid var(--n200);font-size:.88rem}
.table tr:hover td{background:var(--n50)}

/* ---- Grid ---- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.full{grid-column:1/-1}
@media(max-width:768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ---- Misc ---- */
.muted{color:var(--text-muted);font-size:.85rem}
.faint{color:var(--text-faint);font-size:.8rem}
.center{text-align:center}
.empty{text-align:center;padding:3rem;color:var(--text-faint)}
h1{font-size:1.6rem;font-weight:700;letter-spacing:-.02em}
h2{font-size:1.15rem;font-weight:600;margin-bottom:.5rem}
h3{font-size:1rem;font-weight:600}
.section-title{font-size:1.1rem;font-weight:700;margin:1.5rem 0 .8rem}
.chip{font-size:.78rem;padding:.2rem .6rem;border-radius:8px;background:var(--n100);display:inline-flex;align-items:center;gap:.3rem}
.scope-bundles{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0}