/* ==========================================================
   APPLICATION SYSTEM – CLEAN BASE STYLES (FINAL)
   ========================================================== */

/* --------------------------
   ROOT VARIABLES
-------------------------- */
:root{
  --bg:#f3f4f6;
  --card:#ffffff;

  --text:#1f2937;
  --text-dark:#111827;

  --border:#9ca3af;
  --input:#6b7280;

  --primary:#005ea5;
  --primary-hover:#003078;
  --primary-active:#002952;

  --focus:#ffbf47;
  --error:#a30000;
}

/* --------------------------
   GLOBAL RESET
-------------------------- */
*{
  box-sizing:border-box;
}

body{
  font-family:system-ui,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  margin:0;
  padding:16px;
}

/* --------------------------
   LAYOUT CONTAINERS
-------------------------- */
.page-container,
.page-container-narrow{
  width:100%;
  max-width:720px;
  margin:0 auto;
}

/* --------------------------
   CARDS
-------------------------- */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  margin:14px 0;
  overflow:hidden; /* prevents button spill */
}

/* --------------------------
   TYPOGRAPHY
-------------------------- */
h1{
  font-size:24px;
  margin:10px 0 18px;
  color:var(--text-dark);
}

p{
  font-size:16px;
  margin-bottom:1rem;
}

label{
  display:block;
  font-size:16px;
  font-weight:600;
  margin-bottom:6px;
  color:var(--text-dark);
}

/* --------------------------
   LINKS
-------------------------- */
a{
  color:var(--primary);
  text-decoration:underline;
}

a:hover,
a:focus{
  color:var(--primary-hover);
}

/* --------------------------
   BUTTONS (FIXED SYSTEM)
-------------------------- */
.button,
a.button,
.btn,
button{
  display:block;
  width:100%;
  padding:14px 16px;
  margin-top:12px;
  border-radius:12px;
  background:var(--primary);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  text-align:center;
  border:none;
  cursor:pointer;
}

.button:hover,
.btn:hover,
button:hover{
  background:var(--primary-hover);
}

.button:active,
.btn:active,
button:active{
  background:var(--primary-active);
}

/* button grouping */
.button-group{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* --------------------------
   FORM ELEMENTS
-------------------------- */
input,
select,
textarea{
  width:100%;
  font-size:16px;
  padding:12px;
  border-radius:10px;
  border:2px solid var(--input);
  background:#fff;
}

/* accessibility focus */
input:focus,
select:focus,
textarea:focus,
button:focus{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-color:var(--primary);
}

/* --------------------------
   RADIO / CHECKBOX
-------------------------- */
.radio-group{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.checkbox-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:10px;
}

input[type="checkbox"],
input[type="radio"]{
  width:auto;
}

/* --------------------------
   GRID SYSTEM
-------------------------- */
.grid,
.med-grid,
.measure-wrap,
.measure-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

/* desktop expansion */
@media(min-width:700px){
  .grid{grid-template-columns:1fr 1fr;}
  .med-grid{grid-template-columns:1fr 1fr;}
  .measure-wrap{grid-template-columns:2fr 1fr;}
  .measure-grid{grid-template-columns:1fr 1fr;}
}

/* --------------------------
   ERROR STATES
-------------------------- */
.error{
  color:var(--error);
  font-weight:600;
}

/* --------------------------
   RESPONSIVE SPACING
-------------------------- */
@media(max-width:600px){
  body{
    padding:14px;
  }

  .card{
    padding:16px;
    margin:12px 0;
  }
}

/* =========================================================
   SaaS ADMIN EMAIL EDITOR – CLEAN MODERN UI
========================================================= */

:root{
  --bg:#f3f4f6;
  --panel:#ffffff;
  --border:#d1d5db;
  --text:#111827;
  --muted:#6b7280;

  --primary:#005ea5;
  --primary-hover:#003078;

  --radius:14px;
}

/* -------------------------
   GLOBAL
------------------------- */
*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:system-ui,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
}

/* -------------------------
   LAYOUT (KEY FIX)
------------------------- */
.admin-layout{
  display:grid;
  grid-template-columns:260px 1fr 360px;
  gap:16px;
  padding:16px;
  max-width:1400px;
  margin:0 auto;
}

/* mobile stack */
@media(max-width:1000px){
  .admin-layout{
    grid-template-columns:1fr;
  }
}

/* -------------------------
   PANELS (CARDS)
------------------------- */
.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  min-height:calc(100vh - 32px);
  overflow:hidden;
}

/* editor gets more breathing room */
.editor textarea{
  min-height:220px;
  width:100%;
  padding:10px;
  border:1px solid var(--border);
  border-radius:10px;
  font-family:ui-monospace,Consolas,monospace;
  font-size:13px;
}

/* -------------------------
   TEMPLATE LIST (LEFT)
------------------------- */
.template-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:12px;
}

.template-item{
  display:block;
  padding:10px;
  border:1px solid var(--border);
  border-radius:12px;
  text-decoration:none;
  color:var(--text);
  background:#fff;
  transition:0.15s;
}

.template-item:hover{
  border-color:var(--primary);
}

.template-item.active{
  border-color:var(--primary);
  background:#eef6ff;
}

/* -------------------------
   TYPOGRAPHY
------------------------- */
h3{
  margin:0 0 10px 0;
}

.muted{
  color:var(--muted);
  font-size:13px;
}

/* -------------------------
   FORM ELEMENTS
------------------------- */
label{
  display:block;
  font-weight:600;
  margin:10px 0 6px;
  font-size:14px;
}

input,
select,
textarea{
  width:100%;
  padding:10px;
  border:1px solid var(--border);
  border-radius:10px;
  font-size:14px;
  background:#fff;
}

/* focus */
input:focus,
textarea:focus{
  outline:3px solid #ffbf47;
  border-color:var(--primary);
}

/* -------------------------
   BUTTONS (FIXED SYSTEM)
------------------------- */
.toolbar{
  display:flex;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}

button{
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
}

button.primary{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}

button.primary:hover{
  background:var(--primary-hover);
}

/* -------------------------
   PREVIEW PANEL
------------------------- */
.preview-box{
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  background:#fff;
  max-height:70vh;
  overflow:auto;
}

/* -------------------------
   RESPONSIVE FIX
------------------------- */
@media(max-width:1000px){
  .panel{
    min-height:auto;
  }
}