/* Printopack messaging tool.

   The palette is the one locked in BRAND.md: blue, orange, red, white, and nothing else.
   Greyscale carries text and is treated as neutral rather than colour.

   Two rules borrowed from the website's DESIGN_STANDARD.md so the marketing team meets one
   visual language across both tools:
     1. A clickable thing is blue and turns orange on hover. One rule, everywhere.
     2. Red is not an interaction colour. It reports damage (bounces, spam complaints,
        destructive buttons) and nothing else.

   The surfaces are deliberately plain: white panels, hairline rules, almost no rounding and
   no shadows. Colour is spent on the sidebar, the numbers that matter and the one primary
   action on a screen, so the eye goes there rather than to decoration. */
:root{
  --blue:#0046a2; --blue-deep:#00317a; --blue-wash:#f2f6fc;
  --red:#a60006; --red-wash:#fcf2f2;
  --orange:#f89900; --orange-wash:#fff6e8;
  --ink:#15181d; --muted:#5d6572; --faint:#8b929d;
  --paper:#ffffff; --shade:#f5f6f8;
  --line:#dde1e7; --line-soft:#eaedf1;
  --ok:#1c6b43; --ok-wash:#f0f6f2;
  --disp:'Jost',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif;
  --arabic:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --radius:4px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--shade);color:var(--ink);font:400 15px/1.6 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--disp);margin:0;line-height:1.2;font-weight:600;letter-spacing:-.01em}
a{color:var(--blue);text-underline-offset:2px}
a:hover{color:var(--orange)}
button,input,select,textarea{font:inherit;color:inherit}
[dir="rtl"],.ar{font-family:var(--arabic)}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.sidebar{background:var(--blue);color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sb-brand{padding:20px 18px 18px;border-bottom:1px solid rgba(255,255,255,.14)}
.sb-brand img{display:block;width:150px;height:auto;background:#fff;padding:9px 11px;border-radius:3px}
.sb-brand small{display:block;font-family:var(--disp);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:11px}
.sb-nav{flex:1;overflow:auto;padding:10px 0}
.sb-group{font-family:var(--disp);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);padding:18px 18px 8px}
.sb-item{display:flex;align-items:center;gap:11px;padding:9px 18px;cursor:pointer;font-size:14.5px;color:rgba(255,255,255,.82);border-left:3px solid transparent;transition:color .15s,background .15s}
[dir="rtl"] .sb-item{border-left:none;border-right:3px solid transparent}
.sb-item:hover{color:var(--orange)}
.sb-item.on{background:rgba(255,255,255,.1);border-left-color:var(--orange);color:#fff;font-weight:500}
[dir="rtl"] .sb-item.on{border-right-color:var(--orange)}
.sb-item svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sb-item .badge{margin-inline-start:auto;font-size:12px;color:rgba(255,255,255,.65);font-variant-numeric:tabular-nums}
.sb-item.on .badge{color:#fff}
.sb-item .badge.alert{color:var(--orange);font-weight:600}
.sb-foot{padding:16px 18px;border-top:1px solid rgba(255,255,255,.14);font-size:13px}
.sb-foot button{width:100%;background:none;border:1px solid rgba(255,255,255,.4);color:#fff;padding:9px;border-radius:var(--radius);cursor:pointer}
.sb-foot button:hover{border-color:var(--orange);color:var(--orange)}
.sb-who{color:rgba(255,255,255,.68);margin-bottom:10px;line-height:1.45}
.main{min-width:0}
.topbar{background:var(--paper);border-bottom:1px solid var(--line);padding:20px 32px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:20}
.topbar-head{flex:1;min-width:0}
.topbar .crumb{font-size:12px;letter-spacing:.02em;color:var(--faint);margin-bottom:2px}
.topbar h1{font-size:26px}
.topbar-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.navtog{display:none;width:40px;height:40px;border:1px solid var(--line);background:#fff;border-radius:var(--radius);color:var(--blue);cursor:pointer;padding:9px}
.navtog svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.navscrim{position:fixed;inset:0;background:rgba(21,24,29,.45);z-index:60}
.view{padding:28px 32px 64px;max-width:1160px}

/* ---------- pieces ---------- */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:20px}
.panel-head{padding:18px 22px;border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.panel-head h2{font-size:17px}
.panel-head p{margin:5px 0 0;font-size:13.5px;color:var(--muted);max-width:74ch}
.panel-body{padding:20px 22px}

.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:var(--radius);padding:9px 16px;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;background:none;line-height:1.3}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-deep)}
.btn-accent{background:var(--orange);color:#1d1400}
.btn-accent:hover{background:#e08a00}
.btn-ghost{border-color:var(--line);color:var(--blue);background:#fff}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange)}
.btn-danger{border-color:var(--line);color:var(--red);background:#fff}
.btn-danger:hover{border-color:var(--red);background:var(--red-wash)}
.btn-sm{padding:7px 12px;font-size:13px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.icon-btn{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--radius);background:#fff;cursor:pointer;color:var(--muted)}
.icon-btn:hover{border-color:var(--orange);color:var(--orange)}
.icon-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon-btn.del:hover{border-color:var(--red);color:var(--red)}

/* The numbers row: one band of figures divided by hairlines, not four floating boxes. */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:20px;overflow:hidden}
.stat-card{padding:20px 22px;border-left:1px solid var(--line-soft)}
.stat-card:first-child{border-left:none}
[dir="rtl"] .stat-card{border-left:none;border-right:1px solid var(--line-soft)}
[dir="rtl"] .stat-card:first-child{border-right:none}
.stat-card .n{font-family:var(--disp);font-size:34px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat-card .l{font-size:13.5px;color:var(--ink);margin-top:9px}
.stat-card .s{font-size:12.5px;color:var(--faint);margin-top:4px}
.stat-card.good .n{color:var(--ok)} .stat-card.warn .n{color:var(--orange)} .stat-card.bad .n{color:var(--red)}
.stat-card.accent .n{color:var(--blue)}

.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:start;font-size:12px;letter-spacing:.02em;color:var(--faint);font-weight:500;padding:11px 20px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:13px 20px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr.row{cursor:pointer}
.tbl tbody tr.row:hover{background:var(--blue-wash)}
.t-title{font-weight:500}
.t-sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.tbl-wrap{overflow-x:auto}

/* States read as a word with a coloured dot, which stays legible in a long table where a
   row of pastel lozenges turns into noise. */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap;color:var(--muted)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.pill.on{color:var(--ok)}
.pill.off{color:var(--faint)}
.pill.warn{color:var(--orange)}
.pill.bad{color:var(--red)}
.pill.info{color:var(--blue)}

.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.search{flex:1;min-width:220px;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:0 13px}
.search:focus-within{border-color:var(--blue)}
.search svg{width:16px;height:16px;color:var(--faint);fill:none;stroke:currentColor;stroke-width:1.7}
.search input{flex:1;border:none;outline:none;padding:11px 0;background:none}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.seg button{border:none;background:none;padding:10px 15px;cursor:pointer;font-size:13.5px;color:var(--muted);border-left:1px solid var(--line-soft)}
.seg button:first-child{border-left:none}
.seg button:hover{color:var(--orange)}
.seg button.on{background:var(--blue);color:#fff}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:13px;font-weight:500;color:var(--ink)}
.field input,.field select,.field textarea{border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;background:#fff;outline:none;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash)}
.field textarea{resize:vertical;min-height:90px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.6}
/* Prose, not markup: the footer blocks and anything else written in plain words. */
.field textarea.plain{font-family:var(--body);font-size:14px;line-height:1.55}
.field textarea.plain.ar{font-family:var(--arabic)}
.field .hint{font-size:12.5px;color:var(--muted);line-height:1.5}
.field.err input,.field.err textarea{border-color:var(--red)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.form-grid .full{grid-column:1/-1}
.req{color:var(--red);margin-inline-start:3px}

.empty{padding:60px 24px;text-align:center;color:var(--muted)}
.empty svg{width:34px;height:34px;color:var(--line);margin-bottom:14px;fill:none;stroke:currentColor;stroke-width:1.4}
.empty h3{font-size:18px;margin-bottom:8px;color:var(--ink)}
.empty p{margin:0 auto;max-width:48ch;font-size:14px}

/* A notice is a rule and a line of type. The old tinted block read as decoration. */
.notice{border:1px solid var(--line);border-inline-start:3px solid var(--blue);background:var(--paper);border-radius:var(--radius);padding:15px 18px;font-size:13.5px;line-height:1.6;margin-bottom:20px}
.notice.warn{border-inline-start-color:var(--orange);background:var(--orange-wash)}
.notice.bad{border-inline-start-color:var(--red);background:var(--red-wash)}
.notice b{display:block;margin-bottom:4px;font-family:var(--disp);font-size:15px}
.notice ul{margin:8px 0 0;padding-inline-start:20px}

.bar{height:6px;background:var(--line-soft);border-radius:2px;overflow:hidden;display:flex}
.bar span{display:block;height:100%}
.bar .s-sent{background:var(--blue)}
.bar .s-failed{background:var(--red)}
.bar .s-skipped{background:var(--orange)}
.bar-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--muted)}
.bar-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-inline-end:6px}

.overlay{position:fixed;inset:0;background:rgba(21,24,29,.4);opacity:0;pointer-events:none;transition:opacity .2s;z-index:80}
.overlay.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;inset-block:0;inset-inline-end:0;width:640px;max-width:100%;background:var(--paper);z-index:90;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .22s ease-out;border-inline-start:1px solid var(--line)}
[dir="rtl"] .drawer{transform:translateX(-100%)}
.drawer.show{transform:none}
.drawer-head{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.drawer-head h2{font-size:19px}
.drawer-head .x{border:none;background:none;font-size:19px;cursor:pointer;color:var(--muted);padding:4px 8px}
.drawer-head .x:hover{color:var(--orange)}
.drawer-body{flex:1;overflow:auto;padding:22px 24px}
.drawer-foot{padding:16px 24px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;background:var(--shade)}
.modal{position:fixed;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);width:620px;max-width:calc(100% - 32px);max-height:86vh;background:#fff;border-radius:var(--radius);z-index:90;display:flex;flex-direction:column;overflow:hidden}
[dir="rtl"] .modal{transform:translate(50%,-50%)}

.toast{position:fixed;inset-block-end:24px;inset-inline-start:50%;transform:translateX(-50%) translateY(140%);background:var(--ink);color:#fff;padding:12px 20px;border-radius:var(--radius);font-size:14px;z-index:200;transition:transform .22s;max-width:90vw}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--red)}
.toast.ok{background:var(--ok)}

/* Sign-in: the brand block on a blue field, the form on white. */
.login{min-height:100vh;display:grid;place-items:center;background:var(--blue);padding:24px}
.login-card{background:#fff;border-radius:var(--radius);padding:36px 34px;width:400px;max-width:100%}
.login-logo{display:block;width:170px;height:auto;margin-bottom:26px}
.login-card h1{font-size:22px;margin-bottom:6px}
.login-card .sub{color:var(--muted);font-size:13.5px;margin:0 0 24px}
.login-err{color:var(--red);font-size:13px;margin:0 0 12px}

.preview-frame{width:100%;height:520px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:#fff;border-radius:var(--radius);padding:7px 13px;font-size:13px;cursor:pointer;color:var(--muted)}
.chip:hover{border-color:var(--orange);color:var(--orange)}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.kv{display:grid;grid-template-columns:160px 1fr;gap:10px 16px;font-size:13.5px}
.kv dt{color:var(--faint)}
.kv dd{margin:0}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;background:var(--shade);padding:2px 6px;border-radius:3px;word-break:break-all}

@media(max-width:960px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;inset-block:0;inset-inline-start:0;width:248px;z-index:70;transform:translateX(-100%);transition:transform .22s}
  [dir="rtl"] .sidebar{transform:translateX(100%)}
  .app.nav-open .sidebar{transform:none}
  .navtog{display:block}
  .topbar{padding:14px 16px}
  .topbar h1{font-size:21px}
  .view{padding:20px 16px 54px}
  .form-grid{grid-template-columns:1fr}
  .stat-card{border-left:none;border-top:1px solid var(--line-soft)}
  .stat-card:first-child{border-top:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation:none!important}}

/* The language switch. It sits with sign-out rather than in the screen, because it is a
   property of the person using the tool, not of what they are looking at. */
.sb-lang{width:100%;background:none;border:1px solid rgba(255,255,255,.4);color:#fff;padding:9px;border-radius:var(--radius);cursor:pointer;margin-bottom:9px;font-family:var(--arabic),var(--body)}
.sb-lang:hover{border-color:var(--orange);color:var(--orange)}
.login-lang{display:block;margin:18px auto 0;background:none;border:none;color:var(--blue);cursor:pointer;font-size:13.5px;font-family:var(--arabic),var(--body);text-decoration:underline;text-underline-offset:3px}
.login-lang:hover{color:var(--orange)}

/* Arabic runs right to left, and a few places assume a direction. */
[dir="rtl"] .stat-card .n,[dir="rtl"] .tbl td,[dir="rtl"] .kv dd{direction:rtl}
[dir="rtl"] .mono,[dir="rtl"] .t-title[dir="ltr"]{direction:ltr;display:inline-block}
[dir="rtl"] .notice{border-inline-start-width:3px}