/* ============================================================
   NET2PRINT Ticket Desk — themed on the net2print.com.cy design system
   "Sticker" aesthetic: paper background, brand blue + cone red,
   Archivo Black display, DM Mono receipts, flat offset shadows.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

:root{
  --brand-blue:#1B6FE0; --brand-blue-deep:#0F4FB3; --brand-blue-soft:#E7F0FC;
  --brand-red:#E8252C; --brand-red-deep:#B81A20; --brand-red-soft:#FCE8E9;
  --print-yellow:#FFC83D; --travel-sky:#5BB8E5; --money-green:#2FA866;

  --paper:#FFFFFF; --paper-warm:#FBF7EE;
  --ink-100:#F4F5F7; --ink-200:#E6E8EC; --ink-300:#C9CDD4;
  --ink-400:#9097A1; --ink-500:#5A626E; --ink-700:#2A3140; --ink-900:#0E1320;

  --success:#2FA866; --warning:#E89A1F; --danger:#E8252C; --info:#1B6FE0;

  --font-display:'Archivo Black','Arial Black','Helvetica Neue',sans-serif;
  --font-body:'Archivo','Helvetica Neue',Arial,sans-serif;
  --font-mono:'DM Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-pill:999px;
  --sh-sticker:4px 4px 0 0 var(--ink-900);
  --sh-sticker-sm:3px 3px 0 0 var(--ink-900);
  --sh-card:0 2px 4px rgba(14,19,32,.06),0 8px 24px rgba(14,19,32,.08);
  --ease-out:cubic-bezier(0.22,1,0.36,1);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper-warm); color:var(--ink-900);
  font-family:var(--font-body); font-size:15px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand-blue); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px}
a:hover{color:var(--brand-blue-deep)}

/* ---------- Topbar ---------- */
.topbar{
  display:flex; align-items:center; gap:20px; padding:12px 22px;
  background:var(--paper); border-bottom:3px solid var(--ink-900); position:sticky; top:0; z-index:30;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand:hover{text-decoration:none}
.brand-logo{height:36px; width:auto; display:block}
.brand-sub{font-family:var(--font-body); font-weight:800; font-size:12px; letter-spacing:.12em;
  color:var(--brand-red); text-transform:uppercase; border-left:2px solid var(--ink-200); padding-left:12px}
.topbar nav{display:flex; gap:6px; flex:1; align-items:center}
.topbar nav a{color:var(--ink-700); font-weight:700; font-size:14px; text-decoration:none; padding:8px 12px; border-radius:var(--r-pill)}
.topbar nav a:hover{background:var(--ink-100); color:var(--ink-900)}
.topbar nav a.cta{background:var(--brand-blue); color:#fff; border:2px solid var(--ink-900); box-shadow:var(--sh-sticker-sm)}
.topbar nav a.cta:hover{background:var(--brand-blue-deep)}
.userbox{display:flex; align-items:center; gap:12px; color:var(--ink-500); font-size:13px; font-weight:600}
.userbox a{font-weight:700}

.wrap{max-width:1500px; margin:0 auto; padding:22px}
.foot{text-align:center; color:var(--ink-400); font-size:12px; padding:26px; font-weight:500}

/* ---------- Flash ---------- */
.flash{padding:12px 16px; border-radius:var(--r-md); margin-bottom:14px; font-weight:700; border:2px solid}
.flash-ok{background:#E2F5EA; color:#1F7A4A; border-color:#bfe6cf}
.flash-err{background:var(--brand-red-soft); color:var(--brand-red-deep); border-color:#f4bfc1}
.flash-info{background:var(--brand-blue-soft); color:var(--brand-blue-deep); border-color:#cfdef8}

/* ---------- Stat chips ---------- */
.stats{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:20px}
.stat{background:var(--paper); border:2px solid var(--ink-900); border-radius:var(--r-lg); padding:14px 18px; min-width:130px;
  box-shadow:var(--sh-sticker); border-top:5px solid var(--brand-blue)}
.stat .n{font-family:var(--font-display); font-size:30px; line-height:1; color:var(--ink-900)}
.stat .l{color:var(--ink-500); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; margin-top:6px}
.stat.alert{border-top-color:var(--brand-red)} .stat.alert .n{color:var(--brand-red)}
.stat.warn{border-top-color:var(--warning)} .stat.warn .n{color:var(--warning)}
.stat.good{border-top-color:var(--money-green)} .stat.good .n{color:var(--money-green)}

/* ---------- Filter bar ---------- */
.filters{display:flex; gap:10px; flex-wrap:wrap; align-items:center; background:var(--paper);
  border:2px solid var(--ink-200); border-radius:var(--r-lg); padding:14px; margin-bottom:18px; box-shadow:var(--sh-card)}
.filters input[type=text],.filters select{font-family:var(--font-body); background:var(--paper);
  border:2px solid var(--ink-200); color:var(--ink-900); padding:10px 12px; border-radius:var(--r-md); font-size:14px; font-weight:500; outline:none}
.filters input[type=text]{min-width:260px}
.filters input:focus,.filters select:focus{border-color:var(--brand-blue); box-shadow:0 0 0 3px rgba(27,111,224,.18)}
.filters label{color:var(--ink-500); font-size:13px; display:flex; align-items:center; gap:6px; font-weight:600}

/* ---------- Buttons ---------- */
.btn{font-family:var(--font-body); font-weight:700; font-size:15px; padding:11px 20px;
  border:2px solid var(--ink-900); border-radius:var(--r-pill); cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  background:var(--brand-blue); color:#fff; box-shadow:var(--sh-sticker); text-decoration:none;
  transition:transform var(--t-fast,120ms) var(--ease-out), box-shadow 120ms}
.btn:hover{background:var(--brand-blue-deep); color:#fff; text-decoration:none; transform:translate(-1px,-1px); box-shadow:5px 5px 0 0 var(--ink-900)}
.btn:active{transform:translate(2px,2px); box-shadow:2px 2px 0 0 var(--ink-900)}
.btn.sm{font-size:13px; padding:7px 14px; box-shadow:var(--sh-sticker-sm)}
.btn.ghost{background:var(--paper); color:var(--ink-900)}
.btn.ghost:hover{background:var(--ink-100); color:var(--ink-900)}
.btn.warn{background:var(--print-yellow); color:var(--ink-900)}
.btn.warn:hover{background:#e9b528; color:var(--ink-900)}
.btn.danger{background:var(--brand-red); color:#fff}
.btn.danger:hover{background:var(--brand-red-deep); color:#fff}

/* ---------- Table ---------- */
.tickets{width:100%; border-collapse:separate; border-spacing:0; background:var(--paper);
  border:2px solid var(--ink-900); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-card)}
.tickets th{text-align:left; padding:12px 14px; font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  font-weight:700; color:var(--ink-500); border-bottom:2px solid var(--ink-200); background:var(--ink-100)}
.tickets td{padding:11px 14px; border-bottom:1px solid var(--ink-200); vertical-align:top; font-size:14px}
.tickets tr:hover td{background:#fcfbf7}
.tickets .pnr a{font-family:var(--font-mono); font-weight:500; font-size:14px; color:var(--brand-blue); text-decoration:none}
.tickets .pnr a:hover{text-decoration:underline}
.tickets .pax{font-weight:700; color:var(--ink-900)}
.tickets .route{font-family:var(--font-mono); color:var(--ink-500); font-size:13px}
.gds-mini{font-family:var(--font-mono); font-size:11px; color:var(--ink-400); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; max-width:340px; display:block; margin-top:2px}
.tickets td .muted{color:var(--ink-400)}

/* day grouping */
.daygroup td{background:var(--brand-blue-soft) !important; font-family:var(--font-body); font-weight:800;
  color:var(--brand-blue-deep); letter-spacing:.01em; border-top:2px solid var(--ink-200); font-size:14px}
.daygroup .rel{color:var(--brand-red); font-weight:700; margin-left:10px; font-size:12px; text-transform:uppercase; letter-spacing:.06em}
.row-today td{background:#FFFCEF}
.tickets tr.row-today:hover td{background:#FFF8DC}
.row-past td{opacity:.5}
.row-reissued td{opacity:.55}
.row-reissued .pax{text-decoration:line-through}

/* status accent on first cell */
.st-sent     td:first-child{box-shadow:inset 5px 0 0 var(--brand-red)}
.st-needdoc  td:first-child{box-shadow:inset 5px 0 0 var(--warning)}
.st-informed td:first-child{box-shadow:inset 5px 0 0 var(--brand-blue)}
.st-okboard  td:first-child{box-shadow:inset 5px 0 0 var(--travel-sky)}
.st-valid    td:first-child{box-shadow:inset 5px 0 0 var(--money-green)}
.st-done     td:first-child{box-shadow:inset 5px 0 0 var(--money-green)}

/* ---------- Badges (design-system soft pairs) ---------- */
.badge{font-family:var(--font-body); font-weight:700; font-size:11px; padding:4px 11px; border-radius:var(--r-pill);
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap; margin-bottom:3px}
.badge.st-sent{background:var(--brand-red-soft); color:var(--brand-red-deep)}
.badge.st-needdoc{background:#FCEFD8; color:#8C5A0F}
.badge.st-informed{background:var(--brand-blue-soft); color:var(--brand-blue-deep)}
.badge.st-okboard{background:#E2F1F9; color:#1F6E94}
.badge.st-valid{background:#E2F5EA; color:#1F7A4A}
.badge.st-done{background:#E2F5EA; color:#1F7A4A}
.badge.st-pending{background:var(--ink-100); color:var(--ink-700)}
.badge.m70{background:var(--print-yellow); color:var(--ink-900); border:2px solid var(--ink-900); box-shadow:2px 2px 0 0 var(--ink-900)}
.badge.state{background:var(--ink-100); color:var(--ink-500); border:1px solid var(--ink-300)}

/* ---------- Cards / forms ---------- */
.card{background:var(--paper); border:2px solid var(--ink-900); border-radius:var(--r-lg); padding:22px; margin-bottom:18px;
  box-shadow:var(--sh-sticker); border-top:5px solid var(--brand-blue)}
.card h2{margin:0 0 16px; font-family:var(--font-body); font-weight:800; font-size:18px; color:var(--ink-900)}
.field{margin-bottom:15px}
.field label{display:block; font-size:13px; color:var(--ink-700); margin-bottom:6px; font-weight:600}
.field textarea,.field input{width:100%; font-family:var(--font-body); background:var(--paper);
  border:2px solid var(--ink-200); color:var(--ink-900); padding:11px 13px; border-radius:var(--r-md); font-size:15px; outline:none}
.field textarea{font-family:var(--font-mono); font-size:13px; min-height:150px; resize:vertical}
.field textarea:focus,.field input:focus{border-color:var(--brand-blue); box-shadow:0 0 0 3px rgba(27,111,224,.18)}
.checks{display:flex; gap:10px; flex-wrap:wrap}
.checks label{display:flex; align-items:center; gap:7px; color:var(--ink-900); font-size:14px; font-weight:600;
  background:var(--paper); padding:8px 13px; border-radius:var(--r-pill); border:2px solid var(--ink-200); cursor:pointer}
.checks label:hover{border-color:var(--brand-blue)}
.checks input{accent-color:var(--brand-blue); width:16px; height:16px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.preview{background:var(--paper-warm); border:2px dashed var(--ink-300); border-radius:var(--r-md); padding:16px; font-size:13px}
.preview .kv{display:grid; grid-template-columns:130px 1fr; gap:6px 12px}
.preview .kv b{color:var(--ink-500); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em}
.preview .kv span{font-family:var(--font-mono); color:var(--ink-900)}
.locked-note{color:var(--brand-red-deep); font-size:12px; font-weight:600; margin-top:6px}

/* ---------- Login / setup ---------- */
.login-wrap{max-width:400px; margin:9vh auto; padding:0 20px}
.login-card{background:var(--paper); border:2px solid var(--ink-900); border-radius:var(--r-lg); padding:30px; box-shadow:var(--sh-sticker)}
.login-card .login-logo{display:block; width:230px; max-width:100%; height:auto; margin:0 0 18px}
.login-card h1{font-family:var(--font-display); text-transform:uppercase; font-size:22px; margin:0; line-height:1; color:var(--ink-900)}
.login-card p.sub{color:var(--ink-500); margin:6px 0 22px; font-size:14px; font-weight:500}

/* ---------- Detail page ---------- */
.detail-gds{font-family:var(--font-mono); font-size:13px; white-space:pre-wrap; background:var(--paper-warm);
  padding:16px; border-radius:var(--r-md); border:2px solid var(--ink-200); line-height:1.7; color:var(--ink-900)}
.seg-table{width:100%; border-collapse:collapse; margin-top:12px; font-family:var(--font-mono); font-size:13px}
.seg-table th,.seg-table td{padding:7px 10px; border-bottom:1px solid var(--ink-200); text-align:left}
.seg-table th{color:var(--ink-500); font-family:var(--font-body); font-weight:700; font-size:11px; text-transform:uppercase}
.timeline{list-style:none; padding:0; margin:0}
.timeline li{padding:10px 0; border-bottom:1px solid var(--ink-200); font-size:13px; color:var(--ink-500)}
.timeline b{color:var(--ink-900)}
.muted{color:var(--ink-400)}
.pill{display:inline-block; padding:3px 10px; border:2px solid var(--ink-200); border-radius:var(--r-pill); font-size:12px; color:var(--ink-500); font-weight:700}
.split{display:grid; grid-template-columns:2fr 1fr; gap:18px; align-items:start}
@media(max-width:900px){.grid2,.split{grid-template-columns:1fr} .gds-mini{max-width:200px} .topbar{flex-wrap:wrap}}

/* ---------- pre.php : Customer Itinerary builder ---------- */
.sel{width:100%; font-family:var(--font-body); background:var(--paper); border:2px solid var(--ink-200);
  color:var(--ink-900); padding:11px 13px; border-radius:var(--r-md); font-size:15px; outline:none}
.sel:focus{border-color:var(--brand-blue); box-shadow:0 0 0 3px rgba(27,111,224,.18)}
.chip{font-family:var(--font-body); font-weight:600; font-size:13px; padding:7px 13px; border-radius:var(--r-pill);
  background:var(--brand-blue-soft); color:var(--brand-blue-deep); border:1px solid #cfdef8; cursor:pointer; user-select:none}
.chip:hover{background:var(--brand-blue); color:#fff; border-color:var(--brand-blue)}

.hint{font-size:12px; color:var(--ink-400); margin-top:5px}
.copybar{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:14px}
.copy-msg{font-weight:700; font-size:13px; color:var(--money-green); opacity:0; transition:opacity .2s}
.copy-msg.show{opacity:1}

/* The shareable / printable e-ticket card */
.ticket-card{background:var(--paper); border:2px solid var(--ink-900); border-radius:var(--r-lg);
  box-shadow:var(--sh-sticker); overflow:hidden}
.ticket-card .tc-empty{padding:40px 24px; text-align:center; color:var(--ink-400); font-weight:500}
.ticket-card .tc-err{color:var(--brand-red-deep); font-weight:700}
.tc-head{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 20px;
  background:var(--brand-blue-soft); border-bottom:3px solid var(--ink-900)}
.tc-logo{height:30px; width:auto}
.tc-title{font-family:var(--font-display); text-transform:uppercase; font-size:16px; color:var(--brand-blue-deep); letter-spacing:-.01em}
.tc-row{display:flex; gap:14px; padding:12px 20px 0}
.tc-k{flex:0 0 100px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-400); padding-top:3px}
.tc-v{font-weight:700; color:var(--ink-900); font-size:15px}
.tc-v.mono{font-family:var(--font-mono); letter-spacing:.04em}

.tc-flights{padding:14px 20px 4px; display:flex; flex-direction:column; gap:12px}
.tc-flight{border:2px solid var(--ink-200); border-radius:var(--r-md); overflow:hidden}
.tc-fhead{display:flex; align-items:center; gap:10px; padding:8px 14px; background:var(--ink-100); border-bottom:1px solid var(--ink-200)}
.tc-air{font-weight:800; color:var(--ink-900); font-size:14px}
.tc-fno{font-family:var(--font-mono); font-size:13px; color:var(--ink-500)}
.tc-cls{margin-left:auto; font-size:11px; font-weight:700; color:var(--brand-blue-deep);
  background:var(--brand-blue-soft); padding:2px 9px; border-radius:var(--r-pill)}
.tc-leg{display:flex; align-items:center; gap:10px; padding:14px}
.tc-pt{flex:1}
.tc-pt.tc-right{text-align:right}
.tc-time{font-family:var(--font-mono); font-weight:500; font-size:20px; color:var(--ink-900); line-height:1; font-feature-settings:"zero" 0}
.tc-fno{font-feature-settings:"zero" 0}
.tc-next{font-size:11px; color:var(--brand-red); font-weight:700; vertical-align:super}
.tc-city{font-weight:700; font-size:14px; color:var(--ink-900); margin-top:4px}
.tc-code{font-family:var(--font-mono); font-size:12px; color:var(--ink-400)}
.tc-date{font-size:12px; color:var(--ink-500); margin-top:3px}
.tc-arrow{flex:0 0 auto; color:var(--brand-blue); font-size:20px; transform:translateY(-6px)}

.tc-meta{display:flex; gap:10px; flex-wrap:wrap; padding:12px 20px}
.tc-chip{font-weight:700; font-size:14px; background:var(--ink-100); border:2px solid var(--ink-200);
  border-radius:var(--r-pill); padding:7px 14px; color:var(--ink-900)}
.tc-chip.tc-price{background:#E2F5EA; border-color:#bfe6cf; color:#1F7A4A; font-family:var(--font-mono)}
.tc-pay{padding:4px 20px 14px}
.tc-paybtn{display:block; text-align:center; background:var(--money-green); color:#fff !important;
  font-family:var(--font-body); font-weight:800; font-size:16px; text-decoration:none;
  padding:13px 18px; border:2px solid var(--ink-900); border-radius:var(--r-pill); box-shadow:var(--sh-sticker-sm)}
.tc-paybtn:hover{background:#268a54; text-decoration:none}
.tc-note{margin:0 20px 14px; padding:10px 14px; background:var(--brand-blue-soft); border-radius:var(--r-md);
  font-size:13px; color:var(--brand-blue-deep); font-weight:600}
.tc-foot{padding:12px 20px; border-top:1px dashed var(--ink-300); text-align:center; font-size:12px; color:var(--ink-400); font-weight:600}

/* Print: show only the ticket card */
@media print{
  body{background:#fff}
  .topbar,.foot,.copybar,.split>.card,.filters{display:none !important}
  .split{display:block}
  .ticket-card{box-shadow:none; border:1px solid #000; max-width:560px; margin:0 auto}
  .wrap{padding:0}
}