/* ============================================================
   Survey Manager — theme
   Palette: deep teal #0d5c63 / navy #0b3c49 / accent #247b7b
   ============================================================ */
:root{
  --teal:#0d5c63; --teal-2:#247b7b; --navy:#0b3c49; --ink:#2d3748;
  --muted:#718096; --line:#e2e8f0; --bg:#f4f6f8; --bg-soft:#eef2f4;
}
*{box-sizing:border-box;}
body{background:var(--bg);color:var(--ink);font-family:'Segoe UI',system-ui,-apple-system,sans-serif;}

/* ---- Top bar ---- */
.app-topbar{position:fixed;top:0;left:0;right:0;height:54px;background:var(--navy);color:#fff;
  z-index:4;box-shadow:0 1px 4px rgba(0,0,0,.15);display:flex;align-items:center;}
.app-topbar .app-brand{font-weight:600;letter-spacing:.3px;color:#fff;}
.app-topbar .app-menu-btn{color:#fff;}
.app-user{font-size:14px;color:#cbe7e6;}
.app-role-tag{background:var(--teal-2)!important;color:#fff!important;margin-left:8px;border-radius:10px;}

/* ---- Sidebar ---- */
.app-sidebar{top:54px!important;bottom:0;width:240px!important;background:#fff;
  border-right:1px solid var(--line);z-index:3;padding-top:8px;}
.app-sidebar-inner{display:flex;flex-direction:column;}
.app-sidebar-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;
  font-weight:600;color:var(--navy);border-bottom:1px solid var(--line);}
.app-nav-item{text-align:left!important;color:var(--ink)!important;border-left:3px solid transparent;
  padding:12px 16px!important;font-size:15px;}
.app-nav-item:hover{background:var(--bg-soft)!important;}
.app-nav-active{background:var(--bg-soft)!important;border-left-color:var(--teal)!important;
  color:var(--teal)!important;font-weight:600;}

/* ---- Main ---- */
.app-main{margin-top:54px;margin-left:240px;padding:22px 8px;}
.app-content{max-width:1200px;margin:0 auto;}
@media(max-width:992px){.app-sidebar{display:none;}.app-main{margin-left:0;}}

/* ---- Buttons ---- */
.app-btn-primary{background:var(--teal)!important;color:#fff!important;}
.app-btn-primary:hover{background:#0a4a50!important;}
.app-btn-secondary{background:var(--teal-2)!important;color:#fff!important;}
.app-btn-secondary:hover{background:#1c6363!important;}
.app-btn-ghost{background:#fff!important;color:var(--teal)!important;border:1px solid var(--teal)!important;}
.app-btn-ghost:hover{background:var(--bg-soft)!important;}

/* ---- Page head ---- */
.app-page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:10px;}
.app-page-title{color:var(--navy);margin:0;font-size:24px;}
.app-page-title i{color:var(--teal);}
.app-create-btn{white-space:nowrap;}

/* ---- Cards ---- */
.app-card{margin-bottom:18px;}
.app-card-narrow{max-width:520px;}
.app-card-title{color:var(--navy);margin:0 0 8px;font-size:17px;}
.app-card-title i{color:var(--teal);}

/* ---- Inputs with icon ---- */
.app-input-icon{position:relative;margin-bottom:14px;}
.app-input-icon i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);}
.app-input-icon input{padding-left:34px!important;}
.app-search{max-width:420px;margin-bottom:0;}

/* ---- Login ---- */
.app-login-body{background:linear-gradient(135deg,var(--navy),var(--teal));min-height:100vh;
  display:flex;align-items:center;justify-content:center;padding:20px;}
.app-login-card{width:100%;max-width:400px;padding:0 0 20px;}
.app-login-head{padding:28px 20px 8px;}
.app-login-head i{font-size:40px;color:var(--teal);}
.app-login-head h2{color:var(--navy);margin:10px 0 2px;}

/* ---- Table ---- */
.app-table{background:#fff;}
.app-thead th{background:var(--bg-soft);color:var(--navy);font-weight:600;border-bottom:2px solid var(--line);}
.app-survey-name{font-weight:600;color:var(--navy);}
.app-tag{margin-left:6px;vertical-align:middle;border-radius:10px;}

/* ---- Status pills ---- */
.app-status{border-radius:12px;padding:2px 12px;font-size:12px;font-weight:600;}
.app-status-draft{background:#fef3c7!important;color:#92400e!important;}
.app-status-published{background:#d1fae5!important;color:#065f46!important;}

/* ---- Action icon buttons ---- */
.app-actions{white-space:nowrap;}
.app-icon-btn{background:#fff!important;color:var(--teal)!important;border:1px solid var(--line)!important;
  border-radius:6px!important;margin-left:4px;padding:6px 9px!important;}
.app-icon-btn:hover{background:var(--bg-soft)!important;}
.app-icon-btn-disabled{color:#cbd5e0!important;cursor:not-allowed;}
.app-icon-btn-danger{color:#dc2626!important;}
.app-icon-btn-danger:hover{background:#fee2e2!important;}

/* ---- Modals ---- */
.app-modal{padding-top:70px;}
.app-modal-head{background:var(--navy);color:#fff;padding:14px 18px;display:flex;
  justify-content:space-between;align-items:center;border-radius:8px 8px 0 0;}
.app-modal-head-success{background:var(--teal);}
.app-modal-title{font-weight:600;}
.app-modal-close{cursor:pointer;font-size:24px;line-height:1;}
.app-modal-foot{padding:12px 18px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;}

/* ---- Switches ---- */
.app-switch{position:relative;display:inline-block;width:44px;height:24px;vertical-align:middle;}
.app-switch.app-switch-sm{width:38px;height:20px;}
.app-switch input{opacity:0;width:0;height:0;}
.app-slider{position:absolute;cursor:pointer;inset:0;background:#cbd5e0;transition:.25s;border-radius:24px;}
.app-slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;
  transition:.25s;border-radius:50%;}
.app-switch-sm .app-slider:before{height:14px;width:14px;}
.app-switch input:checked + .app-slider{background:var(--teal);}
.app-switch input:checked + .app-slider:before{transform:translateX(20px);}
.app-switch-sm input:checked + .app-slider:before{transform:translateX(18px);}
.app-switch-label{margin-left:8px;vertical-align:middle;color:var(--ink);}

/* ---- Builder ---- */
.app-builder-actions{display:flex;gap:8px;flex-wrap:wrap;}
.app-questions-head{margin:6px 0 10px;}
.app-questions-head h3{color:var(--navy);margin:0;}
.app-question-list{display:flex;flex-direction:column;gap:12px;}
.app-empty{text-align:center;color:var(--muted);padding:26px;border:2px dashed var(--line);border-radius:12px;
  background:#fff;margin-bottom:16px;}
.app-empty i{font-size:30px;display:block;margin-bottom:8px;color:#cbd5e0;}
.app-add-bar{margin-top:16px;}
.app-add-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}
.app-add-btn{background:#fff!important;color:var(--teal)!important;border:1px solid var(--teal)!important;}
.app-add-btn:hover{background:var(--teal)!important;color:#fff!important;}

/* ---- Question card ---- */
.app-question-card{padding:0 0 12px;border:1px solid var(--line);}
.app-q-head{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--bg-soft);
  border-bottom:1px solid var(--line);border-radius:4px 4px 0 0;}
.app-q-drag{cursor:grab;color:var(--muted);}
.app-q-type-badge{font-size:12px;font-weight:600;padding:2px 10px;border-radius:10px;color:#fff;}
.app-badge-email{background:#3b82f6;}
.app-badge-text{background:#8b5cf6;}
.app-badge-mcq{background:#0ea5e9;}
.app-badge-likert{background:var(--teal);}
.app-q-index{color:var(--muted);font-weight:600;font-size:13px;}
.app-q-spacer{flex:1;}
.app-q-body{padding:12px;}
.app-q-config{margin-top:12px;}
.app-q-foot{margin-top:12px;display:flex;align-items:center;}
.app-cfg-block{background:#fafcfc;border:1px solid var(--line);border-radius:8px;padding:12px;}
.app-cfg-note{color:var(--muted);font-size:13px;margin:6px 0 0;}
.app-domains{margin-top:8px;}
.app-list-row{display:flex;align-items:center;gap:8px;margin:6px 0;}
.app-list-row input{flex:1;}
.app-list-at,.app-list-bullet{color:var(--muted);width:16px;text-align:center;}
.app-mini-btn{background:#fff!important;color:var(--teal)!important;border:1px solid var(--teal)!important;margin-top:6px;}
.app-mini-btn:hover{background:var(--bg-soft)!important;}
.app-mini-btn:disabled{color:#cbd5e0!important;border-color:var(--line)!important;cursor:not-allowed;}
.app-num{max-width:120px;}
.app-radio{margin-right:14px;}
.app-check{display:inline-block;margin-bottom:6px;}
.app-hidden{display:none!important;}
.app-likert-preview{margin-top:8px;}
.app-likert-opt{display:flex;align-items:center;gap:10px;padding:5px 0;color:var(--ink);}
.app-likert-num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;background:var(--teal);color:#fff;font-size:12px;}
.dragging{opacity:.5;border:2px dashed var(--teal)!important;}

/* ---- Public link row ---- */
.app-link-row{display:flex;gap:8px;margin-top:6px;}
.app-link-row input{flex:1;}

/* ---- Toast ---- */
.app-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--navy);color:#fff;padding:12px 20px;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.25);
  opacity:0;transition:.3s;z-index:9999;font-size:14px;}
.app-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.app-toast-success{background:#059669;}
.app-toast-error{background:#dc2626;}
.app-toast-info{background:var(--navy);}

/* ============================================================
   Reports
   ============================================================ */
.app-report-title{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.app-report-title h3{margin:0;color:var(--navy);}
.app-filter-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.app-filter-select{max-width:360px;}
.app-summary{margin-bottom:6px;}
.app-metric{display:flex;align-items:center;gap:12px;padding:14px;margin-bottom:16px;}
.app-metric-icon{width:44px;height:44px;border-radius:10px;color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:18px;flex-shrink:0;}
.app-metric-value{font-size:22px;font-weight:700;color:var(--navy);line-height:1.1;}
.app-metric-label{font-size:12px;color:var(--muted);}
.app-q-num{display:inline-block;background:var(--teal);color:#fff;border-radius:6px;padding:1px 8px;
  font-size:13px;margin-right:6px;}
.app-q-type-mini{font-size:11px;text-transform:uppercase;color:var(--teal-2);background:#e6f2f2;
  border-radius:4px;padding:1px 6px;margin-left:6px;}
.app-mini-table{margin-top:6px;}
.app-likert-stats>div{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);}
.app-likert-stats span{color:var(--muted);}
.app-likert-stats b{color:var(--navy);}
.app-net b{color:var(--teal);}
.app-text-list{max-height:340px;overflow:auto;}
.app-text-item{border-left:3px solid #cbd5e0;padding:6px 10px;margin:6px 0;background:#fafcfc;
  border-radius:0 6px 6px 0;font-size:13px;color:#4a5568;}
.app-raw-cell{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ============================================================
   Public survey
   ============================================================ */
.app-public-body{background:linear-gradient(160deg,#eef4f4,#f7f9fa);min-height:100vh;padding:24px 14px;}
.app-public-wrap{max-width:720px;margin:0 auto;}
.app-public-header h1{color:var(--navy);margin:8px 0;}
.app-public-card{padding:22px;margin-bottom:14px;}
.app-public-foot{margin-top:8px;}
.app-public-actions{display:flex;justify-content:space-between;gap:10px;margin-top:18px;flex-wrap:wrap;}

.app-pq{padding:16px 0;border-bottom:1px solid var(--line);}
.app-pq:last-of-type{border-bottom:none;}
.app-pq-label{font-weight:600;color:var(--navy);margin-bottom:10px;font-size:16px;}
.app-pq-num{color:var(--teal);margin-right:4px;}
.app-req{color:#dc2626;margin-left:2px;}
.app-pq-hint{font-size:12px;color:var(--muted);margin:4px 0 8px;}

.app-choices{display:flex;flex-direction:column;gap:8px;}
.app-choice{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);
  border-radius:8px;cursor:pointer;transition:.15s;}
.app-choice:hover{border-color:var(--teal);background:#fafcfc;}
.app-choice input{width:18px;height:18px;accent-color:var(--teal);}

.app-likert{display:flex;gap:6px;justify-content:space-between;flex-wrap:wrap;}
.app-likert-cell{flex:1;min-width:96px;text-align:center;border:1px solid var(--line);border-radius:8px;
  padding:10px 6px;cursor:pointer;transition:.15s;}
.app-likert-cell:hover{border-color:var(--teal);background:#fafcfc;}
.app-likert-cell input{accent-color:var(--teal);}
.app-likert-dot{display:block;font-weight:700;color:var(--teal);font-size:18px;margin:4px 0;}
.app-likert-lab{display:block;font-size:11px;color:var(--muted);}

.app-thanks{padding:40px 24px;}
.app-thanks i{font-size:54px;color:var(--teal);}
.app-thanks h2{color:var(--navy);margin:12px 0 4px;}
.app-closed{padding:40px 24px;}
.app-closed i{font-size:54px;color:#94a3b8;}
.app-closed h2{color:var(--navy);margin:12px 0 4px;}