/* GraftKit — App Styles */

/* Light mode overrides */
body.light-mode{background:#f5f7fa;color:#1e293b}
body.light-mode nav.scrolled{background:#fff;border-bottom:1px solid #e2e8f0}
body.light-mode .nav-inner{background:transparent}
body.light-mode .nav-brand span{-webkit-text-fill-color:#0a0e1a}
body.light-mode .usage-badge{background:rgba(234,88,12,.08);border-color:rgba(234,88,12,.2);color:#ea580c}
body.light-mode .card,body.light-mode .modal{background:#fff;border-color:#e2e8f0}
body.light-mode .form-input{background:#f8fafc;border-color:#d1d5db;color:#1e293b}
body.light-mode .form-input:focus{border-color:var(--blue)}
body.light-mode .form-input::placeholder{color:#94a3b8}
body.light-mode .trade-btn{background:#fff;border-color:#e2e8f0}
body.light-mode .trade-btn:hover{border-color:var(--blue)}
body.light-mode .trade-btn.selected{background:rgba(234,88,12,.05);border-color:var(--blue)}
body.light-mode .job-btn{background:#fff;border-color:#e2e8f0;color:#1e293b}
body.light-mode .line-items{border-color:#e2e8f0}
body.light-mode .line-item-header{background:#f1f5f9}
body.light-mode .line-item{border-color:#f1f5f9}
body.light-mode .line-item input{background:#f8fafc;color:#1e293b}
body.light-mode .line-item input:focus{border-color:var(--blue)}
body.light-mode .line-item .total{color:#1e293b}
body.light-mode .quote-totals{background:#f8fafc;border-color:#e2e8f0}
body.light-mode .total-row{color:#64748b}
body.light-mode .total-row.grand{color:#1e293b;border-color:#d1d5db}
body.light-mode .step{background:#e2e8f0}
body.light-mode .back-btn{background:#fff;border-color:#e2e8f0;color:#64748b}
body.light-mode .add-item-btn{border-color:#d1d5db;color:var(--blue)}
body.light-mode .preview-container{background:#f1f5f9;border-color:#e2e8f0}
body.light-mode .mode-toggle{background:#e2e8f0}
body.light-mode .mode-btn{color:#64748b}
body.light-mode .btn-secondary{background:#fff;border-color:#d1d5db;color:#1e293b}
body.light-mode .mobile-label{color:#64748b}
body.light-mode .section-header h2{color:#1e293b}
body.light-mode .modal-overlay{background:rgba(0,0,0,.4)}
body.light-mode .vat-toggle label{color:#64748b}
body.light-mode .toggle{background:#e2e8f0;border-color:#d1d5db}
body.light-mode .form-group label{color:#1e293b}
body.light-mode .hint{color:#94a3b8}
body.light-mode .logo-dark{display:none!important}
body.light-mode .logo-light{display:block!important}

/* Theme + Account toggle buttons */
.theme-toggle,.account-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--border2);background:var(--surface);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .2s}
.theme-toggle:hover,.account-btn:hover{border-color:var(--cyan);color:var(--cyan)}
body.light-mode .theme-toggle,body.light-mode .account-btn{background:transparent;border-color:#d1d5db;color:#64748b}

/* Account page */
.account-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;overflow:hidden}
body.light-mode .account-card{background:#fff;border-color:#e2e8f0}
.account-plan-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}
.account-plan-name{font-size:20px;font-weight:700}
.account-plan-desc{font-size:13px;color:var(--muted);margin-top:4px}
.account-plan-badge{padding:6px 14px;border-radius:100px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.account-plan-badge{background:rgba(148,163,184,.1);color:var(--dim);border:1px solid var(--border2)}
.account-plan-badge.pro{background:rgba(245,158,11,.1);color:var(--cyan);border-color:rgba(245,158,11,.3)}
.account-usage{margin-bottom:24px}
.usage-bar-wrap{display:flex;flex-direction:column;gap:8px}
.usage-bar-bg{height:8px;border-radius:4px;background:var(--navy3);overflow:hidden}
body.light-mode .usage-bar-bg{background:#e2e8f0}
.usage-bar-fill{height:100%;border-radius:4px;background:var(--grad);transition:width .4s}
.usage-text{font-size:12px;color:var(--muted)}
.account-upgrade-pitch{margin-bottom:20px;padding:20px;background:rgba(245,158,11,.04);border:1px solid rgba(245,158,11,.1);border-radius:var(--radius-sm)}
body.light-mode .account-upgrade-pitch{background:rgba(245,158,11,.04);border-color:rgba(245,158,11,.15)}
.account-upgrade-pitch p{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:12px}
.account-upgrade-price{font-size:32px;font-weight:800;color:var(--cyan)}
.account-upgrade-price span{font-size:14px;color:var(--dim);font-weight:400}
.account-section-title{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin-bottom:16px}
.account-details{display:flex;flex-direction:column;gap:0}
.account-detail-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:14px}
body.light-mode .account-detail-row{border-color:#f1f5f9}
.account-detail-row .label{color:var(--muted)}
.account-detail-row .value{font-weight:600;text-align:right;max-width:60%}
.account-pro-details{display:flex;flex-direction:column;gap:0}
.account-pro-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:14px;color:var(--muted)}
.account-pro-row:last-child{border-bottom:none}
.pro-active{color:var(--green);font-weight:600}

/* App layout */
.app-container{max-width:900px;margin:0 auto;padding:80px 16px 40px}
.app-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}
.app-header h1{font-size:24px;font-weight:700}
.usage-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:100px;font-size:12px;font-weight:600;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);color:var(--cyan)}
.usage-badge.warn{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.3);color:var(--orange)}
.usage-badge.pro{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.3);color:var(--green)}

/* Mode toggle (Quote / Invoice) */
.mode-toggle{display:flex;gap:4px;padding:4px;background:var(--navy3);border-radius:var(--radius);margin-bottom:24px;max-width:240px}
.mode-btn{flex:1;padding:10px 16px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--muted);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;text-align:center}
.mode-btn.active{background:var(--grad);color:#fff}
.mode-btn:not(.active):hover{color:var(--text)}

/* Steps indicator */
.steps{display:flex;gap:4px;margin-bottom:32px}
.step{flex:1;height:4px;border-radius:2px;background:var(--surface2);transition:background .3s}
.step.active{background:var(--cyan)}
.step.done{background:var(--green)}

/* Setup modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:var(--navy2);border:1px solid var(--border2);border-radius:16px;padding:32px;max-width:480px;width:100%;max-height:90vh;overflow-y:auto}
.modal h2{font-size:22px;font-weight:700;margin-bottom:8px}
.modal p{color:var(--muted);font-size:14px;margin-bottom:24px}
.modal.hidden{display:none}
.modal-overlay.hidden{display:none}

/* Form elements */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--text)}
.form-group .hint{font-size:11px;color:var(--dim);margin-top:4px}
.form-input{width:100%;padding:12px 14px;background:var(--navy3);border:1px solid var(--border2);border-radius:var(--radius-sm);color:var(--text);font-size:14px;transition:border-color .2s}
.form-input:focus{outline:none;border-color:var(--cyan)}
.form-input::placeholder{color:var(--dim)}
select.form-input{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
textarea.form-input{resize:vertical;min-height:80px}

/* Logo upload */
.logo-upload{display:flex;align-items:center;gap:16px}
.logo-preview{width:60px;height:60px;border-radius:var(--radius-sm);background:var(--navy3);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.logo-preview img{width:100%;height:100%;object-fit:contain}
.logo-preview .placeholder{color:var(--dim);font-size:10px;text-align:center}
.logo-upload input[type="file"]{display:none}
.logo-upload-btn{padding:8px 16px;background:var(--navy3);border:1px solid var(--border2);border-radius:var(--radius-sm);color:var(--muted);font-size:13px;cursor:pointer;transition:all .2s}
.logo-upload-btn:hover{border-color:var(--cyan);color:var(--cyan)}

/* Trade selector */
.trade-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:600px){.trade-grid{grid-template-columns:repeat(3,1fr)}}
.trade-btn{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);padding:20px 12px;text-align:center;cursor:pointer;transition:all .2s}
.trade-btn:hover{border-color:rgba(245,158,11,.3);transform:translateY(-2px)}
.trade-btn.selected{border-color:var(--cyan);background:rgba(245,158,11,.05)}
.trade-btn .icon{font-size:32px;margin-bottom:8px}
.trade-btn .name{font-size:14px;font-weight:600}

/* Job selector */
.job-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:600px){.job-grid{grid-template-columns:repeat(3,1fr)}}
.job-btn{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;text-align:left;cursor:pointer;transition:all .2s;font-size:14px;font-weight:500;color:var(--text)}
.job-btn:hover{border-color:rgba(245,158,11,.3);background:rgba(245,158,11,.03)}

/* Section header */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.section-header h2{font-size:20px;font-weight:700}
.back-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--muted);font-size:13px;cursor:pointer;transition:all .2s}
.back-btn:hover{color:var(--cyan);border-color:var(--cyan)}

/* Line items */
.line-items{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.line-item-header{display:grid;grid-template-columns:2fr 80px 80px 100px 100px 40px;gap:8px;padding:10px 12px;background:var(--navy3);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--dim)}
.line-item{display:grid;grid-template-columns:2fr 80px 80px 100px 100px 40px;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border);align-items:center}
.line-item:last-child{border-bottom:none}
.line-item input{background:var(--navy3);border:1px solid transparent;border-radius:4px;padding:8px;color:var(--text);font-size:13px;width:100%}
.line-item input:focus{border-color:var(--cyan);outline:none}
.line-item .total{font-weight:600;font-size:13px;text-align:right;padding-right:4px}
.line-item .remove-btn{width:32px;height:32px;border-radius:6px;border:none;background:transparent;color:var(--dim);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.line-item .remove-btn:hover{background:rgba(239,68,68,.1);color:var(--red)}
.add-item-btn{display:flex;align-items:center;gap:6px;padding:10px 16px;background:transparent;border:1px dashed var(--border2);border-radius:var(--radius-sm);color:var(--cyan);font-size:13px;font-weight:500;cursor:pointer;margin-top:8px;transition:all .2s;width:100%}
.add-item-btn:hover{background:rgba(245,158,11,.03);border-color:var(--cyan)}

/* Totals */
.quote-totals{margin-top:16px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.total-row{display:flex;justify-content:space-between;padding:6px 0;font-size:14px;color:var(--muted)}
.total-row.grand{font-size:20px;font-weight:800;color:var(--text);padding-top:12px;margin-top:8px;border-top:2px solid var(--border2)}

/* VAT toggle */
.vat-toggle{display:flex;align-items:center;gap:10px;margin-top:12px}
.vat-toggle label{font-size:13px;color:var(--muted);cursor:pointer}
.toggle{position:relative;width:42px;height:24px;border-radius:12px;background:var(--navy3);border:1px solid var(--border2);cursor:pointer;transition:all .2s}
.toggle.active{background:rgba(245,158,11,.2);border-color:var(--cyan)}
.toggle::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--dim);transition:all .2s}
.toggle.active::after{left:20px;background:var(--cyan)}

/* Customer details */
.customer-form{display:grid;gap:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* Preview */
.preview-container{width:100%;height:70vh;min-height:400px;background:var(--navy3);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.preview-actions{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}

/* Screens */
.screen{display:none}
.screen.active{display:block}

/* Upgrade modal */
.upgrade-modal{text-align:center}
.upgrade-modal h2{margin-bottom:12px}
.upgrade-modal p{margin-bottom:24px}
.upgrade-modal .price{font-size:48px;font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Responsive */
@media(max-width:768px){
  .line-item-header{display:none}
  .line-item{display:flex;flex-direction:column;gap:8px;padding:16px;position:relative;border-bottom:2px solid var(--border2);margin-bottom:4px}
  .line-item input{padding:12px;font-size:16px;border-radius:8px}
  .line-item .remove-btn{position:absolute;top:12px;right:12px;width:44px;height:44px;font-size:20px;background:rgba(239,68,68,.08);color:var(--red);border-radius:8px}
  .line-item .total{font-size:16px;text-align:left;padding:8px 0 0;border-top:1px solid var(--border);font-weight:700}
  .mobile-label{display:block;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
  .form-row{grid-template-columns:1fr}
  .preview-container{height:60vh;min-height:350px}
  .app-header{flex-direction:column;gap:12px;align-items:flex-start}
  .add-item-btn{padding:16px;font-size:15px;justify-content:center}
  .btn{padding:16px 24px;font-size:16px}
  .btn-lg{padding:18px 24px}
  .section-header{flex-direction:column;gap:12px;align-items:flex-start}
  .section-header .back-btn{align-self:flex-start}
  .steps{margin-bottom:20px}
  .step{height:6px}
  .trade-btn{padding:24px 12px}
  .trade-btn .icon{font-size:36px}
  .job-btn{padding:18px 16px;font-size:16px}
  .mode-toggle{max-width:100%}
  .mode-btn{padding:12px;font-size:15px}
  .nav-links .btn-primary{display:none}
  .preview-actions{flex-direction:column}
  .preview-actions .btn{width:100%;justify-content:center}
}
@media(min-width:769px){
  .mobile-label{display:none}
}
/* Light mode responsive overrides */
@media(max-width:768px){
  body.light-mode .line-item{border-color:#e2e8f0}
  body.light-mode .line-item .total{border-color:#e2e8f0}
}

/* Generic .hidden utility — needs !important to beat inline display rules
   (e.g. the Pro lock overlay on the Branding card). */
.hidden{display:none !important}

/* Dashboard — shortcut tiles (always 4, symmetrical on every breakpoint) */
.dashboard-shortcuts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0 14px}
@media(min-width:720px){.dashboard-shortcuts{grid-template-columns:repeat(4,1fr)}}
.dash-shortcut{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:transform .12s,border-color .12s,box-shadow .12s;text-align:left;font-family:inherit}
.dash-shortcut:hover{border-color:var(--cyan);transform:translateY(-1px);box-shadow:0 4px 12px rgba(245,158,11,.08)}
.dash-shortcut .ico{font-size:22px}
.dash-shortcut .label{font-size:14px;font-weight:700;color:var(--text);display:inline-flex;align-items:center;gap:4px}
.dash-shortcut .sub{font-size:11px;color:var(--muted);font-weight:500;line-height:1.3}
.dash-shortcut .stats-chevron{font-size:11px;color:var(--muted);transition:transform .15s}

/* Stats grid collapse animation — uses grid-template-rows trick so the
   tile row above stays exactly where it is. */
.dashboard-grid{transition:max-height .22s ease, opacity .15s ease, margin .15s ease;overflow:hidden;max-height:600px}
.dashboard-grid.stats-collapsed{max-height:0;opacity:0;margin-top:0;margin-bottom:0;border:0}

/* Dashboard */
.dashboard-hero{margin-bottom:20px}
.dashboard-hero h1{font-size:26px;font-weight:800;letter-spacing:-.4px;line-height:1.2}
.dashboard-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.dashboard-cta{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:14px;border:none;cursor:pointer;font-family:inherit;font-size:15px;font-weight:600;text-align:left;transition:transform .12s ease, box-shadow .12s ease}
.dashboard-cta.primary{background:linear-gradient(135deg,#f59e0b,#ea580c);color:#fff;box-shadow:0 6px 18px rgba(245,158,11,.32)}
.dashboard-cta.primary:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(245,158,11,.4)}
.dashboard-cta.secondary{flex:1;background:var(--surface);border:1px solid var(--border2);color:var(--text);justify-content:center;padding:14px 16px;font-weight:600}
.dashboard-cta.secondary:hover{border-color:var(--cyan);color:var(--cyan)}
.dashboard-cta .ico{font-size:24px;flex-shrink:0;width:32px;text-align:center}
.dashboard-cta.primary .label{display:flex;flex-direction:column;line-height:1.2}
.dashboard-cta .label .title{font-size:16px;font-weight:700}
.dashboard-cta .label .sub{font-size:12px;font-weight:500;opacity:.85;margin-top:2px}
.dashboard-actions-row{display:flex;gap:10px}

.dashboard-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:720px){.dashboard-grid{grid-template-columns:repeat(4,1fr)}}
.dashboard-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.dashboard-card.stat{padding:14px 16px}
.dashboard-card.stat .stat-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--dim)}
.dashboard-card.stat .stat-value{font-size:28px;font-weight:800;color:var(--text);margin-top:4px;line-height:1.1}
.dashboard-card.stat .stat-sub{font-size:12px;color:var(--muted);margin-top:4px}
.dashboard-card.upgrade-pitch{background:linear-gradient(135deg,rgba(245,158,11,.08),rgba(234,88,12,.04));border-color:rgba(245,158,11,.25)}

.dash-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 4px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.dash-row:last-child{border-bottom:none}
.dash-row:hover{background:rgba(148,163,184,.04)}
.dash-row-main{flex:1;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:14px}
.dash-row-amount{font-weight:700;font-size:14px;color:var(--text);white-space:nowrap}

@media(max-width:520px){
  .dashboard-actions-row{flex-direction:column}
  .dashboard-hero h1{font-size:22px}
  .dashboard-card.stat .stat-value{font-size:24px}
}

/* Voice quote — mic button + pulse while recording */
#voice-mic-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(245,158,11,.45)}
#voice-mic-btn.recording{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 0 0 0 rgba(239,68,68,.7);animation:voice-pulse 1.4s infinite}
#voice-mic-btn.recording:hover{box-shadow:0 0 0 14px rgba(239,68,68,0)}
@keyframes voice-pulse{
  0%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}
  70%{box-shadow:0 0 0 18px rgba(239,68,68,0)}
  100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}
}
#btn-talk-it-out:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(245,158,11,.4)}
#btn-talk-it-out:active{transform:translateY(0)}