:root{
  --primary:#4e73df;
  --sidebar-w:225px;
}
body{ font-family:'Nunito',-apple-system,sans-serif; background:#f8f9fc; }

/* ---- Layout (SB Admin 2 style) ---- */
#wrapper{ display:flex; }
.sidebar{
  width:0; min-width:0; overflow:hidden; height:100vh; position:sticky; top:0;
  background:linear-gradient(180deg,#4e73df 0,#224abe 100%);
  transition:width .25s ease, min-width .25s ease;
  flex-shrink:0;
}
.sidebar.toggled{ width:var(--sidebar-w); min-width:var(--sidebar-w); }
.sidebar .nav-link{ color:rgba(255,255,255,.8); padding:.9rem 1rem; font-weight:600; font-size:.85rem; white-space:nowrap; }
.sidebar .nav-link:hover{ color:#fff; background:rgba(255,255,255,.08); }
.sidebar .nav-link i{ margin-right:.4rem; width:1.2rem; text-align:center; }
.sidebar-brand{ color:#fff; font-weight:800; font-size:1rem; padding:1.2rem 1rem; text-decoration:none; white-space:nowrap; }
.sidebar-brand-icon{ margin-right:.5rem; }
.sidebar-divider{ border-top:1px solid rgba(255,255,255,.15); margin:0 1rem; }

#content-wrapper{ flex:1; min-width:0; }
.topbar{ height:4.375rem; }
.topbar-title{ font-weight:700; color:#5a5c69; }
#sidebarToggleTop{ font-size:1.1rem; color:#5a5c69; }

.card-header h6{ font-size:.95rem; }
.text-primary{ color:var(--primary) !important; }

/* ---- Chips (skills / languages / hobbies / strengths) ---- */
.sig-pad-wrap{ border:2px dashed #d1d3e2; border-radius:.35rem; background:#fbfbfe; display:inline-block; max-width:100%; }
#sigCanvas{ display:block; width:100%; max-width:600px; height:180px; touch-action:none; cursor:crosshair; }
body.dark-mode .sig-pad-wrap{ background:#232535; border-color:#3a3d52; }

.chip-group{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  display:inline-block; padding:.35rem .8rem; border-radius:20px; font-size:.82rem;
  background:#eaecf4; color:#3a3b45; cursor:pointer; user-select:none; border:1px solid transparent;
  transition:all .15s ease;
}
.chip:hover{ background:#dde1f0; }
.chip.selected{ background:var(--primary); color:#fff; border-color:var(--primary); }
.chip.custom-chip::after{ content:" \00d7"; margin-left:.25rem; opacity:.7; }

/* ---- Char counters ---- */
.char-counter{ color:#858796; }
.char-counter.warn{ color:#e74a3b; font-weight:700; }

/* ---- Repeatable rows ---- */
.repeat-row{ background:#fbfbfe; position:relative; }

/* ---- Template gallery ---- */
.template-card{ cursor:pointer; border:2px solid transparent; border-radius:8px; padding:6px; text-align:center; transition:border-color .15s; }
.template-card:hover{ border-color:#c6cbe8; }
.template-card.active{ border-color:var(--primary); background:#eef1fc; }
.template-swatch{ height:90px; border-radius:4px; padding:8px; background:#fff; border:1px solid #e3e6f0; overflow:hidden; }
.template-swatch .sw-head{ height:14px; width:60%; border-radius:2px; margin-bottom:8px; background:#4e73df; }
.template-swatch .sw-line{ height:5px; border-radius:2px; background:#dfe3f3; margin-bottom:5px; }
.template-swatch .sw-line.short{ width:60%; }
.template-name{ font-size:.75rem; margin-top:4px; font-weight:600; color:#5a5c69; }

/* ---- Preview column ---- */
.preview-sticky{ position:sticky; top:1rem; }
.resume-page-wrap{ display:flex; justify-content:center; }
.resume-page{
  width:100%; max-width:794px; min-height:1050px; background:#fff;
  box-shadow:0 0 0 1px #e3e6f0, 0 .15rem 1.75rem 0 rgba(58,59,69,.15);
  padding:0; overflow:hidden; font-size:13px; color:#222;
}

/* ---- Dark mode (app UI, not the resume itself) ---- */
body.dark-mode{ background:#181a24; color:#e2e2e6; }
body.dark-mode .card, body.dark-mode .topbar, body.dark-mode #content-wrapper{ background:#20222e; color:#e2e2e6; }
body.dark-mode .card-header{ background:#242636; border-color:#2f3244; }
body.dark-mode .form-control{ background:#181a24; color:#e2e2e6; border-color:#3a3d52; }
body.dark-mode .chip{ background:#2b2e40; color:#e2e2e6; }
body.dark-mode .repeat-row{ background:#1c1e29; border-color:#3a3d52 !important; }
body.dark-mode .template-swatch{ background:#181a24; border-color:#3a3d52; }

@media print{
  #wrapper > *:not(#content-wrapper), .topbar, .card:not(.printable), footer, #pageLimitWarning{ display:none !important; }
  .resume-page{ box-shadow:none; }
  body{ background:#fff; }
}

@media (max-width: 991px){
  .resume-page{ font-size:12px; }
}