/**
 * CTL Quote Machine — app + builder styling.
 * Visual language shared with CTL Inventory and the approved Quote prototype.
 */

.ctlq {
	--navy:#0f2942;--navy2:#17385c;--teal:#1f9e8f;--teal-d:#178074;
	--bg:#f4f6f9;--card:#fff;--line:#e3e8ef;--ink:#1c2733;--muted:#66788c;
	--good:#1f9e8f;--good-bg:#e6f6f3;--accent:#c6551f;--accent-bg:#fbeee6;
	--danger:#b3261e;
	--shadow:0 1px 3px rgba(16,40,66,.08),0 4px 16px rgba(16,40,66,.06);
	color:var(--ink);
}
.ctlq *{box-sizing:border-box}

/* Topbar + layout ---------------------------------------------------- */
.ctlq-app{max-width:1180px;margin:0 auto}
.ctlq-topbar{background:var(--navy);color:#fff;display:flex;align-items:center;gap:16px;padding:12px 20px;border-radius:14px 14px 0 0}
.ctlq-brand{font-weight:700;font-size:16px;display:flex;align-items:center;gap:10px}
.ctlq-brand .ctlq-dot{width:26px;height:26px;border-radius:7px;background:var(--teal);display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:800}
.ctlq-brand small{display:block;font-weight:500;color:#9fb4c9;font-size:11px;margin-top:1px}
.ctlq-spacer{flex:1}
.ctlq-who{color:#c7d6e5;font-size:13px}
.ctlq-layout{display:flex;gap:0;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;overflow:hidden;min-height:520px}
.ctlq-nav{width:186px;flex-shrink:0;background:#f7f9fb;border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;gap:2px}
.ctlq-nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;color:var(--muted);text-decoration:none;font-weight:600;font-size:13.5px}
.ctlq-nav a:hover{background:#eef1f5;color:var(--ink)}
.ctlq-nav a.active{background:var(--navy);color:#fff}
.ctlq-nav .ctlq-ico{width:18px;text-align:center;font-size:14px}
.ctlq-badge{margin-left:auto;background:var(--accent);color:#fff;font-size:11px;font-weight:800;border-radius:20px;padding:1px 7px}
.ctlq-main{flex:1;padding:22px 24px;min-width:0}

/* Admin context (no chrome) ------------------------------------------ */
.ctlq-adminwrap{max-width:1120px}
.ctlq-adminwrap .ctlq-main{padding:8px 0}

/* Headings + cards --------------------------------------------------- */
.ctlq h1{font-size:22px;margin:0 0 3px;padding:0}
.ctlq .ctlq-sub{color:var(--muted);font-size:14px;margin:0 0 18px}
.ctlq-card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:18px;margin-bottom:16px}
.ctlq-card h2{font-size:12.5px;margin:0 0 12px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.ctlq-cardhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.ctlq-cardhead h2{margin:0}

/* Forms + buttons ---------------------------------------------------- */
.ctlq label{font-size:12px;color:var(--muted);font-weight:600;display:block;margin-bottom:4px}
.ctlq select,.ctlq input,.ctlq textarea{font-family:inherit;font-size:14px;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.ctlq select:focus,.ctlq input:focus,.ctlq textarea:focus{outline:none;border-color:var(--teal)}
.ctlq .ctlq-row{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end}
.ctlq-btn{background:var(--teal);color:#fff;border:0;padding:11px 18px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;text-decoration:none;display:inline-block}
.ctlq-btn:hover{background:var(--teal-d)}
.ctlq-btn.sm{padding:7px 12px;font-size:13px}
.ctlq-btn.grey{background:#eef1f5;color:var(--ink)}.ctlq-btn.grey:hover{background:#e3e8ef}
.ctlq-btn.navy{background:var(--navy)}.ctlq-btn.navy:hover{background:var(--navy2)}
.ctlq-btn.ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}.ctlq-btn.ghost:hover{background:#f4f6f9}
.ctlq-btn.danger{background:#fff;border:1px solid #e9c9c6;color:var(--danger)}
.ctlq-btn[disabled]{opacity:.5;cursor:not-allowed}

/* Tables ------------------------------------------------------------- */
.ctlq table{width:100%;border-collapse:collapse;font-size:13px}
.ctlq th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:8px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.ctlq td{padding:8px;border-bottom:1px solid #eef1f5;vertical-align:middle}
.ctlq td input,.ctlq td select{padding:7px 6px;font-size:13px;width:100%}
.ctlq .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.ctlq .calc{color:var(--navy);font-weight:700}

/* Pills -------------------------------------------------------------- */
.ctlq .pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:700}
.ctlq .pill.cod{background:var(--accent-bg);color:var(--accent)}
.ctlq .pill.net{background:var(--good-bg);color:var(--good)}
.ctlq .pill.draft{background:#eef1f5;color:var(--muted)}
.ctlq .pill.emailed{background:#e7eefb;color:#3b62b8}
.ctlq .pill.accepted{background:#e6f6f3;color:#178074}
.ctlq .pill.new{background:var(--accent-bg);color:var(--accent)}

/* Label cards (builder) ---------------------------------------------- */
.ctlq .labelcard{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px;background:#fbfcfe}
.ctlq .lc-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ctlq .lc-check{width:16px;height:16px}
.ctlq .lc-title{font-weight:700;font-size:14px;color:var(--navy)}
.ctlq .lc-total{margin-left:auto;font-weight:800;font-size:16px;color:var(--teal-d);font-variant-numeric:tabular-nums}
.ctlq .lc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px}
.ctlq .lc-grid .wide{grid-column:1/-1}
.ctlq .lc-grid .f label{font-size:11px}
.ctlq .lc-grid .f .calc{padding:9px 6px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.ctlq .rm{color:var(--accent);cursor:pointer;font-weight:700;border:0;background:none;font-size:18px;line-height:1}
.ctlq .lc-break{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.ctlq .lc-break .seg b{color:var(--ink);font-weight:700}
.ctlq .lc-break .eq{margin-left:auto;color:var(--navy);font-weight:800;font-size:13.5px}

/* Totals ------------------------------------------------------------- */
.ctlq .totals{margin-left:auto;width:320px}
.ctlq .totals .r{display:flex;justify-content:space-between;padding:6px 0;font-size:14px}
.ctlq .totals .r.grand{border-top:2px solid var(--line);margin-top:6px;padding-top:12px;font-size:19px;font-weight:800}
.ctlq .totals .r.grand .v{color:var(--teal-d)}
.ctlq .cust-info{display:flex;gap:22px;flex-wrap:wrap;font-size:13px;margin-top:12px;color:var(--muted)}
.ctlq .cust-info b{color:var(--ink)}
.ctlq .actions{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}
.ctlq .empty{color:var(--muted);font-size:14px;padding:16px 0;text-align:center}
.ctlq .ctlq-hint{color:var(--muted);font-size:12.5px}

/* Messages ----------------------------------------------------------- */
.ctlq-msg{padding:10px 14px;border-radius:9px;font-size:13.5px;margin:0 0 14px}
.ctlq-msg.success{background:var(--good-bg);color:var(--teal-d)}
.ctlq-msg.error{background:#fdeceb;color:var(--danger)}

/* Login -------------------------------------------------------------- */
.ctlq-login{max-width:420px;margin:40px auto}
.ctlq-login .ctlq-card{padding:26px}
.ctlq-login h2{margin:0 0 6px}
.ctlq-login input[type=text],.ctlq-login input[type=password]{width:100%;margin-bottom:10px}
.ctlq-login .button,.ctlq-login input[type=submit]{background:var(--teal);color:#fff;border:0;padding:10px 16px;border-radius:9px;font-weight:600;cursor:pointer}

/* Toast + modal ------------------------------------------------------ */
.ctlq-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;padding:13px 20px;border-radius:11px;font-size:14px;box-shadow:var(--shadow);z-index:100060}
.ctlq-modal-bg{position:fixed;inset:0;background:rgba(16,40,66,.45);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:100050;overflow:auto}
.ctlq-modal{background:#fff;border-radius:14px;box-shadow:var(--shadow);max-width:660px;width:100%;padding:22px}
.ctlq-modal h3{margin:0 0 14px;font-size:17px}
.ctlq-modal .close{float:right;cursor:pointer;color:var(--muted);border:0;background:none;font-size:22px;line-height:1}
.ctlq-field{margin-bottom:12px}
.ctlq-field input,.ctlq-field textarea,.ctlq-field .val{width:100%;font-size:14px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-family:inherit}
.ctlq-field textarea{min-height:96px;resize:vertical}
.ctlq-field .val{background:#f7f9fb;color:var(--ink)}
.ctlq .attach{display:inline-flex;align-items:center;gap:8px;background:var(--accent-bg);color:var(--accent);border:1px solid #f0d9c8;border-radius:8px;padding:8px 12px;font-size:13px;font-weight:600}

/* Quote preview ------------------------------------------------------ */
.qp{font-size:13px;color:#222}
.qp .head{display:flex;justify-content:space-between;border-bottom:3px solid var(--navy);padding-bottom:12px;margin-bottom:14px}
.qp .co{font-weight:800;color:var(--navy);font-size:18px}
.qp .co small{display:block;font-weight:500;color:var(--muted);font-size:11px;margin-top:3px;line-height:1.5}
.qp .qt{text-align:right}.qp .qt b{font-size:20px;color:var(--teal-d)}
.qp table{font-size:12px;margin:10px 0;width:100%;border-collapse:collapse}
.qp th{background:var(--navy);color:#fff;padding:6px 8px;border:0;text-align:left}
.qp td{padding:6px 8px;border-bottom:1px solid #eef1f5}

@media(max-width:820px){
	.ctlq-layout{flex-direction:column}
	.ctlq-nav{width:auto;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}
	.ctlq-nav .ctlq-txt{display:none}
	.ctlq .totals{width:100%}
}

/* ---- v1.1.0 additions ------------------------------------------------ */
/* Input text must always be visible (WP admin + theme try to override). */
.ctlq input, .ctlq select, .ctlq textarea { color: var(--ink) !important; background:#fff !important; -webkit-text-fill-color: var(--ink); opacity:1; }
.wrap .ctlq input, .wrap .ctlq select, .wrap .ctlq textarea { color:#1c2733 !important; background:#fff !important; -webkit-text-fill-color:#1c2733; }
.ctlq .ctlq-plate-in { width:80px; text-align:right; }

/* Robust headings on the front-end app too (beat the site theme's h1/h2). */
.ctlq.ctlq-app h1 { font-size:22px !important; line-height:1.3 !important; margin:0 0 3px !important; color:var(--ink) !important; font-weight:700; }
.ctlq.ctlq-app .ctlq-sub { font-size:14px !important; line-height:1.45 !important; margin:0 0 18px !important; color:var(--muted) !important; }
.ctlq.ctlq-app .ctlq-card h2, .ctlq.ctlq-app .ctlq-cardhead h2 { font-size:12.5px !important; line-height:1.4 !important; margin:0 0 8px !important; text-transform:uppercase; letter-spacing:.4px; color:var(--muted) !important; font-weight:700; }
.ctlq.ctlq-app .ctlq-hint { font-size:12.5px !important; line-height:1.5 !important; margin:0 0 12px !important; color:var(--muted) !important; }
.ctlq.ctlq-app .ctlq-cardhead { margin-bottom:10px; }

/* Filter chips */
.ctlq .ctlq-filters { display:flex; gap:8px; flex-wrap:wrap; margin:2px 0 14px; }
.ctlq .ctlq-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:20px; background:#eef1f5; color:var(--muted); text-decoration:none; font-size:12.5px; font-weight:600; }
.ctlq .ctlq-chip:hover { background:#e3e8ef; color:var(--ink); }
.ctlq .ctlq-chip.active { background:var(--navy); color:#fff; }
.ctlq .ctlq-chip-n { background:rgba(0,0,0,.12); border-radius:20px; padding:0 7px; font-size:11px; }
.ctlq .ctlq-chip.active .ctlq-chip-n { background:rgba(255,255,255,.25); }

/* Price grid (material lookup) */
.ctlq .ctlq-gridwrap { max-height:440px; overflow:auto; border:1px solid var(--line); border-radius:10px; }
.ctlq .ctlq-grid { font-size:12.5px; }
.ctlq .ctlq-grid th { position:sticky; top:0; background:var(--navy); color:#fff; padding:7px 10px; }
.ctlq .ctlq-grid td { padding:5px 10px; border-bottom:1px solid #eef1f5; }
.ctlq .ctlq-grid tbody tr:nth-child(even) { background:#f7f9fb; }

/* ---- v1.1.2: stop the site theme's tight line-height leaking into the app --- */
.ctlq, .ctlq-app { line-height: 1.45; }
.ctlq-topbar .ctlq-brand,
.ctlq-topbar .ctlq-brand span,
.ctlq-topbar .ctlq-brand small { line-height: 1.25 !important; }
.ctlq-topbar .ctlq-brand small { line-height: 1.4 !important; margin-top: 2px; display:block; }
.ctlq-nav a { line-height: 1.2; }

/* ---- v1.1.3: list tables keep each cell on one line; scroll if wider than card --- */
.ctlq .ctlq-tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:2px; }
.ctlq .ctlq-tablewrap td, .ctlq .ctlq-tablewrap th { white-space:nowrap; }
.ctlq .ctlq-tablewrap td { padding-right:18px; }

/* ---- v1.1.4: freeze the actions (last) column so it is never cut off --- */
.ctlq .ctlq-tablewrap table th:last-child,
.ctlq .ctlq-tablewrap table td:last-child { position:sticky; right:0; background:#fff; box-shadow:-8px 0 8px -8px rgba(16,40,66,.18); white-space:nowrap; }
.ctlq .ctlq-tablewrap td:last-child { text-align:right; }
.ctlq .ctlq-tablewrap td:last-child .ctlq-btn { padding:5px 11px; font-size:12px; }
.ctlq .ctlq-tablewrap td:last-child form { display:inline; margin-left:4px; }