/* ============================================================
   Letter Generator  -  styles
   ============================================================ */
@font-face{
  font-family:"Noto Sans Devanagari";
  src:url("../fonts/NotoSansDevanagari-Regular.ttf") format("truetype");
  font-weight:400;font-display:swap;
}
@font-face{
  font-family:"Noto Sans Devanagari";
  src:url("../fonts/NotoSansDevanagari-Bold.ttf") format("truetype");
  font-weight:700;font-display:swap;
}
:root{
  --saffron:#ff7a00;
  --green:#138808;
  --ink:#1f2430;
  --muted:#6b7280;
  --line:#e5e7eb;
  --bg:#f4f6fb;
  --card:#ffffff;
  --radius:12px;
  --shadow:0 8px 30px rgba(20,30,60,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Noto Sans Devanagari",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
}
.lotus{filter:saturate(1.2)}
.muted{color:var(--muted)}
.small{font-size:.82rem}
a{color:inherit}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border:1px solid transparent;border-radius:10px;
  padding:.7rem 1.1rem;font-size:.95rem;font-weight:600;cursor:pointer;
  text-decoration:none;transition:.15s;background:#eef1f6;color:var(--ink);
}
.btn:hover{transform:translateY(-1px)}
.btn-block{width:100%}
.btn-primary{background:linear-gradient(180deg,#ff8c1a,#ff7a00);color:#fff}
.btn-success{background:linear-gradient(180deg,#1fae4d,#138808);color:#fff}
.btn-outline{background:#fff;border-color:var(--line)}
.btn-ghost{background:transparent}

/* ============================================================
   LOGIN
   ============================================================ */
.login-body{
  min-height:100vh;display:grid;place-items:center;
  background:
    radial-gradient(1200px 400px at 50% -10%, rgba(255,122,0,.18), transparent),
    radial-gradient(1200px 400px at 50% 110%, rgba(19,136,8,.16), transparent),
    var(--bg);
  padding:1.2rem;
}
.login-card{
  width:100%;max-width:380px;background:var(--card);
  border-radius:16px;box-shadow:var(--shadow);padding:2rem 1.8rem;
  border-top:6px solid var(--saffron);
}
.login-brand{text-align:center;margin-bottom:1.2rem}
.lotus-badge{
  width:64px;height:64px;margin:0 auto .6rem;border-radius:50%;
  display:grid;place-items:center;font-size:2rem;
  background:conic-gradient(from 0deg,#ff7a00,#ffffff,#138808,#ff7a00);
}
.lotus-badge .lotus{background:#fff;width:52px;height:52px;border-radius:50%;display:grid;place-items:center}
.login-brand h1{margin:.2rem 0 0;font-size:1.5rem}
.login-brand p{margin:.2rem 0 0;color:var(--muted);font-size:.9rem}
.login-form{display:grid;gap:.9rem;margin-top:.5rem}
.login-form label{display:grid;gap:.35rem;font-size:.85rem;font-weight:600;color:#374151}
.login-form input{
  padding:.7rem .8rem;border:1px solid var(--line);border-radius:10px;font-size:1rem;
}
.login-form input:focus{outline:2px solid rgba(255,122,0,.35);border-color:var(--saffron)}
.hint{margin-top:1rem;text-align:center;color:var(--muted);font-size:.8rem}
.alert{background:#fdecec;color:#b42318;border:1px solid #f9c9c4;
  padding:.6rem .8rem;border-radius:10px;font-size:.88rem;margin-bottom:.8rem}

/* ============================================================
   APP CHROME
   ============================================================ */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 1.1rem;background:#fff;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:10;
}
.topbar-left{display:flex;align-items:center;gap:.5rem;font-size:1.05rem}
.topbar-right{display:flex;align-items:center;gap:.6rem}
.who{display:flex;flex-direction:column;line-height:1.1;text-align:right;font-weight:600;font-size:.9rem}
.who small{font-weight:400;color:var(--muted);font-size:.72rem}

.workspace{
  display:grid;grid-template-columns:360px 1fr;gap:1.1rem;
  padding:1.1rem;align-items:start;max-width:1400px;margin:0 auto;
}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1.2rem}
.form-panel{position:sticky;top:70px}
.form-panel h2{margin:.1rem 0 .2rem;font-size:1.15rem}
.field{display:grid;gap:.35rem;margin:.9rem 0;font-size:.85rem;font-weight:600;color:#374151}
.field span small{font-weight:400;color:var(--muted)}
.field input{padding:.65rem .75rem;border:1px solid var(--line);border-radius:9px;font-size:1rem;
  font-family:inherit}
.field input:focus{outline:2px solid rgba(255,122,0,.35);border-color:var(--saffron)}
.actions{display:grid;gap:.6rem;margin-top:1.2rem}
#share-note{margin-top:.6rem}

/* ============================================================
   A4 LETTER PREVIEW  (this exact element becomes the PDF)
   ============================================================ */
.preview-panel{padding:0;overflow:hidden;background:#e9edf5}
.preview-scroll{width:100%;overflow:auto;padding:16px;display:flex;justify-content:center}

/* wrapper reserves the SCALED size; JS sets its width/height */
.page-scale{position:relative;flex:0 0 auto;margin:0 auto}

.page{
  position:absolute; top:0; left:0;   /* inside .page-scale */
  transform-origin:top left;          /* JS sets transform:scale() to fit screen */
  width:794px;            /* A4 width  @96dpi  */
  height:1123px;          /* A4 height @96dpi  */
  background:#fff;
  box-shadow:0 6px 24px rgba(0,0,0,.18);
  color:#1a1a1a;
  font-family:"Noto Sans Devanagari",serif;
}

/* letterhead image fills the page and sits behind the text */
.lh-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:fill;
  z-index:0;
}

/* generic overlay */
.ov{position:absolute; z-index:1}

/* date sits on the blank of "दिनांक : ______ २०२६" */
.ov-date{
  top:17.15%; left:76%; width:10%;
  text-align:center;font-size:15px;letter-spacing:.5px;
}

/* recipient + body block (प्रति, is already on the letterhead) */
.ov-content{
  top:32.6%; left:10.6%; width:79%;
}
.rc-name{font-weight:700;font-size:17px;margin-bottom:2px}
.rc-desig{font-weight:500;font-size:15px;color:#222}
.rc-body{margin-top:20px}
.rc-body p{
  margin:0 0 9px;
  font-size:15px;line-height:1.62;text-align:justify;
}

/* signature overlay (only used with a BLANK letterhead) */
.ov-sign{top:75.5%; right:14%; width:150px; height:auto;
  mix-blend-mode:multiply}

/* ---------- responsive ---------- */
@media (max-width: 1024px){
  .workspace{grid-template-columns:1fr}
  .form-panel{position:static}
}
@media (max-width: 640px){
  .topbar{flex-wrap:wrap;gap:.5rem;padding:.6rem .8rem}
  .topbar-left{font-size:1rem}
  .topbar-right{gap:.4rem;flex-wrap:wrap;justify-content:flex-end}
  .topbar-right .btn{padding:.5rem .7rem;font-size:.85rem}
  .who{font-size:.82rem}
  .workspace{padding:.7rem;gap:.7rem}
  .panel{padding:1rem}
  .preview-scroll{padding:10px}
  .btn{padding:.75rem 1rem}
}
@media (max-width: 380px){
  .topbar-left strong{display:none}          /* keep the lotus, drop text on tiny screens */
  .topbar-right .btn{padding:.45rem .6rem;font-size:.8rem}
}

/* while generating the PDF we temporarily strip shadows/scroll */
.page.exporting{box-shadow:none}

/* ============================================================
   PRINT  ->  "Save as PDF" produces a true, crisp, selectable PDF
   ============================================================ */
@media print{
  @page{ size:A4; margin:0; }
  html,body{ margin:0 !important; padding:0 !important; background:#fff !important; }

  /* hide the whole app, then reveal only the letter */
  body *{ visibility:hidden; }
  #page, #page *{ visibility:visible; }

  .topbar, .form-panel{ display:none !important; }
  .preview-panel, .preview-scroll{
    padding:0 !important; margin:0 !important; overflow:visible !important;
    background:#fff !important; border:0 !important; box-shadow:none !important;
  }
  .workspace{ display:block !important; padding:0 !important; margin:0 !important; }

  .page-scale{ position:static !important; width:auto !important; height:auto !important; margin:0 !important; }
  #page{
    position:absolute; left:0; top:0;
    width:210mm; height:297mm;
    transform:none !important;          /* undo the on-screen scaling */
    box-shadow:none !important; margin:0 !important;
  }
  .lh-bg{ width:210mm; height:297mm; }

  /* make sure the letterhead image + colours actually print */
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
}