/* ==========================================================================
   QR CODE GENERATOR — STYLES
   Extends global design tokens from assets/css/style.css
   ========================================================================== */

.breadcrumb{padding:14px 0; font-size:13px; color:var(--muted);}
.breadcrumb ol{display:flex; gap:6px; flex-wrap:wrap;}
.breadcrumb li:not(:last-child)::after{content:"›"; margin-left:6px; color:var(--muted);}
.breadcrumb a{color:var(--teal); font-weight:600;}
.breadcrumb li[aria-current]{color:var(--text); font-weight:600;}

/* ---------------- Hero ---------------- */
.qr-hero{
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  color:#fff; padding:56px 0; text-align:center; margin-bottom:40px;
}
.qr-hero h1{color:#fff; font-size:clamp(28px,4vw,40px);}
.qr-hero p{color:#CFE0F5; max-width:560px; margin:0 auto 24px; font-size:16.5px;}
.qr-hero-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* ---------------- App Layout ---------------- */
.qr-app{margin-bottom:20px;}
.qr-app-grid{display:grid; grid-template-columns:1.15fr 1fr; gap:28px; align-items:start;}

.qr-panel{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); margin-bottom:20px;
}
.qr-panel h3{font-size:15.5px; margin-bottom:16px;}

/* ---------------- Type Tabs ---------------- */
.qr-type-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px;}
.qr-type-tab{
  background:var(--bg); border:1.5px solid var(--border); color:var(--muted);
  padding:8px 14px; border-radius:999px; font-size:13px; font-weight:600; transition:.15s;
}
.qr-type-tab:hover{border-color:var(--teal); color:var(--teal);}
.qr-type-tab.active{background:var(--teal); border-color:var(--teal); color:#fff;}

.qr-fields{display:grid; gap:14px;}
.qr-fields label{display:block; font-size:13.5px; font-weight:600; margin-bottom:5px; color:var(--text);}
.qr-fields input, .qr-fields textarea, .qr-fields select{
  width:100%; padding:11px 13px; border-radius:9px; border:1.5px solid var(--border);
  background:var(--bg); color:var(--text); font-size:14.5px; font-family:inherit;
}
.qr-fields textarea{min-height:90px; resize:vertical;}
.qr-field-inline-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.qr-error-msg{color:#E4572E; font-weight:600; font-size:13.5px; margin-top:10px;}
.qr-checkbox-inline{display:flex; align-items:center; gap:8px; font-weight:600; font-size:13.5px;}

/* ---------------- Customization Panel ---------------- */
.qr-field-group{margin-bottom:16px;}
.qr-field-group label{display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; color:var(--text);}
.qr-field-group select{
  width:100%; padding:10px 12px; border-radius:9px; border:1.5px solid var(--border);
  background:var(--bg); color:var(--text); font-size:14px;
}
.qr-color-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:6px;}
.qr-color-row label{font-size:13px; font-weight:600; display:block; margin-bottom:6px;}
.qr-color-row input[type=color]{
  width:100%; height:40px; border-radius:9px; border:1.5px solid var(--border); padding:2px; cursor:pointer;
}
.qr-checkbox-label{display:flex !important; align-items:center; gap:8px; cursor:pointer;}
.qr-field-row-2{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
.qr-field-row-2 label{display:flex; justify-content:space-between; font-size:13px; font-weight:600; margin-bottom:6px;}
.qr-field-row-2 input[type=range]{width:100%; accent-color:var(--teal);}

.qr-size-buttons{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px;}
.qr-size-btn{
  background:var(--bg); border:1.5px solid var(--border); color:var(--text);
  padding:8px 14px; border-radius:9px; font-size:13.5px; font-weight:600; transition:.15s;
}
.qr-size-btn:hover{border-color:var(--teal);}
.qr-size-btn.active{background:var(--navy); border-color:var(--navy); color:#fff;}
#customSizeInput{margin-top:6px;}

/* ---------------- Logo Row ---------------- */
.qr-logo-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px;}
#logoPreview{
  width:44px; height:44px; object-fit:contain; border:1.5px solid var(--border); border-radius:8px;
  background:repeating-conic-gradient(#e9edf5 0% 25%, #fff 0% 50%) 0 0/10px 10px; padding:4px;
}
#logoSizeRow label{display:flex; justify-content:space-between; font-size:13px; font-weight:600; margin-bottom:6px;}
#logoSizeRow input[type=range]{width:100%; accent-color:var(--teal);}

/* ---------------- Preview Panel ---------------- */
.qr-preview-panel{position:sticky; top:calc(var(--header-h) + 20px);}
.qr-preview-wrap{
  display:flex; align-items:center; justify-content:center; min-height:280px;
  background:repeating-conic-gradient(#e9edf5 0% 25%, #f6f8fc 0% 50%) 0 0/22px 22px;
  border-radius:14px; padding:20px; margin-bottom:16px;
}
#qrFinalCanvas{max-width:100%; max-height:340px; border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.08);}
.qr-preview-stats{
  display:flex; justify-content:space-between; font-size:13px; color:var(--muted);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:12px 0; margin-bottom:16px;
}
.qr-preview-stats strong{color:var(--text);}

.qr-action-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.qr-action-row .btn{flex:1; min-width:80px;}
.qr-download-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.qr-note{font-size:12px; color:var(--muted); margin-top:12px;}
.qr-status-msg{margin-top:12px; font-size:13.5px; font-weight:600; min-height:18px;}
.qr-status-msg.ok{color:var(--teal);}
.qr-status-msg.err{color:#E4572E;}

/* ---------------- Print (hidden except when printing) ---------------- */
.qr-print-area{display:none;}
@media print{
  body *{visibility:hidden;}
  .qr-print-area, .qr-print-area *{visibility:visible;}
  .qr-print-area{
    display:flex; align-items:center; justify-content:center;
    position:fixed; inset:0;
  }
  .qr-print-area img{max-width:80%;}
}

/* ---------------- QR Scanner ---------------- */
.qr-scanner-panel{max-width:640px; margin:0 auto;}
.qr-scanner-tabs{display:flex; gap:8px; margin-bottom:18px;}
.qr-scan-tab{
  flex:1; background:var(--bg); border:1.5px solid var(--border); color:var(--muted);
  padding:10px; border-radius:9px; font-weight:600; font-size:14px; transition:.15s;
}
.qr-scan-tab.active{background:var(--teal); border-color:var(--teal); color:#fff;}
.qr-scan-view{text-align:center;}
#scanVideo{
  width:100%; max-width:400px; border-radius:12px; background:#000; margin-bottom:14px;
}
.qr-scan-cam-actions{display:flex; gap:10px; justify-content:center;}
.qr-scan-result{
  margin-top:20px; padding-top:18px; border-top:1px solid var(--border);
}
.qr-scan-result h4{font-size:14.5px; margin-bottom:8px;}
#scanResultText{
  background:var(--bg); border:1px solid var(--border); border-radius:9px; padding:12px 14px;
  font-size:13.5px; word-break:break-all; margin-bottom:12px;
}

/* ---------------- History ---------------- */
.qr-history-toolbar{display:flex; justify-content:flex-end; margin-bottom:16px;}
.qr-history-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:16px;}
.qr-history-empty{color:var(--muted); font-size:14px; grid-column:1/-1; text-align:center;}
.qr-history-item{
  background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px;
  text-align:center; box-shadow:var(--shadow);
}
.qr-history-item img{
  width:100%; aspect-ratio:1/1; object-fit:contain; background:#fff; border-radius:8px; margin-bottom:8px;
}
.qr-history-item .qr-history-label{font-size:11.5px; color:var(--muted); margin-bottom:8px; display:block;}
.qr-history-actions{display:flex; gap:6px;}
.qr-history-actions button{
  flex:1; font-size:11.5px; padding:6px; border-radius:7px; border:1px solid var(--border);
  background:var(--bg); color:var(--text);
}
.qr-history-actions button:hover{border-color:var(--teal); color:var(--teal);}

/* ---------------- Responsive ---------------- */
@media (max-width:960px){
  .qr-app-grid{grid-template-columns:1fr;}
  .qr-preview-panel{position:static;}
}
@media (max-width:480px){
  .qr-color-row, .qr-field-row-2, .qr-field-inline-2, .qr-download-grid{grid-template-columns:1fr;}
}