/* ═══════════════════════════════════════════════ DESIGN TOKENS - Nexus Enterprise ═══════════════════════════════════════════════ */ :root{ /* Nexus Blue */ --primary:#0064E0; --primary-hover:#004299; --primary-active:#004299; --primary-light:#E6EBFF; --primary-dim:rgba(0,100,224,.06); --primary-icon:#0064E0; /* Surfaces - tonal layering */ --surface:#FFFFFF; /* Level 1 cards */ --bg:#F2F4F7; /* Level 0 background */ --bg-hover:#ECEEF1; /* surface-container */ --bg-selected:#D2E2ED; /* secondary-container - active nav */ /* Text */ --text-main:#191C1E; /* on-surface */ --text-sub:#424754; /* on-surface-variant */ --text-muted:#51616A; /* secondary */ --text-placeholder:#727786; /* outline */ /* Borders / outlines */ --border:#C2C6D6; /* outline-variant */ --border-strong:#727786; /* outline */ --divider:#E0E3E6; /* surface-variant */ /* Status */ --success:#017C00; /* tertiary-container */ --success-bg:#E6F4EA; --success-text:#015300; --danger:#BA1A1A; /* error */ --danger-bg:#FFDAD6; /* error-container */ --danger-text:#93000A; /* on-error-container */ --warning:#8A5300; --warning-bg:#FFEFD6; /* Elevation - low-contrast, tonal */ --shadow-xs:0 1px 2px rgba(0,0,0,.04); --shadow-sm:0 2px 4px rgba(0,0,0,.05); --shadow-md:0 4px 10px rgba(0,0,0,.07); --shadow-lg:0 8px 16px rgba(0,0,0,.1); /* Shape - soft, restrained (4px UI, 8px cards) */ --radius-xs:4px; --radius-sm:6px; --radius:8px; --radius-lg:8px; --radius-xl:12px; --radius-pill:9999px; --transition:all .2s cubic-bezier(.4,0,.2,1); --bottom-nav-h:64px; --font:'Inter','Google Sans','Segoe UI',Arial,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ font-family:var(--font); background:var(--bg); color:var(--text-main); font-size:14px;line-height:1.5;letter-spacing:.2px; -webkit-font-smoothing:antialiased; } /* LAYOUT */ .layout-wrapper{display:flex;flex-direction:row;width:100%;align-items:flex-start} /* ── MOBILE HEADER ── */ .mobile-header{ display:none;background:#FFFFFF; border-bottom:1px solid var(--border); padding:0 16px;height:56px; align-items:center;justify-content:space-between; flex-shrink:0;width:100%; box-shadow:0 1px 2px rgba(60,64,67,.08); } .mobile-header-title{font-weight:500;font-size:1rem;color:var(--text-main);letter-spacing:.3px} .menu-btn{ background:none;border:none;cursor:pointer;color:var(--text-muted); width:40px;height:40px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; transition:background .2s ease;-webkit-tap-highlight-color:transparent; } .menu-btn:hover{background:rgba(32,33,36,.08)} /* ── SIDEBAR - Gmail style ── */ .sidebar{ width:256px;background:#FFFFFF; display:flex;flex-direction:column; z-index:40;flex-shrink:0; transition:width .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1); overflow-y:scroll;overflow-x:hidden; height:100dvh;position:sticky;top:0; -webkit-overflow-scrolling:touch; } .sidebar-logo{ height:64px;padding:0 20px; display:flex;align-items:center;gap:10px; cursor:pointer;flex-shrink:0; } .logo-mark{ width:40px;height:40px;flex-shrink:0; display:flex;align-items:center;justify-content:center; } .logo-mark svg{width:40px;height:40px} .logo-text{font-size:1.375rem;font-weight:400;color:var(--text-main);letter-spacing:-.5px;font-family:var(--font)} .logo-sub{font-size:.75rem;color:var(--text-muted);margin-top:0} /* Google-style nav: label is small uppercase section header */ .nav-section{ padding:16px 16px 4px; font-size:.6875rem;font-weight:500; color:var(--text-placeholder); text-transform:uppercase;letter-spacing:.8px; } .nav-links{display:flex;flex-direction:column;padding:0 8px 4px;gap:0} .nav-links button{ background:transparent;color:var(--text-muted);border:none; padding:0 12px;height:40px;text-align:left; /* Gmail-style: active pill only on right, full-width but rounded-right */ border-radius:0 20px 20px 0; cursor:pointer;font-size:.875rem;font-weight:400;font-family:var(--font); transition:background .2s ease,color .2s ease; display:flex;align-items:center;gap:12px;width:100%; -webkit-tap-highlight-color:transparent;letter-spacing:.2px; } .nav-links button:hover{background:var(--bg-hover);color:var(--text-main)} .nav-links button.active{ background:var(--bg-selected); color:var(--primary);font-weight:500; } .nav-icon{width:20px;height:20px;flex-shrink:0;transition:opacity .2s;opacity:.55} .nav-links button.active .nav-icon{opacity:1;stroke:var(--primary)} .nav-links button:hover .nav-icon{opacity:.8} /* ── MAIN ── */ .main-content{flex:1;overflow-x:hidden;padding:24px;position:relative;background:var(--bg);min-height:100dvh} .content-container{max-width:1060px;margin:0 auto} /* ── BOTTOM NAV ── */ .bottom-nav{ display:none;position:fixed;bottom:0;left:0;right:0; height:var(--bottom-nav-h);background:#FFFFFF; border-top:1px solid var(--border); z-index:50;padding:0;align-items:stretch; } .bottom-nav-item{ flex:1;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:4px; background:none;border:none;cursor:pointer; font-family:var(--font);padding:6px 4px; color:var(--text-muted);font-size:.6875rem;font-weight:500; transition:color .2s ease; -webkit-tap-highlight-color:transparent; } .bottom-nav-item svg{width:24px;height:24px;opacity:.6;transition:opacity .2s} .bottom-nav-item.active{color:var(--primary)} .bottom-nav-item.active svg{opacity:1} /* ── OVERLAY ── */ .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:45} .sidebar-overlay.open{display:block} /* ── PAGES ── */ .page{display:none} .page.active{display:block;animation:gFadeIn .25s ease forwards} @keyframes gFadeIn{from{opacity:0}to{opacity:1}} /* ── STATUS BAR ── */ #system-bar{ position:fixed;top:0;left:0;width:100%;z-index:9999; padding:12px 16px;text-align:center;font-weight:500;font-size:.875rem; color:white;transform:translateY(-100%);transition:transform .2s ease; letter-spacing:.2px; } #system-bar.show{transform:translateY(0)} #system-bar.error{background:var(--danger)} #system-bar.success{background:var(--success)} #system-bar.warning{background:#3C4043} /* ── TYPOGRAPHY ── */ h1{font-size:1.375rem;font-weight:500;margin-bottom:20px;letter-spacing:.1px;color:var(--text-main);font-family:var(--font)} h2{font-size:1rem;font-weight:500;margin-bottom:12px;letter-spacing:.1px;color:var(--text-main)} h3{font-size:.6875rem;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px} /* ── CARDS - Material elevation ── */ .card{ background:#FFFFFF; border:1px solid var(--border); border-radius:8px; padding:20px;margin-bottom:12px; } .card:hover{box-shadow:var(--shadow-xs)} .card-center{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;min-height:200px} /* ── FORMS - Material outlined ── */ .form-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end} .input-group{display:flex;flex-direction:column;gap:6px;flex:1;min-width:140px} label{font-size:.6875rem;font-weight:500;color:var(--text-muted);letter-spacing:.4px;text-transform:uppercase} .form-input{ padding:0 12px;height:40px; border:1px solid var(--border); border-radius:var(--radius-xs); font-size:.875rem;font-family:var(--font); color:var(--text-main);background:#FFFFFF; transition:border .15s ease,box-shadow .15s ease; outline:none;width:100%; letter-spacing:.2px; } .form-input::placeholder{color:var(--text-placeholder)} .form-input:hover{border-color:var(--border-strong)} .perm-toggle{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:9999px;border:1.5px solid var(--border);cursor:pointer;font-size:.78rem;font-weight:500;color:var(--text-muted);transition:.15s;user-select:none} .perm-toggle input{display:none} .perm-toggle:has(input:checked){background:var(--primary);border-color:var(--primary);color:#fff} .perm-toggle:not(:has(input:checked)){background:transparent} .form-input:focus{ border:2px solid var(--primary); padding:0 11px; } textarea.form-input{height:auto;padding:10px 12px;resize:vertical;min-height:72px;font-size:.875rem} select.form-input{cursor:pointer} /* ── BUTTONS - Material ── */ .btn{ padding:0 24px;height:36px; border:none;border-radius:var(--radius-xs); cursor:pointer;font-weight:500;font-size:.875rem; font-family:var(--font);letter-spacing:.3px; transition:background .1s ease,box-shadow .1s ease; display:inline-flex;align-items:center;justify-content:center; gap:6px;white-space:nowrap; -webkit-tap-highlight-color:transparent;touch-action:manipulation; } .btn:active{box-shadow:0 1px 2px rgba(0,0,0,.3)} .btn-primary{background:var(--primary);color:#fff} .btn-primary:hover{background:var(--primary-hover);box-shadow:var(--shadow-xs)} .btn-outline{background:transparent;border:1px solid var(--border);color:var(--primary)} .btn-outline:hover{background:var(--primary-light);border-color:var(--primary)} .btn-success{background:var(--success);color:#fff} .btn-success:hover{background:#176E31} .btn-danger{background:transparent;color:var(--danger);border:none;font-weight:500;padding:0 12px} .btn-danger:hover{background:var(--danger-bg)} .btn-edit{background:transparent;color:var(--primary);border:none;font-weight:500;padding:0 12px} .btn-edit:hover{background:var(--primary-light)} .btn-sm{height:32px;padding:0 16px;font-size:.8125rem} .prog-cat-chip{padding:4px 12px;border-radius:9999px;font-size:.75rem;font-weight:600;border:1.5px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;transition:.15s} .prog-cat-chip:hover{border-color:var(--primary);color:var(--primary)} .prog-cat-chip.active{background:var(--primary);border-color:var(--primary);color:#fff} .sc-cat-chip{padding:4px 14px;border-radius:9999px;font-size:.75rem;font-weight:600;border:1.5px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;transition:.15s} .sc-cat-chip:hover{border-color:var(--primary);color:var(--primary)} .sc-cat-chip.active{background:var(--primary);border-color:var(--primary);color:#fff} .prog-cat-section{margin-bottom:22px} .prog-cat-label{font-size:.75rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;display:flex;align-items:center;gap:6px} .prog-cat-label::after{content:'';flex:1;height:1px;background:var(--border)} .btn-xs{height:28px;padding:0 12px;font-size:.75rem} /* ── TABLES ── */ .table-wrap{ width:100%;overflow-x:auto;background:#FFFFFF; border:1px solid var(--border);border-radius:8px; -webkit-overflow-scrolling:touch; } table{width:100%;border-collapse:collapse;min-width:480px} th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--divider)} th{ background:var(--bg);font-size:.6875rem;font-weight:500; color:var(--text-muted);text-transform:uppercase; letter-spacing:.8px;cursor:pointer;user-select:none;white-space:nowrap; } th:hover{color:var(--primary)} .sort-icon{margin-left:4px;opacity:.3;font-style:normal} th.sort-asc .sort-icon,th.sort-desc .sort-icon{opacity:1;color:var(--primary)} tr:last-child td{border-bottom:none} tbody tr{transition:background .15s ease} tbody tr:hover{background:var(--bg-hover)} td{font-size:.875rem;color:var(--text-sub);letter-spacing:.2px} .actions-cell{display:flex;gap:0;align-items:center;flex-wrap:wrap} /* ── MOBILE CARDS ── */ .m-list{display:none} .m-card{background:#FFFFFF;border-bottom:1px solid var(--divider);padding:12px 16px;cursor:pointer;transition:background .15s} .m-card:last-child{border-bottom:none} .m-card:hover{background:var(--bg-hover)} .m-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:4px} .m-card-title{font-weight:500;font-size:.875rem;color:var(--text-main);letter-spacing:.1px} .m-card-sub{font-size:.75rem;color:var(--text-muted);margin-top:2px;letter-spacing:.2px} .m-card-meta{font-size:.75rem;color:var(--text-muted);display:flex;flex-wrap:wrap;gap:6px;margin-top:4px} .m-card-actions{display:flex;gap:4px;margin-top:8px;padding-top:8px;border-top:1px solid var(--divider)} .m-card-actions .btn{flex:1} .m-list-wrap{background:#FFFFFF;border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:12px} /* ── CHIPS / BADGES ── */ .badge{ padding:2px 10px;border-radius:12px;border:1px solid var(--border); font-size:.6875rem;font-weight:500; display:inline-flex;align-items:center;letter-spacing:.2px; background:#FFFFFF;color:var(--text-main); } .badge-blue{background:var(--primary-light);border-color:var(--primary);color:var(--primary)} .badge-green{background:var(--success-bg);border-color:var(--success);color:var(--success-text)} .badge-gray{background:var(--bg);border-color:var(--border);color:var(--text-muted)} /* ── MODAL - Material dialog (bottom sheet on mobile) ── */ .modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1000;align-items:flex-end;justify-content:center;padding:0} .modal-overlay.open{display:flex;animation:gFadeIn .2s ease} .modal{ background:#FFFFFF;border-radius:16px 16px 0 0; padding:20px 20px 28px;width:100%;max-width:100%;max-height:92vh; overflow-y:auto;box-shadow:var(--shadow-lg); animation:sheetUp .25s cubic-bezier(.4,0,.2,1); } @keyframes sheetUp{from{transform:translateY(32px);opacity:0}to{transform:translateY(0);opacity:1}} .modal-handle{width:32px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 16px} .modal-wide{max-width:100%} .modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px} .modal-header h2{margin:0;font-size:1rem;font-weight:500;letter-spacing:.2px} .modal-close{ background:none;border:none;cursor:pointer;color:var(--text-muted); width:36px;height:36px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:1.1rem;transition:background .2s; } .modal-close:hover{background:rgba(32,33,36,.08)} .modal-footer{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid var(--divider)} .modal-section{border-top:1px solid var(--divider);padding-top:14px;margin-top:14px} /* ── PRICING ── */ .pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px} .auto-badge{background:var(--primary-light);color:var(--primary);font-size:.625rem;padding:2px 6px;border-radius:var(--radius-xs);text-transform:uppercase;font-weight:500;margin-left:4px;letter-spacing:.4px} input[readonly].form-input{background:var(--primary-light);color:var(--primary);font-weight:500;border-color:var(--primary);cursor:default} .calc-hint{font-size:.75rem;color:var(--text-muted);margin-bottom:10px;display:flex;align-items:center;gap:5px} /* ── VARIATIONS ── */ .toggle-row{display:flex;align-items:center;gap:10px;margin-bottom:10px} .toggle{position:relative;width:44px;height:24px;flex-shrink:0} .toggle input{opacity:0;width:0;height:0} .toggle-slider{position:absolute;cursor:pointer;inset:0;background:var(--border-strong);border-radius:24px;transition:.25s ease} .toggle-slider:before{content:'';position:absolute;width:18px;height:18px;left:3px;bottom:3px;background:white;border-radius:50%;transition:.25s ease;box-shadow:0 1px 4px rgba(0,0,0,.2)} .toggle input:checked+.toggle-slider{background:var(--primary)} .toggle input:checked+.toggle-slider:before{transform:translateX(20px)} .toggle-label{font-size:.875rem;font-weight:500;color:var(--text-sub)} .variations-section{background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:12px;margin-top:8px} .variation-group{background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:12px;margin-bottom:9px} .variation-group-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px} .variation-name-input{border:none;border-bottom:2px solid var(--border);padding:3px 5px;font-size:.9rem;font-weight:600;color:var(--text-main);background:transparent;outline:none;min-width:90px} .variation-name-input:focus{border-bottom-color:var(--primary)} .variation-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .variation-chip{display:inline-flex;align-items:center;gap:4px;background:var(--primary-light);color:var(--primary);padding:5px 10px;border-radius:20px;font-size:.8rem;font-weight:500} .variation-chip button{background:none;border:none;cursor:pointer;color:var(--primary);font-size:.9rem;line-height:1;padding:0;opacity:.6} .add-chip-input{border:1px dashed var(--border);background:transparent;padding:5px 10px;border-radius:20px;font-size:.8rem;outline:none;width:88px;font-family:inherit;color:var(--text-main);-webkit-appearance:none} .add-chip-input:focus{border-color:var(--primary)} .add-variation-btn{display:inline-flex;align-items:center;gap:5px;background:transparent;border:1px dashed var(--border);color:var(--text-muted);padding:8px 13px;border-radius:6px;cursor:pointer;font-size:.8rem;margin-top:6px;transition:var(--transition);font-family:inherit} /* ── QUOTATION CARDS ── */ .quot-card{background:#FFFFFF;border-bottom:1px solid var(--divider);transition:background .15s} .quot-card:last-child{border-bottom:none} .quot-card:hover{background:var(--bg-hover)} .quot-card-header{padding:16px} .quot-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:8px} .quot-ref{font-weight:500;font-size:.875rem;color:var(--text-main);letter-spacing:.2px} .quot-date{font-size:.75rem;color:var(--text-muted);margin-top:2px;letter-spacing:.2px} .quot-batch{font-size:.8125rem;color:var(--text-muted);font-style:italic;margin-top:3px} .quot-total{font-weight:500;font-size:.9375rem;color:var(--primary);text-align:right;white-space:nowrap;letter-spacing:.1px;font-family:var(--font)} .quot-card-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px} .quot-card-actions{display:flex;gap:4px;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--divider)} .quot-card-actions .btn{flex:1;min-width:0;font-size:.8125rem} .inv-linked{background:var(--success-bg);color:var(--success-text);font-size:.6875rem;font-weight:500;padding:2px 8px;border-radius:12px;border:1px solid var(--success);display:inline-flex;align-items:center;gap:3px} /* ── LINE ITEMS EDITOR (mobile-native layout) ── */ /* ── QUOTATION EDITOR (document-style) ── */ .qe-paper{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:24px 22px 18px;margin-bottom:14px;box-shadow:var(--shadow-xs)} .qe-letterhead{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:14px;margin-bottom:18px;border-bottom:2px solid var(--text-main)} .qe-company-name{font-size:1.05rem;font-weight:700;letter-spacing:-.3px;color:var(--text-main)} .qe-company-details{font-size:.72rem;color:var(--text-muted);line-height:1.6;margin-top:3px} .qe-doc-type{font-size:1rem;font-weight:700;letter-spacing:2px;color:var(--text-muted);text-align:right;margin-bottom:4px} .qe-ref-block{font-size:.78rem;color:var(--text-muted);text-align:right;line-height:1.8} .qe-ref-input{background:transparent;border:none;border-bottom:1px dashed var(--border);font-family:inherit;font-size:.78rem;color:var(--text-main);padding:1px 4px;outline:none;text-align:right;max-width:140px;transition:border-color .15s} .qe-ref-input:focus{border-bottom-color:var(--primary);background:#f0f4ff} .qe-parties{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:16px} .qe-party-label{font-size:.64rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px} .qe-party-val{font-size:.82rem;color:var(--text-main);line-height:1.5} /* Items table */ .qe-table{width:100%;min-width:560px;border-collapse:collapse;margin-bottom:4px;table-layout:fixed} .qe-table th{background:#f0f3f8;padding:8px 8px;font-size:.65rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap} .qe-table th.r{text-align:right} .qe-table td{padding:3px 4px;border-bottom:1px solid #f0f2f5;vertical-align:middle} .qe-table tbody tr:last-child td{border-bottom:none} .qe-table tbody tr:hover td{background:#f8f9ff} .qe-cell-input{border:none;background:transparent;font-family:inherit;font-size:.85rem;color:var(--text-main);width:100%;padding:6px 6px;border-radius:4px;outline:none;transition:background .12s} .qe-cell-input:hover{background:#eef1fb} .qe-cell-input:focus{background:#e8f0fe;box-shadow:0 0 0 2px rgba(26,115,232,.15)} .qe-cell-input.r{text-align:right} .qe-row-amt{font-weight:600;color:var(--text-main);text-align:right;padding:6px 8px 6px 4px;font-size:.85rem;white-space:nowrap;min-width:80px} .qe-del-btn{background:none;border:none;cursor:pointer;color:#ccc;font-size:.95rem;line-height:1;padding:5px;border-radius:3px;transition:var(--transition)} .qe-del-btn:hover{color:var(--danger);background:var(--danger-light)} .qe-move-btn{background:none;border:none;cursor:pointer;color:#ccc;font-size:.6rem;line-height:1;padding:2px 4px;border-radius:3px;transition:var(--transition)} .qe-move-btn:hover{color:var(--primary);background:var(--primary-light,#e8f0fe)} .qe-add-row-btn{display:inline-flex;align-items:center;gap:5px;border:1px dashed var(--border);background:transparent;color:var(--text-muted);padding:6px 13px;border-radius:6px;cursor:pointer;font-size:.8rem;font-family:inherit;transition:var(--transition);margin-top:8px} .qe-add-row-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light)} /* Totals */ .qe-totals{display:flex;justify-content:flex-end;margin-top:10px} .qe-totals-box{background:#f0f3f8;border-radius:7px;padding:11px 15px;min-width:min(230px,100%)} .qe-total-row{display:flex;justify-content:space-between;gap:20px;padding:3px 0;font-size:.83rem} .qe-total-row.grand{font-size:.92rem;font-weight:700;padding-top:8px;margin-top:6px;border-top:2px solid var(--border);color:var(--primary)} .qe-tax-input{width:50px;text-align:right;border:1px solid var(--border);border-radius:4px;padding:3px 5px;font-size:.8rem;font-family:inherit} .qe-tax-input:focus{border-color:var(--primary);outline:none} .qe-notes-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)} .qe-notes-label{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin-bottom:4px} /* Pick btn */ .qe-desc-wrap{display:flex;align-items:center;gap:0;width:100%} .qe-pick-btn{background:none;border:none;cursor:pointer;color:#c5cdd8;padding:5px 6px;border-radius:4px;font-size:.82rem;flex-shrink:0;transition:var(--transition);line-height:1} .qe-pick-btn:hover{color:var(--primary);background:var(--primary-light)} /* ── CATALOG PICKER ── */ .catalog-picker-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.48);z-index:1100;align-items:center;justify-content:center;padding:16px} .catalog-picker-overlay.open{display:flex;animation:fadeUp .2s ease} .catalog-picker{background:var(--surface);border-radius:12px;width:100%;max-width:480px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0,0,0,.22);overflow:hidden} .cp-header{padding:14px 16px 10px;border-bottom:1px solid var(--border);flex-shrink:0} .cp-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .cp-title-row span{font-size:.92rem;font-weight:600;color:var(--text-main)} .cp-close{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:1.25rem;padding:2px 6px;border-radius:4px;line-height:1} .cp-close:hover{background:var(--bg)} .cp-search{width:100%;padding:9px 12px 9px 34px;border:1px solid var(--border);border-radius:7px;font-size:.88rem;font-family:inherit;outline:none;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235F6368' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 11px center;transition:var(--transition)} .cp-search:focus{border-color:var(--primary);background-color:var(--surface);box-shadow:0 0 0 3px rgba(26,115,232,.1)} .cp-breadcrumb{display:flex;align-items:center;gap:3px;padding:7px 16px;background:#f6f8fc;border-bottom:1px solid var(--border);font-size:.75rem;color:var(--text-muted);flex-shrink:0;flex-wrap:wrap} .cp-breadcrumb span{cursor:pointer;padding:2px 5px;border-radius:4px;transition:var(--transition)} .cp-breadcrumb span:hover{background:var(--primary-light);color:var(--primary)} .cp-breadcrumb span.active{color:var(--text-main);font-weight:600;cursor:default} .cp-breadcrumb .sep{opacity:.35;margin:0 1px} .cp-body{overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch} .cp-tree-item{display:flex;align-items:center;gap:11px;padding:10px 16px;cursor:pointer;border-bottom:1px solid #f5f5f5;transition:background .1s;font-size:.87rem} .cp-tree-item:hover{background:#f0f4ff} .cp-tree-item:last-child{border-bottom:none} .cp-tree-icon{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.95rem} .cp-tree-icon.folder-p{background:#dbeafe;color:#1d4ed8} .cp-tree-icon.folder-s{background:#dcfce7;color:#15803d} .cp-tree-icon.item-p{background:#eff6ff;color:#3b82f6} .cp-tree-icon.item-s{background:#f0fdf4;color:#22c55e} .cp-tree-label{flex:1;min-width:0} .cp-tree-name{font-weight:500;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cp-tree-meta{font-size:.72rem;color:var(--text-muted);margin-top:1px} .cp-tree-chevron{color:var(--text-muted);opacity:.45;font-size:.78rem;flex-shrink:0} .cp-tree-price{font-weight:600;color:var(--primary);font-size:.82rem;white-space:nowrap;flex-shrink:0} .cp-cat-header{padding:6px 16px;background:#edf0f7;font-size:.65rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid #e2e5ec;position:sticky;top:0;z-index:1} .cp-empty{text-align:center;padding:28px 16px;color:var(--text-muted);font-size:.85rem} /* Mobile qe adjustments */ @media(max-width:600px){ .qe-paper{padding:14px 12px 12px} .qe-letterhead{flex-direction:column;gap:10px} .qe-doc-type,.qe-ref-block{text-align:left} .qe-ref-input{text-align:left} .qe-parties{grid-template-columns:1fr} .doc-paper{overflow-x:auto} .qe-notes-row{grid-template-columns:1fr} .qe-table th.hide-sm,.qe-table td.hide-sm{display:none} .qm-var-selector{background:transparent} } /* ── DOCUMENT PAPER ── */ .doc-paper{ background:#fff;max-width:794px;margin:0 auto;padding:52px 56px; border:none; font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; font-feature-settings:"kern" 1;-webkit-font-smoothing:antialiased; color:#1a1a1a;line-height:1.5; } /* ── LETTERHEAD ── */ .doc-letterhead{ display:flex;justify-content:space-between;align-items:flex-start; padding-bottom:32px;margin-bottom:32px; border-bottom:1px solid #1a1a1a; } .doc-company-name{ font-size:1.35rem;font-weight:700;letter-spacing:-.3px; color:#1a1a1a;margin-bottom:8px; } .doc-company-details{ font-size:.76rem;color:#666;line-height:1.8; font-weight:400;letter-spacing:.1px; } .doc-type-label{ font-size:.65rem;font-weight:700;letter-spacing:3px; text-transform:uppercase;color:#999; text-align:right;margin-bottom:10px; } .doc-ref-block{font-size:.8rem;color:#444;text-align:right;line-height:2} .doc-ref-block strong{font-size:1.1rem;font-weight:600;color:#1a1a1a;letter-spacing:-.2px} /* ── PARTIES ── */ .doc-parties{ display:grid;grid-template-columns:1fr 1fr;gap:0; margin-bottom:36px; border-top:1px solid #e8e8e8; border-bottom:1px solid #e8e8e8; } /* ═══════════════════════════════════════════ DOCUMENT - QUOTATION & INVOICE Minimalist Interior Design Firm Style ═══════════════════════════════════════════ */ .doc-paper{ background:#fff;max-width:794px;margin:0 auto;padding:56px 60px 64px; font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; font-feature-settings:"kern" 1;-webkit-font-smoothing:antialiased; color:#111;line-height:1.5; } /* LETTERHEAD */ .doc-letterhead{ display:flex;justify-content:space-between;align-items:flex-start; margin-bottom:0;padding-bottom:28px; border-bottom:2px solid #111; } .doc-company-name{ font-size:1.1rem;font-weight:700;letter-spacing:.5px; text-transform:uppercase;color:#111;margin-bottom:10px; } .doc-company-details{ font-size:.73rem;color:#777;line-height:1.85;letter-spacing:.15px; } .doc-type-label{ font-size:1.6rem;font-weight:300;letter-spacing:4px; text-transform:uppercase;color:#111;text-align:right; margin-bottom:14px;line-height:1; } .doc-ref-block{font-size:.76rem;color:#555;text-align:right;line-height:2.1;letter-spacing:.1px} .doc-ref-num{font-size:.95rem;font-weight:600;color:#111;letter-spacing:.3px} /* PARTIES */ .doc-parties{ display:grid;grid-template-columns:1fr 1fr; margin:0 0 40px; } .doc-party{padding:24px 0;border-bottom:none} .doc-party:first-child{padding-right:32px;border-right:1px solid #e5e5e5} .doc-party:last-child{padding-left:32px} .doc-party label{ font-size:.58rem;font-weight:700;letter-spacing:2px; text-transform:uppercase;color:#aaa;display:block;margin-bottom:10px; } .doc-party .val{font-size:.855rem;color:#111;line-height:1.75} .doc-party .val strong{font-size:.95rem;font-weight:600;display:block;margin-bottom:2px} /* ITEMS TABLE */ .doc-items-table{ width:100%;min-width:500px;border-collapse:collapse;margin-bottom:0; font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; } .doc-items-table thead tr{border-bottom:1px solid #111} .doc-items-table th{ padding:8px 10px 10px;background:transparent;text-align:left; font-size:.58rem;font-weight:700;color:#aaa; text-transform:uppercase;letter-spacing:1.8px; } .doc-items-table th:nth-child(n+3){text-align:right} .doc-items-table td{ padding:14px 10px;border-bottom:1px solid #f0f0f0; font-size:.85rem;color:#111;vertical-align:top; } .doc-items-table td:nth-child(1){color:#bbb;font-size:.75rem;text-align:center;width:32px;padding-top:16px} .doc-items-table td:nth-child(3){text-align:center;color:#777;font-size:.8rem} .doc-items-table td:nth-child(4){text-align:right;color:#777} .doc-items-table td:nth-child(5){text-align:right;color:#555} .doc-items-table td:nth-child(6){text-align:right;font-weight:600;color:#111} .doc-items-table tbody tr:last-child td{border-bottom:none} .doc-item-var{font-size:.73rem;color:#999;font-style:italic;margin-top:3px} /* TOTALS */ .doc-totals-wrap{ display:flex;justify-content:flex-end; border-top:1px solid #111;margin-bottom:40px; } .doc-totals-box{min-width:min(300px,100%);padding:20px 0 0} .doc-totals-row{ display:flex;justify-content:space-between;gap:48px; padding:5px 0;font-size:.84rem;color:#555; } .doc-totals-row.grand{ font-size:1rem;font-weight:700;color:#111; padding-top:16px;margin-top:12px; border-top:1px solid #111; } /* PAYMENT DETAILS */ .doc-bank-section{ margin-bottom:28px; padding-top:24px;border-top:1px solid #e5e5e5; } .doc-bank-section h3{ font-size:.58rem;font-weight:700;letter-spacing:2px; text-transform:uppercase;color:#aaa;margin-bottom:16px; } .doc-bank-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .doc-bank-item{font-size:.84rem;color:#111;line-height:1.5} .doc-bank-item label{ font-size:.58rem;font-weight:700;letter-spacing:1.5px; text-transform:uppercase;color:#aaa;display:block;margin-bottom:4px; } /* TERMS / NOTES */ .doc-notes{ margin-bottom:28px;padding:20px 22px; border:1px solid #e5e5e5; font-size:.81rem;color:#555;line-height:1.8; } .doc-notes strong{ font-size:.58rem;font-weight:700;letter-spacing:2px; text-transform:uppercase;color:#aaa;display:block;margin-bottom:10px; } /* SIGNATURES */ .doc-sig-row{ display:grid;grid-template-columns:1fr 1fr;gap:48px; padding-top:48px;border-top:1px solid #e5e5e5; } .doc-sig-line{ border-top:1px solid #111;padding-top:10px; font-size:.73rem;color:#777;letter-spacing:.2px; } .doc-footer{display:none} /* ── ADMIN ── */ .admin-block{margin-bottom:16px} .admin-block h3{font-size:.6875rem;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--divider)} .settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} /* ══════════════════════════════════ MOBILE ≤ 768px ══════════════════════════════════ */ @media(max-width:768px){ #admin-app{display:flex;flex-direction:column;height:100dvh} .layout-wrapper{flex-direction:column;flex:1;min-height:0} .mobile-header{display:flex} .main-content{flex:1;min-height:0;height:0;overflow-y:scroll;overflow-x:scroll;padding:16px 16px calc(var(--bottom-nav-h,60px) + 16px);-webkit-overflow-scrolling:touch} .sidebar{position:fixed!important;left:0;top:0;height:100dvh!important;transform:translateX(-100%);z-index:60;width:82vw;max-width:280px;box-shadow:0 8px 24px rgba(0,0,0,.2);overflow-y:scroll!important;-webkit-overflow-scrolling:touch} .sidebar.open{transform:translateX(0)} .bottom-nav{display:flex} h1{font-size:1.125rem;margin-bottom:12px} .card{padding:12px} .table-wrap.has-mlist{display:none} .m-list{display:block} .input-group{min-width:100%!important;width:100%} .form-row{flex-direction:column;gap:10px} .settings-grid{grid-template-columns:1fr!important} .pricing-grid{grid-template-columns:1fr!important} .modal-overlay{align-items:flex-end;padding:0} .modal,.modal-wide{border-radius:16px 16px 0 0;max-height:90dvh;padding:12px 16px 28px} .modal-footer{flex-direction:column} .modal-footer .btn{width:100%} .doc-paper{padding:20px 16px} .doc-letterhead{flex-direction:column;gap:14px;padding-bottom:20px} .doc-type-label{text-align:left;letter-spacing:2px;font-size:1.3rem} .doc-ref-block{text-align:left} .doc-parties{grid-template-columns:1fr} .doc-party:first-child{border-right:none;padding-right:0;border-bottom:1px solid #e5e5e5} .doc-party:last-child{padding-left:0} .doc-bank-grid{grid-template-columns:1fr} .doc-sig-row{grid-template-columns:1fr;gap:20px} .doc-totals-wrap{justify-content:stretch} .doc-totals-box{min-width:0!important;width:100%} .qe-parties{grid-template-columns:1fr} .qe-notes-row{grid-template-columns:1fr} .qe-paper{min-width:640px} .qe-totals{justify-content:stretch} .qe-totals-box{min-width:0!important;width:100%} .quot-card-actions .btn{flex:1} .quot-card-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:4px!important} .quot-card-actions .btn{font-size:11px!important;height:30px!important;padding:0 4px!important;width:100%!important;min-width:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #doc-view>.no-print{flex-wrap:wrap;gap:6px} #doc-view>.no-print .btn{flex:1;min-width:calc(50% - 4px)} .fin-cat-grid{grid-template-columns:repeat(2,1fr)!important} .fin-method-chips{gap:6px} .txn-type-toggle{width:100%} .txn-type-btn{flex:1} #txn-filter-type,#txn-filter-month{width:100%!important} #dash-kpi{grid-template-columns:1fr 1fr!important} #dash-stats{grid-template-columns:1fr!important} .adm-cats-inner{grid-template-columns:1fr!important} .sidebar-show-btn{display:none!important} .sidebar-inner-toggle{display:none!important} .m-card-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:4px!important} .m-card-actions .btn{font-size:11px!important;height:30px!important;padding:0 4px!important;width:100%!important;min-width:0!important} .m-card > div[style*="display:flex"][style*="margin-top:8px"]{display:grid!important;grid-template-columns:1fr 1fr!important;gap:4px!important} .m-card > div[style*="display:flex"][style*="margin-top:8px"] .btn{font-size:11px!important;height:28px!important;padding:0 4px!important;width:100%!important;min-width:0!important} } @media(max-width:480px){ .main-content{padding:12px 12px calc(var(--bottom-nav-h) + 12px)} .prog-cat-section [style*="grid-template-columns"]{grid-template-columns:repeat(3,1fr)!important} #showcase-grid{grid-template-columns:repeat(1,1fr)!important} #dash-kpi{grid-template-columns:1fr!important} .fin-cat-grid{grid-template-columns:repeat(2,1fr)!important} } @media(max-width:380px){.quot-card-actions .btn{flex-basis:100%}} /* ── PHOTO UPLOAD ── */ .photo-upload-zone{border:2px dashed var(--border);border-radius:8px;padding:20px;text-align:center;cursor:pointer;transition:var(--transition);position:relative;background:var(--bg)} .photo-upload-zone:hover,.photo-upload-zone.drag-over{border-color:var(--primary);background:var(--primary-light)} .photo-upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%} .photo-upload-zone .upload-icon{font-size:2rem;margin-bottom:6px;line-height:1} .photo-upload-zone .upload-text{font-size:.85rem;color:var(--text-muted)} .photo-upload-zone .upload-hint{font-size:.75rem;color:var(--text-muted);margin-top:4px;opacity:.7} .photo-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;margin-top:10px} .photo-thumb{position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden;background:var(--bg);border:1px solid var(--border)} .photo-thumb img{width:100%;height:100%;object-fit:cover;display:block} .photo-thumb .thumb-del{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.55);color:white;border:none;border-radius:50%;width:22px;height:22px;font-size:.75rem;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1} .photo-thumb .thumb-del:hover{background:var(--danger)} .photo-thumb.uploading::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.65);display:flex;align-items:center;justify-content:center} .photo-converting{font-size:.78rem;color:var(--primary);margin-top:6px;display:none} /* ── LIGHTBOX ── */ .lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:2000;align-items:center;justify-content:center;padding:20px;flex-direction:column;gap:14px} .lightbox.open{display:flex} .lightbox img{max-width:100%;max-height:80vh;border-radius:8px;object-fit:contain;box-shadow:0 8px 40px rgba(0,0,0,.6)} .lightbox-caption{color:white;font-size:.9rem;font-weight:500;text-align:center} .lightbox-close{position:fixed;top:16px;right:16px;background:rgba(255,255,255,.15);border:none;color:white;width:40px;height:40px;border-radius:50%;font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition)} .lightbox-close:hover{background:rgba(255,255,255,.3)} /* Clickable product name in doc */ .doc-item-name{cursor:pointer;color:inherit;text-decoration:underline dotted;text-underline-offset:2px;text-decoration-color:#ccc} .doc-item-name:hover{text-decoration-color:var(--primary)} .print-only{display:none} /* ── ADMIN CATEGORY / METHOD MANAGEMENT ── */ .adm-cat-row{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--radius-xs);border:1px solid var(--border);margin-bottom:4px;background:#FFFFFF} .adm-cat-name{flex:1;font-size:.875rem;color:var(--text-sub);font-weight:400;letter-spacing:.2px} .adm-cat-edit-input{flex:1;border:none;border-bottom:2px solid var(--primary);font-size:.875rem;font-family:var(--font);color:var(--text-main);background:transparent;outline:none;padding:2px 4px} .adm-method-chip{display:inline-flex;align-items:center;gap:6px;padding:0 12px;height:32px;border-radius:16px;border:1px solid var(--border);background:#FFFFFF;font-size:.8125rem;font-weight:500;color:var(--text-main);letter-spacing:.2px} .adm-chip-del{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:.9rem;line-height:1;padding:0;transition:color .15s} .adm-chip-del:hover{color:var(--danger)} /* ── SEARCH BAR - Google pill style ── */ .page-search{ width:100%;padding:10px 16px 10px 42px;height:44px; border:1px solid var(--border);border-radius:var(--radius-pill); font-size:.875rem;font-family:var(--font);outline:none; background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239AA0A6' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 14px center; transition:box-shadow .2s,border .15s;color:var(--text-main);margin-bottom:16px;letter-spacing:.2px; } .page-search:hover{box-shadow:0 1px 6px rgba(32,33,36,.28);border-color:var(--border)} .page-search:focus{box-shadow:0 1px 6px rgba(32,33,36,.28);border:1px solid transparent;outline:none} .page-search::placeholder{color:var(--text-placeholder)} /* Empty state */ .empty-state{ display:flex;flex-direction:column;align-items:center;justify-content:center; padding:56px 24px;text-align:center; } .empty-state-icon{font-size:2.5rem;margin-bottom:16px;opacity:.35} .empty-state-title{font-size:1rem;font-weight:500;color:var(--text-main);margin-bottom:8px;letter-spacing:.1px} .empty-state-sub{font-size:.875rem;color:var(--text-muted);margin-bottom:20px;max-width:280px;line-height:1.6;letter-spacing:.2px} /* Connection status dot */ .conn-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;flex-shrink:0} .conn-dot.online{background:var(--success)} .conn-dot.offline{background:var(--danger)} .conn-dot.syncing{background:var(--warning);animation:pulse-dot 1s infinite} @keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.3}} @media print{.doc-item-name{display:none!important}.print-only{display:inline!important}} .doc-item-name:hover{text-decoration:underline solid} .doc-item-no-photo{cursor:default;color:var(--text-main);text-decoration:none} /* Catalog thumbnail */ .item-thumb{width:36px;height:36px;border-radius:8px;object-fit:cover;border:1px solid var(--border);flex-shrink:0} .item-thumb-placeholder{width:36px;height:36px;border-radius:8px;background:var(--bg);border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0} /* ── PRODUCT CATALOGUE SHEET ── */ .catalogue-section{margin-top:32px} .catalogue-btn-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap} .catalogue-page{ background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:28px 24px; margin-bottom:18px; /* landscape via transform trick for screen preview */ } .catalogue-page-header{ display:flex;justify-content:space-between;align-items:center; padding-bottom:12px;margin-bottom:18px; border-bottom:2px solid var(--text-main); font-size:.8rem;color:var(--text-muted); } .catalogue-page-header .cat-title{font-size:1rem;font-weight:700;color:var(--text-main);letter-spacing:-.3px} .catalogue-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .cat-item{ border:1px solid var(--border); border-radius:8px; overflow:hidden; display:flex;flex-direction:column; background:var(--bg); } .cat-item-photo{ width:100%;aspect-ratio:1; background:#f0f0f0; display:flex;align-items:center;justify-content:center; overflow:hidden;position:relative; } .cat-item-photo img{width:100%;height:100%;object-fit:cover;display:block} .cat-item-photo .cat-no-photo{ font-size:2.5rem;opacity:.25; } .cat-item-info{ padding:9px 10px; background:var(--surface); flex:1; } .cat-item-num{ font-size:.65rem;color:var(--text-muted);font-weight:600; text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px; } .cat-item-name{ font-size:.82rem;font-weight:600;color:var(--text-main); line-height:1.3;margin-bottom:4px; /* clamp to 2 lines */ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .cat-item-vars{ font-size:.72rem;color:var(--text-muted); line-height:1.4; } .cat-item-qty{ font-size:.72rem;color:var(--primary);font-weight:600;margin-top:3px; } .catalogue-loading{ text-align:center;padding:40px;color:var(--text-muted);font-size:.88rem; } .catalogue-empty{ text-align:center;padding:32px;color:var(--text-muted);font-size:.85rem; border:1px dashed var(--border);border-radius:8px; } /* ── SIDEBAR COLLAPSE ── */ .sidebar-inner-toggle{ margin-left:auto;background:none;border:none; width:40px;height:40px;border-radius:50%; display:flex;align-items:center;justify-content:center; cursor:pointer;color:var(--text-muted);transition:background .2s;flex-shrink:0; } .sidebar-inner-toggle:hover{background:rgba(32,33,36,.08)} /* Sidebar hides; main content slides left to fill full width */ .sidebar{transition:width .28s cubic-bezier(.4,0,.2,1),transform .28s cubic-bezier(.4,0,.2,1);overflow-y:scroll;overflow-x:hidden} .layout-wrapper.sidebar-collapsed .sidebar{width:0;transform:translateX(-100%);pointer-events:none;border-right:none} .layout-wrapper.sidebar-collapsed .main-content{margin-left:0} .sidebar-show-btn{ position:fixed;top:12px;left:12px;z-index:55; background:#FFFFFF;border:1px solid var(--border); border-radius:50%;width:40px;height:40px; display:none;align-items:center;justify-content:center; cursor:pointer;box-shadow:var(--shadow-xs);transition:background .2s; color:var(--text-muted); } .sidebar-show-btn:hover{background:var(--bg-hover)} .sidebar-collapsed-show{display:flex!important} @media(max-width:768px){ .sidebar-inner-toggle{display:none} .sidebar-show-btn{display:none!important} } /* ── LANG TOGGLE ── */ .lang-toggle-wrap{padding:8px 12px;border-top:1px solid var(--divider);margin-top:auto;flex-shrink:0} .lang-toggle{display:flex;align-items:center;background:var(--bg);border-radius:var(--radius-xs);padding:3px;gap:2px;width:100%;border:1px solid var(--border)} .lang-btn{flex:1;padding:5px 0;border:none;border-radius:var(--radius-xs);cursor:pointer;font-size:.75rem;font-weight:500;font-family:var(--font);transition:background .15s;background:transparent;color:var(--text-muted);letter-spacing:.3px;-webkit-tap-highlight-color:transparent} .lang-btn.active{background:var(--primary);color:#FFFFFF} .lang-btn:not(.active):hover{background:var(--bg-hover);color:var(--text-main)} /* ── SECTION DIVIDER ROW ── */ .qe-section-row td{padding:10px 8px 4px!important;border-bottom:none!important} .qe-section-row:hover td{background:transparent!important} .qe-section-input{border:none;border-bottom:2px solid #d0a020;background:transparent;font-family:inherit;font-size:.88rem;font-weight:700;color:#7a5a00;width:100%;padding:4px 6px;outline:none;letter-spacing:.3px} .qe-section-input::placeholder{color:#c0a050;font-weight:400} /* ── VARIATION SELECTOR IN ROW ── */ .qm-var-selector{ display:flex;flex-wrap:wrap;gap:5px; padding:5px 6px 4px; border-top:1px solid #eef1f7; margin-top:2px; background:#f8f9ff; border-radius:0 0 5px 5px; } .qm-var-group{display:flex;align-items:center;gap:4px;flex-wrap:wrap} .qm-var-label{font-size:.65rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px;white-space:nowrap} /* Variation chip in variation panel */ .var-chip-sel{display:inline-flex;align-items:center;gap:3px;background:var(--bg);color:var(--text-muted);padding:3px 9px;border-radius:100px;font-size:.73rem;font-weight:500;cursor:pointer;border:1px solid var(--border);transition:var(--transition);white-space:nowrap} .var-chip-sel:hover{border-color:var(--primary);color:var(--primary)} .var-chip-sel.active{background:var(--primary);color:white;border-color:var(--primary)} .qe-var-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;padding:0 6px 4px} /* ── NEW ITEM POPUP ── */ .new-item-popup{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1200;align-items:center;justify-content:center;padding:16px} .new-item-popup.open{display:flex;animation:fadeUp .2s ease} .new-item-box{background:var(--surface);border-radius:8px;width:100%;max-width:520px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.25)} .ni-header{padding:18px 20px 14px;border-bottom:1px solid var(--border)} .ni-header h2{margin:0 0 4px;font-size:1rem} .ni-header p{font-size:.82rem;color:var(--text-muted);margin:0} .ni-body{overflow-y:auto;padding:12px 16px;flex:1} .ni-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:8px;border:1px solid var(--border);margin-bottom:8px;background:var(--surface)} .ni-name{flex:1;font-size:.88rem;font-weight:500;color:var(--text-main)} .ni-btns{display:flex;gap:6px;flex-shrink:0} .ni-btn{padding:5px 10px;border:none;border-radius:5px;cursor:pointer;font-size:.78rem;font-weight:600;font-family:inherit;transition:var(--transition)} .ni-btn.prod{background:#dbeafe;color:#1d4ed8}.ni-btn.prod:hover{background:#bfdbfe} .ni-btn.svc{background:#dcfce7;color:#15803d}.ni-btn.svc:hover{background:#bbf7d0} .ni-btn.skip{background:#f1f3f4;color:var(--text-muted)}.ni-btn.skip:hover{background:#e2e5ec} .ni-footer{padding:12px 16px;border-top:1px solid var(--border);display:flex;justify-content:flex-end} /* ══════════════════════════════════ FINANCIALS MODULE - Material Design ══════════════════════════════════ */ .txn-type-toggle{display:flex;gap:8px;width:fit-content} .txn-type-btn{ padding:0 20px;height:36px;border:1px solid var(--border); border-radius:var(--radius-xs);cursor:pointer; font-family:var(--font);font-size:.875rem;font-weight:500;letter-spacing:.3px; transition:background .1s,color .1s;background:#FFFFFF; color:var(--text-muted);-webkit-tap-highlight-color:transparent; } .txn-type-btn.in.active{background:var(--success-bg);color:var(--success);border-color:var(--success)} .txn-type-btn.out.active{background:var(--danger-bg);color:var(--danger);border-color:var(--danger)} .txn-type-btn:not(.active):hover{background:var(--bg-hover)} .fin-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-top:8px} .fin-cat-chip{ padding:8px 10px;border:1px solid var(--border); border-radius:var(--radius-xs);cursor:pointer;text-align:center; font-size:.8125rem;font-weight:400;color:var(--text-muted); transition:background .15s,border .15s;background:#FFFFFF; -webkit-tap-highlight-color:transparent;letter-spacing:.2px; } .fin-cat-chip:hover{background:var(--bg-hover);border-color:var(--border-strong)} .fin-cat-chip.active{border-color:var(--primary);background:var(--primary-light);color:var(--primary);font-weight:500} .fin-cat-chip .cat-emoji{font-size:1rem;display:block;margin-bottom:2px} .fin-method-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .fin-method-chip{ padding:0 16px;height:32px;border:1px solid var(--border); border-radius:16px;cursor:pointer;font-size:.8125rem;font-weight:500; color:var(--text-main);transition:all .15s;background:#FFFFFF; display:inline-flex;align-items:center;letter-spacing:.2px; -webkit-tap-highlight-color:transparent; } .fin-method-chip:hover{background:var(--bg-hover)} .fin-method-chip.active{border-color:var(--primary);background:var(--primary-light);color:var(--primary)} .inv-select-panel{background:var(--bg);border:1px solid var(--border);border-radius:8px;max-height:220px;overflow-y:auto;margin-top:8px} .inv-select-row{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;transition:background .15s;border-bottom:1px solid var(--divider)} .inv-select-row:last-child{border-bottom:none} .inv-select-row:hover{background:#FFFFFF} .inv-select-row.selected{background:var(--bg-selected)} .inv-select-ref{font-weight:500;font-size:.875rem;color:var(--text-main);flex:1;letter-spacing:.2px} .inv-select-meta{font-size:.75rem;color:var(--text-muted)} .inv-select-amt{font-weight:500;font-size:.875rem;color:var(--primary);white-space:nowrap} .inv-status-badge{font-size:.6875rem;font-weight:500;padding:2px 8px;border-radius:12px;border:1px solid;white-space:nowrap} .inv-status-unpaid{background:var(--warning-bg);color:#B06000;border-color:#F9AB00} .inv-status-partial{background:#FFF3E0;color:#E65100;border-color:#FB8C00} .inv-status-paid{background:var(--success-bg);color:var(--success-text);border-color:var(--success)} .inv-status-over{background:#F3E5F5;color:#7B1FA2;border-color:#AB47BC} .txn-row{display:flex;align-items:center;gap:16px;padding:12px 16px;border-bottom:1px solid var(--divider);transition:background .15s;cursor:pointer} .txn-row:last-child{border-bottom:none} .txn-row:hover{background:var(--bg-hover)} .txn-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0} .txn-icon.in{background:var(--success-bg)} .txn-icon.out{background:var(--danger-bg)} .txn-body{flex:1;min-width:0} .txn-desc{font-weight:500;font-size:.875rem;color:var(--text-main);letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .txn-meta{font-size:.75rem;color:var(--text-muted);margin-top:2px;letter-spacing:.2px} .txn-amount{font-weight:500;font-size:.875rem;white-space:nowrap;letter-spacing:.1px} .txn-amount.in{color:var(--success-text)} .txn-amount.out{color:var(--danger)} .fin-search{ width:100%;padding:10px 16px 10px 42px;height:44px; border:1px solid var(--border);border-radius:var(--radius-pill); font-size:.875rem;font-family:var(--font);outline:none; background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239AA0A6' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 14px center; transition:box-shadow .2s,border .15s;color:var(--text-main);letter-spacing:.2px; } .fin-search:hover{box-shadow:0 1px 6px rgba(32,33,36,.28);border-color:var(--border)} .fin-search:focus{box-shadow:0 1px 6px rgba(32,33,36,.28);border-color:transparent;border:1px solid transparent} .fin-search::placeholder{color:var(--text-placeholder)} .pay-badge{font-size:.6875rem;font-weight:500;padding:2px 8px;border-radius:12px;border:1px solid;white-space:nowrap;display:inline-flex;align-items:center;letter-spacing:.2px} .pay-badge.unpaid{background:var(--warning-bg);color:#B06000;border-color:#F9AB00} .pay-badge.partial{background:#FFF3E0;color:#E65100;border-color:#FB8C00} .pay-badge.paid{background:var(--success-bg);color:var(--success-text);border-color:var(--success)} .pay-badge.over{background:#F3E5F5;color:#7B1FA2;border-color:#AB47BC} /* ── DASHBOARD CHART - Material ── */ .dash-period-btn{ padding:0 16px;height:32px;border:none;background:transparent; font-family:var(--font);font-size:.8125rem;font-weight:500;letter-spacing:.3px; color:var(--text-muted);cursor:pointer;transition:background .1s; -webkit-tap-highlight-color:transparent; } .dash-period-btn.active{background:var(--primary);color:#FFFFFF} .dash-period-btn:not(.active):hover{background:var(--bg-hover);color:var(--text-main)} .dash-kpi-card{ background:#FFFFFF;border:1px solid var(--border); border-radius:8px;padding:16px; } .dash-kpi-label{font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);margin-bottom:6px} .dash-kpi-value{font-size:1.375rem;font-weight:400;letter-spacing:.1px;color:var(--text-main);font-family:var(--font)} .series-toggle-chip{ display:inline-flex;align-items:center;gap:6px; padding:0 12px;height:32px;border-radius:16px;border:1px solid; cursor:pointer;font-size:.8125rem;font-weight:500;letter-spacing:.2px; transition:all .15s;font-family:var(--font); -webkit-tap-highlight-color:transparent; } .series-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} @media print{ /* Catalogue section: landscape */ .catalogue-section{ /* Force landscape for subsequent pages */ } .catalogue-page{ page-break-inside:avoid; page-break-after:always; border:none;border-radius:0;padding:18px 14px; margin:0; /* landscape */ width:277mm; min-height:185mm; } @page{size:A4 portrait;margin:12mm} @page catalogue{size:A4 landscape;margin:10mm} .catalogue-page{page:catalogue} .cat-item-photo{aspect-ratio:1} .cat-item-name{-webkit-line-clamp:2} .catalogue-btn-row{display:none!important} } @media print{ .sidebar,.mobile-header,.bottom-nav,.sidebar-overlay,.no-print,#system-bar{display:none!important} .main-content{padding:0;overflow:visible;height:auto;min-height:0} .page{display:none!important} .page.active{display:block!important;overflow:visible!important;height:auto!important;min-height:0!important} #admin-app,.layout-wrapper,.main-content{overflow:visible!important;height:auto!important;min-height:0!important} body{height:auto;overflow:visible;display:block;font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif} .layout-wrapper{display:block} .page.active{animation:none} .doc-paper{border:none;border-radius:0;padding:24px 32px;max-width:100%;box-shadow:none} .doc-totals-wrap{margin-bottom:24px!important} .doc-bank-section{margin-bottom:16px!important;padding-top:14px!important} .doc-notes{line-height:1.5!important} .doc-items-table td,.doc-items-table th{font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;white-space:nowrap} .doc-items-table td:nth-child(2){white-space:normal} /* Keep Bill To / Project side by side on the printed page even if a narrower on-screen layout would normally stack them. */ .doc-parties{grid-template-columns:1fr 1fr!important} /* Keep the totals box and terms/notes box intact rather than letting the browser slice them across a page boundary. */ .doc-totals-wrap{break-inside:avoid;page-break-inside:avoid} /* A bordered box that gets split across a page boundary gets its border re-drawn on both fragments, which looks like a big gap of wasted space before the "box" closes early. Drop the box decoration for print so the text just flows continuously. */ .doc-notes{border:none;padding:0} } /* ══════════════════════════════════════════════════════ PRO MAX UI - Sil Studio Premium Visual System ══════════════════════════════════════════════════════ */ /* ── BODY & LAYOUT ── */ body{background:var(--bg);font-family:var(--font)} /* ── SIDEBAR - sleek premium panel ── */ .sidebar{ width:260px; background:#FFFFFF; border-right:1px solid var(--border); box-shadow:1px 0 0 var(--border); } .sidebar-logo{ height:68px;padding:0 14px 0 20px; border-bottom:1px solid var(--border); background:#FFFFFF; } .logo-mark{ width:36px;height:36px;border-radius:6px; background:transparent; display:flex;align-items:center;justify-content:center; flex-shrink:0; } .logo-mark svg{display:none} /* ── MATERIAL SYMBOL NAV ICONS ── */ .material-symbols-outlined.nav-icon{ font-size:20px;width:20px;height:20px; display:inline-flex;align-items:center;justify-content:center; stroke:none;opacity:.85; font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 20; transition:font-variation-settings .15s,opacity .15s; } .nav-links button.active .material-symbols-outlined.nav-icon{ opacity:1;font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 20; } .bottom-nav-item .material-symbols-outlined{ font-size:24px;opacity:.55;transition:opacity .2s,font-variation-settings .2s; } .bottom-nav-item.active .material-symbols-outlined{ opacity:1;color:var(--primary);font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24; } .logo-text{ font-size:1.0625rem;font-weight:600; color:var(--text-main);letter-spacing:-.2px; font-family:var(--font);line-height:1.15; } .logo-sub{ font-size:.6875rem;color:var(--text-muted); margin-top:1px;letter-spacing:.2px;font-weight:400; } .sidebar-inner-toggle{ color:var(--text-muted);opacity:.5;margin-left:auto; } .sidebar-inner-toggle:hover{opacity:1;background:var(--bg-hover)} /* Nav section headers */ .nav-section{ padding:20px 20px 6px; font-size:.625rem;font-weight:600; color:var(--text-placeholder);letter-spacing:1.2px;text-transform:uppercase; } .nav-links{padding:0 10px 8px} .nav-links button{ height:44px;padding:0 12px;gap:12px; font-size:.8125rem;font-weight:600;letter-spacing:.01em; border-radius:var(--radius); color:var(--text-sub); position:relative; } .nav-links button:hover{ background:var(--bg-hover);color:var(--text-main); } .nav-links button.active{ background:var(--bg-selected);color:#0e1d25;font-weight:700; } .nav-icon{ width:18px;height:18px;flex-shrink:0; stroke:currentColor;opacity:.7;transition:opacity .15s; } .nav-links button.active .nav-icon{opacity:1} .nav-links button:hover .nav-icon{opacity:.9} /* Lang toggle */ .lang-toggle-wrap{padding:10px 14px 18px} .lang-toggle{ background:var(--bg);border-radius:var(--radius-xs); border:1px solid var(--border);overflow:hidden; } .lang-btn{ font-size:.8125rem;font-weight:500; font-family:var(--font);letter-spacing:.2px; } .lang-btn.active{background:var(--primary);color:#fff} /* ── MOBILE HEADER ── */ .mobile-header{ background:#FFFFFF; border-bottom:1px solid var(--border); box-shadow:none; } .mobile-header-title{font-weight:600;font-size:.9375rem;letter-spacing:-.1px} /* ── MAIN CONTENT ── */ .main-content{padding:0;background:var(--bg)} .content-container{max-width:1100px;margin:0 auto;padding:28px 28px 40px} /* ── PAGE HEADER ── */ .page-header{ display:flex;align-items:center;justify-content:space-between; flex-wrap:wrap;gap:12px; padding:0 0 20px; border-bottom:1px solid var(--border); margin-bottom:28px; } .page-header h1{ margin:0;font-size:1.5rem;font-weight:600; font-family:var(--font);letter-spacing:-.3px;color:var(--text-main); } .page-header-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap} /* ── CARDS ── */ .card{ border-radius:var(--radius); border:1px solid var(--border); background:#FFFFFF; padding:22px;margin-bottom:16px; box-shadow:var(--shadow-xs); transition:box-shadow .2s; } .card:hover{box-shadow:var(--shadow-sm)} /* ── FORMS ── */ .form-row{gap:14px} .input-group{gap:6px} label{ font-size:.6875rem;font-weight:600; color:var(--text-muted); text-transform:uppercase;letter-spacing:.7px; } .form-input{ font-size:.9375rem;height:42px; border:1.5px solid var(--border);border-radius:var(--radius-xs); padding:0 14px; background:#FFFFFF; transition:border-color .15s,box-shadow .15s; } .form-input:hover{border-color:var(--border-strong)} .form-input:focus{ border-color:var(--primary); box-shadow:0 0 0 2px rgba(0,100,224,.2); padding:0 14px; } textarea.form-input{padding:11px 14px;height:auto} /* ── BUTTONS ── */ .btn{ font-size:.875rem;font-weight:500; font-family:var(--font);letter-spacing:.1px; border-radius:var(--radius-xs); height:38px;padding:0 20px; transition:all .15s cubic-bezier(.4,0,.2,1); } .btn:active{transform:scale(.98);opacity:.95} .btn-primary{ background:var(--primary);color:#FFFFFF; } .btn-primary:hover{ background:var(--primary-hover); box-shadow:var(--shadow-sm); } .btn-outline{ border:1.5px solid var(--border);color:var(--primary); background:#FFFFFF; } .btn-outline:hover{ background:var(--primary-light);border-color:var(--primary); } .btn-success{ background:var(--success);color:#fff; box-shadow:0 1px 4px rgba(5,150,105,.3); } .btn-success:hover{background:#047857;box-shadow:0 4px 10px rgba(5,150,105,.35)} .btn-sm{height:34px;padding:0 16px;font-size:.8125rem} .btn-xs{height:28px;padding:0 12px;font-size:.75rem} /* ── TABLES ── */ .table-wrap{ border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow-xs); overflow:hidden; background:#FFFFFF; } th{ background:#FAFBFF; font-size:.6875rem;font-weight:600;letter-spacing:.8px; padding:11px 16px; color:var(--text-muted); border-bottom:1px solid var(--border); } th:hover{color:var(--primary);background:#F5F6FF} td{ padding:13px 16px; font-size:.875rem; letter-spacing:.05px; color:var(--text-sub); } tbody tr{transition:background .12s} tbody tr:hover{background:#FAFBFF} tbody tr:hover td{color:var(--text-main)} table thead tr th:first-child{border-radius:var(--radius) 0 0 0} table thead tr th:last-child{border-radius:0 var(--radius) 0 0} /* ── MODAL - bottom sheet ── */ .modal-overlay{ background:rgba(15,15,30,.5); backdrop-filter:blur(4px); } .modal{ border-radius:20px 20px 0 0; background:#FFFFFF; box-shadow:0 -8px 40px rgba(15,15,30,.15); padding:0;overflow:hidden;display:flex;flex-direction:column; } .modal-handle{ width:40px;height:4px; background:var(--border);border-radius:2px; margin:14px auto 0;flex-shrink:0; } .modal-header{ padding:18px 22px 16px; border-bottom:1px solid var(--divider); flex-shrink:0; } .modal-header h2{ font-size:1.0625rem;font-weight:600; letter-spacing:-.1px;font-family:var(--font); } .modal > *:not(.modal-handle):not(.modal-header):not(.modal-footer){ overflow-y:auto;padding:18px 22px;flex:1; } .modal-footer{ padding:14px 22px 20px; border-top:1px solid var(--divider); background:#FFFFFF; flex-shrink:0; justify-content:flex-end;gap:8px;margin-top:0; } .modal-footer .btn{flex:none} .modal-close{ width:36px;height:36px;border-radius:50%; color:var(--text-muted);font-size:1rem; } .modal-close:hover{background:var(--bg-hover)} /* ── DASHBOARD KPI CARDS ── */ .dash-kpi-card{ border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px; background:#FFFFFF; position:relative;overflow:hidden; box-shadow:var(--shadow-xs); transition:box-shadow .2s,transform .2s; } .dash-kpi-card:hover{box-shadow:var(--shadow-sm)} .dash-kpi-card::after{ content:'';position:absolute;top:0;left:0;right:0; height:3px;border-radius:var(--radius) var(--radius) 0 0; } .dash-kpi-card:first-child::after{background:var(--success)} .dash-kpi-card:nth-child(2)::after{background:var(--danger)} .dash-kpi-card:last-child::after{background:var(--primary)} .dash-kpi-label{ font-size:.6875rem;font-weight:600; text-transform:uppercase;letter-spacing:.9px; color:var(--text-muted);margin-bottom:10px; } .dash-kpi-value{ font-size:1.625rem;font-weight:600; font-family:var(--font); letter-spacing:-.5px;color:var(--text-main); line-height:1.15; } #dash-chart-card{ border-radius:var(--radius);border:1px solid var(--border); background:#FFFFFF;padding:22px 22px 18px; box-shadow:var(--shadow-xs);margin-top:0; } /* ── QUOTATION CARDS ── */ .quot-card{ background:#FFFFFF; border-bottom:1px solid var(--divider); transition:background .12s; } .quot-card:hover{background:#FAFBFF} .quot-card-header{padding:16px 18px 12px} .quot-ref{ font-size:.9375rem;font-weight:600; color:var(--text-main);letter-spacing:-.1px; } .quot-date{font-size:.75rem;color:var(--text-muted);margin-top:2px} .quot-total{ font-weight:700;font-size:1rem;color:var(--primary); white-space:nowrap;letter-spacing:-.2px; } .quot-card-actions{ padding:10px 18px 14px;margin-top:0; background:#F9FAFB; display:flex;gap:6px; border-top:1px solid var(--divider); } .quot-card-actions .btn{flex:1;font-size:.8125rem;height:33px} /* ── BADGES ── */ .badge{ font-size:.6875rem;font-weight:600;letter-spacing:.2px; padding:3px 10px;border-radius:100px; } .badge-blue{background:var(--primary-light);color:var(--primary);border-color:#AFC6FF} .badge-green{background:var(--success-bg);color:var(--success-text);border-color:#B1FF9C} .badge-gray{background:var(--bg);color:var(--text-muted);border-color:var(--border)} /* Pay badges */ .pay-badge,.inv-status-badge{ font-size:.6875rem;font-weight:600; padding:3px 10px;border-radius:100px;letter-spacing:.2px;border:1px solid; } .inv-linked{ font-size:.6875rem;font-weight:600; padding:3px 10px;border-radius:100px;border:1px solid var(--success); background:var(--success-bg);color:var(--success-text); } /* ── FINANCIAL ── */ .txn-type-btn{ border-radius:var(--radius-xs);height:38px; font-family:var(--font);font-size:.875rem;font-weight:500; } .fin-cat-chip{border-radius:var(--radius-xs);font-family:var(--font)} .fin-method-chip{height:34px;font-family:var(--font);border-radius:100px} /* ── TRANSACTION ROWS ── */ .txn-row{padding:14px 18px;gap:14px} .txn-icon{ width:42px;height:42px;border-radius:50%; box-shadow:var(--shadow-xs); } .txn-desc{font-size:.9375rem;font-weight:500;letter-spacing:-.05px} .txn-meta{font-size:.75rem;color:var(--text-muted);margin-top:2px} .txn-amount{font-size:.9375rem;font-weight:600;letter-spacing:-.1px} .txn-amount.in{color:var(--success)} .txn-amount.out{color:var(--danger)} /* ── ADMIN SECTION ── */ .admin-block{margin-bottom:24px} .admin-block h3{ font-size:.6875rem;font-weight:600; color:var(--text-muted);text-transform:uppercase; letter-spacing:.9px;margin-bottom:16px; padding-bottom:10px;border-bottom:1px solid var(--divider); } /* ── CONNECTION STATUS ── */ #dash-status-mini{ font-size:.75rem;color:var(--text-muted); display:flex;align-items:center;gap:6px; } /* ── EMPTY STATE ── */ .empty-state-icon{font-size:2.5rem;margin-bottom:16px;opacity:.25} .empty-state-title{ font-size:1rem;font-weight:600;letter-spacing:-.1px; color:var(--text-main); } .empty-state-sub{font-size:.875rem;line-height:1.6;color:var(--text-muted)} /* ── PAGE SEARCH ── */ .page-search{ height:46px;font-size:.9375rem; border:1.5px solid var(--border);border-radius:100px; background:#FFFFFF; transition:border-color .15s,box-shadow .15s; } .page-search:hover{ border-color:var(--border-strong); box-shadow:0 2px 8px rgba(16,24,40,.06); } .page-search:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(79,70,229,.1); } /* ── STATUS BAR ── */ #system-bar{ font-size:.875rem;font-weight:500; letter-spacing:.1px;padding:13px 20px; } /* ── MOBILE CARDS ── */ .m-card{padding:15px 18px} .m-card-title{ font-size:.9375rem;font-weight:600;letter-spacing:-.1px; } .m-card-sub{font-size:.8125rem;color:var(--text-muted)} .m-list-wrap{ border-radius:var(--radius);overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-xs); background:#FFFFFF; } /* ── BOTTOM NAV ── */ .bottom-nav{ background:#FFFFFF; box-shadow:0 -1px 0 var(--border),0 -4px 16px rgba(16,24,40,.06); } .bottom-nav-item{ font-size:.625rem;font-family:var(--font); letter-spacing:.3px;font-weight:500; } .bottom-nav-item svg{opacity:.45;transition:opacity .2s} .bottom-nav-item.active svg{opacity:1;stroke:var(--primary)} /* ── QUOTATION EDITOR ── */ .qe-paper{ border-radius:var(--radius); border:1px solid var(--border); background:#FFFFFF; box-shadow:var(--shadow-sm); } .qe-cell-input:focus{ background:var(--bg-selected); box-shadow:inset 0 0 0 2px rgba(0,100,224,.25); border-radius:var(--radius-xs); } /* ── CATALOG PICKER ── */ .catalog-picker{ border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); } .cp-search:focus{ border-color:var(--primary); box-shadow:0 0 0 2px rgba(0,100,224,.2); } .cp-tree-item:hover{background:var(--primary-light)} /* ── SERIES PANEL ── */ #series-panel{ background:var(--bg); border-radius:var(--radius-xs); border:1px solid var(--border); padding:12px 16px; } /* ── PAGE ANIMATION ── */ .page.active{animation:gFadeIn .22s cubic-bezier(.4,0,.2,1)} @keyframes gFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} /* ── FOCUS RING ── */ :focus-visible{outline:2px solid var(--primary);outline-offset:2px} /* ── SCROLLBAR ── */ ::-webkit-scrollbar{width:6px;height:6px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:rgba(0,100,224,.18);border-radius:6px} ::-webkit-scrollbar-thumb:hover{background:rgba(0,100,224,.32)} /* Number input arrows */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{opacity:.5} /* ── ADMIN ROW ── */ .adm-cat-row{ border-radius:var(--radius-xs); transition:background .12s; } .adm-cat-row:hover{background:var(--bg)} /* ── AUTO BADGE ── */ .auto-badge{ border-radius:var(--radius-xs);padding:2px 7px; font-size:.625rem;letter-spacing:.5px;font-weight:600; } /* ── SORT ICONS ── */ .sort-icon{font-size:.625rem;opacity:.3} th.sort-asc .sort-icon,th.sort-desc .sort-icon{opacity:1;color:var(--primary)} /* ── CONN DOT ── */ .conn-dot.online{background:var(--success)} .conn-dot.offline{background:var(--danger)} /* ── CHIP / VARIATION COLOURS ── */ .variation-chip{background:var(--primary-light);color:var(--primary)} .var-chip-sel.active{background:var(--primary);border-color:var(--primary)} .var-chip-sel:hover{border-color:var(--primary);color:var(--primary)} /* ── SECTION INPUT (quotation sections) ── */ .qe-section-input{border-bottom-color:var(--primary);color:var(--primary-hover)} .qe-section-input::placeholder{color:#AFC6FF;font-weight:400} /* ── DASHBOARD PERIOD BUTTONS ── */ .dash-period-btn{font-family:var(--font);font-size:.8125rem;font-weight:500} .dash-period-btn.active{background:var(--primary);color:#FFFFFF} .dash-period-btn:not(.active):hover{background:var(--bg-hover);color:var(--text-main)} /* ── h1/h2/h3 overrides ── */ h1{font-size:1.5rem;font-weight:600;letter-spacing:-.2px} h2{font-size:1.0625rem;font-weight:600;letter-spacing:-.1px} h3{font-size:.6875rem;font-weight:600;letter-spacing:.8px;color:var(--text-muted);text-transform:uppercase} @media(max-width:768px){ .content-container{padding:18px 14px 88px} .page-header{padding:0 0 16px;margin-bottom:20px} .page-header h1{font-size:1.25rem} .dash-kpi-card{padding:16px 18px} .dash-kpi-value{font-size:1.375rem} .card{padding:18px;border-radius:var(--radius-sm)} } /* ═══════════════════════════════════ MOBILE-FIRST TOUCH OPTIMIZATIONS bigger touch targets, card-style editor ═══════════════════════════════════ */ @media(max-width:600px){ /* ── GLOBAL TOUCH TARGETS ── */ .btn{min-height:44px;padding:0 16px} .btn-xs,.btn-sm{min-height:36px;padding:0 12px} input.form-input,select.form-input,textarea.form-input{font-size:16px;min-height:44px} .qe-cell-input{font-size:16px!important;min-height:44px;padding:10px 8px!important} .form-input{font-size:16px} /* ── MODAL FULLSCREEN ON MOBILE ── */ .modal-overlay.open{align-items:flex-end;padding:0} #quot-modal .modal{ max-height:100dvh!important; height:100dvh!important; border-radius:16px 16px 0 0!important; width:100%!important; } #quot-modal .modal > *:not(.modal-handle):not(.modal-header):not(.modal-footer){ padding:10px 12px; } /* ── QUOTATION EDITOR: TABLE → CARDS ── */ .qe-table{min-width:auto!important;width:100%!important} .qe-table thead{display:none} .qe-table tbody,.qe-table tr,.qe-table td{display:block;width:100%!important} .qe-table tr.qm-row{ background:#f8fafe; border:1px solid var(--border); border-radius:12px; margin-bottom:10px; padding:10px 12px; position:relative; } .qe-table tr.qm-section-row td{padding:6px 4px!important} .qe-table td{ border-bottom:none!important; padding:3px 0!important; text-align:left!important } /* ── Unit, Qty, Price side by side ── */ .qe-table td:nth-child(3), .qe-table td:nth-child(4), .qe-table td:nth-child(5){ display:inline-block!important; width:32%!important; padding:4px 1% 4px 0!important; vertical-align:middle; } .qe-table td:nth-child(3)::before, .qe-table td:nth-child(4)::before, .qe-table td:nth-child(5)::before{ display:block; font-size:9px;font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px; } .qe-table td:nth-child(3)::before{content:'Unit'} .qe-table td:nth-child(4)::before{content:'Qty'} .qe-table td:nth-child(5)::before{content:'Price'} .qe-table td:nth-child(3) input, .qe-table td:nth-child(4) input, .qe-table td:nth-child(5) input{ width:100%!important;text-align:center!important;min-height:38px; } .hide-sm{display:block!important} .qe-table td .qm-num-cell{display:inline-block;width:24px;text-align:center;font-weight:700;color:var(--primary);margin-bottom:6px} .qe-table td:nth-child(2){padding:0 0 6px 0!important} .qe-table td:nth-child(2) input{width:100%} /* ── Amount display ── */ .qe-table td:nth-child(6){ display:inline-block!important;width:60%!important; padding:4px 0!important;text-align:left!important;font-size:14px!important; } .qe-table td:nth-child(6)::before{ content:'Amount';display:block; font-size:9px;font-weight:700;color:var(--text-muted); text-transform:uppercase;letter-spacing:.05em; } /* ── Action buttons ── */ .qe-table td:nth-child(7){ display:inline-block!important;width:36%!important; text-align:right!important;padding:4px 0!important;vertical-align:middle; } .qe-table td:nth-child(7) > div{flex-direction:row!important;gap:6px!important;justify-content:flex-end} .qe-table td:nth-child(7) button{ width:34px;height:34px;font-size:14px!important; display:inline-flex!important;align-items:center;justify-content:center; border-radius:8px;background:var(--bg);color:var(--text-muted);padding:0!important; } .qe-del-btn{color:var(--danger)!important;background:var(--danger-bg)!important} /* ── Variation selector inline ── */ .qm-var-selector{padding:4px 0;margin-top:4px} .var-chip-sel{padding:6px 12px;font-size:13px;min-height:32px} .qm-section-row td{padding:4px 0!important} .qe-section-input{font-size:14px;min-height:40px} .qe-add-row-btn{width:100%;justify-content:center;min-height:44px;font-size:14px;margin-top:4px} .qe-totals-box{padding:14px 12px} .qe-total-row{font-size:14px;padding:6px 0} .qe-tax-input{height:38px;font-size:14px;width:60px} .qe-letterhead{flex-direction:column;gap:8px;padding-bottom:10px;margin-bottom:12px} .qe-doc-type,.qe-ref-block{text-align:left} .qe-parties{grid-template-columns:1fr;gap:8px} .qe-notes-row{grid-template-columns:1fr} /* ── CATALOG PICKER FULLSCREEN ── */ .catalog-picker-overlay.open{padding:0} .catalog-picker{ max-width:100%!important; max-height:100dvh!important; height:100dvh;border-radius:0!important; } .cp-body{flex:1} .cp-tree-item{padding:14px 16px;font-size:16px;min-height:52px} .cp-tree-icon{width:36px;height:36px;font-size:18px} .cp-search{font-size:16px;padding:12px 12px 12px 38px;height:48px} .cp-close{font-size:22px;padding:6px 10px} #inv-type-picker-overlay>div{max-width:100%!important;margin:8px!important} #inv-type-picker-overlay button{min-height:56px;font-size:15px} /* ── ITEM MODAL MOBILE ── */ #item-modal .modal{max-height:100dvh!important;height:100dvh;border-radius:16px 16px 0 0!important} #item-modal .form-row{flex-direction:column;gap:10px} .pricing-grid{grid-template-columns:1fr!important} .settings-grid{grid-template-columns:1fr!important} .variation-group{padding:10px} .add-variation-btn{width:100%;justify-content:center} .txn-type-btn{flex:1;height:44px;font-size:14px} .fin-cat-chip{min-height:40px;display:flex;align-items:center;justify-content:center} .fin-method-chip{min-height:40px} #fin-entry .btn-primary{height:48px;font-size:16px} .m-card{padding:14px 16px} .m-card-title{font-size:15px} .page-search{height:48px;font-size:15px} .quot-card-header{padding:14px} .prog-cat-chip{min-height:34px;padding:6px 14px;font-size:13px} .nav-links button{min-height:48px;font-size:14px} /* ── FIX: quot-card-actions & m-card-actions overflow ── */ .quot-card-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:4px!important} .quot-card-actions .btn{font-size:11px!important;height:30px!important;padding:0 4px!important;width:100%!important;min-width:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .m-card-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:4px!important;padding-top:8px} .m-card-actions .btn{font-size:11px!important;height:30px!important;padding:0 4px!important;width:100%!important;min-width:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ALL mobile card button groups: fix overflow */ .m-card > div[style*="display:flex"][style*="margin-top:8px"]{display:grid!important;grid-template-columns:1fr 1fr!important;gap:4px!important} .m-card > div[style*="display:flex"][style*="margin-top:8px"] .btn{font-size:11px!important;height:28px!important;padding:0 4px!important;width:100%!important;min-width:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} } @media(max-width:380px){ .qe-table td:nth-child(3), .qe-table td:nth-child(4), .qe-table td:nth-child(5){width:100%!important;padding:2px 0!important} }