*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } input.no-spin::-webkit-inner-spin-button, input.no-spin::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input.no-spin { -moz-appearance: textfield; } /* ── Login screen ── */ /* Hidden by default (not shown until checkAuth() explicitly decides the user needs to log in) — the loading overlay below covers this same area in the meantime, so an already-authenticated user never sees a flash of the login form while the session check is in flight. */ #login-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg); z-index: 99999; display: none; align-items: center; justify-content: center; } .login-box { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 40px 36px; width: 100%; max-width: 380px; box-shadow: 0 8px 40px rgba(0,0,0,.12); } #app-loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg); z-index: 999999; display: flex; align-items: center; justify-content: center; } :root { --primary: #1e293b; --primary-h: #334155; --accent: #2563eb; --accent-h: #1d4ed8; --danger: #dc2626; --success: #16a34a; --bg: #f1f5f9; --surface: #fff; --border: #e2e8f0; --text: #1e293b; --muted: #64748b; --radius: 8px; } /* Every page (.page.active / .single-page.active) is clipped to the viewport and scrolls within itself — the window/body itself should never scroll. Without this, position:fixed children (#status-bar) can still push body's scrollable overflow past the viewport, popping a real outer scrollbar in and out as you switch pages and shifting the fixed header sideways ("shaking" it). */ html, body { overflow: hidden; } body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; margin: 0; } /* ── Header ── */ header { background: var(--primary); color: #fff; padding: 0 28px; display: flex; align-items: center; gap: 24px; height: 52px; box-shadow: 0 2px 8px rgba(0,0,0,.25); position: fixed; top: 0; left: 0; right: 0; z-index: 200; } /* Content is offset by the header's ACTUAL height (kept in --hdr-h by initHeaderHeightSync() in JS), falling back to 52px. This prevents page content being tucked under the header on mobile browsers where the header row renders a little taller than the nominal 52px. */ #app-shell { padding-top: var(--hdr-h, 52px); } header h1 { font-size: 1.15rem; font-weight: 400; white-space: nowrap; display: flex; align-items: center; gap: 8px; } .nav-tabs { display: flex; gap: 2px; margin-left: 8px; } .nav-tab { background: none; border: none; color: rgba(255,255,255,.65); padding: 6px 14px; font-size: .85rem; font-weight: 500; cursor: pointer; border-radius: 6px; transition: all .15s; } .nav-tab:hover { background: rgba(255,255,255,.12); color: #fff; } .nav-tab.active { background: rgba(255,255,255,.18); color: #fff; } .header-right { margin-left: auto; font-size: .78rem; color: rgba(255,255,255,.6); } /* ── Layout ── */ .page { display: none; } .page.active { display: flex; height: calc(100vh - var(--hdr-h, 52px)); height: calc(100dvh - var(--hdr-h, 52px)); overflow: hidden; } /* height + overflow-y:scroll (not min-height, which let content grow the page and scroll the whole window instead) — each page scrolls within itself with its own permanently-reserved scrollbar, so the fixed header's available width never changes as content loads and the navbar doesn't shift/shake. */ .single-page { display: none; } .single-page.active { display: block; padding: 24px 28px; height: calc(100vh - var(--hdr-h, 52px)); height: calc(100dvh - var(--hdr-h, 52px)); overflow-y: scroll; scrollbar-gutter: stable; } /* ── Sidebar ── */ .sidebar { width: 250px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; } .sidebar-header { padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; display: flex; align-items: center; justify-content: space-between; } .sidebar-list { flex: 1; overflow-y: scroll; scrollbar-gutter: stable; } .sidebar-item { padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; } .sidebar-item:hover { background: var(--bg); } .sidebar-item.active { background: #eff6ff; border-left: 3px solid var(--accent); } .sidebar-item .si-num { font-weight: 600; font-size: .82rem; } .sidebar-item .si-meta { font-size: .72rem; color: var(--muted); margin-top: 2px; } .badge { display: inline-block; font-size: .62rem; font-weight: 700; padding: 2px 6px; border-radius: 999px; margin-top: 3px; text-transform: uppercase; } .b-draft { background: #fef9c3; color: #854d0e; } .b-sent { background: #dbeafe; color: #1e40af; } .b-paid { background: #dcfce7; color: #166534; } .b-overdue { background: #fee2e2; color: #991b1b; } .b-cancelled { background: #f1f5f9; color: #475569; } .b-credit_note { background: #ede9fe; color: #6d28d9; } .b-completed { background: #e5e7eb; color: #374151; } .b-inhouse { background: #dcfce7; color: #166534; } .b-paylater { background: #ede9fe; color: #6d28d9; } .sidebar-empty { padding: 20px 14px; font-size: .82rem; color: var(--muted); text-align: center; } /* ── Main ── */ .main { flex: 1; padding: 20px 24px; overflow-y: scroll; scrollbar-gutter: stable; } /* ── Toolbar ── */ .toolbar { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; align-items: center; } .spacer { flex: 1; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: var(--radius); border: 1px solid transparent; font-size: .82rem; font-weight: 500; cursor: pointer; transition: all .15s; white-space: nowrap; text-decoration: none; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-h); } .btn-dark { background: var(--primary); color: #fff; } .btn-dark:hover { background: var(--primary-h); } .btn-outline { background: #fff; border-color: var(--border); color: var(--text); } .btn-outline:hover { background: var(--bg); } .btn-danger { background: #fff; border-color: #fca5a5; color: var(--danger); } .btn-danger:hover { background: #fee2e2; } .btn-success { background: var(--success); color: #fff; } .btn-success:hover { background: #15803d; } .btn-sm { padding: 5px 10px; font-size: .78rem; } .btn-xs { padding: 3px 8px; font-size: .72rem; } .btn:disabled { background: #e5e7eb; border-color: #e5e7eb; color: #9ca3af; cursor: not-allowed; } /* ── Cards ── */ .card { background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: 16px; overflow: hidden; } .card-header { padding: 11px 16px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: .85rem; background: #f8fafc; display: flex; align-items: center; justify-content: space-between; } .card-body { padding: 16px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } /* ── Forms ── */ label { display: block; font-size: .75rem; font-weight: 500; color: var(--muted); margin-bottom: 3px; } input, textarea, select { width: 100%; padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; font-size: .85rem; font-family: inherit; color: var(--text); background: #fff; transition: border-color .15s, box-shadow .15s; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.1); } textarea { resize: vertical; min-height: 64px; } /* ── Logo area ── */ .logo-area { border: 2px dashed var(--border); border-radius: var(--radius); padding: 16px; text-align: center; cursor: pointer; transition: border-color .15s; } .logo-area:hover { border-color: var(--accent); } .logo-area img { max-height: 60px; max-width: 130px; object-fit: contain; } .logo-placeholder { font-size: .82rem; color: var(--muted); } /* ── Status buttons ── */ .status-select { display: flex; gap: 6px; flex-wrap: wrap; } .status-label { padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 600; cursor: pointer; border: 2px solid transparent; transition: all .15s; text-transform: uppercase; background: none; } .status-label.status-active { border-color: currentColor; } .sl-draft { background: #fef9c3; color: #854d0e; } .sl-sent { background: #dbeafe; color: #1e40af; } .sl-paid { background: #dcfce7; color: #166534; } .sl-overdue { background: #fee2e2; color: #991b1b; } .sl-cancelled { background: #f1f5f9; color: #475569; } /* ── Line items table ── */ /* table-layout: fixed makes the .col-* widths below authoritative — without it, a number input's own natural min-content width silently overrides them and the Unit Price/QTY/Tax/Amount columns render much wider than intended, crowding out Details. Rate/QTY/Tax/Amount/Delete get FIXED pixel widths rather than percentages — a number like "57.41" needs the same handful of pixels whether the card is 400px or 1400px wide, so a % column just grows pointlessly on a wide screen. Details has no width of its own, so it absorbs whatever space is left. The table's min-width is the sum of the fixed columns plus a usable floor for Details, so on a narrow/mobile screen the columns stay legible and the .scroll-x wrapper around this table (see index.html) scrolls horizontally instead of squeezing everything unreadably. */ .items-table { width: 100%; min-width: 560px; border-collapse: collapse; table-layout: fixed; } .items-table th { box-sizing: border-box; text-align: left; font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; padding: 7px 9px; background: #f8fafc; border-bottom: 1px solid var(--border); } .items-table td { box-sizing: border-box; padding: 4px 3px; vertical-align: middle; } .items-table td input { width: 100%; box-sizing: border-box; border-radius: 4px; padding: 5px 7px; font-size: .82rem; } .col-rate { width: 85px; } .col-qty { width: 55px; } .col-tax { width: 75px; } .col-amt { width: 90px; } .col-del { width: 34px; text-align: center; } .row-amount { font-size: .85rem; font-weight: 600; padding: 5px 7px; display: block; } .del-btn { background: none; border: none; color: #94a3b8; cursor: pointer; font-size: .95rem; padding: 3px 6px; border-radius: 4px; transition: color .15s, background .15s; } .del-btn:hover { color: var(--danger); background: #fee2e2; } .line-item-desc-wrap { display: flex; align-items: center; gap: 3px; } .line-item-desc-wrap input { flex: 1; min-width: 0; } .line-item-desc-wrap .sort-dd-trigger { width: 16px; height: 16px; font-size: .72rem; } .sort-dd-menu.line-item-dd-menu { min-width: 110px; overflow: hidden; padding-bottom: 8px; border-radius: 7px; } .line-item-dd-menu .sort-dd-item { padding: 4px 10px; font-size: .76rem; } .sort-dd-item.disabled-item { color: #cbd5e1; cursor: not-allowed; } .sort-dd-item.disabled-item:hover { background: none; } /* ── Totals ── */ .totals-table { width: 100%; border-collapse: collapse; } .totals-table td { padding: 5px 0; font-size: .875rem; } .totals-table .tl { color: var(--muted); } .totals-table .tv { text-align: right; font-weight: 500; } .totals-table .tl-label { display: inline-block; width: 66px; } .totals-table .grand td { font-size: 1rem; font-weight: 700; border-top: 2px solid var(--border); padding-top: 8px; } /* ── Stat cards ── */ .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } .stat-label { font-size: .75rem; color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; } .stat-value { font-size: 1.5rem; font-weight: 700; } .stat-sub { font-size: .75rem; color: var(--muted); margin-top: 3px; } .stat-blue { border-left: 4px solid #2563eb; } .stat-green { border-left: 4px solid #16a34a; } .stat-red { border-left: 4px solid #dc2626; } .stat-amber { border-left: 4px solid #d97706; } /* ── Data table ── */ .data-table { width: 100%; border-collapse: collapse; font-size: .82rem; } .data-table th { text-align: left; padding: 8px 10px; background: #f8fafc; border-bottom: 2px solid var(--border); font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; } .data-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; } .data-table tr:last-child td { border-bottom: none; } .data-table tr:hover td { background: #f8fafc; } .data-table .num { text-align: right; font-variant-numeric: tabular-nums; } .data-table tfoot td { font-weight: 700; background: #f8fafc; border-top: 2px solid var(--border); } /* Customers grid: keep the detail columns on a single line so rows stay compact; the Name column may wrap, but only for very long names (it holds its width up to the cap below, so ordinary names stay on one line). */ /* Size columns to their content (min 100% so it still fills the card on desktop). On a phone the table then grows past the viewport and scrolls inside .scroll-x, instead of width:100% squeezing every column and wrapping the names. */ .customers-table { width: auto; min-width: 100%; } .customers-table td { white-space: nowrap; } .customers-table tbody td:first-child:not([colspan]) { white-space: normal; min-width: 150px; max-width: 320px; word-break: break-word; } /* On a phone the Name column gets twice the room (names have more space before wrapping); it still scrolls inside .scroll-x. */ @media (max-width: 640px) { .customers-table tbody td:first-child:not([colspan]) { min-width: 300px; max-width: 640px; } } /* ── Compact grid table (Bookings) ── */ .grid-table { width: 100%; border-collapse: collapse; font-size: .78rem; table-layout: fixed; } .grid-table th { text-align: left; padding: 5px 7px; background: #f1f5f9; border-bottom: 2px solid var(--border); font-size: .68rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; } .grid-table td { padding: 4px 7px; border-bottom: 1px solid #e5e7eb; vertical-align: middle; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; } .grid-table tbody tr:hover td { box-shadow: inset 0 1px 0 #6b7280, inset 0 -1px 0 #6b7280; } .grid-table td.cell-active { box-shadow: inset 0 0 0 1px #000 !important; } /* The active-cell box is a nice pointer in the plain read-only grid, but once a row switches to Edit/New (inputs, their own borders, a yellow row background) it's redundant clutter — most visible wrapping the multi-line DETAIL cell. */ .grid-table tbody tr.brow-editing td.cell-active { box-shadow: none !important; } /* A booking row being edited keeps its colour (and no hover lines) under the mouse. */ .grid-table tbody tr.brow-editing:hover td { background: transparent; box-shadow: none; } .grid-table th.bk-th-sorted { background: #dbeafe; color: var(--primary); } .grid-table tbody tr.brow-editing td { vertical-align: top; padding-top: 6px; } .grid-table tr:last-child td { border-bottom: none; } .grid-table tr:hover td { background: #f8fafc; } .grid-table input, .grid-table select, .grid-table textarea { font-size: .76rem; padding: 2px 5px; border: 1px solid #cbd5e1; border-radius: 4px; width: 100%; box-sizing: border-box; background: #fff; } @keyframes bk-spin { to { transform: rotate(360deg); } } .brow-dropdown { position:fixed; background:#fff; border:1px solid #e2e8f0; border-radius:7px; box-shadow:0 4px 16px rgba(0,0,0,.13); z-index:10000; min-width:130px; padding:4px 0; } .brow-dropdown button { display:block; width:100%; text-align:left; padding:7px 16px; font-size:.8rem; background:none; border:none; cursor:pointer; color:#1e293b; white-space:nowrap; } .brow-dropdown button:hover { background:#f1f5f9; } /* An "Email ..." item whose email has already gone out for this Pay ID. */ .brow-dropdown button.brow-sent { background:#e5e5e5; } .brow-dropdown button.brow-sent:hover { background:#d9d9d9; } .grid-table textarea { resize: none; overflow: hidden; height: 24px; min-height: 24px; line-height: 1.4; } .grid-table input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; } /* ── Filters bar ── */ .filters { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; } .filters .fg { display: flex; flex-direction: column; } .filters label { margin-bottom: 3px; } .filters input, .filters select { width: auto; min-width: 140px; } /* ── Preview / Modal ── */ #preview-panel, #voucher-preview-panel { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 200; overflow-y: auto; padding: 20px; } #preview-panel.open, #voucher-preview-panel.open { display: flex; align-items: flex-start; justify-content: center; } .preview-modal { background: #fff; width: 820px; max-width: 100%; border-radius: var(--radius); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35); } .preview-toolbar { background: #1e293b; color: #fff; padding: 10px 18px; display: flex; gap: 8px; align-items: center; } .preview-toolbar span { flex: 1; font-weight: 600; font-size: .9rem; } #modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 10000; align-items: center; justify-content: center; } #modal-overlay.open { display: flex; } .modal-box { background: #fff; border-radius: var(--radius); padding: 24px; width: 480px; max-width: 95vw; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,.25); } .modal-title { font-size: 1rem; font-weight: 700; margin-bottom: 16px; } .modal-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; } .form-row { margin-bottom: 12px; } /* ── Toast ── */ #toast { position: fixed; bottom: 52px; right: 20px; background: #1e293b; color: #fff; padding: 10px 18px; border-radius: var(--radius); font-size: .85rem; box-shadow: 0 4px 16px rgba(0,0,0,.2); opacity: 0; transform: translateY(10px); transition: all .25s; z-index: 10001; pointer-events: none; } #toast.show { opacity: 1; transform: translateY(0); } #toast.error { background: var(--danger); } #toast.success { background: #16a34a; } #toast.mini { left: auto; width: auto; max-width: fit-content; text-align: left; } /* ── Loading ── */ .loading { text-align: center; padding: 40px; color: var(--muted); font-size: .9rem; } @media (max-width: 860px) { .sidebar { display: none; } .main { padding: 14px; } .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; } } /* Bookings table on laptop/desktop: Detail is pinned wide (two +10% bumps from the original even split), Remarks stays auto so it absorbs the rest but is floored at 100px. .grid-table gets a matching min-width so that once the container can no longer fit Detail + the other fixed columns + Remarks' 100px floor, the table overflows .card-scroll-x and a horizontal scrollbar appears instead of squeezing Remarks below 100px. */ @media (min-width: 1101px) { .grid-table { min-width: 1179px; } #bookings-table th:nth-child(5) { width: 503px !important; } /* Detail: even-split (~384px) +10% +10%, +42px reclaimed from narrowing Pay ID/Pay Amt to label width, -4px given back to Pay ID for 6-digit width */ #bookings-table th:nth-child(9) { min-width: 100px !important; } /* Remarks: floor */ } /* Bookings table: shrink fixed columns on tablets so Detail+Remarks stay fluid */ @media (max-width: 1100px) { #bookings-table th:nth-child(2) { width: 74px !important; } /* Date: 88→74 */ #bookings-table th:nth-child(3) { width: 62px !important; } /* Type: 75→62 */ #bookings-table th:nth-child(4) { width: 88px !important; } /* Hotel/Room: 110→88 */ #bookings-table th:nth-child(6) { width: 64px !important; } /* Pay ID: 80→64 */ #bookings-table th:nth-child(7) { width: 64px !important; } /* Pay Amt: 80→64 */ #bookings-table th:nth-child(8) { width: 78px !important; } /* Status: 95→78 */ } @media (max-width: 860px) { #bookings-table th:nth-child(2) { width: 64px !important; } /* Date */ #bookings-table th:nth-child(3) { width: 54px !important; } /* Type */ #bookings-table th:nth-child(4) { width: 74px !important; } /* Hotel/Room */ #bookings-table th:nth-child(6) { width: 54px !important; } /* Pay ID */ #bookings-table th:nth-child(7) { width: 56px !important; } /* Pay Amt */ #bookings-table th:nth-child(8) { width: 68px !important; } /* Status */ } /* ── Mobile Navigation ── */ #nav-hamburger { display: none; background: none; border: none; color: #fff; font-size: 1.35rem; cursor: pointer; padding: 4px 8px; border-radius: 6px; line-height: 1; flex-shrink: 0; } #nav-hamburger:hover { background: rgba(255,255,255,.12); } #mobile-nav-backdrop { display: none; position: fixed; inset: 0; z-index: 999; } #mobile-nav-backdrop.open { display: block; } #mobile-nav-drawer { display: none; position: fixed; top: var(--hdr-h, 52px); left: 0; right: 0; background: var(--primary); z-index: 1000; padding: 6px 0 12px; box-shadow: 0 6px 20px rgba(0,0,0,.35); border-top: 1px solid rgba(255,255,255,.1); max-height: calc(100dvh - var(--hdr-h, 52px)); overflow-y: auto; } #mobile-nav-drawer.open { display: block; } .mnav-tab { display: block; width: 100%; text-align: left; background: none; border: none; color: rgba(255,255,255,.75); padding: 13px 22px; font-size: .92rem; font-weight: 500; cursor: pointer; } .mnav-tab:hover { background: rgba(255,255,255,.08); color: #fff; } .mnav-tab.active { background: rgba(255,255,255,.15); color: #fff; } .mnav-sep { height: 1px; background: rgba(255,255,255,.12); margin: 6px 0; } .mnav-footer { padding: 10px 22px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .mnav-username { font-size: .8rem; color: rgba(255,255,255,.5); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Sidebar overlay for mobile ── */ #sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 499; } #sidebar-backdrop.open { display: block; } #btn-show-sidebar { display: none; } @media (max-width: 640px) { .grid-table { min-width: 1220px; } #bookings-table th:nth-child(2) { width: 77px !important; } /* Date: 64 +20% */ #bookings-table th:nth-child(4) { width: 107px !important; } /* Hotel/Room: 119 -10% */ #bookings-table th:nth-child(5) { width: 435px !important; } /* Detail: 483 -10% */ #bookings-table th:nth-child(9) { width: 165px !important; } /* Remarks: +50% */ /* Header */ header { padding: 0 12px; gap: 6px; } header h1 { font-size: 1.1rem; white-space: nowrap; } #hdr-title { display: none; } .nav-tabs { display: none; } #company-id-badge { display: none; } .company-dd-trigger { max-width: 150px; font-size: .82rem; padding: 5px 10px; border-radius: 20px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; } .hdr-user { display: none; } #nav-hamburger { display: flex; align-items: center; } /* Pages */ .single-page.active { padding: 12px; } .main { padding: 12px; } /* Login */ .login-card { padding: 28px 18px; margin: 0 12px; } /* Invoice sidebar toggle */ #btn-show-sidebar { display: inline-flex; } /* Sidebar slides in from left as overlay */ .sidebar.mobile-open { display: flex !important; position: fixed; top: var(--hdr-h, 52px); left: 0; bottom: 0; z-index: 500; width: 280px; box-shadow: 4px 0 20px rgba(0,0,0,.25); } /* Toolbar */ .toolbar { gap: 6px; } .bk-toolbar { gap: 6px; } #b-search { width: 100%; } /* Tab bars — horizontal scroll, no wrap */ .tab-bar { overflow-x: auto; flex-wrap: nowrap; gap: 0; scrollbar-width: none; } .tab-bar::-webkit-scrollbar { display: none; } .tab-btn { white-space: nowrap; padding: 8px 12px; font-size: .8rem; flex-shrink: 0; } .rsec-bar { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } .rsec-bar::-webkit-scrollbar { display: none; } .rsec-btn { white-space: nowrap; flex-shrink: 0; } .rtab-row { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } .rtab-row::-webkit-scrollbar { display: none; } .rtab-row .btn { white-space: nowrap; flex-shrink: 0; } /* Modals — centered card */ #modal-overlay.open { align-items: center; } .modal-box { width: 100%; max-width: 92vw; max-height: 85vh; border-radius: 16px; padding: 20px 16px; } /* Preview panel — full screen */ #preview-panel { padding: 0; } .preview-modal { border-radius: 0; width: 100%; } /* Responsive grids */ .gdrive-grid { grid-template-columns: 1fr; } .voucher-grid { grid-template-columns: 1fr; } .tmpl-grid { grid-template-columns: 1fr; } .backup-row { flex-direction: column; } .backup-sep { display: none; } .sec-head { flex-wrap: wrap; gap: 10px; } .logs-bar { flex-wrap: wrap; gap: 8px; } /* Toast */ #toast { left: 12px; right: 12px; bottom: 16px; text-align: center; } #toast.mini { left: auto !important; right: 20px !important; width: auto !important; text-align: left !important; } /* Status bar */ #status-bar { padding: 6px 14px !important; height: auto !important; flex-direction: column; align-items: stretch !important; gap: 7px; } #status-bar-scroll { overflow-x: auto !important; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } #status-bar-scroll::-webkit-scrollbar { display: none; } #status-bar-text { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } #status-bar-dd-trigger:active { background: #cbd9ee; } .mobile-hscroll { display: block !important; position: relative; height: 3px; background: transparent; border-radius: 2px; touch-action: none; flex-shrink: 0; opacity: .45; transition: opacity .2s; } .mobile-hscroll:active { opacity: .9; } .mobile-hscroll-thumb { position: absolute; top: 0; left: 0; height: 100%; min-width: 24px; background: #94a8c9; border-radius: 2px; cursor: grab; } .mobile-hscroll-thumb:active { cursor: grabbing; background: #5b7ebc; } /* Filters */ .filters input, .filters select { min-width: 110px; } } /* ── Login card ── */ .login-card { background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:40px 36px;width:100%;max-width:380px;box-shadow:0 8px 40px rgba(0,0,0,.12) } .login-hdr { text-align:center;margin-bottom:28px } .login-icon { margin-bottom:12px } .login-icon img { width:56px;height:56px;object-fit:contain } .hdr-logo { height:1.3rem;width:auto;flex-shrink:0;background:#fff;border-radius:3px;padding:2px 3px } .btn-hdr-icon { background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:1rem;line-height:1;padding:5px 8px;border-radius:6px;cursor:pointer;flex-shrink:0;margin-left:6px } .btn-hdr-icon:hover { background:rgba(255,255,255,.2) } .login-title { font-size:1.2rem;font-weight:700;color:var(--text) } .login-sub { font-size:.8rem;color:var(--muted);margin-top:4px } .login-field { margin-bottom:14px } .login-field-last { margin-bottom:20px } .login-lbl { font-size:.82rem;font-weight:600;display:block;margin-bottom:4px } .login-remember { margin-bottom:16px } .login-remember-label { display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--muted);cursor:pointer;user-select:none } .login-remember-label input[type=checkbox] { width:15px;height:15px;cursor:pointer;accent-color:var(--primary) } .login-btn { width:100%;padding:10px } .login-pw-wrap { position:relative } .login-pw-wrap input { width:100%;padding-right:40px } .login-pw-eye { position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--muted);padding:4px;line-height:0;border-radius:4px } .login-pw-eye:hover { color:var(--text) } #login-error { color:var(--danger);font-size:.82rem;margin-top:12px;text-align:center } .login-link-btn { background:none;border:none;color:var(--primary);font-size:.82rem;cursor:pointer;padding:0;text-decoration:underline } .login-link-btn:hover { opacity:.8 } /* ── Header additions ── */ .hdr-right { display:flex;align-items:center;gap:8px;margin-left:auto } #company-id-badge { font-size:.72rem;color:rgba(255,255,255,.5);white-space:nowrap;background:rgba(255,255,255,.08);padding:3px 8px;border-radius:4px;letter-spacing:.5px } /* Custom company dropdown: closed trigger shows Short Code (fits small screens), opened list shows full Business Names. */ .company-dd { position:relative } .company-dd-trigger { display:flex;align-items:center;gap:6px;font-size:.82rem;padding:4px 10px;border:1px solid rgba(255,255,255,.3);border-radius:6px;background:var(--primary);color:#fff;cursor:pointer;max-width:150px } .company-dd-trigger:hover { background:rgba(255,255,255,.1) } .company-dd-label { overflow:hidden;text-overflow:ellipsis;white-space:nowrap } .company-dd-caret { flex-shrink:0;transition:transform .15s } .company-dd.open .company-dd-caret { transform:rotate(180deg) } .company-dd.disabled .company-dd-trigger { cursor:default;opacity:.6 } .company-dd-menu { display:none;position:absolute;top:calc(100% + 4px);right:0;min-width:220px;max-height:60vh;overflow-y:auto;background:#fff;border:1px solid #e2e8f0;border-radius:7px;box-shadow:0 4px 16px rgba(0,0,0,.15);z-index:10000;padding:4px 0 } .company-dd.open .company-dd-menu { display:block } .company-dd-item { padding:8px 14px;font-size:.85rem;color:#1e293b;cursor:pointer;white-space:nowrap } .company-dd-item:hover { background:#f1f5f9 } .company-dd-item.active { font-weight:600;color:var(--primary);background:#eef4ff } .sort-dd { position:relative } .sort-dd-trigger { display:flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:none;border-radius:6px;background:var(--surface);color:var(--muted);cursor:pointer;font-size:.9rem;line-height:1 } .sort-dd-trigger:hover { background:var(--bg) } .sort-dd-trigger.exp-has-notes { background:#f97316;color:#fff } .sort-dd-trigger.exp-has-notes:hover { background:#ea580c } #exp-body tr { transition: background-color 1.2s ease } #exp-body tr.exp-row-highlight { background-color:#fde68a } .sort-dd-menu { display:none;position:absolute;top:calc(100% + 4px);left:0;min-width:190px;max-height:60vh;overflow-y:auto;background:#fff;border:1px solid #e2e8f0;border-radius:7px;box-shadow:0 4px 16px rgba(0,0,0,.15);z-index:10000;padding:4px 0 } .sort-dd.open .sort-dd-menu { display:block } .sort-dd-item { padding:7px 14px;font-size:.8rem;color:#1e293b;cursor:pointer;white-space:nowrap;text-transform:none;font-weight:400;letter-spacing:normal } .sort-dd-item:hover { background:#f1f5f9 } .sort-dd-item.active { font-weight:600;color:var(--primary);background:#eef4ff } .sort-dd-group-label { padding:6px 14px 4px;font-size:.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px } .sort-dd-divider { height:1px;background:var(--border);margin:4px 0 } .hdr-user { display:flex;align-items:center;gap:6px;margin-left:4px } #nav-user-name { font-size:.78rem;color:rgba(255,255,255,.7);white-space:nowrap } .btn-hdr { font-size:.75rem;background:rgba(255,255,255,.12);border:none;color:#fff;padding:3px 8px;border-radius:4px;cursor:pointer } #nav-super-admin { opacity:.75 } /* ── Tab bars ── */ .tab-bar { display:flex;gap:4px;border-bottom:2px solid var(--border);margin-bottom:24px } .tab-btn { padding:8px 20px;font-size:.88rem;font-weight:600;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;background:transparent;color:var(--muted);cursor:pointer } /* ── Report section bar ── */ .rsec-bar { display:flex;gap:0;border-bottom:2px solid var(--border) } .rsec-btn { padding:8px 22px;font-size:.85rem;font-weight:700;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;background:none;cursor:pointer;color:var(--muted) } .rtab-row { display:flex;gap:6px;padding:12px 0 14px;flex-wrap:wrap } .rtab-div { border-left:1px solid var(--border);margin:0 4px } /* ── Page/section headings ── */ .page-title { font-size:1rem;font-weight:700 } .sec-title { font-size:1.1rem;font-weight:700 } .sec-title-lg { font-size:1.15rem;font-weight:700 } .sec-desc { font-size:.8rem;color:var(--muted);margin-top:2px } .sec-desc-sm { font-size:.78rem;color:var(--muted);margin-top:2px } .sec-head { display:flex;justify-content:space-between;align-items:center;margin-bottom:20px } /* ── Utility ── */ .scroll-x { overflow-x:auto } /* Settings > Hotels: below this width the add row, search and list scroll sideways together instead of squeezing the three columns. */ .hotel-scroll-inner { min-width: 720px; } .muted-sm { font-size:.82rem;color:var(--muted) } .muted-xs { font-size:.78rem;color:var(--muted) } .setting-lbl { font-weight:600;font-size:.88rem;margin-bottom:10px } .setting-lbl-6 { font-weight:600;font-size:.88rem;margin-bottom:6px } .help { font-size:.78rem;color:var(--muted);margin-bottom:8px } .sub-lbl { font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:6px } .sub-lbl-4 { font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:4px } .lbl-note { font-weight:400;color:var(--muted) } .lbl-note-sm { font-weight:400;color:var(--muted);font-size:.8rem } /* ── Status bar ── */ #status-bar { position:fixed;bottom:0;left:0;right:0;height:32px;background:#ddeaff;color:#1e293b;font-size:.78rem;align-items:center;padding:0 28px;z-index:90;user-select:text;border-top:1px solid #cbd5e1 } #status-bar-row { display:flex;align-items:center;gap:8px;flex:1;min-width:0 } #status-bar-scroll { overflow:hidden;flex:1;min-width:0 } #status-bar-scroll { scrollbar-width:none;-ms-overflow-style:none } #status-bar-scroll::-webkit-scrollbar { display:none } #status-bar-text { white-space:nowrap } /* Dot-menu trigger — sized to fit the status bar's compact 32px height, tinted to match its blue background instead of the app-wide neutral .sort-dd-trigger surface. */ #status-bar-dd { flex-shrink: 0; position: relative; } #status-bar-dd-trigger { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; padding: 0; margin: 0; border: 1px solid #cbd5e1; border-radius: 6px; background: #ddeaff; color: #1e293b; font-size: .9rem; line-height: 1; cursor: pointer; box-sizing: border-box; } #status-bar-dd-trigger:hover { background: #cbd9ee; } .mobile-hscroll { display:none } /* ── Bookings toolbar & pagination ── */ .bk-toolbar { display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px } .bk-show-lbl { display:flex;align-items:center;gap:4px;font-size:.8rem;cursor:pointer;white-space:nowrap } #b-search { width:200px } #b-search-field { width:auto } #b-filter-status, #b-filter-type { width:105px } #b-filter-range { width:125px } #bookings-table td.bk-payid-highlight { background:#16a34a !important;color:#fff !important } #bookings-table .brow-editing td:nth-child(3) select { min-width:110px } #bookings-table .brow-editing td:nth-child(4) select { min-width:130px } #b-filter-from, #b-filter-to { width:118px; padding-right:2px } #b-count { margin-left:auto;font-size:.8rem;color:var(--muted) } #bk-pagination, #cust-pagination, #vendor-pagination { display:flex;align-items:center;gap:8px;padding:12px 4px;flex-wrap:wrap } #inv-pagination { display:flex;align-items:center;justify-content:center;gap:4px;padding:8px 6px;border-top:1px solid var(--border);flex-shrink:0 } #inv-pagination .btn { padding:3px 9px;font-size:.85rem;line-height:1 } #inv-pagination .pg-info { font-size:.7rem;padding:0 2px;white-space:nowrap } .pg-info { font-size:.82rem;color:var(--muted) } .pg-rows { display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted);margin-left:8px;white-space:nowrap;padding-left:16px } .pg-sel { padding:3px 6px;font-size:.8rem;border:1px solid var(--border);border-radius:4px } /* ── Invoice additions ── */ .hidden-refs { display:none } #pay-id-indicator { margin-top:6px;font-size:.78rem } .add-line-row { padding:9px 13px;display:flex;gap:8px } .btn-from-cat { color:var(--accent);border-color:var(--accent) } #payments-section { margin-top:14px;border-top:1px solid var(--border);padding-top:12px } .pay-hdr { display:flex;justify-content:space-between;align-items:center;margin-bottom:8px } .pay-lbl { font-size:.78rem;font-weight:600;color:var(--muted) } .pay-balance { display:flex;justify-content:space-between;font-size:.85rem;font-weight:700;margin-top:6px;padding-top:6px;border-top:1px solid var(--border) } .inline-num { width:72px;display:inline-block;padding:2px 5px;margin-left:3px;font-size:.75rem } .inline-num-sm { width:52px;display:inline-block;padding:2px 5px;margin-left:3px;font-size:.75rem } .inline-text { width:140px;display:inline-block;padding:2px 5px;font-size:.75rem } .extra-charge-row .tv { display:flex;align-items:center;justify-content:flex-end;gap:4px } .btn-autofill { font-size:.68rem;padding:2px 6px;cursor:pointer;border:1px solid var(--border);border-radius:4px;background:var(--surface);color:var(--primary) } .search-row { display:flex;gap:6px } /* ── Image preview boxes ── */ .img-preview { margin-bottom:10px;border:1px solid var(--border);border-radius:6px;min-height:60px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#f8fafc } .img-preview-sm { margin-bottom:8px;border:1px solid var(--border);border-radius:6px;min-height:48px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#f8fafc } .img-no-text { font-size:.78rem;color:var(--muted) } .img-no-text-sm { font-size:.75rem;color:var(--muted) } .btn-remove { color:var(--danger);border-color:var(--danger) } .voucher-grid { display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px;margin-bottom:8px } .tmpl-grid { display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;max-width:1200px } .tmpl-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:12px } .tmpl-mode-toggle { display:inline-flex;border:1px solid var(--border);border-radius:6px;overflow:hidden } .tmpl-mode-btn { background:none;border:none;padding:5px 14px;font-size:.78rem;font-weight:600;cursor:pointer;color:var(--muted);transition:all .12s } .tmpl-mode-btn.active { background:var(--primary);color:#fff } .tmpl-ttl { font-weight:700;font-size:.9rem } .tmpl-foot-wrap { margin-top:14px;border-top:1px solid var(--border);padding-top:10px } .tmpl-textarea { width:100%;font-size:.8rem;padding:5px 7px;border:1px solid var(--border);border-radius:6px;resize:vertical;box-sizing:border-box } .btn-full { margin-top:8px;width:100% } .bullet-list { display:flex;flex-direction:column;gap:4px } .img-section { margin-top:28px;margin-bottom:8px } .img-section h3 { font-size:.95rem;font-weight:700 } .img-section p { font-size:.78rem;color:var(--muted);margin-top:2px } .img-action-row { display:flex;gap:8px;align-items:center } /* ── Settings blocks ── */ .stg-block { margin-bottom:20px } .stg-block h2 { font-size:1.1rem;font-weight:700 } .stg-block p { font-size:.8rem;color:var(--muted);margin-top:2px } .stg-card-sm { max-width:480px;margin-bottom:24px } .stg-flex-row { display:flex;gap:8px;align-items:center } .stg-tz-now { font-size:.75rem;color:var(--muted);margin-top:6px } .expcat-list { display:flex;flex-direction:column;gap:4px } /* ── Google Drive ── */ .gdrive-grid { display:grid;grid-template-columns:1fr 1fr;gap:20px } #gdrive-badge { display:none;margin-left:6px;background:#16a34a;color:#fff;font-size:.7rem;padding:1px 7px;border-radius:99px;font-weight:500 } #gdrive-creds-json { width:100%;font-size:.75rem;font-family:monospace;resize:vertical;border:1px solid var(--border);border-radius:6px;padding:6px;box-sizing:border-box } .gdrive-actions { display:flex;gap:8px;margin-top:16px;align-items:center;flex-wrap:wrap } #gdrive-test-result { font-size:.82rem } /* ── Database backup ── */ .backup-row { display:flex;gap:16px;align-items:center;flex-wrap:wrap } .backup-col { flex:1;min-width:220px } .backup-sep { width:1px;background:var(--border);align-self:stretch } /* ── Catalogue picker overlay ── */ #cat-picker-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:400;align-items:center;justify-content:center } .cat-picker { background:#fff;border-radius:10px;width:860px;max-width:96vw;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3) } .cat-picker-head { padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px } .cat-picker-ttl { flex:1;font-weight:700;font-size:.95rem } .btn-cat-close { background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--muted);padding:0 4px } #picker-tabs { display:flex;gap:0;border-bottom:1px solid var(--border);padding:0 14px;overflow-x:auto;flex-shrink:0 } #picker-body { overflow-y:auto;padding:14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;height:420px;align-content:start } .cat-picker-foot { padding:10px 20px;border-top:1px solid var(--border);font-size:.78rem;color:var(--muted) } /* ── Service modal ── */ #service-modal-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:500;align-items:center;justify-content:center } .svc-modal { background:#fff;border-radius:var(--radius);padding:24px;width:500px;max-width:96vw;box-shadow:0 10px 40px rgba(0,0,0,.25) } #svc-modal-title { font-size:1rem;font-weight:700;margin-bottom:18px } .svc-range { display:flex;align-items:center;gap:8px } .svc-check-row { display:flex;align-items:center;gap:10px } .svc-color-row { display:flex;align-items:center;gap:10px } .svc-color-btn { width:40px;height:30px;border:1px solid var(--border);border-radius:4px;cursor:pointer;padding:2px } .btn-reset-color { font-size:.75rem;padding:3px 8px;border:1px solid var(--border);border-radius:4px;background:var(--surface);cursor:pointer;color:var(--muted) } .svc-check-sz { width:16px;height:16px;cursor:pointer;flex-shrink:0 } .svc-order-input { width:80px } /* ── Super Admin ── */ .sa-form { max-width:480px } .sa-section { border-top:1px solid var(--border);padding-top:28px } .sa-field { margin-bottom:10px } .sa-field-last { margin-bottom:14px } .sa-full { width:100%;box-sizing:border-box } /* ── User Logs ── */ .logs-bar { display:flex;align-items:flex-end;gap:10px;margin-bottom:16px;flex-wrap:wrap } .logs-grp-lbl { font-size:.75rem;font-weight:600;color:var(--muted);margin-bottom:4px } .logs-sel { font-size:.85rem;padding:5px 10px;border:1px solid var(--border);border-radius:6px } #logs-company-sel { min-width:180px } #logs-user-sel { min-width:150px } #rights-user-sel { font-size:.85rem;padding:5px 10px;border:1px solid var(--border);border-radius:6px;min-width:200px } .btn-flush { background:#fee2e2;color:#b91c1c;border:1px solid #fca5a5;margin-left:auto } /* ── SA form headings ── */ .sa-form h3 { font-size:.95rem;font-weight:700 } /* ── Service modal footer ── */ .svc-modal-footer { display:flex;gap:8px;justify-content:flex-end;margin-top:20px } /* ── Services page ── */ .svc-search-row { display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;align-items:center } .cat-list { display:flex;flex-wrap:wrap;gap:8px } #cat-count { font-size:.8rem;color:var(--muted) } /* ── Utility additions ── */ .card-scroll-x { overflow-x:auto;overflow-y:hidden } .card-body-flush { padding:0 } .loading-hint { color:var(--muted);font-size:.85rem } .req { color:var(--danger) } .flex-1 { flex:1 } .svc-lbl { margin:0;white-space:nowrap } .sidebar-search { padding:8px 10px;border-bottom:1px solid var(--border) } .sidebar-input { font-size:.78rem;padding:5px 8px } .text-danger { color:var(--danger) } .totals-row { font-weight:700;background:#f8fafc } .totals-row td { padding:6px 7px } .totals-row td.tr-lbl { text-align:right;color:var(--muted) } .totals-row td.tr-num { text-align:right } /* ============================================================ GMAIL TOOL MODULE (ported from the standalone GmailDraft app) Every rule is scoped under #page-gmail_tool (or uses a gmt- prefixed class/id) so nothing here can leak into the rest of the app — sub-tabs intentionally reuse the existing .tab-bar/.tab-btn styling above instead of bringing in GmailDraft's own conflicting .tab-btn rules. ============================================================ */ #gmttab-content-fetch, #gmttab-content-draft, #gmttab-content-bml { max-width: 720px; } #gmttab-content-templates { max-width: none; } #gmt-templateList, #gmttab-content-templates > .gmt-buttons { max-width: 720px; } /* Editor and reference panel are two separate cards side by side; they stack on mobile. */ #page-gmail_tool #gmt-templateEditor { padding: 0; border: 0; background: none; } #page-gmail_tool .gmt-tmpl-layout { display: flex; gap: 16px; align-items: flex-start; } #page-gmail_tool .gmt-tmpl-main { flex: 0 1 680px; min-width: 0; box-sizing: border-box; padding: 12px; border: 1px solid #ddd; border-radius: 4px; background: #fafafa; } #page-gmail_tool .gmt-tmpl-help { flex: 1 1 0; min-width: 260px; box-sizing: border-box; background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 4px 12px 10px; font-size: 12.5px; color: #333; position: sticky; top: 8px; max-height: 85vh; overflow-y: auto; } #page-gmail_tool .gmt-tmpl-help h4 { margin: 12px 0 4px; font-size: 13px; } #page-gmail_tool .gmt-tmpl-help p { margin: 4px 0; color: #555; } #page-gmail_tool .gmt-tmpl-help table { border-collapse: collapse; width: 100%; margin: 4px 0; } #page-gmail_tool .gmt-tmpl-help td { padding: 2px 4px 2px 0; vertical-align: top; border-bottom: 1px solid #eee; } #page-gmail_tool .gmt-tmpl-help code, #page-gmail_tool .gmt-slug { font-family: Consolas, monospace; font-size: 12px; background: #f1f3f4; padding: 0 4px; border-radius: 3px; } #page-gmail_tool .gmt-slug { border: 1px solid #dadce0; cursor: pointer; margin: 2px 4px 2px 0; display: inline-block; color: #1a73e8; line-height: 1.6; } #page-gmail_tool .gmt-slug:hover { background: #e8f0fe; } #page-gmail_tool .gmt-slug-group { font-weight: bold; margin-top: 8px; color: #555; } @media (max-width: 640px) { #page-gmail_tool .gmt-tmpl-layout { flex-direction: column; align-items: stretch; } #page-gmail_tool .gmt-tmpl-main { flex: 0 0 auto; } #page-gmail_tool .gmt-tmpl-help { flex: 0 0 auto; min-width: 0; position: static; max-height: none; } } #page-gmail_tool label { display: block; margin-top: 16px; font-weight: bold; } #page-gmail_tool input[type=text], #page-gmail_tool input[type=email] { width: 100%; padding: 8px; margin-top: 4px; box-sizing: border-box; font-family: inherit; font-size: 14px; } #page-gmail_tool .gmt-buttons { display: flex; gap: 12px; margin-top: 20px; } #page-gmail_tool .gmt-buttons button, #page-gmail_tool .gmt-search-row button, #page-gmail_tool .gmt-reply-btn { padding: 10px 20px; background: #1a73e8; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; } #page-gmail_tool .gmt-buttons button.gmt-secondary { background: #34a853; } #page-gmail_tool .gmt-buttons button.gmt-draft { background: #6b7280; } #page-gmail_tool .gmt-buttons button.gmt-default-send { background: #188038; } /* More room between the Send / Draft buttons on the Draft Email tab. */ #page-gmail_tool #gmt-draftActions { gap: 28px; margin-top: 28px; } #page-gmail_tool .gmt-buttons button:disabled, #page-gmail_tool .gmt-search-row button:disabled { background: #999; cursor: not-allowed; } #page-gmail_tool .gmt-hint { color: #666; font-size: 12px; margin-top: 4px; } /* Sent-email confirmation — an irreversible action deserves a clearer "yes, this actually went out" signal than the plain gray hint text used for everything else in this status line. */ #page-gmail_tool .gmt-status-success { display: flex; align-items: center; gap: 8px; color: #0d652d; font-size: 15px; font-weight: 600; background: #e6f4ea; border: 1px solid #a8dab5; border-radius: 6px; padding: 10px 14px; margin-top: 10px; } #page-gmail_tool .gmt-status-success .gmt-status-success-check { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; background: #188038; color: #fff; font-size: 13px; font-weight: 700; } /* Draft Email's status line is shown as the centre-screen popup below instead. */ #page-gmail_tool #gmt-replyStatus { display: none !important; } #page-gmail_tool .gmt-status-overlay { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 23, 42, .45); } #page-gmail_tool .gmt-status-box { width: 100%; max-width: 360px; box-sizing: border-box; padding: 22px 22px 18px; text-align: center; background: #fff; border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.28); animation: gmt-status-in .18s ease-out; } #page-gmail_tool .gmt-status-icon { display: flex; justify-content: center; align-items: center; min-height: 52px; } #page-gmail_tool .gmt-status-text { margin-top: 14px; font-size: 15px; line-height: 1.45; color: #374151; word-break: break-word; } #page-gmail_tool .gmt-status-box[data-kind="success"] .gmt-status-text { font-weight: 600; color: #137333; } #page-gmail_tool .gmt-status-box[data-kind="error"] .gmt-status-text { color: #b3261e; text-align: left; } #page-gmail_tool .gmt-status-close { margin-top: 18px; padding: 10px 28px; border: none; border-radius: 8px; background: #6b7280; color: #fff; font-size: 15px; cursor: pointer; } #page-gmail_tool .gmt-big-spinner { width: 38px; height: 38px; border-radius: 50%; border: 4px solid #dbe6fb; border-top-color: #1a73e8; animation: gmt-spin .8s linear infinite; } #page-gmail_tool .gmt-big-check, #page-gmail_tool .gmt-big-cross { width: 52px; height: 52px; overflow: visible; } #page-gmail_tool .gmt-big-check-disc { fill: #1e9e4a; transform-origin: 26px 26px; animation: gmt-check-pop .45s cubic-bezier(.2, 1.4, .4, 1) both; } #page-gmail_tool .gmt-big-check-mark { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: gmt-check-draw .35s .3s ease-out forwards; } #page-gmail_tool .gmt-big-cross circle { fill: #d93025; } #page-gmail_tool .gmt-big-cross path { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; } @keyframes gmt-check-pop { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes gmt-check-draw { to { stroke-dashoffset: 0; } } @keyframes gmt-status-in { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { #page-gmail_tool .gmt-big-check-disc, #page-gmail_tool .gmt-status-box { animation: none; } #page-gmail_tool .gmt-big-check-mark { animation: none; stroke-dashoffset: 0; } } /* Status lines (Draft Email + Fetch): a clear banner per state. */ #page-gmail_tool #gmt-replyStatus[data-state], #page-gmail_tool #gmt-fetchPayLinkStatus[data-state] { display: block; box-sizing: border-box; margin-top: 14px; padding: 12px 14px; border-radius: 8px; border-left: 5px solid #9aa3b2; background: #fff; color: #374151; font-size: 14px; font-weight: 600; line-height: 1.45; box-shadow: 0 1px 5px rgba(0,0,0,.10); } /* Tap-to-dismiss cue on finished banners. */ #page-gmail_tool #gmt-replyStatus[data-state="success"], #page-gmail_tool #gmt-replyStatus[data-state="error"], #page-gmail_tool #gmt-replyStatus[data-state="info"], #page-gmail_tool #gmt-fetchPayLinkStatus[data-state="success"], #page-gmail_tool #gmt-fetchPayLinkStatus[data-state="error"], #page-gmail_tool #gmt-fetchPayLinkStatus[data-state="info"] { position: relative; padding-right: 40px; cursor: pointer; } #page-gmail_tool #gmt-replyStatus[data-state="success"]::after, #page-gmail_tool #gmt-replyStatus[data-state="error"]::after, #page-gmail_tool #gmt-replyStatus[data-state="info"]::after, #page-gmail_tool #gmt-fetchPayLinkStatus[data-state="success"]::after, #page-gmail_tool #gmt-fetchPayLinkStatus[data-state="error"]::after, #page-gmail_tool #gmt-fetchPayLinkStatus[data-state="info"]::after { content: '\2715'; position: absolute; top: 10px; right: 14px; font-size: 14px; font-weight: 400; opacity: .55; } #page-gmail_tool [data-state="busy"] { border-left-color: #1a73e8 !important; color: #174ea6 !important; background: #eaf1fe !important; } #page-gmail_tool [data-state="busy"]::before { content: ''; display: inline-block; width: 16px; height: 16px; margin-right: 10px; vertical-align: -3px; border: 3px solid #bfd4fa; border-top-color: #1a73e8; border-radius: 50%; animation: gmt-spin .8s linear infinite; } #page-gmail_tool #gmt-replyStatus[data-state="success"] { display: flex; border-left-color: #188038; border-color: #a8dab5; } #page-gmail_tool [data-state="error"] { border-left-color: #d93025 !important; color: #b3261e !important; background: #fce8e6 !important; } #page-gmail_tool #gmt-fetchPayLinkStatus[data-state="success"] { border-left-color: #188038; } #page-gmail_tool .gmt-spinner { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: middle; border: 2px solid #ccc; border-top-color: #1a73e8; border-radius: 50%; animation: gmt-spin 0.7s linear infinite; } /* Used inside colored buttons — the default gray/blue ring is barely visible against a blue button background. */ #page-gmail_tool .gmt-spinner.gmt-spinner-light { border-color: rgba(255,255,255,0.4); border-top-color: #fff; } @keyframes gmt-spin { to { transform: rotate(360deg); } } #page-gmail_tool .gmt-result-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eee; } #page-gmail_tool .gmt-result-info { flex: 1; min-width: 0; } #page-gmail_tool .gmt-result-info a { font-size: 14px; color: #1a73e8; text-decoration: none; cursor: pointer; } #page-gmail_tool .gmt-result-info a:hover { text-decoration: underline; } #page-gmail_tool .gmt-result-actions { display: flex; gap: 8px; flex: 0 0 auto; } /* Visited-link convention — indicates which result's popup was opened. */ #page-gmail_tool .gmt-result-info a.gmt-result-viewed { color: #6a1b9a; } #page-gmail_tool .gmt-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; padding: 20px; } #page-gmail_tool .gmt-modal-box { background: #fff; border-radius: 6px; max-width: 700px; width: 100%; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 4px 24px rgba(0,0,0,0.3); } #page-gmail_tool .gmt-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #eee; font-weight: 600; font-size: 15px; } #page-gmail_tool .gmt-modal-close { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: #666; padding: 0 4px; flex: 0 0 auto; } #page-gmail_tool .gmt-modal-close:hover { color: #000; } #page-gmail_tool .gmt-thread-list { padding: 8px 16px; overflow-y: auto; } #page-gmail_tool .gmt-thread-row { display: flex; gap: 10px; align-items: center; padding: 10px; margin-top: 8px; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; } #page-gmail_tool .gmt-thread-row:hover { background: #f5f8ff; } #page-gmail_tool .gmt-thread-row.selected { border-color: #1a73e8; background: #e8f0fe; } #page-gmail_tool .gmt-thread-row input { width: auto; margin-top: 3px; } #page-gmail_tool .gmt-thread-subject { font-weight: 600; font-size: 14px; word-break: break-word; } #page-gmail_tool .gmt-thread-meta { font-size: 12.5px; color: #555; margin-top: 2px; word-break: break-all; } #gmt-replyIntentCard { margin-top: 16px; font-size: 13px; } #gmt-replyIntentCard.gmt-intent-note { margin-top: 0; } #gmt-replyIntentCard .gmt-intent-label { font-weight: bold; margin-bottom: 4px; } #gmt-replyIntentCard .gmt-thread-row { margin-top: 0; cursor: default; } #page-gmail_tool .gmt-thread-icon { flex: 0 0 auto; } #page-gmail_tool .gmt-thread-icon svg { width: 42px; height: 42px; display: block; } #page-gmail_tool .gmt-thread-row.recent { position: relative; padding-right: 92px; min-height: 68px; } #page-gmail_tool .gmt-thread-recent { position: absolute; right: 10px; top: 8px; bottom: 8px; display: flex; align-items: center; } #page-gmail_tool .gmt-thread-recent svg { height: 45px; width: 61px; flex: 0 0 auto; } #page-gmail_tool .gmt-thread-note { font-size: 12px; font-weight: normal; color: #b45309; margin-top: 3px; } #page-gmail_tool .gmt-modal-body { padding: 16px; overflow-y: auto; white-space: pre-wrap; font-size: 13px; color: #222; } #page-gmail_tool .gmt-reply-btn { flex: 0 0 auto; padding: 4px 12px; font-size: 12px; } #page-gmail_tool .gmt-reply-preview { margin-top: 8px; padding: 12px; border: 1px solid #ddd; border-radius: 4px; height: 300px; overflow-y: auto; font-size: 13px; background: #fafafa; } #page-gmail_tool .gmt-reply-preview[contenteditable="true"] { background: #fff; border-color: #1a73e8; } #page-gmail_tool .gmt-replying-label { color: #1a73e8; font-weight: bold; } #page-gmail_tool .gmt-payment-card { border: 1px solid #ddd; border-radius: 4px; padding: 10px 12px; margin-top: 10px; background: #fafafa; } #page-gmail_tool .gmt-card-row { display: flex; align-items: flex-start; gap: 10px; } /* The app-wide "input, textarea, select { width: 100% }" rule falls back into effect here because flex-basis:auto uses the width property when set — without an explicit width these would stretch to fill their flex row instead of staying checkbox/radio-sized. */ #page-gmail_tool input[type=checkbox], #page-gmail_tool input[type=radio] { width: auto; flex: 0 0 auto; } #page-gmail_tool .gmt-card-row input[type=checkbox] { margin-top: 3px; } /* Position badge — shows the check order (1, 2, 3...) that Draft New Email will list the card in. Empty (unchecked) collapses to nothing via :empty rather than display:none, so re-checking doesn't need a separate show/hide toggle — renumberScrapedCards() just sets/clears its text. */ #page-gmail_tool .gmt-card-position { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; border-radius: 50%; background: #1a73e8; color: #fff; font-size: 11px; font-weight: 700; } #page-gmail_tool .gmt-card-position:empty { visibility: hidden; } #page-gmail_tool .gmt-card-content { flex: 1; min-width: 0; } #page-gmail_tool .gmt-link-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } #page-gmail_tool .gmt-link-date-short { display: none; } #page-gmail_tool .gmt-payment-card-link { display: block; color: #1a73e8; text-decoration: underline; margin-bottom: 4px; word-break: break-all; } #page-gmail_tool .gmt-payment-summary { font-size: 14px; color: #222; margin-top: 4px; } #page-gmail_tool .gmt-amount-field { display: inline-block; } #page-gmail_tool .gmt-amount-text { cursor: pointer; border-bottom: 1px dashed #999; } #page-gmail_tool .gmt-amount-input { width: 80px; padding: 2px 4px; font-size: 13px; box-sizing: border-box; } #page-gmail_tool .gmt-field-row { margin-top: 8px; } #page-gmail_tool .gmt-field-row label { display: block; font-size: 12px; font-weight: 600; color: #555; margin-bottom: 2px; } #page-gmail_tool .gmt-field-row input, #page-gmail_tool .gmt-field-row select { width: 100%; padding: 6px; font-size: 13px; box-sizing: border-box; } #page-gmail_tool .gmt-search-row { display: flex; gap: 8px; margin-top: 4px; } #page-gmail_tool .gmt-search-row input[type=text] { flex: 1; min-width: 0; width: auto; margin-top: 0; } #page-gmail_tool .gmt-search-row button { flex: 0 0 auto; padding: 8px 14px; margin-top: 0; } /* Data segment template's own condition — Field/Logic dropdowns plus a match-string input, all on one line (see gmt-bookingConditionRow). */ #page-gmail_tool .gmt-booking-condition-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; } #page-gmail_tool .gmt-booking-condition-row select { flex: 0 0 auto; width: auto; margin-top: 0; } #page-gmail_tool .gmt-booking-condition-row input[type=text] { flex: 1 1 160px; min-width: 100px; width: auto; margin-top: 0; } /* Auto-attached voucher list — each line is just a filename plus a remove icon; there's no manual entry UI any more (see autoAttachVouchersForCategory). */ #page-gmail_tool .gmt-attach-item { display: flex; align-items: center; gap: 12px; margin-top: 6px; padding: 0 8px 0 0; background: #f8f9fa; border: 1px solid #dfe3ea; border-radius: 999px; overflow: hidden; } /* "Attachment" tag at the left end of the pill — dark once a file is attached. */ #page-gmail_tool .gmt-attach-label { flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; padding: 6px 12px; background: #4b5563; color: #fff; } /* Breathing room above the message box and above the Attachment pill(s) on the Draft Email tab. */ #page-gmail_tool #gmt-replyPreview { margin-top: 20px; } #page-gmail_tool #gmttab-content-draft .gmt-field-row { margin-top: 24px; } #page-gmail_tool .gmt-attach-item.empty .gmt-attach-label { background: #e3e7ee; color: #8a93a3; } #page-gmail_tool .gmt-attach-item.empty .gmt-attach-name { color: #9aa3b2; } #page-gmail_tool .gmt-attach-name { flex: 1; min-width: 0; font-size: 13px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #page-gmail_tool .gmt-attach-remove { flex: 0 0 auto; width: 22px; height: 22px; padding: 0; margin-top: 0; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; font-size: 12px; color: #c5221f; } #page-gmail_tool .gmt-attach-remove:hover { background: #fce8e6; } #gmt-fetchedTotal { font-weight: bold; } /* Fetch sits beside the search field; Paste / Last Pay ID are small helpers underneath. */ #page-gmail_tool .gmt-search-tools { display: flex; gap: 8px; margin-top: 10px; } #gmt-fetchPayLinkStatus { display: block; margin-top: 10px; min-height: 16px; } /* Room for about 3 link cards (the space above New Email / Reply); more scroll inside. */ #gmt-fetchedCards { margin-top: 20px; min-height: 372px; max-height: 372px; overflow-y: auto; box-sizing: border-box; border: 1px solid #c9ced6; border-radius: 6px; padding: 0 10px 10px; } /* Paste / Last Pay ID: quiet grey helpers. */ #page-gmail_tool .gmt-search-tools button { background: #e9ecf1; color: #6b7280; border: 1px solid #cfd4dc; border-radius: 4px; padding: 3px 12px; font-size: 12px; line-height: 1.3; cursor: pointer; } #page-gmail_tool .gmt-search-tools button:hover { background: #dde1e8; color: #4b5563; } /* The Draft Email tab's Edit button shares the small grey look. */ #page-gmail_tool #gmt-editPreviewBtn { background: #e9ecf1; border: 1px solid #cfd4dc; border-radius: 4px; padding: 3px 12px; color: #6b7280; font-size: 12px; } #page-gmail_tool #gmt-editPreviewBtn:hover:not(:disabled) { background: #dde1e8; color: #4b5563; } #page-gmail_tool #gmt-editPreviewBtn:disabled { background: #eef0f3; color: #aab0ba; border-color: #e0e4ea; } #gmt-fetchedTotalCard { margin-top: 24px; } #page-gmail_tool .gmt-qty-warning { color: #c5221f; font-size: 13px; font-weight: bold; margin-top: 10px; } #gmt-templateList { margin-top: 16px; } #page-gmail_tool .gmt-tmpl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eee; } #page-gmail_tool .gmt-tmpl-row-actions { display: flex; gap: 8px; flex: 0 0 auto; } #page-gmail_tool .gmt-tmpl-editor { margin-top: 20px; padding: 12px; border: 1px solid #ddd; border-radius: 4px; background: #fafafa; } #page-gmail_tool .gmt-tmpl-toolbar { display: flex; gap: 6px; margin-top: 4px; } #page-gmail_tool .gmt-tmpl-toolbar button { padding: 4px 10px; background: #fff; color: #333; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; font-size: 13px; } #gmt-templateBody { margin-top: 6px; padding: 12px; border: 1px solid #ddd; border-radius: 4px; min-height: 160px; max-height: 400px; overflow-y: auto; font-size: 13px; background: #fff; } #gmt-templateBody:focus { border-color: #1a73e8; outline: none; } #gmt-templateSelect { width: 100%; padding: 8px; margin-top: 4px; box-sizing: border-box; font-size: 14px; } /* Full width, unlike the other Gmail Tool sub-tabs (capped at 720px by the shared rule above) — the Payment Links table needs the room, and this override wins on source order (same #gmttab-content-bml specificity, declared later). */ #gmttab-content-bml { max-width: none; } /* Payment Links list — a .grid-table like Bookings/Expenses, with its own horizontal scroll (.scroll-x, in index.html) on narrow screens instead of squeezing every column. #gmt-bmlList is the . */ #gmt-bml-table td a { color: #1a73e8; } #page-gmail_tool .gmt-bml-state { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; margin-left: 6px; background: #eee; color: #555; } #page-gmail_tool .gmt-bml-state-confirmed { background: #e6f4ea; color: #1e7e34; } #page-gmail_tool .gmt-bml-state-cancelled, #page-gmail_tool .gmt-bml-state-failed { background: #f1f1f1; color: #888; } #page-gmail_tool .gmt-bml-state-initiated, #page-gmail_tool .gmt-bml-state-qr_code_generated { background: #fef7e0; color: #b06000; } /* Mobile overrides — placed after the base rules above (not in the app-wide mobile media query near the top of this file) so align-items:stretch etc. actually win the cascade: same selector, same specificity as the base .gmt-tmpl-row/.gmt-result-item rules above, so source order decides, and a block placed earlier in the file loses to one declared later regardless of the media query matching. Button rows and radio rows wrap instead of overflowing; rows that pair dense info with action buttons (search results, template/payment-link rows) stack into a column, stretched full width, instead of squeezing both onto one line. Long-growing lists get a bounded, internally-scrolling area instead of pushing the whole page tall, matching the internal-scroll pattern this module already uses for .gmt-reply-preview/#gmt-templateBody. */ @media (max-width: 640px) { #page-gmail_tool .gmt-buttons { flex-wrap: wrap; gap: 8px; } #page-gmail_tool .gmt-result-item { flex-direction: column; align-items: stretch; gap: 8px; } #page-gmail_tool .gmt-result-actions { flex-wrap: wrap; } #page-gmail_tool .gmt-tmpl-row { flex-direction: column; align-items: stretch; gap: 8px; } #page-gmail_tool .gmt-tmpl-row-actions { flex-wrap: wrap; } #page-gmail_tool .gmt-tmpl-toolbar { flex-wrap: wrap; } #page-gmail_tool .gmt-reply-preview { height: 140px; } #gmt-templateBody { max-height: 280px; } #gmt-templateList { max-height: 50vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* ---- Fetch Email / Draft Email on a phone: thumb-sized, full-width controls ---- */ /* 16px fields — anything smaller makes iOS zoom the page on focus. */ #page-gmail_tool input[type=text], #page-gmail_tool input[type=email], #page-gmail_tool select, #page-gmail_tool textarea { font-size: 16px; } /* Search: the field and two compact buttons share one line. */ #page-gmail_tool .gmt-search-row { flex-wrap: nowrap; gap: 6px; } #page-gmail_tool .gmt-search-row input[type=text] { flex: 1 1 0; min-width: 0; } #page-gmail_tool .gmt-search-row button { flex: 0 0 auto; padding: 10px; font-size: 13px; } #page-gmail_tool .gmt-card-row input[type=checkbox] { width: 20px; height: 20px; } /* New Email / Reply and the four Draft Email actions: equal-width, easy to hit. */ #page-gmail_tool #gmt-draftNewEmailWrapFetch, #page-gmail_tool #gmt-draftActions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } #page-gmail_tool #gmt-draftActions { margin-top: 22px; } #page-gmail_tool #gmt-draftNewEmailWrapFetch button { min-height: 0; padding: 10px 8px; } /* Draft Email actions: same height as on desktop (not the taller tap size). */ #page-gmail_tool #gmt-draftActions button { min-height: 0; padding: 10px 8px; } #page-gmail_tool .gmt-search-tools button { min-height: 30px; padding: 4px 14px; } /* Link card: a slightly smaller link, with the date beside it on the same line. */ /* Plain text flow: the link runs the full width of the card, wrapping as needed, and the small red date carries on right after its last character. */ #page-gmail_tool .gmt-link-row { display: block; } #page-gmail_tool .gmt-link-row .gmt-payment-card-link { display: inline; font-size: 11px; margin-bottom: 0; } #page-gmail_tool .gmt-link-row > span:not(.gmt-payment-card-link) { display: block; margin-top: 2px; font-size: 10px !important; } #page-gmail_tool .gmt-link-row + .gmt-payment-summary { font-size: 12px; } /* Company + amount on one line; "(REF: ...) [Arrival 1]" together on the line below. */ #page-gmail_tool .gmt-payment-summary .gmt-ref-text::before { content: ''; display: block; } #page-gmail_tool .gmt-payment-summary .gmt-hint { display: inline !important; margin-left: 4px; font-size: 12px; } /* The link-card box on a phone (328px; desktop is 372px). */ #gmt-fetchedCards { min-height: 328px; max-height: 328px; } #page-gmail_tool .gmt-link-date-long { display: none; } #page-gmail_tool .gmt-link-date-short { display: inline; } #page-gmail_tool #gmt-replyStatus[data-state] { position: sticky; bottom: 10px; z-index: 20; font-size: 15px; } /* A message box (25% shorter than before), and Edit / remove controls big enough to tap. */ #page-gmail_tool .gmt-reply-preview { height: 27.75vh; min-height: 132px; } #page-gmail_tool #gmt-editPreviewBtn { padding: 8px 18px; font-size: 13px; } #page-gmail_tool .gmt-attach-item { border-radius: 22px; gap: 8px; } #page-gmail_tool .gmt-attach-label { padding: 8px 10px; } #page-gmail_tool .gmt-attach-remove { width: 30px; height: 30px; } /* Conversation card / popup row: smaller icon and badge so the text keeps its room. */ #page-gmail_tool .gmt-thread-row { gap: 8px; padding: 8px 10px; } #page-gmail_tool .gmt-thread-icon svg { width: 30px; height: 30px; } #page-gmail_tool .gmt-thread-row.recent { padding-right: 56px; min-height: 56px; } #page-gmail_tool .gmt-thread-recent { right: 8px; } #page-gmail_tool .gmt-thread-recent svg { width: 37px; height: 27px; } #page-gmail_tool .gmt-thread-meta { overflow-wrap: anywhere; word-break: normal; } /* The reply popup's buttons: two across, Cancel full width underneath. */ #page-gmail_tool #gmt-threadModal .gmt-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #page-gmail_tool #gmt-threadModal .gmt-buttons button { min-height: 0; padding: 10px 8px; } #page-gmail_tool #gmt-threadModal .gmt-buttons button:last-child { grid-column: 1 / -1; } /* Payment Links table already scrolls horizontally on narrow screens via .scroll-x/min-width in index.html, same as Bookings/Expenses — no override needed here. */ #gmt-bml-pagination { flex-wrap: wrap; } } /* ---- Phone fixes that must come AFTER the base rules they override ---- (the main phone block near the top of this file loses to these later, equal-specificity definitions, so the settings grids stayed 2-3 columns). */ @media (max-width: 640px) { .gdrive-grid, .voucher-grid, .tmpl-grid { grid-template-columns: 1fr; } .tab-bar, .rsec-bar { gap: 0; } .rtab-row { flex-wrap: nowrap; } /* Anything that renders a wide table or grid into these containers scrolls sideways inside them, instead of stretching or clipping the page. */ #report-output, #settings-users-wrap, #sadmin-users-wrap, #sadmin-companies-wrap, #sadmin-table-wrap, #rights-wrap, #logs-wrap, #locked-accounts-wrap, #ip-blacklist-wrap, #ll-wrap, #ttab-content-gst, #ttab-content-tax-payable, #ttab-content-tax-reports, .card-body, .modal-box { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ---- Tablet widths (641 - 1200px) ---- Below ~1200px the header tab bar no longer fits, so the hamburger menu takes over (setupMobileLayout in the script); below 860px the Invoices list sidebar is hidden, so its "List" button and slide-in panel have to work at those widths too — they used to exist only on a phone (640px and under). */ @media (max-width: 1200px) { #nav-hamburger { display: flex; align-items: center; } .nav-tabs, #company-id-badge, .hdr-user { display: none; } /* Sub-tab bars (Settings has 8) scroll sideways instead of running off the screen. */ .tab-bar, .rsec-bar { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } .tab-bar::-webkit-scrollbar, .rsec-bar::-webkit-scrollbar { display: none; } .tab-btn, .rsec-btn { white-space: nowrap; flex-shrink: 0; } /* Soft edge shadows show there are more tabs off to the left / right; they fade away once you reach the end. */ .tab-bar, .rsec-bar, .rtab-row { background: linear-gradient(to right, var(--bg) 30%, rgba(241,245,249,0)) 0 0 / 36px 100% no-repeat local, linear-gradient(to left, var(--bg) 30%, rgba(241,245,249,0)) 100% 0 / 36px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(15,23,42,.18), rgba(15,23,42,0)) 0 0 / 12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.18), rgba(15,23,42,0)) 100% 0 / 12px 100% no-repeat scroll; } } @media (max-width: 640px) { /* Easier to tap: taller tab buttons on a phone. */ .tab-btn, .rsec-btn { min-height: 42px; } } @media (max-width: 860px) { #btn-show-sidebar { display: inline-flex; } .sidebar.mobile-open { display: flex !important; position: fixed; top: var(--hdr-h, 52px); left: 0; bottom: 0; z-index: 500; width: 280px; box-shadow: 4px 0 20px rgba(0,0,0,.25); } } /* Draft Email: the ⋮ menu that marks / unmarks the four Bookings emails by hand. */ #page-gmail_tool #gmt-markWrap { position: relative; margin-left: auto; align-self: center; } #page-gmail_tool .gmt-buttons button.gmt-mark-btn { background: #6b7280; padding: 6px 12px; font-size: 20px; line-height: 1; min-height: 0; } #page-gmail_tool #gmt-markMenu { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 50; min-width: 250px; background: #fff; border: 1px solid #e2e8f0; border-radius: 7px; box-shadow: 0 4px 16px rgba(0,0,0,.13); padding: 4px 0; } #page-gmail_tool .gmt-mark-head { padding: 6px 14px 8px; font-size: 12px; color: #666; border-bottom: 1px solid #e2e8f0; margin-bottom: 4px; } #page-gmail_tool #gmt-markMenu button.gmt-mark-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 14px; min-height: 0; font-size: 13px; background: none; border: none; border-radius: 0; color: #1e293b; cursor: pointer; white-space: nowrap; } #page-gmail_tool #gmt-markMenu button.gmt-mark-item:hover { background: #f1f5f9; } #page-gmail_tool #gmt-markMenu button.gmt-mark-item.gmt-marked { background: #e5e5e5; } #page-gmail_tool #gmt-markMenu button.gmt-mark-item.gmt-marked:hover { background: #d9d9d9; } #page-gmail_tool #gmt-markMenu button.gmt-mark-item:disabled { background: #f1f5f9; cursor: wait; color: #1e293b; } #page-gmail_tool .gmt-mark-tick { width: 14px; color: #188038; font-weight: bold; } @media (max-width: 640px) { /* the ⋮ sits in a narrow third column, on the first row of buttons */ #page-gmail_tool #gmt-draftActions { grid-template-columns: 1fr 1fr auto; gap: 24px; } #page-gmail_tool #gmt-draftActions #gmt-markWrap { grid-column: 3; grid-row: 1; justify-self: end; align-self: center; margin-left: 0; } #page-gmail_tool #gmt-draftActions button.gmt-mark-btn { min-height: 0; padding: 10px 12px; font-size: 18px; } #page-gmail_tool #gmt-markMenu { min-width: 230px; } } /* Draft Email: formatting tools beside "Done Editing" (shown only in edit mode). */ #page-gmail_tool #gmt-fmtBar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } #page-gmail_tool #gmt-fmtBar[style*="display: none"] { display: none; } #page-gmail_tool #gmt-fmtBar > button { background: #e9ecf1; border: 1px solid #cfd4dc; border-radius: 4px; color: #374151; padding: 3px 10px; font-size: 13px; min-width: 30px; cursor: pointer; } #page-gmail_tool #gmt-fmtBar > button:hover { background: #dde1e8; } #page-gmail_tool .gmt-fmt-sep { width: 1px; height: 18px; background: #cfd4dc; margin: 0 4px; } #page-gmail_tool .gmt-fmt-a { color: #d93025; font-weight: bold; border-bottom: 3px solid #d93025; line-height: 1; padding: 0 1px; } #page-gmail_tool .gmt-fmt-hl { background: #fff475; font-weight: bold; padding: 0 3px; } #page-gmail_tool #gmt-fmtPalette { position: absolute; top: calc(100% + 4px); z-index: 50; gap: 4px; padding: 6px; background: #fff; border: 1px solid #e2e8f0; border-radius: 7px; box-shadow: 0 4px 16px rgba(0,0,0,.13); } #page-gmail_tool #gmt-fmtPalette button.gmt-fmt-swatch { width: 24px; height: 24px; padding: 0; min-height: 0; border: 1px solid #cfd4dc; border-radius: 4px; cursor: pointer; } #page-gmail_tool #gmt-fmtPalette button.gmt-fmt-none { background: linear-gradient(135deg, #fff 45%, #d93025 45%, #d93025 55%, #fff 55%) !important; } @media (max-width: 640px) { #page-gmail_tool #gmt-fmtBar > button { min-height: 36px; min-width: 36px; } #page-gmail_tool .gmt-fmt-sep { display: none; } } /* Bookings: heads-up pills under a row's Detail text (hotel email missing, no payment link). */ .bk-warn-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; } .bk-warn { display: inline-block; font-size: .64rem; line-height: 1.3; padding: 0 7px; border-radius: 9px; background: #fef3c7; border: 1px solid #f59e0b; color: #92400e; white-space: nowrap; cursor: help; } /* Quick-email popup: the Gmail Tool page shown as a popup over Bookings, with only the Draft Email tab. */ #gmt-quickBackdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 1000; } #page-gmail_tool #gmt-quickBar { display: none; } #page-gmail_tool.gmt-quick { display: block; position: fixed; top: 4vh; left: 0; right: 0; margin: 0 auto; width: min(820px, 96vw); height: auto; max-height: 92vh; z-index: 1001; background: var(--bg); border-radius: 10px; box-shadow: 0 12px 48px rgba(0,0,0,.4); overflow-y: auto; padding: 0 22px 22px; } /* The page's normal 720px column limit would leave the right of the popup empty. */ #page-gmail_tool.gmt-quick #gmttab-content-draft { max-width: none; } #page-gmail_tool.gmt-quick > .toolbar, #page-gmail_tool.gmt-quick > .tab-bar { display: none; } #page-gmail_tool.gmt-quick #gmt-quickBar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 14px 0 10px; margin-bottom: 14px; border-bottom: 1px solid #d9dee6; } #page-gmail_tool #gmt-quickTitle { flex: 1; min-width: 0; font-weight: 700; font-size: 1rem; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #page-gmail_tool #gmt-quickCloseBtn { background: none; border: none; font-size: 26px; line-height: 1; color: #6b7280; cursor: pointer; padding: 0 6px; } #page-gmail_tool #gmt-quickCloseBtn:hover { color: #1e293b; } @media (max-width: 640px) { #page-gmail_tool.gmt-quick { top: 0; max-height: 100vh; width: 100%; border-radius: 0; padding: 0 12px 16px; } } @media (max-width: 640px) { #page-gmail_tool #gmt-quickTitle { white-space: normal; font-size: .9rem; line-height: 1.25; } } /* Quick-email popup header: the close button is a big corner target; Open in Gmail Tool sits well away from it. */ #page-gmail_tool #gmt-quickCloseBtn { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 60px; height: 54px; padding: 0; margin: -14px -22px -10px 0; border-radius: 0 10px 0 0; } #page-gmail_tool #gmt-quickCloseBtn:hover { background: rgba(15, 23, 42, .08); } @media (max-width: 640px) { #page-gmail_tool #gmt-quickCloseBtn { margin-right: -12px; border-radius: 0; } } /* ---- One close button for every popup: a big target in the top-right corner ---- */ .popup-x { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 60px; height: 54px; padding: 0; border: none; background: none; font-size: 26px; line-height: 1; color: #6b7280; cursor: pointer; } .popup-x:hover { background: rgba(15, 23, 42, .08); color: #1e293b; } /* Generic modal: stays at the top-right corner while the content scrolls, and takes no room of its own. */ .modal-box > .popup-x { position: sticky; top: -24px; float: right; margin: -24px -24px -54px 0; z-index: 3; border-top-right-radius: var(--radius); } .modal-box > .modal-title { padding-right: 44px; } /* Service modal: pinned to the corner. */ .svc-modal { position: relative; } .popup-x-abs { position: absolute; top: 0; right: 0; border-top-right-radius: var(--radius); } #svc-modal-title { padding-right: 44px; } /* Catalogue picker and Gmail Tool's popups already had a × in their header: same look, in the corner. */ .btn-cat-close { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; align-self: flex-start; width: 60px; height: 54px; padding: 0; margin: -16px -20px 0 0; font-size: 26px; line-height: 1; border-top-right-radius: 10px; } .btn-cat-close:hover { background: rgba(15, 23, 42, .08); color: #1e293b; } #page-gmail_tool .gmt-modal-close { display: flex; align-items: center; justify-content: center; align-self: flex-start; width: 60px; height: 54px; padding: 0; margin: -14px -16px 0 0; font-size: 26px; line-height: 1; color: #6b7280; border-top-right-radius: 6px; } #page-gmail_tool .gmt-modal-close:hover { background: rgba(15, 23, 42, .08); color: #1e293b; } @media (max-width: 640px) { .modal-box > .popup-x { top: -20px; margin: -20px -16px -54px 0; border-top-right-radius: 16px; } } /* Quick-email popup: "Open in Gmail Tool" sits well away from the close button; hidden on phones to save room. */ #page-gmail_tool #gmt-quickOpenBtn { background: #e9ecf1; border: 1px solid #cfd4dc; border-radius: 4px; color: #4b5563; font-size: 12px; padding: 5px 12px; cursor: pointer; white-space: nowrap; margin-right: 28px; } #page-gmail_tool #gmt-quickOpenBtn:hover { background: #dde1e8; } @media (max-width: 640px) { #page-gmail_tool #gmt-quickOpenBtn { display: none; } } /* Bookings row menu on a phone: taller rows, so a thumb is less likely to hit the neighbouring item. */ @media (max-width: 640px) { .brow-dropdown button { padding: 13px 18px; font-size: .88rem; line-height: 1.2; } } /* The booking row whose ⋮ menu is open: each cell fades to a deeper shade of ITS OWN colour toward the top and bottom edges (a copy of the cell's background, darkened, shown only at the edges), the middle left untouched so the row's colour still reads true. */ #bookings-tbody tr.brow-menu-open td { position: relative; isolation: isolate; } #bookings-tbody tr.brow-menu-open td::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: inherit; filter: brightness(.88) saturate(1.3); -webkit-mask-image: linear-gradient(to bottom, #000 0, transparent 34%, transparent 66%, #000 100%); mask-image: linear-gradient(to bottom, #000 0, transparent 34%, transparent 66%, #000 100%); } /* ...and its grid lines turn black while the menu is open. */ #bookings-tbody tr.brow-menu-open td { border-color: #000 !important; } /* No hover hairline inside the open row, and the row above shares its top edge (collapsed borders) so that edge turns black too. */ #bookings-tbody tr.brow-menu-open td, #bookings-tbody tr.brow-menu-open:hover td { box-shadow: none !important; } #bookings-tbody tr:has(+ tr.brow-menu-open) td { border-bottom-color: #000 !important; } /* Bookings: a hovered row is outlined by ONE dark line top and bottom — its own grid lines take the hover colour and the separate inset hairline is dropped, so no pale line is left beside it. */ #bookings-tbody tr:hover td { border-top-color: #6b7280; border-bottom-color: #6b7280; box-shadow: inset 0 9px 7px -7px rgba(0,0,0,.35), inset 0 -9px 7px -7px rgba(0,0,0,.35); } /* + a soft black fade from the top and bottom edges */ #bookings-tbody tr:has(+ tr:hover) td { border-bottom-color: #6b7280; } /* Invoice Details card: when the four Proforma status pills fit on one line, reserve one line (not two) for them, and make the Tax-only Credit Note slot as tall as the Proforma title box, so the card keeps one height in both modes. */ #inv-status-row { container-type: inline-size; } @container (min-width: 500px) { #inv-status-row .status-select { min-height: 34px !important; } } #inv-credit-note-block { min-height: 34px; display: flex; align-items: flex-end; } /* checkbox sits at the bottom of its slot */ /* Bookings: Detail's Date / Type disagrees with that column — the column's cell is red. */ #bookings-tbody td.brow-mismatch-cell { background: #dc2626 !important; color: #fff !important; } /* Quick-email popup: a spinner over the form while the email is being prepared. */ #page-gmail_tool #gmt-quickLoading { display: none; } #page-gmail_tool.gmt-quick.gmt-loading #gmt-quickLoading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; position: absolute; top: 62px; left: 0; right: 0; bottom: 0; z-index: 30; background: rgba(241, 245, 249, .88); color: #475569; font-size: 14px; } /* Quick-email popup: only the template's green default button shows; the other actions live in the ⋮ menu. */ #page-gmail_tool.gmt-quick #gmt-draftActions.gmt-has-default button.gmt-draft:not(.gmt-default-send):not(.gmt-mark-btn) { display: none !important; } #page-gmail_tool .gmt-mark-divider { height: 1px; background: #e2e8f0; margin: 6px 0; } #page-gmail_tool #gmt-markMenu button.gmt-action-item:disabled { color: #9aa3b2; cursor: not-allowed; } /* Quick-email popup (Bookings ⋮ menu): the template is chosen by the menu item and the From address by the app (a reply uses the address on the existing thread, a new email the main address), so neither is shown. */ #page-gmail_tool.gmt-quick #gmt-fromRow, #page-gmail_tool.gmt-quick label[for="gmt-templateSelect"], #page-gmail_tool.gmt-quick #gmt-templateSelect { display: none !important; } /* Bookings: a row dated today has a yellow ID and Date; its other cells get a yellow top and bottom edge to match. (:where keeps this lowest in priority, so the hover / open-menu lines still win.) */ #bookings-tbody :where(tr.brow-today) :where(td:not(:nth-child(-n+2))) { border-top: 2px solid #feff2a; border-bottom: 2px solid #feff2a; } /* Invoices editor toolbar: a little more room between Email, Print / PDF and Save. */ .toolbar:has(#btn-save) { gap: 14px; } /* Email button: as tall as its neighbours (the enlarged ✉ has no height of its own), glyph centred. */ #btn-inv-email { display: inline-flex; align-items: center; justify-content: center; align-self: stretch; min-width: 40px; padding-top: 0; padding-bottom: 0; } /* Bookings: the one row added or edited most recently has a bright blue (#007eff), softly shaded top and bottom edge (after the "today" yellow rule, so it wins there; :where keeps hover / open-menu lines in front of it). */ #bookings-tbody :where(tr.brow-last) :where(td) { border-top: 2px solid #007eff; border-bottom: 2px solid #007eff; box-shadow: inset 0 4px 5px -3px rgba(0, 126, 255, .5), inset 0 -4px 5px -3px rgba(0, 126, 255, .5); } /* Invoices toolbar: Input Tax button - red until a claim is entered for the invoice, then green. */ #btn-inv-input-tax.it-missing { color: #dc2626; border-color: #dc2626; } #btn-inv-input-tax.it-done { color: #16a34a; border-color: #16a34a; } /* Invoices sidebar: the invoice this user opened last has a black border. */ .sidebar-item.si-last { box-shadow: inset 0 0 0 2px #111; } /* Expense / Input Tax popup: more air between the fields, labels and rows. */ #efm-tab-expense .grid-2, #efm-tab-taxinvoice .grid-2 { column-gap: 20px; row-gap: 0; } #efm-tab-expense .form-row, #efm-tab-taxinvoice .form-row { margin-bottom: 22px; } #efm-tab-expense .form-row label, #efm-tab-taxinvoice .form-row label { display: block; margin-bottom: 7px; } #efm-tab-taxinvoice #ef-it-net { margin: -8px 0 22px; } #efm-tab-expense > .form-row:last-child, #efm-tab-taxinvoice > .form-row:last-child { margin-bottom: 0; } /* ...and some empty space between the tab bar and the first field. */ #efm-tab-expense, #efm-tab-taxinvoice, #efm-tab-notes { padding-top: 14px; }