/* =========================================================
   PHONLAB — Utility CSS (CLEAN)
========================================================= */

/* Z-index helpers (optional if kept here) */
:root {
  --z-content: 1;
  --z-panel: 900;
  --z-header: 1000;
  --z-modal: 1055;
}

/* Visibility */
.is-hidden { display: none !important; }
.is-visible { display: block !important; }
.pointer { cursor: pointer; }

/* Transitions */
.transition-fast { transition: all 0.2s ease; }
.transition-base { transition: all 0.35s ease; }
.transition-slow { transition: all 0.6s ease; }

/* Glass helpers */
.glass-blur { backdrop-filter: blur(12px); }
.glass-muted { color: var(--text-secondary); }

/* Alignment helpers */
.justify-right { display: flex; justify-content: flex-end; gap: 0.5rem; }
.justify-center { display: flex; justify-content: center; gap: 0.5rem; }

/* Grid helpers */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

/* Debug */
.debug-outline { outline: 1px dashed red; }
.debug-bg { background: rgba(255, 0, 0, 0.05); }

.nav-btn {
  background: var(--card-bg);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  font-size: 0.9rem;
}
.nav-btn:hover { background: var(--card-bg); }
.nav-btn.active { background: rgba(255,255,255,0.2); }

/* CEFR BADGES */
.cefr-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 10px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.5px;
  line-height: 1; white-space: nowrap;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--card-border); color: #fff;
}
.cefr-A1 { background: rgba(56,189,248,0.15); border-color: rgba(56,189,248,0.35); }
.cefr-A2 { background: rgba(14,165,233,0.15); border-color: rgba(14,165,233,0.35); }
.cefr-B1 { background: rgba(16,185,129,0.15); border-color: rgba(16,185,129,0.35); }
.cefr-B2 { background: rgba(5,150,105,0.15);  border-color: rgba(5,150,105,0.35); }
.cefr-C1 { background: rgba(168,85,247,0.15); border-color: rgba(168,85,247,0.35); }
.cefr-badge:hover { border-color: var(--text-muted); transform: translateY(-1px); transition: all 0.15s ease; }

/* Button variants */
.btn-ghost50 { opacity: 0.5; }
.btn-ghost50:hover, .btn-ghost50:focus { opacity: 0.85; }
.btn-dump50 { opacity:0.5; color:#fff!important; border-color:rgba(255,80,80,0.55)!important; background:rgba(255,80,80,0.18)!important; }
.btn-dump50:hover, .btn-dump50:focus { opacity:0.9; background:rgba(255,80,80,0.28)!important; }

/* Preview canvas */
.previewFrame { display:flex; justify-content:center; align-items:flex-start; }
.previewPhone { width:260px; max-width:100%; border-radius:18px; padding:8px; background:var(--card-bg); border:1px solid var(--card-border); box-shadow:0 6px 18px rgba(0,0,0,0.15); }
.previewPhone__topbar { display:flex; gap:5px; padding:4px 6px 8px; opacity:0.6; }
.previewPhone__dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.25); display:inline-block; }
.previewCanvas { border-radius:14px; height:420px; padding:8px; background:rgba(0,0,0,0.12); border:1px dashed rgba(255,255,255,0.16); overflow:hidden; display:flex; flex-direction:column; gap:8px; }
.previewCanvas__empty { text-align:center; padding:14px 10px; font-size:0.85rem; opacity:0.7; }
.previewPhone--sm { width:240px; }
.previewPhone--lg { width:300px; }
.previewCanvas--sm { height:360px; }
.previewCanvas--lg { height:520px; }
.previewCanvas--warn { border-style:solid; border-color:rgba(255,200,80,0.28); }
.previewModule { border-radius:12px; padding:10px; background:var(--card-bg); border:1px solid var(--card-border); }
.previewModule__title { font-size:0.8rem; opacity:0.8; margin-bottom:6px; }

/* Form controls */
.form-control, .form-select {
  width:100%; background:var(--card-bg)!important; color:rgba(255,255,255,0.92)!important;
  border:1px solid var(--card-border)!important; border-radius:12px!important;
  padding:10px 12px!important; color-scheme:dark;
}
.form-control::placeholder { color:var(--text-muted)!important; }
.form-control:focus, .form-select:focus { outline:none!important; box-shadow:0 0 0 2px rgba(255,255,255,0.08)!important; border-color:var(--text-muted)!important; }
.form-select { background-image:none!important; }
.form-control-sm, .form-select-sm { padding:8px 10px!important; border-radius:12px!important; }

/* Palette panel */
[data-panel="palette"] .btn, [data-panel="palette"] .form-control, [data-panel="palette"] .form-select { width:100%!important; }
[data-panel="palette"] .btn.btn-outline-light { border-radius:12px; padding:10px 12px; text-align:left; }
[data-panel="palette"] .small.glass-muted { opacity:0.7; }
.sidebar-cefr-group .sidebar-filter.active { filter:brightness(1.1); outline:2px solid rgba(255,255,255,0.18); outline-offset:2px; }

/* Glass wrapper */
.page-centered { min-height:calc(100vh - 120px); display:flex; align-items:center; justify-content:center; padding:40px 20px; }
.glass-wrapper { width:100%; max-width:1200px; background:var(--card-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-radius:24px; border:1px solid var(--card-border); box-shadow:0 20px 60px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.08); padding:32px; }
.glass-footer { margin-top:60px; background:var(--card-bg); backdrop-filter:blur(10px); border-top:1px solid var(--card-border); }
.glass-footer .glass-muted { color:var(--text-secondary); letter-spacing:0.5px; }

/* Modal skin */
.phonlab-modal { z-index:var(--z-modal); }
.phonlab-modal .modal-dialog { max-width:920px; }
.phonlab-modal .modal-content { background:rgba(20,24,34,0.78); border:1px solid var(--card-border); border-radius:18px; backdrop-filter:blur(12px); box-shadow:0 16px 60px rgba(0,0,0,0.45); overflow:hidden; }
.phonlab-modal .modal-header { border-bottom:1px solid var(--card-border); padding:14px 16px 10px 16px; }
.phonlab-modal .modal-title { font-weight:600; letter-spacing:0.2px; }
.phonlab-modal .modal-body { padding:14px 16px 16px 16px; }
.phonlab-modal .modal-footer { border-top:1px solid var(--card-border); padding:10px 16px 14px 16px; }
.phonlab-modal .btn-close { filter:invert(1); opacity:0.75; }
.phonlab-modal .btn-close:hover { opacity:1; }
.previewCanvas iframe { width:100%; height:100%; border:0; display:block; }
.phonlab-dialog { border:1px solid var(--card-border); border-radius:18px; background:rgba(20,24,34,0.78); backdrop-filter:blur(12px); padding:0; color:inherit; box-shadow:0 16px 60px rgba(0,0,0,0.45); width:min(860px,94vw); }
.phonlab-dialog::backdrop { background:rgba(0,0,0,0.55); }

/* Universal select dark mode */
select { color-scheme:dark!important; }

/* Theme token applicators */
.glass-card { background:var(--theme-card-bg,rgba(255,255,255,0.06)); border-color:var(--theme-card-border,rgba(255,255,255,0.10)); backdrop-filter:var(--theme-card-blur,blur(14px)); -webkit-backdrop-filter:var(--theme-card-blur,blur(14px)); color:var(--theme-text-primary,rgba(255,255,255,0.92)); }
.activity-sidebar, aside.sidebar-right { background:var(--theme-sidebar-bg,rgba(255,255,255,0.04)); border-color:var(--theme-sidebar-border,rgba(255,255,255,0.07)); }
.glass-muted { color:var(--theme-text-muted,rgba(255,255,255,0.45)); }
.nav-btn { background:var(--theme-nav-btn-bg,rgba(255,255,255,0.06)); border-color:var(--theme-nav-btn-border,rgba(255,255,255,0.14)); color:var(--theme-text-primary,rgba(255,255,255,0.88)); }
.form-control, .form-select { background:var(--theme-input-bg,rgba(255,255,255,0.06))!important; border-color:var(--theme-input-border,rgba(255,255,255,0.12))!important; color:var(--theme-text-primary,rgba(255,255,255,0.92))!important; }

/* Scrollbars */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--card-bg); border-radius:3px; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.16); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.28); }
::-webkit-scrollbar-corner { background:transparent; }
* { scrollbar-width:thin; scrollbar-color:var(--text-muted) rgba(255,255,255,0.03); }