/* Couple dashboard -- ported from the finalized couple-dashboard design. */ .tnc-app{ background:var(--tnc-ivory); padding:26px 22px 55px; max-width:1450px; margin:0 auto; } /* ------------------------------------------------------------------ Dashboard-wide polish pass -- buttons, dropdowns, search, subtabs, pagination, the block-duration menu and table rows. Everything here is scoped under .tnc-app (never bare .tnc-btn/.tnc-ad-filter-select etc.) so it only touches the three dashboards (member/vendor/admin) and leaves the public marketing pages' already-approved look alone. ------------------------------------------------------------------ */ /* Buttons -- same oxblood/gold/outline/danger palette, just rounded and given a soft lift so they read as the same family as the panel cards above instead of flat corporate-form rectangles. */ .tnc-app .tnc-btn{ border-radius:8px; box-shadow:0 1px 3px rgba(31,14,12,.08); transition:background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .tnc-app .tnc-btn:hover{ box-shadow:0 6px 16px rgba(31,14,12,.16); transform:translateY(-1px); } .tnc-app .tnc-btn:active{ transform:translateY(0); box-shadow:0 1px 3px rgba(31,14,12,.1); } .tnc-app .tnc-ad-icon-btn:hover{ transform:translateY(-1px); box-shadow:0 3px 8px rgba(31,14,12,.12); } /* Filter/status dropdowns -- a slim custom gold chevron replacing the plain browser arrow, with generous right-padding reserved for it so it can't repeat the earlier overlap bug (that one came from pairing appearance:none with width:auto; this keeps the select's width fixed by min-width, so the reserved padding is always honoured). */ .tnc-app .tnc-ad-filter-select{ appearance:none !important; -webkit-appearance:none !important; -moz-appearance:none !important; border-radius:8px !important; border:1px solid var(--tnc-border) !important; background-color:#fff !important; margin:0 !important; box-shadow:none !important; padding:0 34px 0 12px !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23C6A15B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; } .tnc-app .tnc-ad-search{ border-radius:999px; padding-left:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Ccircle cx='5.5' cy='5.5' r='4.5' fill='none' stroke='%23A89A8C' stroke-width='1.4'/%3E%3Cpath d='M9 9l3 3' stroke='%23A89A8C' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:12px center; } /* Subtabs (People's Member/Vendor/Blocked pill filter) -- a touch more lift on the active pill so it reads as pressed/selected, not just a different fill color. */ .tnc-app .tnc-ad-subtab{ transition:.18s ease; } .tnc-app .tnc-ad-subtab.active{ box-shadow:0 3px 10px rgba(31,14,12,.18); } /* Bulk-select bar -- was plain inline text; now a quiet rounded strip so "N selected / Delete Selected" reads as its own small toolbar instead of floating text under the table. */ .tnc-app .tnc-ad-bulk-bar{ background:var(--tnc-cream); border-radius:8px; padding:10px 14px; } .tnc-app .tnc-ad-bulk-bar-top{ margin-bottom:14px; } /* Pagination -- "View all N" / Prev/Next already carry .tnc-btn in the markup (same classes as Delete Selected), so they get that square, shadowed, lift-on-hover button styling for free -- no separate pill override needed here. */ /* Table rows -- a hair of zebra tinting plus a smoother hover, so a long list of vendors reads in bands rather than one dense undifferentiated block. */ .tnc-app .tnc-ad-table-row:not(.tnc-ad-table-head):nth-child(even){ background:rgba(243,235,221,.4); } .tnc-app .tnc-ad-table-row:not(.tnc-ad-table-head){ transition:background .15s ease; } /* Block-duration dropdown menu -- slightly larger radius/shadow to match the rest of this pass's rounder, softer feel. */ .tnc-app .tnc-ad-block-menu{ border-radius:12px; } /* Small "Saved" confirmation toast -- fired from the single api() choke point on every successful POST/DELETE, so every save or remove action across the whole dashboard gets the same quiet confirmation, whether it went through a Save button or saved live as you left a field. */ .tnc-save-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(12px); z-index:9999; background:var(--tnc-oxblood); color:#fff; font-size:12px; font-weight:700; letter-spacing:.3px; padding:10px 20px; border-radius:999px; box-shadow:0 8px 20px rgba(31,14,12,.25); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; } .tnc-save-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); } .tnc-save-toast.tnc-save-toast-remove{ background:var(--tnc-rose-dark); } /* Sidebar + shell -- shared by all three dashboards (member, vendor, admin: dashboard-app.php, vendor-dashboard.php, admin-dashboard.php), which all reuse .tnc-app/.tnc-dash-layout/.tnc-dash-sidebar. The old full-width "☰ Menu" button (.tnc-dash-mobile-toggle) is kept as a fallback below, but every dashboard has now moved to the bottom-tab-bar pattern underneath it -- each wrapper carries an extra .tnc-dash-tabbed class (see dashboard-app.php / vendor-dashboard.php / admin-dashboard.php) that switches it on. */ .tnc-dash-mobile-toggle{ display:none; align-items:center; gap:10px; background:var(--tnc-oxblood); color:#fff; padding:13px 16px; font-size:12px; font-weight:700; letter-spacing:.3px; margin-bottom:16px; cursor:pointer; border:0; width:100%; text-align:left; touch-action:manipulation; } .tnc-dash-layout{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:24px; align-items:start; } @media(max-width:900px){ .tnc-dash-layout{ grid-template-columns:1fr; } .tnc-dash-mobile-toggle{ display:flex; } .tnc-dash-sidebar{ display:none; } .tnc-dash-sidebar.open{ display:block; } } /* Mobile bottom tab bar -- replaces the old full-width "☰ Menu" button on every dashboard that carries .tnc-dash-tabbed. Hidden by default (desktop keeps the permanent sidebar); shown only below the 900px breakpoint, same as the sidebar used to toggle at. Each dashboard's own direct-switch tabs reuse the exact same .tnc-dash-menu-item[data-tnc-view] wiring its sidebar links already use; "More" (#tnc-dash-mobile-toggle) opens the sidebar itself as a bottom sheet, scoped the same way just below. */ .tnc-dash-tabbed .tnc-dash-bottom-tabs{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:1002; background:#fff; border-top:1px solid var(--tnc-border); padding:7px 4px calc(7px + env(safe-area-inset-bottom,0px)); box-shadow:0 -6px 20px rgba(31,14,12,.08); } .tnc-dash-tabbed .tnc-dash-bottom-tabs .tnc-dash-menu-item{ flex:1; flex-direction:column; gap:3px; margin:0; padding:7px 2px 0; border:0; border-left:0; color:var(--tnc-muted); font-size:9.5px; text-align:center; position:relative; touch-action:manipulation; } .tnc-dash-tabbed .tnc-dash-bottom-tabs .tnc-dash-menu-item:hover{ background:none; color:var(--tnc-oxblood); } .tnc-dash-tabbed .tnc-dash-bottom-tabs .tnc-dash-menu-item .tnc-dash-menu-icon{ width:auto; font-size:18px; line-height:1; } .tnc-dash-tabbed .tnc-dash-bottom-tabs .tnc-dash-menu-item.active{ background:none; border-left:0; color:var(--tnc-oxblood); font-weight:700; } .tnc-dash-tabbed .tnc-dash-bottom-tabs .tnc-dash-menu-item.active::before{ content:""; position:absolute; top:-7px; left:50%; transform:translateX(-50%); width:22px; height:3px; border-radius:0 0 3px 3px; background:var(--tnc-gold); } .tnc-dash-tabbed .tnc-dash-bottom-tabs .tnc-msg-badge, .tnc-dash-tabbed .tnc-dash-bottom-tabs .tnc-vd-nav-badge{ position:absolute; top:1px; left:50%; margin-left:4px; min-width:14px; height:14px; padding:0 3px; font-size:8px; line-height:14px; border-radius:8px; background:var(--tnc-rose-dark); color:#fff; } /* Dim backdrop behind a dashboard's "More" sheet */ .tnc-dash-tabbed .tnc-dash-sheet-backdrop{ display:none; position:fixed; inset:0; background:rgba(31,14,12,.45); z-index:1000; } .tnc-dash-tabbed .tnc-dash-sheet-backdrop.show{ display:block; } @media(max-width:900px){ .tnc-dash-tabbed{ padding-bottom:88px; } /* keeps content clear of the fixed tab bar */ .tnc-dash-tabbed .tnc-dash-mobile-toggle{ display:none; } /* superseded by the bottom bar's own "More" button */ .tnc-dash-tabbed .tnc-dash-bottom-tabs{ display:flex; } .tnc-dash-tabbed .tnc-dash-sidebar.open{ display:block; position:fixed; left:0; right:0; top:auto; bottom:64px; max-height:72vh; overflow-y:auto; z-index:1001; border-radius:16px 16px 0 0; box-shadow:0 -10px 30px rgba(31,14,12,.3); } } .tnc-dash-sidebar{ background:var(--tnc-oxblood); position:sticky; top:20px; } .tnc-dash-brand{ padding:26px 20px 22px; border-bottom:1px solid rgba(255,255,255,.12); } .tnc-dash-brand-small{ color:var(--tnc-light-gold); font-size:10px; text-transform:uppercase; letter-spacing:2.5px; margin-bottom:8px; } .tnc-dash-brand-name{ color:#fff; font-family:Georgia,serif; font-size:20px; line-height:1.2; } .tnc-dash-menu{ padding:14px 9px 18px; } .tnc-dash-menu-title{ color:#9fb5ae; font-size:9px; text-transform:uppercase; letter-spacing:1.6px; padding:13px 11px 6px; } .tnc-dash-menu-item{ display:flex; align-items:center; width:100%; gap:11px; padding:11px 11px; margin:2px 0; background:none; color:#d7e3df; text-decoration:none !important; font-size:12px; font-weight:400; text-transform:none; letter-spacing:normal; cursor:pointer; transition:.2s ease; border:0; border-left:3px solid transparent; touch-action:manipulation; } .tnc-dash-menu-item:hover{ background:rgba(255,255,255,.06); color:#fff; } .tnc-dash-menu-item.active{ background:rgba(255,255,255,.09); color:#fff; border-left-color:var(--tnc-gold); } .tnc-dash-menu-icon{ width:17px; text-align:center; font-size:13px; flex-shrink:0; } .tnc-vd-nav-badge{ margin-left:auto; background:var(--tnc-gold); color:var(--tnc-dark); font-size:10px; font-weight:700; line-height:1; padding:3px 6px; border-radius:20px; } .tnc-dash-menu-item.logout{ color:var(--tnc-rose); } .tnc-dash-main{ min-width:0; } .tnc-dash-topbar{ background:#fff; border:1px solid var(--tnc-border); padding:15px 18px; display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; } .tnc-dash-breadcrumb{ font-size:11px; color:var(--tnc-muted); } .tnc-dash-breadcrumb strong{ color:var(--tnc-dark); } .tnc-dash-user{ display:flex; align-items:center; gap:10px; } .tnc-dash-avatar{ width:38px; height:38px; border-radius:50%; background:var(--tnc-cream); display:flex; align-items:center; justify-content:center; color:var(--tnc-oxblood); font-weight:700; font-size:11px; overflow:hidden; flex-shrink:0; } .tnc-dash-avatar img{ width:100%; height:100%; object-fit:cover; } .tnc-dash-user-name{ font-size:12px; font-weight:700; color:var(--tnc-dark); } .tnc-dash-user-role{ color:var(--tnc-muted); font-size:10px; margin-top:2px; } .tnc-dash-welcome{ margin-bottom:20px; } .tnc-dash-welcome-label{ color:var(--tnc-gold); font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:7px; } .tnc-dash-welcome h1{ font-size:28px; margin:0 0 7px; } .tnc-dash-welcome p{ color:var(--tnc-muted); margin:0; font-size:13px; } .tnc-wed-banner{ background:var(--tnc-oxblood); padding:24px 26px; margin-bottom:20px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; position:relative; overflow:hidden; } .tnc-wed-banner:after{ content:""; position:absolute; right:-80px; top:-100px; width:250px; height:250px; border:1px solid rgba(229,207,154,.14); border-radius:50%; } .tnc-wed-left{ position:relative; z-index:1; } .tnc-wed-small{ color:var(--tnc-light-gold); text-transform:uppercase; letter-spacing:2px; font-size:9px; font-weight:700; margin-bottom:7px; } .tnc-wed-names{ color:#fff; font-family:Georgia,serif; font-size:23px; margin-bottom:6px; } .tnc-wed-date{ color:#cbd8d3; font-size:12px; } .tnc-wed-countdown{ position:relative; z-index:1; display:flex; gap:9px; } .tnc-wed-cbox{ width:60px; height:60px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); display:flex; flex-direction:column; justify-content:center; align-items:center; } .tnc-wed-cnum{ color:#fff; font-family:Georgia,serif; font-size:18px; } .tnc-wed-clabel{ color:#b9c9c3; text-transform:uppercase; font-size:7px; letter-spacing:1px; margin-top:3px; } .tnc-stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:22px; } @media(max-width:700px){ .tnc-stat-grid{ grid-template-columns:1fr 1fr; } } /* A stat WITH an icon lays out icon-left / number+label-right, so a wide card on desktop doesn't sit mostly empty; a stat with no icon (e.g. the Guest List tab's 3-up summary) stays a simple stacked block. */ .tnc-stat{ background:#fff; border:1px solid var(--tnc-border); border-radius:10px; padding:14px 16px; transition:.2s ease; box-shadow:0 1px 3px rgba(31,14,12,.04); } .tnc-stat:hover{ border-color:var(--tnc-gold); box-shadow:0 6px 18px rgba(31,14,12,.08); transform:translateY(-1px); } .tnc-stat:has(.tnc-stat-icon){ display:grid; grid-template-columns:38px 1fr; align-items:center; column-gap:13px; row-gap:2px; } .tnc-stat-icon{ width:38px; height:38px; border-radius:50%; background:var(--tnc-ivory); border:1px solid var(--tnc-gold); display:flex; justify-content:center; align-items:center; color:var(--tnc-oxblood); font-family:Georgia,serif; font-size:13px; grid-row:1/3; } .tnc-stat-number{ color:var(--tnc-dark); font-family:Georgia,serif; font-size:21px; line-height:1.2; } .tnc-stat-label{ color:var(--tnc-muted); font-size:10px; letter-spacing:.3px; text-transform:uppercase; } .tnc-section-title{ display:flex; align-items:center; gap:10px; margin:0 0 14px; font-family:Georgia,serif; font-size:16px; font-weight:400; color:var(--tnc-dark); } .tnc-section-title:before{ content:""; width:20px; height:1px; background:var(--tnc-gold); } .tnc-panel-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr); gap:18px; margin-bottom:18px; } @media(max-width:900px){ .tnc-panel-grid{ grid-template-columns:1fr; } } .tnc-view{ display:none; } .tnc-view.active{ display:block; } /* Every admin-dashboard section (Overview, Vendors, People, Add/Edit Vendor, Reported Conversations, Enquiries, ...) is built from this one .tnc-panel/.tnc-panel-head/.tnc-panel-title shell, so refining it here is what carries an elegant, considered feel into every section at once, the same way .tnc-premium-home's cards do on the public pages, without touching each view's own markup. */ .tnc-panel{ background:#fff; border:1px solid var(--tnc-border); border-radius:10px; margin-bottom:18px; box-shadow:0 2px 14px rgba(31,14,12,.05); overflow:hidden; } .tnc-panel.tnc-accent{ border-top:3px solid var(--tnc-gold); } .tnc-panel-head{ padding:20px 22px; border-bottom:1px solid var(--tnc-border); background:linear-gradient(180deg,var(--tnc-ivory),#fff); display:flex; align-items:center; justify-content:space-between; gap:12px; } .tnc-panel-title{ display:flex; align-items:center; gap:10px; margin:0; font-family:Georgia,"Times New Roman",serif; font-weight:400; font-size:19px; color:var(--tnc-dark); letter-spacing:.1px; } .tnc-panel-title:before{ content:""; flex-shrink:0; width:18px; height:1.5px; background:var(--tnc-gold); } .tnc-panel-subtitle{ margin:6px 0 0; font-size:12px; color:var(--tnc-muted); line-height:1.5; font-family:Arial,Helvetica,sans-serif; max-width:520px; } .tnc-panel-body{ padding:22px; } /* "Edit My Listing" form -- grouped into labeled sections with a two-column grid for short fields (Category/City, Phone/WhatsApp, Website/Price), instead of one long single-column stack of inputs. .tnc-vd-field carries its own label/input styling below (same polished treatment as the site's .tnc-field elsewhere -- consistent 48px height, focus glow -- tnc-base.css's copy just never got written for this particular class name) -- this section adds the grid/section layer on top of that. */ .tnc-vd-form-section{ margin-bottom:22px; } .tnc-vd-form-section:last-of-type{ margin-bottom:0; } .tnc-vd-form-section-title{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--tnc-gold); border-bottom:1px solid var(--tnc-border); padding-bottom:8px; margin-bottom:4px; } .tnc-vd-field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; } .tnc-vd-field-grid .tnc-vd-field-full{ grid-column:1/-1; } @media(max-width:560px){ .tnc-vd-field-grid{ grid-template-columns:1fr; } } /* "Have the vendor review & approve it first" checkbox on Add Vendor -- a plain label row, not a styled .tnc-vd-field, since it's a toggle + explanatory sentence rather than an input with a short label above it. */ .tnc-av-review-toggle{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; padding:12px 14px; background:var(--tnc-ivory); border:1px solid var(--tnc-border); border-radius:8px; } .tnc-av-review-toggle input{ margin-top:3px; flex-shrink:0; } .tnc-av-review-toggle strong{ font-size:13.5px; color:var(--tnc-dark); } .tnc-av-review-toggle .tnc-optional-tag{ font-size:12px; line-height:1.5; display:inline-block; margin-top:2px; } .tnc-vd-field{ min-width:0; margin-bottom:14px; } .tnc-vd-field label{ display:block; margin:0 0 8px; color:var(--tnc-text); font-size:12px; font-weight:700; letter-spacing:.2px; } .tnc-vd-field input:not([type="radio"]):not([type="checkbox"]), .tnc-vd-field select, .tnc-vd-field textarea{ width:100%; border:1px solid var(--tnc-border) !important; border-radius:0 !important; background:#fff !important; color:var(--tnc-text) !important; font-family:Arial,Helvetica,sans-serif !important; box-shadow:none !important; box-sizing:border-box; } .tnc-vd-field input:not([type="radio"]):not([type="checkbox"]), .tnc-vd-field select{ height:48px !important; min-height:48px !important; font-size:14px !important; padding:0 14px !important; } .tnc-vd-field textarea{ min-height:90px; padding:12px 14px !important; font-size:13px !important; line-height:1.6; resize:vertical; } .tnc-vd-field input:not([type="radio"]):not([type="checkbox"]):focus, .tnc-vd-field select:focus, .tnc-vd-field textarea:focus{ outline:none !important; border-color:var(--tnc-gold) !important; box-shadow:0 0 0 3px rgba(198,161,91,.10) !important; } /* Friendlier empty state -- an icon plus the message instead of a bare line of text, so the "Saved Ideas" list doesn't just look broken or unfinished the first time someone opens it. */ .tnc-wish-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:22px 10px 26px; } .tnc-wish-empty-icon{ width:52px; height:52px; border-radius:999px; background:var(--tnc-cream); display:flex; align-items:center; justify-content:center; color:var(--tnc-gold); font-size:22px; } .tnc-wish-empty-text{ font-size:13px; color:var(--tnc-muted); } /* Overview budget mini-panel */ .tnc-bs-row{ display:flex; justify-content:space-between; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--tnc-border); } .tnc-bs-row:last-of-type{ border-bottom:0; } .tnc-bs-row span:first-child{ color:var(--tnc-muted); font-size:11px; text-transform:uppercase; letter-spacing:.4px; } .tnc-bs-row span:last-child{ font-family:Georgia,serif; font-size:16px; font-weight:700; color:var(--tnc-dark); } .tnc-bs-row.tnc-bs-remaining span:last-child{ color:var(--tnc-oxblood); } .tnc-bs-row.tnc-bs-remaining.over span:last-child{ color:var(--tnc-rose-dark); } .tnc-bs-bar{ height:6px; background:var(--tnc-cream); border-radius:20px; overflow:hidden; margin:13px 0 4px; } .tnc-bs-bar-fill{ height:100%; background:var(--tnc-gold); border-radius:20px; transition:width .3s ease; } .tnc-bs-bar-fill.over{ background:var(--tnc-rose-dark); } /* Full Wedding Budget summary card */ .tnc-budget-summary-card{ background:#fff; border:1px solid var(--tnc-border); box-shadow:0 3px 18px rgba(11,61,46,.06); position:relative; overflow:hidden; padding:28px 32px; margin-bottom:20px; } .tnc-budget-summary-card::before{ content:""; position:absolute; top:0; left:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--tnc-gold),var(--tnc-oxblood)); } @media(max-width:550px){ .tnc-budget-summary-card{ padding:22px 18px 22px 26px; } } .tnc-bs-hero{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--tnc-border); } .tnc-bs-hero-left{ display:flex; align-items:center; gap:16px; } .tnc-bs-badge{ width:50px; height:50px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:Georgia,serif; font-size:19px; color:#fff; box-shadow:0 3px 10px rgba(0,0,0,.12); background:var(--tnc-gold); } .tnc-bs-badge::after{ content:"¤"; } .tnc-bs-label{ color:var(--tnc-gold); font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:8px; } .tnc-bs-main{ font-family:Georgia,serif; font-size:34px; color:var(--tnc-dark); line-height:1.1; } .tnc-bs-sub{ color:var(--tnc-muted); font-size:11px; margin-top:3px; letter-spacing:.3px; } .tnc-bs-hero-right{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; } .tnc-bs-edit-row{ display:flex; gap:8px; background:var(--tnc-ivory); border:1px solid var(--tnc-border); padding:9px; } .tnc-bs-edit-row input{ width:150px; height:34px; border:1px solid var(--tnc-border); padding:0 10px; font-size:11px; background:#fff; } .tnc-bs-edit-row input:focus{ outline:none; border-color:var(--tnc-gold); } .tnc-bs-edit-row button{ min-height:34px; padding:0 14px; font-size:9px; } .tnc-bs-stats-row{ display:flex; flex-wrap:wrap; } .tnc-bs-stat{ flex:1; min-width:120px; text-align:center; padding:6px 10px; border-left:1px solid var(--tnc-border); } .tnc-bs-stat:first-child{ border-left:none; } @media(max-width:700px){ .tnc-bs-stat{ flex:1 1 45%; border-left:none !important; border-top:1px solid var(--tnc-border); padding-top:14px; margin-top:8px; } } .tnc-bs-stat-label{ display:block; font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--tnc-muted); margin-bottom:8px; } .tnc-bs-stat-value{ display:block; font-family:Georgia,serif; font-size:19px; color:var(--tnc-dark); } .tnc-bs-stat-value.over{ color:var(--tnc-rose-dark); } .tnc-budget-summary-card .tnc-status-flag{ margin-top:0; } /* Wedding Functions -- shown as cards directly on the Dashboard/Overview page */ .tnc-fn-card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } @media(max-width:900px){ .tnc-fn-card-grid{ grid-template-columns:1fr 1fr; } } @media(max-width:600px){ .tnc-fn-card-grid{ grid-template-columns:1fr; } } .tnc-fn-card{ border:1px solid var(--tnc-border); border-top:3px solid var(--tnc-gold); padding:14px; cursor:pointer; transition:.2s ease; background:#fff; } .tnc-fn-card:hover{ box-shadow:0 2px 10px rgba(0,0,0,.06); } .tnc-fn-card-badge{ display:inline-block; padding:3px 10px; background:var(--tnc-cream); color:var(--tnc-dark); font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; border-radius:20px; margin-bottom:10px; } .tnc-fn-card-date{ font-family:Georgia,serif; font-size:14px; color:var(--tnc-dark); margin-bottom:4px; } .tnc-fn-card-detail{ color:var(--tnc-muted); font-size:11px; } /* Function rows -- top line: Name / Date / Time / Guests, a divider, then a second line: Venue Address / Venue Location. Each field's label carries a muted "e.g. ..." example underneath so it's clear what's expected even on inputs (date/time) whose native placeholder text doesn't reliably show in the browser. */ .tnc-function-row-wrap{ padding:18px; background:#fff; border:1px solid var(--tnc-border); border-top:3px solid var(--tnc-gold); margin-bottom:14px; } .tnc-function-row-wrap:last-child{ margin-bottom:0; } .tnc-function-row-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; } .tnc-function-row-number{ display:inline-block; padding:3px 10px; background:var(--tnc-cream); color:var(--tnc-dark); font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; border-radius:20px; } .tnc-function-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; align-items:start; } .tnc-function-row.tnc-function-row-venue{ grid-template-columns:1fr 1fr; } @media(max-width:820px){ .tnc-function-row{ grid-template-columns:1fr 1fr; } } @media(max-width:480px){ .tnc-function-row, .tnc-function-row.tnc-function-row-venue{ grid-template-columns:1fr; } } .tnc-function-row .tnc-field{ margin:0; } .tnc-function-row .tnc-field label{ font-size:10px; margin-bottom:6px; } .tnc-function-divider{ height:1px; background:var(--tnc-border); margin:16px 0; } .tnc-field-eg{ display:block; margin-top:3px; font-size:10px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--tnc-muted); } /* Checklist */ .tnc-check-top{ display:flex; justify-content:space-between; margin-bottom:7px; } .tnc-progressbar{ width:100%; height:8px; border-radius:5px; background:var(--tnc-cream); overflow:hidden; } .tnc-progressbar-fill{ height:100%; border-radius:5px; background:linear-gradient(90deg,var(--tnc-gold),#dcb878); transition:width .3s ease; } .tnc-check-item{ display:flex; align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid var(--tnc-border); transition:.15s ease; } .tnc-check-item:hover{ background:var(--tnc-ivory); } .tnc-check-item:last-child{ border-bottom:0; } .tnc-check-box{ width:21px; height:21px; border:1.5px solid var(--tnc-border); border-radius:50%; display:flex; justify-content:center; align-items:center; flex-shrink:0; font-size:10px; cursor:pointer; color:transparent; transition:.2s ease; margin:0; appearance:none; -webkit-appearance:none; touch-action:manipulation; } .tnc-check-box:hover{ border-color:var(--tnc-gold); } .tnc-check-box:checked{ background:var(--tnc-oxblood); border-color:var(--tnc-oxblood); position:relative; } .tnc-check-box:checked::after{ content:"\2713"; position:absolute; top:50%; left:50%; transform:translate(-50%,-52%); color:#fff; font-size:11px; line-height:1; } .tnc-check-text{ font-family:Georgia,serif; font-size:13px; color:var(--tnc-text); flex:1; } .tnc-check-text.done{ text-decoration:line-through; color:var(--tnc-muted); } .tnc-check-remove{ border:0; background:none; color:var(--tnc-rose-dark); font-size:11px; cursor:pointer; opacity:.7; touch-action:manipulation; } .tnc-check-remove:hover{ opacity:1; text-decoration:underline; } .tnc-add-row{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; } .tnc-add-row input{ flex:1; min-width:120px; height:42px; border:1px solid var(--tnc-border); padding:0 12px; font-size:12px; } .tnc-add-row input:focus{ outline:none; border-color:var(--tnc-gold); } /* Ledger (wishlist / budget lines) */ .tnc-budget-group-head{ display:flex; justify-content:space-between; align-items:center; padding:8px 12px; background:var(--tnc-cream); border-left:3px solid var(--tnc-gold); margin-bottom:10px; font-family:Georgia,serif; font-size:14px; color:var(--tnc-dark); } .tnc-ledger-item{ border:1px solid var(--tnc-border); padding:15px; margin-bottom:11px; } .tnc-ledger-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:8px; flex-wrap:wrap; } .tnc-ledger-name{ font-family:Georgia,serif; font-size:14px; color:var(--tnc-dark); margin-bottom:5px; } /* Squeezed-down booked card (see "Collapse") -- just the name, tags and a one-line total/paid/remaining summary, no margin below the top row since there's nothing under it. */ .tnc-ledger-collapsed{ padding:12px 15px; } .tnc-ledger-collapsed .tnc-ledger-top{ margin-bottom:0; } .tnc-ledger-collapsed-figures{ font-size:11px; color:var(--tnc-muted); margin-top:4px; font-variant-numeric:tabular-nums; } .tnc-ledger-figures{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:11px 0; padding:11px; background:var(--tnc-ivory); } @media(max-width:700px){ .tnc-ledger-figures{ grid-template-columns:1fr; gap:6px; } } .tnc-ledger-figure-label{ color:var(--tnc-muted); font-size:9px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px; } .tnc-ledger-figure-value{ color:var(--tnc-dark); font-size:12px; font-weight:700; } .tnc-ledger-figure-value.remaining.over{ color:var(--tnc-rose-dark); } .tnc-payment-row{ display:flex; align-items:center; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--tnc-border); font-size:11px; } .tnc-payment-row:last-child{ border-bottom:0; } .tnc-payment-remove{ border:0; background:none; color:var(--tnc-rose-dark); font-size:10px; cursor:pointer; touch-action:manipulation; } .tnc-payment-add-heading{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--tnc-gold-dark, var(--tnc-gold)); margin:14px 0 8px; } .tnc-payment-add-row{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:0; } @media(max-width:820px){ .tnc-payment-add-row{ grid-template-columns:1fr 1fr; } } .tnc-payment-add-row .tnc-field{ margin:0; } .tnc-payment-add-row .tnc-field label{ font-size:10px; margin-bottom:6px; } .tnc-payment-add-row .tnc-field input, .tnc-payment-add-row .tnc-field select{ height:36px !important; min-height:36px !important; border:1px solid var(--tnc-border); padding:0 9px !important; font-size:11px !important; width:100%; box-sizing:border-box; } .tnc-payment-add-row .tnc-field input:focus, .tnc-payment-add-row .tnc-field select:focus{ outline:none; border-color:var(--tnc-gold); } .tnc-payment-add-btn{ height:36px; } .tnc-payment-add-buttons{ display:flex; gap:8px; margin-top:10px; } /* Editable vendor + price fields on a finalized/booked wishlist item -- who you're paying, and what for, sits right above the payments ledger so it's the first thing filled in once something's booked. Auto-fit so it wraps cleanly whatever the field count (7 here: Name, Category, Company, Vendor, Mobile, Function Type, Price). */ .tnc-wish-vendor-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px; margin:11px 0; } @media(max-width:900px){ .tnc-wish-vendor-row{ grid-template-columns:1fr 1fr; } } .tnc-wish-vendor-row .tnc-field{ margin:0; } .tnc-wish-vendor-row .tnc-field label{ font-size:10px; margin-bottom:6px; } .tnc-wish-vendor-row .tnc-field input[data-wish-field], .tnc-wish-vendor-row .tnc-field select[data-wish-field]{ height:36px !important; min-height:36px !important; font-size:11px !important; padding:0 9px !important; width:100%; box-sizing:border-box; background:#fff; } /* The "Finalize this vendor" panel shown when Mark as Finalized is clicked on a Saved idea -- asks for the vendor name, contact person, function type and agreed price before the item moves to Booked & Finalized. */ .tnc-wish-finalize-panel{ background:var(--tnc-cream); border:1px solid var(--tnc-border); padding:14px; margin:0 0 14px; } .tnc-wish-finalize-title{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--tnc-gold-dark, var(--tnc-gold)); margin-bottom:10px; } .tnc-wish-finalize-row.tnc-wish-vendor-row{ grid-template-columns:repeat(4,1fr); margin:0 0 12px; } @media(max-width:1000px){ .tnc-wish-finalize-row.tnc-wish-vendor-row{ grid-template-columns:1fr 1fr; } } .tnc-wish-finalize-row .tnc-field input, .tnc-wish-finalize-row .tnc-field select{ height:36px !important; min-height:36px !important; font-size:11px !important; padding:0 9px !important; width:100%; box-sizing:border-box; background:#fff; border:1px solid var(--tnc-border); } .tnc-wish-finalize-row .tnc-field input:focus, .tnc-wish-finalize-row .tnc-field select:focus{ outline:none; border-color:var(--tnc-gold); } .tnc-wish-finalize-actions{ display:flex; gap:8px; } /* The "add the first payment, or skip" prompt shown right after a vendor is finalized -- sits above the payment row it's pointing at. */ .tnc-wish-finalize-success{ background:rgba(198,161,91,.12); border:1px solid var(--tnc-gold); padding:10px 12px; font-size:12px; margin:12px 0 0; } .tnc-link-btn{ border:0; background:none; padding:0; color:var(--tnc-gold-dark, var(--tnc-gold)); font-weight:700; text-decoration:underline; cursor:pointer; font-size:12px; } /* Wishlist items */ .tnc-wish-item{ display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid var(--tnc-border); flex-wrap:wrap; } .tnc-wish-item:first-child{ padding-top:0; } .tnc-wish-item:last-child{ border-bottom:0; } .tnc-wish-info{ flex:1; min-width:180px; } .tnc-wish-name{ color:var(--tnc-dark); font-family:Georgia,serif; font-size:14px; margin-bottom:2px; } .tnc-add-row-btn{ background:none; border:1.5px dashed var(--tnc-gold); color:var(--tnc-oxblood); padding:14px; width:100%; font-size:12px; font-weight:700; cursor:pointer; margin-top:10px; transition:.25s ease; } .tnc-add-row-btn:hover{ background:var(--tnc-ivory); } /* Guests -- one card per event (matches the gold-top-border treatment .tnc-fn-card uses for Functions), each guest shown with a small initial "avatar" the same way the account widget represents a person, and a pill-style status picker instead of a plain bordered box. */ .tnc-guest-event-block{ margin-bottom:20px; border:1px solid var(--tnc-border); border-top:3px solid var(--tnc-gold); padding:18px; background:#fff; } .tnc-guest-event-block:last-child{ margin-bottom:0; } .tnc-guest-event-heading{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px; font-family:Georgia,serif; font-size:16px; color:var(--tnc-dark); margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--tnc-border); } .tnc-guest-event-count{ font-family:Arial,sans-serif; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--tnc-dark); background:var(--tnc-cream); padding:4px 11px; border-radius:20px; } .tnc-guest-rows{ display:flex; flex-direction:column; } .tnc-guest-row{ display:flex; align-items:center; gap:12px; padding:10px 4px; border-bottom:1px solid var(--tnc-border); flex-wrap:wrap; transition:background .15s ease; } .tnc-guest-row:hover{ background:var(--tnc-ivory); } .tnc-guest-row:last-child{ border-bottom:0; } .tnc-guest-avatar{ flex:0 0 32px; width:32px; height:32px; border-radius:50%; background:var(--tnc-cream); border:1px solid var(--tnc-gold); color:var(--tnc-oxblood); display:flex; align-items:center; justify-content:center; font-family:Georgia,serif; font-weight:700; font-size:13px; } .tnc-guest-info{ flex:1; min-width:120px; } .tnc-guest-name{ font-size:13px; color:var(--tnc-text); font-family:Georgia,serif; line-height:1.3; } .tnc-guest-party{ font-size:11px; color:var(--tnc-muted); margin-top:1px; } .tnc-guest-status{ font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:6px 12px; border:1px solid var(--tnc-border); border-radius:20px; background:#fff; cursor:pointer; color:var(--tnc-muted); font-family:Arial,sans-serif; touch-action:manipulation; } .tnc-guest-status.confirmed{ border-color:var(--tnc-green); color:var(--tnc-green); background:rgba(63,122,77,.07); } .tnc-guest-status.awaiting{ border-color:var(--tnc-gold); color:#a9843f; background:rgba(198,161,91,.09); } .tnc-guest-status.declined{ border-color:var(--tnc-rose-dark); color:var(--tnc-rose-dark); background:rgba(162,59,59,.06); } .tnc-guest-remove{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; border:0; background:none; color:var(--tnc-muted); font-size:11px; cursor:pointer; transition:.15s ease; touch-action:manipulation; } .tnc-guest-remove:hover{ background:rgba(162,59,59,.09); color:var(--tnc-rose-dark); } /* Profile / Account Settings summary rows */ .tnc-profile-fn-count{ display:inline-block; font-size:10.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--tnc-gold); font-weight:700; } .tnc-profile-fn-list{ margin:0 0 16px; } .tnc-profile-fn-row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--tnc-border); } .tnc-profile-fn-row:last-child{ border-bottom:none; padding-bottom:2px; } .tnc-profile-fn-name{ font-family:Georgia,serif; font-size:14px; color:var(--tnc-dark); flex-shrink:0; } .tnc-profile-fn-detail{ color:var(--tnc-muted); font-size:11px; text-align:right; } .tnc-note-box{ display:flex; gap:13px; padding:16px; border-left:3px solid var(--tnc-gold); background:var(--tnc-ivory); margin-top:15px; } .tnc-note-box strong{ display:block; margin-bottom:4px; font-family:Georgia,serif; font-size:13px; font-weight:400; color:var(--tnc-dark); } .tnc-note-box p{ margin:0; color:var(--tnc-muted); font-size:11px; line-height:1.6; } .tnc-danger-zone{ margin-top:22px; padding:18px; border:1px solid var(--tnc-rose); background:#FFFBFA; } /* Digital Invitation Card */ .tnc-invite-card-wrap{ display:flex; gap:24px; flex-wrap:wrap; align-items:flex-start; } .tnc-invite-card-preview{ flex:0 0 340px; } .tnc-invite-card-preview svg{ width:100%; height:auto; display:block; box-shadow:0 8px 30px rgba(31,14,12,.18); } .tnc-invite-card-controls{ flex:1; min-width:260px; } .tnc-invite-map-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--tnc-border); font-size:12px; } .tnc-invite-map-row:last-child{ border-bottom:0; } .tnc-invite-map-row .tnc-invite-map-fn{ font-weight:700; color:var(--tnc-text); } .tnc-invite-map-row .tnc-invite-map-venue{ color:var(--tnc-muted); font-size:11px; } .tnc-invite-map-row a{ color:var(--tnc-gold); font-weight:700; font-size:11px; text-decoration:none; white-space:nowrap; } .tnc-invite-map-row a:hover{ text-decoration:underline; } .tnc-invite-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; } @media(max-width:820px){ .tnc-invite-card-preview{ flex-basis:100%; } } /* Mini CTA card (e.g. "Find Vendors" on the Overview) */ .tnc-mini-cta{ background:var(--tnc-oxblood); color:#fff; padding:22px; } .tnc-mini-cta-label{ color:var(--tnc-light-gold); font-size:9px; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:8px; } .tnc-mini-cta-title{ font-family:Georgia,serif; font-size:17px; color:#fff; margin-bottom:5px; } .tnc-mini-cta-sub{ color:#cbd8d3; font-size:11px; margin-bottom:16px; } /* Getting-started onboarding nudge (Overview, hidden once complete) */ .tnc-onboard-card{ background:#fff; border:1px solid var(--tnc-border); border-left:4px solid var(--tnc-gold); padding:22px 24px; margin-bottom:20px; } .tnc-onboard-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px; } .tnc-onboard-label{ color:var(--tnc-gold); font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:6px; } .tnc-onboard-title{ font-family:Georgia,serif; font-weight:400; font-size:19px; color:var(--tnc-dark); margin:0; } .tnc-onboard-percent{ font-size:11px; color:var(--tnc-muted); font-weight:700; white-space:nowrap; padding-top:5px; } .tnc-onboard-steps{ display:grid; gap:8px; margin-top:16px; } .tnc-onboard-step{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--tnc-ivory); border:1px solid var(--tnc-border); padding:12px 14px; cursor:pointer; font-family:Arial,sans-serif; } .tnc-onboard-step:hover{ border-color:var(--tnc-gold); } .tnc-onboard-step.done{ background:#fff; opacity:.6; } .tnc-onboard-step-icon{ width:26px; height:26px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; background:var(--tnc-cream); color:var(--tnc-oxblood); } .tnc-onboard-step.done .tnc-onboard-step-icon{ background:var(--tnc-oxblood); color:#fff; } .tnc-onboard-step-text{ flex:1; min-width:0; } .tnc-onboard-step-label{ display:block; font-size:13px; font-weight:700; color:var(--tnc-dark); } .tnc-onboard-step.done .tnc-onboard-step-label{ text-decoration:line-through; color:var(--tnc-muted); font-weight:400; } .tnc-onboard-step-hint{ display:block; font-size:11px; color:var(--tnc-muted); margin-top:2px; } .tnc-onboard-step-arrow{ color:var(--tnc-gold); font-size:14px; flex-shrink:0; } /* Overview "Find Vendors / Save Favourites / Keep Updated" info cards */ .tnc-three-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:18px; } @media(max-width:900px){ .tnc-three-grid{ grid-template-columns:1fr; } } .tnc-info-card{ background:#fff; border:1px solid var(--tnc-border); padding:24px 22px; } .tnc-info-icon{ width:46px; height:46px; background:var(--tnc-cream); display:flex; align-items:center; justify-content:center; color:var(--tnc-oxblood); font-size:18px; margin-bottom:16px; } .tnc-info-card h3{ font-family:Georgia,serif; font-weight:400; font-size:18px; color:var(--tnc-dark); margin:0 0 8px; } .tnc-info-card p{ color:var(--tnc-muted); font-size:12px; line-height:1.6; margin:0 0 18px; } .tnc-info-card-subtext{ display:block; margin-top:10px; font-size:11px; color:var(--tnc-oxblood); text-decoration:none; } .tnc-info-card-subtext:hover{ text-decoration:underline; } /* Wishlist "Saved Ideas" -- redesigned as individual cards (gold top accent, like the Functions/Guest List cards) rather than plain rows packed into one long list, with clearer spacing so it reads easily even to someone who's never used a "wishlist" feature like this before. Each card: heart icon, name + tags, a small × to remove in the corner, then its two real actions underneath -- "Mark as Finalized" as the one solid/primary button (it's the clear next step), "Edit" as the lighter secondary one. */ .tnc-wish-idea-row-wrap{ border:1px solid var(--tnc-border); border-top:3px solid var(--tnc-gold); background:#fff; padding:16px; margin-bottom:14px; } .tnc-wish-idea-row-wrap:last-child{ margin-bottom:0; } .tnc-wish-idea-row-wrap .tnc-wish-vendor-row{ margin-top:14px; margin-bottom:14px; } /* Base row -- also reused, on its own (no .tnc-wish-idea-row-wrap card around it), for the Overview tab's compact "top ideas" preview list, so it keeps its own simple divider/spacing there. Inside the Saved Ideas card, that divider is redundant (the card border already separates items) and the icon/name/remove-button need to sit flush against the card's own edges, so it's stripped back out below. */ .tnc-wish-idea-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--tnc-border); flex-wrap:wrap; } .tnc-wish-idea-row:last-child{ border-bottom:0; } .tnc-wish-idea-row-wrap .tnc-wish-idea-row{ align-items:flex-start; gap:12px; padding:0; border-bottom:0; flex-wrap:nowrap; } .tnc-wish-idea-icon{ width:40px; height:40px; border-radius:50%; background:var(--tnc-cream); display:flex; align-items:center; justify-content:center; color:var(--tnc-gold); flex-shrink:0; font-size:16px; } .tnc-wish-idea-main{ flex:1; min-width:0; } .tnc-wish-idea-name{ font-family:Georgia,serif; font-size:15px; color:var(--tnc-dark); margin-bottom:6px; } .tnc-wish-idea-tags{ display:flex; flex-wrap:wrap; } /* Numbered badge -- still used on Booked & Finalized rows below, where "the 3rd vendor I booked" is something a couple can point at and say out loud. Numbering is by current list position (1, 2, 3...), not a stored id, so it stays sequential even after something's removed. */ .tnc-wish-idea-num{ width:28px; height:28px; border-radius:50%; background:var(--tnc-gold); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:12px; font-weight:700; margin-top:2px; } .tnc-wish-idea-remove{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; border:0; background:none; color:var(--tnc-muted); font-size:11px; cursor:pointer; transition:.15s ease; touch-action:manipulation; } .tnc-wish-idea-remove:hover{ background:rgba(162,59,59,.09); color:var(--tnc-rose-dark); } /* .tnc-wish-idea-actions is shared with the Booked & Finalized ledger rows below (kept inline there, pushed right via margin-left:auto) -- the stacked-underneath treatment is scoped to just the Saved Ideas card via this descendant selector so the ledger rows are untouched. */ .tnc-wish-idea-actions{ display:flex; gap:8px; margin-left:auto; flex-wrap:wrap; } .tnc-wish-idea-row-wrap > .tnc-wish-idea-actions{ margin-left:0; margin-top:14px; padding-top:14px; border-top:1px solid var(--tnc-border); } /* Wedding Planning Tools quick-link grid */ .tnc-planning-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } @media(max-width:700px){ .tnc-planning-grid{ grid-template-columns:1fr 1fr; } } .tnc-planning-tile{ border:1px solid var(--tnc-border); background:#fff; padding:18px 10px; text-align:center; cursor:pointer; font-size:11px; font-weight:700; color:var(--tnc-dark); font-family:Arial,sans-serif; } .tnc-planning-tile:hover{ border-color:var(--tnc-gold); } .tnc-planning-tile-icon{ width:34px; height:34px; margin:0 auto 8px; background:var(--tnc-ivory); display:flex; align-items:center; justify-content:center; color:var(--tnc-oxblood); font-size:14px; } /* Vendor dashboard -- listing summary row (Overview tab) */ .tnc-vd-summary{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .tnc-vd-summary-thumb{ width:56px; height:56px; flex-shrink:0; border:1px solid var(--tnc-border); background:var(--tnc-ivory); display:flex; align-items:center; justify-content:center; color:var(--tnc-gold); font-size:18px; overflow:hidden; } .tnc-vd-summary-thumb img{ width:100%; height:100%; object-fit:cover; display:block; } .tnc-vd-summary-info{ flex:1; min-width:0; } .tnc-vd-summary-cat{ color:var(--tnc-gold); font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; margin-bottom:3px; } .tnc-vd-summary-name{ font-family:Georgia,"Times New Roman",serif; font-size:16px; color:var(--tnc-dark); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tnc-vd-summary-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; flex-wrap:wrap; } .tnc-vd-delete-listing-form{ margin:0; display:inline-flex; } /* Pending Approval / Approved Listings grouping (a vendor account can run more than one listing, e.g. two venues under the same login). */ .tnc-vd-listing-section{ margin-bottom:22px; } .tnc-vd-listing-section:last-child{ margin-bottom:0; } .tnc-vd-listing-heading{ font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--tnc-muted); margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid var(--tnc-border); } .tnc-vd-listing-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--tnc-border); } .tnc-vd-listing-row:last-child{ border-bottom:0; } .tnc-vd-listing-num{ flex-shrink:0; width:22px; height:22px; border-radius:50%; background:var(--tnc-ivory); color:var(--tnc-gold); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; } /* Below ~480px there isn't room for thumb + name + 3 action buttons on one line -- the row used to just squeeze them, overlapping the buttons over the vendor name. Wrapping the row and giving the actions their own full-width line (indented to sit under the name) fixes that without touching the desktop layout above. */ @media(max-width:480px){ .tnc-vd-listing-row{ flex-wrap:wrap; row-gap:8px; } .tnc-vd-summary-name{ white-space:normal; } .tnc-vd-summary-actions{ flex:1 1 100%; justify-content:flex-start; } .tnc-vd-summary-url{ padding-left:0 !important; } } /* Vendor dashboard -- enquiry rows (Overview + Enquiries tabs) */ .tnc-vd-enquiry{ display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid var(--tnc-border); } .tnc-vd-enquiry:last-child{ border-bottom:0; } .tnc-vd-enquiry-avatar{ width:34px; height:34px; flex-shrink:0; border-radius:50%; background:var(--tnc-cream); color:var(--tnc-oxblood); display:flex; align-items:center; justify-content:center; font-family:Georgia,serif; font-size:13px; text-transform:uppercase; } .tnc-vd-enquiry-info{ flex:1; min-width:0; } .tnc-vd-enquiry-name{ font-size:13px; font-weight:700; color:var(--tnc-dark); margin-bottom:2px; } .tnc-vd-enquiry-msg{ font-size:12px; color:var(--tnc-muted); line-height:1.5; } .tnc-vd-enquiry-contact{ display:flex; gap:10px; flex-wrap:wrap; font-size:11.5px; margin-top:4px; } .tnc-vd-enquiry-contact a{ color:var(--tnc-oxblood); text-decoration:none; } .tnc-vd-enquiry-contact a:hover{ text-decoration:underline; } .tnc-vd-enquiry-contact span{ color:var(--tnc-muted); } .tnc-vd-enquiry-date{ flex-shrink:0; font-size:10.5px; color:var(--tnc-muted); white-space:nowrap; } /* Messages tab -- conversation list + thread, side by side on desktop, stacked (list above thread) on mobile. */ .tnc-vd-msg-layout{ display:flex; min-height:460px; } .tnc-vd-msg-list{ width:260px; flex-shrink:0; border-right:1px solid var(--tnc-border); overflow-y:auto; max-height:620px; } .tnc-vd-msg-list-head{ padding:14px 16px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--tnc-muted); border-bottom:1px solid var(--tnc-border); } .tnc-vd-msg-list-item{ display:flex; align-items:center; gap:10px; padding:12px 16px; text-decoration:none !important; border-bottom:1px solid var(--tnc-border); cursor:pointer; } .tnc-vd-msg-list-item:hover{ background:var(--tnc-cream); } .tnc-vd-msg-list-item.is-active{ background:var(--tnc-cream); border-left:3px solid var(--tnc-gold); } .tnc-vd-msg-list-avatar{ width:32px; height:32px; flex-shrink:0; border-radius:50%; background:var(--tnc-cream); color:var(--tnc-oxblood); display:flex; align-items:center; justify-content:center; font-family:Georgia,serif; font-size:12px; text-transform:uppercase; } .tnc-vd-msg-list-item.is-active .tnc-vd-msg-list-avatar{ background:#fff; } .tnc-vd-msg-list-info{ flex:1; min-width:0; } .tnc-vd-msg-list-name{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--tnc-dark); } .tnc-vd-msg-list-preview{ font-size:11.5px; color:var(--tnc-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; } .tnc-vd-msg-dot{ width:7px; height:7px; border-radius:50%; background:var(--tnc-gold); flex-shrink:0; } .tnc-vd-msg-thread{ flex:1; min-width:0; display:flex; flex-direction:column; } .tnc-vd-msg-empty{ flex:1; display:flex; align-items:center; justify-content:center; color:var(--tnc-muted); font-size:13px; padding:40px 20px; text-align:center; } .tnc-vd-msg-thread-head{ padding:14px 20px; font-size:14px; font-weight:700; color:var(--tnc-dark); border-bottom:1px solid var(--tnc-border); display:flex; align-items:center; justify-content:space-between; gap:12px; } .tnc-vd-report-form{ display:flex; gap:10px; align-items:flex-end; padding:12px 20px; border-bottom:1px solid var(--tnc-border); background:var(--tnc-cream); } .tnc-vd-report-form textarea{ flex:1; resize:vertical; min-height:36px; border:1px solid var(--tnc-border); border-radius:6px; padding:8px 10px; font-family:inherit; font-size:12.5px; } .tnc-vd-report-form textarea:focus{ outline:0; border-color:var(--tnc-rose-dark); } .tnc-vd-report-success{ margin:12px 20px 0; background:#E8EFE9; border-left:3px solid var(--tnc-green); color:var(--tnc-green); padding:9px 12px; font-size:12px; } .tnc-vd-msg-thread-body{ flex:1; overflow-y:auto; max-height:460px; padding:16px 20px; display:flex; flex-direction:column; gap:10px; } .tnc-vd-msg-bubble{ max-width:72%; padding:9px 13px; border-radius:12px; font-size:13px; line-height:1.5; } /* "mine"/"theirs" rather than "couple"/"vendor" -- which side a message lands on is relative to whoever's looking at the dashboard, so the same message is "mine" (right, oxblood) on the sender's own dashboard and "theirs" (left, cream) on the other side's. Each template picks the right modifier for its own viewer (see vendor-dashboard.php and tnc-dashboard.js's renderMessageThread()). */ .tnc-vd-msg-bubble-theirs{ align-self:flex-start; background:var(--tnc-cream); color:var(--tnc-dark); border-bottom-left-radius:3px; } .tnc-vd-msg-bubble-mine{ align-self:flex-end; background:var(--tnc-oxblood); color:#fff; border-bottom-right-radius:3px; } .tnc-vd-msg-bubble-text{ white-space:pre-wrap; word-wrap:break-word; } .tnc-vd-msg-bubble-time{ font-size:10px; opacity:.65; margin-top:4px; } .tnc-vd-msg-reply{ display:flex; gap:10px; align-items:flex-end; padding:14px 20px; border-top:1px solid var(--tnc-border); } .tnc-vd-msg-reply textarea{ flex:1; resize:vertical; min-height:40px; border:1px solid var(--tnc-border); border-radius:6px; padding:9px 11px; font-family:inherit; font-size:13px; } .tnc-vd-msg-reply textarea:focus{ outline:0; border-color:var(--tnc-gold); } @media (max-width:680px){ .tnc-vd-msg-layout{ flex-direction:column; min-height:0; } .tnc-vd-msg-list{ width:100%; max-height:220px; border-right:0; border-bottom:1px solid var(--tnc-border); } .tnc-vd-msg-thread-body{ max-height:320px; } } /* Admin Dashboard's simple data tables (Applications/Vendors/Members tabs) -- flexbox rows rather than a fixed grid, so the same markup works whether a table has four columns or five. */ .tnc-ad-table{ border:1px solid var(--tnc-border); border-radius:8px; overflow:hidden; } .tnc-ad-table-row{ display:flex; gap:16px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--tnc-border); } .tnc-ad-table-row[hidden]{ display:none; } /* the search filter above toggles this -- otherwise this rule's own display:flex would win over the browser's default [hidden] styling and a "hidden" row would stay visible */ .tnc-ad-table-row:last-child{ border-bottom:0; } .tnc-ad-table-row:not(.tnc-ad-table-head):hover{ background:var(--tnc-ivory); } /* Short "city · category, category" line under a vendor's name, same muted/small treatment as .tnc-ad-post-id just above it. */ .tnc-ad-row-meta{ font-size:10.5px; color:var(--tnc-muted); margin-top:3px; } /* Flags the exact row behind the Vendors nav badge -- a vendor requested a category from their own My Profile page that's still waiting on an admin's approval click (see $pending_review_count in class-tnc-admin-dashboard.php). */ .tnc-ad-pending-cat-flag{ display:inline-block; margin-top:5px; padding:3px 9px; border-radius:20px; background:var(--tnc-light-gold); color:#6b5323; font-size:10px; font-weight:700; letter-spacing:.2px; } /* "What they changed" panel on the Edit Vendor page -- the same old/new table the admin-notification email carries, shown right above the edit form itself so there's no need to go find that email. */ .tnc-ad-changes-panel{ background:var(--tnc-ivory); border:1px solid var(--tnc-border); border-left:3px solid var(--tnc-gold); border-radius:6px; padding:14px 16px; margin-bottom:18px; } .tnc-ad-changes-panel-title{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--tnc-gold-dark, #8a6d2f); margin-bottom:10px; } .tnc-ad-changes-table{ width:100%; border-collapse:collapse; } .tnc-ad-changes-table tr:not(:last-child) td{ border-bottom:1px solid var(--tnc-border); } .tnc-ad-changes-table td{ padding:7px 6px; font-size:12px; vertical-align:top; } .tnc-ad-changes-label{ font-weight:700; color:var(--tnc-dark); white-space:nowrap; padding-right:14px !important; } .tnc-ad-changes-old{ color:#B3462C; text-decoration:line-through; } .tnc-ad-changes-arrow{ color:var(--tnc-muted); padding:7px 8px !important; } .tnc-ad-changes-new{ color:#2E7D4F; font-weight:700; } @media (max-width:560px){ .tnc-ad-changes-table, .tnc-ad-changes-table tbody, .tnc-ad-changes-table tr, .tnc-ad-changes-table td{ display:block; width:100%; } .tnc-ad-changes-table tr{ padding:6px 0; } .tnc-ad-changes-table tr:not(:last-child){ border-bottom:1px solid var(--tnc-border); } .tnc-ad-changes-table td{ padding:2px 0 !important; border-bottom:0 !important; } .tnc-ad-changes-arrow{ display:none; } } /* Plain glance-and-decide card on the Edit Vendor page, in front of a pending profile edit/category request -- what the vendor submitted as a flat read-only list, plus Approve/Decline, with no diff to read and no form to fill in first (the detailed diff table above and the full editable form are both tucked into the
right under this). */ .tnc-ad-review-card{ background:var(--tnc-ivory); border:1px solid var(--tnc-border); border-left:3px solid var(--tnc-gold); border-radius:6px; padding:16px 18px; margin-bottom:14px; } .tnc-ad-review-card-title{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--tnc-gold-dark, #8a6d2f); margin-bottom:12px; } .tnc-ad-review-list{ display:grid; grid-template-columns:auto 1fr; gap:7px 16px; margin:0 0 16px; } .tnc-ad-review-list dt{ font-size:11.5px; color:var(--tnc-muted); white-space:nowrap; } .tnc-ad-review-list dd{ margin:0; font-size:12.5px; font-weight:600; color:var(--tnc-dark); word-break:break-word; } .tnc-ad-review-actions{ display:flex; gap:10px; flex-wrap:wrap; } .tnc-ad-review-actions form{ margin:0; } @media (max-width:560px){ .tnc-ad-review-list{ grid-template-columns:1fr; gap:2px 0; } .tnc-ad-review-list dt{ margin-top:8px; } } /* Collapsed by default (that's the whole point -- approving shouldn't require opening this), styled like a plain, low-emphasis link rather than a button so it doesn't compete with Approve/Decline above it. */ .tnc-ad-review-details{ margin-bottom:18px; } .tnc-ad-review-details > summary{ cursor:pointer; font-size:11.5px; color:var(--tnc-muted); text-decoration:underline; margin-bottom:12px; } .tnc-ad-review-details > summary:hover{ color:var(--tnc-dark); } /* Read-only "Listing Content" section on Edit Vendor -- one card per category showing what the vendor put on the Add Listing wizard (description, starting price, menus/packages/etc, facility & style chips), so the admin can keep an eye on it for anything inappropriate without leaving this page. */ .tnc-ad-listing-content-block{ background:var(--tnc-ivory); border:1px solid var(--tnc-border); border-radius:6px; padding:14px 16px; margin-bottom:12px; } .tnc-ad-listing-content-cat{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--tnc-gold-dark, #8a6d2f); margin-bottom:8px; } .tnc-ad-listing-content-desc{ font-size:12.5px; color:var(--tnc-dark); line-height:1.5; margin:0 0 10px; white-space:pre-wrap; } .tnc-ad-listing-content-row{ font-size:12.5px; color:var(--tnc-dark); margin-bottom:6px; } .tnc-ad-listing-content-row strong{ color:var(--tnc-muted); font-weight:600; margin-right:4px; } .tnc-ad-listing-content-item-title{ font-size:11.5px; font-weight:700; color:var(--tnc-dark); padding-top:8px; } /* "Unclaimed" in the ID column, replacing a bare "--" that read like a missing value rather than a real, meaningful state. The doubled-up selector (not just .tnc-ad-id-unclaimed) is deliberate: .tnc-ad-id's own background/padding/monospace rule sits much later in this file, so a same-specificity override placed up here would lose to it by source order -- doubling the selector raises this one's specificity instead of relying on where it sits in the file. */ .tnc-ad-id.tnc-ad-id-unclaimed{ background:none; color:var(--tnc-muted); font-style:italic; font-family:inherit; padding:0; } /* overflow-wrap:anywhere -- an email address has no spaces to break on, so without it a long one just overflows its narrow column instead of wrapping, visually overlapping whatever sits next to it. */ .tnc-ad-table-row > div{ flex:1; min-width:0; font-size:12.5px; color:var(--tnc-dark); line-height:1.5; overflow-wrap:anywhere; } .tnc-ad-table-row a{ color:var(--tnc-oxblood); } .tnc-ad-table-head{ background:var(--tnc-cream); } .tnc-ad-table-head > div{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--tnc-muted); } @media (max-width:680px){ .tnc-ad-table-head{ display:none; } .tnc-ad-table-row{ flex-direction:column; align-items:flex-start; gap:4px; } } /* A row's Edit/Block/Delete controls -- now small icon-only buttons (see .tnc-ad-icon-btn below) rather than labelled text pills, so the column doesn't need to grow, just enough fixed room for three ~30px squares plus gaps. flex-wrap is deliberately "nowrap" (not "wrap") -- three 30px squares plus two 6px gaps only need 102px, comfortably under this column's own 124px, so on any expected screen they stay in one row; "wrap" here previously let them silently break onto two lines (Edit+Block, then Delete on its own row below) whenever something nudged the fit even slightly. */ .tnc-ad-table-row > div.tnc-ad-actions{ flex:0 0 124px; display:flex; flex-wrap:nowrap; gap:6px; align-items:center; justify-content:flex-end; } /* The Vendors tab's row can carry up to six of these 30px squares at once (Edit, Publish Incomplete, Publish, Preview/View, Block, Delete) instead of the three the base 124px column above was sized for -- 6*30px + 5*6px gaps = 210px, so the base width clipped/overlapped the later buttons even though they were always present in the markup. This modifier widens just that column; Members/Blocked/Applications keep the narrower default above since they never show more than three. */ .tnc-ad-table-row > div.tnc-ad-actions.tnc-ad-actions-wide{ flex-basis:212px; } @media (max-width:680px){ /* Stacked rows (see the media query above) lay their columns out top-to-bottom, so a fixed flex-basis that gives Actions room in a left-to-right row would otherwise reserve that much *height* here instead, leaving an empty gap above the buttons. */ .tnc-ad-table-row > div.tnc-ad-actions{ flex-basis:auto; justify-content:flex-start; margin-top:6px; } .tnc-ad-table-row > div.tnc-ad-actions.tnc-ad-actions-wide{ flex-basis:auto; flex-wrap:wrap; } } /* Compact square icon buttons for a row's Edit/Block/Delete (see TNC_Admin_Dashboard::icon()) -- title/aria-label carry the text a labelled button would have shown, as a native tooltip plus a proper accessible name. */ .tnc-ad-icon-btn{ display:inline-flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0; align-self:center; width:30px !important; height:30px !important; padding:0 !important; margin:0 !important; box-sizing:border-box !important; border-radius:7px; border:1px solid var(--tnc-border); background:#fff; color:var(--tnc-dark); cursor:pointer; text-decoration:none; vertical-align:middle; line-height:1; transition:background .12s ease, border-color .12s ease, color .12s ease; } .tnc-ad-icon-btn:hover, .tnc-ad-icon-btn:focus-visible{ background:var(--tnc-cream); border-color:var(--tnc-oxblood); color:var(--tnc-oxblood); outline:none; } .tnc-ad-icon-btn-danger{ border-color:#e7cec9; color:#B3462C; } .tnc-ad-icon-btn-danger:hover, .tnc-ad-icon-btn-danger:focus-visible{ background:#FBEAEA; border-color:#B3462C; color:#B3462C; } .tnc-ad-icon-btn-gold{ border-color:rgba(198,161,91,.55); color:#8a6d2f; } .tnc-ad-icon-btn-gold:hover, .tnc-ad-icon-btn-gold:focus-visible{ background:var(--tnc-light-gold); border-color:var(--tnc-gold); color:#6b5323; } .tnc-ad-icon-btn svg{ display:block; } /* The Verified column -- a small round icon instead of a text pill, same green/gold palette as the status pills elsewhere. */ .tnc-ad-verified-icon{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; } .tnc-ad-verified-icon.is-live{ background:#E8EFE9; color:var(--tnc-green); } .tnc-ad-verified-icon.is-pending{ background:var(--tnc-cream); color:var(--tnc-gold); } /* The Block button (see TNC_Admin_Dashboard::render_block_control()) -- a toggle that opens a small dropdown menu of durations. Deliberately position:fixed with its on-screen spot set by JS (see the inline script at the bottom of admin-dashboard.php) rather than position:absolute under the button: .tnc-ad-table has overflow:hidden for its own rounded corners, which would otherwise clip the menu short whenever there isn't much table left below the row it opened from -- most visibly a table with just one row, where the menu had almost nowhere to go before being cut off entirely. */ .tnc-ad-block-dd{ position:relative; display:inline-block; flex-shrink:0; align-self:center; vertical-align:middle; margin:0; } .tnc-ad-caret{ font-size:8px; margin-left:1px; transition:transform .15s ease; } .tnc-ad-block-toggle[aria-expanded="true"] .tnc-ad-caret{ transform:rotate(180deg); } .tnc-ad-block-menu{ position:fixed; z-index:1000; margin:0; background:#fff; border:1px solid var(--tnc-border); border-radius:10px; box-shadow:0 14px 34px rgba(31,14,12,.18); padding:7px; min-width:190px; display:flex; flex-direction:column; gap:2px; opacity:0; transform:translateY(-4px); transition:opacity .12s ease, transform .12s ease; } .tnc-ad-block-menu:not([hidden]){ opacity:1; transform:translateY(0); } .tnc-ad-block-menu[hidden]{ display:none; } .tnc-ad-block-menu-title{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--tnc-muted); padding:7px 9px 6px; } .tnc-ad-block-menu-item{ display:block; width:100%; box-sizing:border-box; text-align:left; border:0; background:none; cursor:pointer; font-family:inherit; font-size:12.5px; color:var(--tnc-dark) !important; text-decoration:none; padding:9px; border-radius:6px; transition:background .1s ease; } .tnc-ad-block-menu-item:hover, .tnc-ad-block-menu-item:focus-visible{ background:var(--tnc-cream); outline:none; } .tnc-ad-block-menu-item-danger{ color:#B3462C !important; font-weight:700; margin-top:4px; border-top:1px solid var(--tnc-border); padding-top:11px; } /* The Members tab's "Edit" details modal (see TNC_Admin_Dashboard::handle_update_member()). */ .tnc-ad-modal-overlay{ position:fixed; inset:0; background:rgba(31,14,12,.45); z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; } .tnc-ad-modal-overlay[hidden]{ display:none; } .tnc-ad-modal{ background:#fff; border-radius:10px; width:100%; max-width:520px; max-height:88vh; overflow-y:auto; box-shadow:0 24px 60px rgba(0,0,0,.28); } /* "Add Vendor" -- the category grid + subtype cards need more breathing room than the plain two-column Edit modals above, so this is a wider variant of the same overlay/card rather than a whole new modal style. */ .tnc-ad-modal-wide{ max-width:760px; } .tnc-ad-modal-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid var(--tnc-border); } .tnc-ad-modal-head h3{ margin:0; font-family:Georgia,"Times New Roman",serif; font-weight:400; font-size:17px; color:var(--tnc-dark); } .tnc-ad-modal-close{ border:0; background:none; font-size:22px; line-height:1; color:var(--tnc-muted); cursor:pointer; padding:0 4px; } .tnc-ad-modal-close:hover{ color:var(--tnc-dark); } .tnc-ad-modal-body{ padding:20px; } .tnc-ad-modal-meta{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; } .tnc-ad-modal-meta > div{ flex:1; min-width:130px; background:var(--tnc-cream); border-radius:7px; padding:9px 12px; } .tnc-ad-modal-meta span{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--tnc-muted); margin-bottom:3px; } .tnc-ad-modal-meta strong{ font-size:12.5px; color:var(--tnc-dark); } .tnc-ad-modal-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; } .tnc-ad-modal-grid label{ display:block; font-size:11px; font-weight:700; color:var(--tnc-dark); } .tnc-ad-modal-grid input{ width:100%; box-sizing:border-box; margin-top:6px; border:1px solid var(--tnc-border); border-radius:6px; padding:9px 10px; font-size:12.5px; font-family:inherit; color:var(--tnc-text); } .tnc-ad-modal-grid input:focus{ outline:none; border-color:var(--tnc-gold); box-shadow:0 0 0 3px rgba(198,161,91,.10); } .tnc-ad-modal-grid-divider{ grid-column:1/-1; font-size:10.5px; font-weight:600; color:var(--tnc-muted); border-top:1px solid var(--tnc-border); padding-top:10px; margin-top:2px; line-height:1.4; } .tnc-ad-modal-grid-full{ grid-column:1/-1; } /* Divides the Member Details / Vendor Listing sections in the Blocked table's Edit modal, for the (rare) account that's both. */ .tnc-ad-modal-section-title{ font-size:12px; font-weight:700; color:var(--tnc-dark); margin:18px 0 10px; padding-top:14px; border-top:1px solid var(--tnc-border); } .tnc-ad-modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; } @media (max-width:480px){ .tnc-ad-modal-grid{ grid-template-columns:1fr; } } /* People tab's Member/Vendor/Blocked filter -- plain pill buttons, no JS framework needed, see the small inline script at the bottom of admin-dashboard.php. */ .tnc-ad-subtabs{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; } .tnc-ad-subtab{ border:1px solid var(--tnc-border); background:#fff; color:var(--tnc-muted); font-size:11.5px; font-weight:700; letter-spacing:.3px; padding:7px 16px; border-radius:20px; cursor:pointer; } .tnc-ad-subtab:hover{ border-color:var(--tnc-oxblood); color:var(--tnc-oxblood); } .tnc-ad-subtab.active{ background:var(--tnc-oxblood); border-color:var(--tnc-oxblood); color:#fff; } /* Search box above a People sub-tab's table. */ .tnc-ad-toolbar{ margin-bottom:12px; } .tnc-ad-search{ width:100%; max-width:340px; box-sizing:border-box; border:1px solid var(--tnc-border); border-radius:6px; background:#fff; padding:9px 12px; font-size:12.5px; color:var(--tnc-text); font-family:Arial,Helvetica,sans-serif; } .tnc-ad-search:focus{ outline:none; border-color:var(--tnc-gold); box-shadow:0 0 0 3px rgba(198,161,91,.10); } /* Vendors tab toolbar -- search box plus the status/per-page filter dropdowns added alongside it. Kept deliberately compact (a short search box, a labelled dropdown instead of a wide placeholder-only one) so all three comfortably fit on one line on anything but a phone, instead of each claiming a generous flex-basis and wrapping onto its own full-width row the moment the panel isn't extremely wide. Both the search box and the selects get an explicit height + box-sizing:border-box (the plain .tnc-ad-search rule above left height to the browser's own default) so every control in this row lines up at the same height. */ .tnc-ad-toolbar-vendors{ display:flex !important; flex-wrap:wrap; gap:16px; align-items:center !important; } /* max-width:none overrides .tnc-ad-search's own 340px cap above (meant for the People tab's plain search box) -- without this, flex-grow:1 here was fighting a width ceiling it could never actually win against, which is why widening this box left a dead strip of empty space to the right of the Status/Show dropdowns instead of the search box actually filling it. */ .tnc-ad-toolbar-vendors .tnc-ad-search{ flex:1 1 320px; max-width:none; height:36px; box-sizing:border-box; } .tnc-ad-filter-label{ display:flex !important; align-items:center !important; gap:8px; flex:0 0 auto; margin:0 !important; } /* Belt-and-suspenders separator in case a theme stylesheet zeroes out flex gap some other way -- margin survives even if gap doesn't. */ .tnc-ad-toolbar-vendors .tnc-ad-filter-label + .tnc-ad-filter-label{ margin-left:16px !important; } .tnc-ad-filter-label span{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--tnc-muted); white-space:nowrap; } .tnc-ad-filter-select{ /* Plain native appearance -- the previous version dropped it (appearance:none) for one fixed custom arrow, sized the box to width:auto, and that combination is what overlapped the arrow over the text: an auto-width select sizes to its option text, not to text-plus-room-for-a-background-image, so the padding reserved for the arrow wasn't reliably honoured. The row has plenty of spare width (see the screenshot), so there's no need to fight the browser for every pixel here -- a comfortable fixed min-width plus the browser's own arrow (which always reserves its own space correctly, because it's drawn by the same engine that sizes the box) is simpler and can't desync like that. */ flex:0 0 auto; min-width:150px; height:36px !important; box-sizing:border-box !important; line-height:normal; margin:0 !important; border:1px solid var(--tnc-border); border-radius:6px; background:#fff; padding:0 10px; font-size:12.5px; color:var(--tnc-text); font-family:Arial,Helvetica,sans-serif; cursor:pointer; } .tnc-ad-filter-select:focus{ outline:none; border-color:var(--tnc-gold); box-shadow:0 0 0 3px rgba(198,161,91,.10); } @media (max-width:560px){ .tnc-ad-toolbar-vendors .tnc-ad-search{ flex-basis:100%; } .tnc-ad-filter-label{ flex:1 1 auto; } .tnc-ad-filter-select{ width:100%; flex:1 1 auto; } } /* Prev/Next (or "View all N") under a status group's table once it has more rows than the current per-page setting. */ .tnc-ad-pagination{ display:flex; align-items:center; justify-content:flex-start; gap:14px; margin:10px 0 20px; } .tnc-ad-pagination-info{ font-size:11.5px; color:var(--tnc-muted); } /* Checkbox column -- narrow and fixed, unlike the other flex:1 columns. */ .tnc-ad-table-row > div.tnc-ad-col-check{ flex:0 0 30px; } /* A short monospace reference ID, e.g. TNC-M-000011. */ .tnc-ad-id{ font-family:"Courier New",Courier,monospace; font-size:11px; letter-spacing:.2px; color:var(--tnc-muted); background:var(--tnc-cream); padding:3px 7px; border-radius:3px; white-space:nowrap; } /* The listing's own post ID, shown under the account-ID badge above -- mainly there so a vendor with no linked account (Google-imported, never claimed) still has something to search/reference by. */ .tnc-ad-post-id{ font-family:"Courier New",Courier,monospace; font-size:10.5px; color:var(--tnc-muted); margin-top:4px; } /* Approved/Pending section headings on the Vendors view -- same weight as a panel title, just smaller, so each group reads as its own list rather than one long undivided table. */ .tnc-ad-group-title{ font-family:Georgia,"Times New Roman",serif; font-weight:400; font-size:15px; color:var(--tnc-dark); margin:0; padding:44px 0 16px; border-top:1px solid var(--tnc-border); } .tnc-ad-group-title:first-of-type{ padding-top:0; border-top:0; } .tnc-ad-group-count{ font-family:Arial,Helvetica,sans-serif; font-size:12px; font-weight:400; color:var(--tnc-muted); } /* "N selected" + Delete Selected, under a People sub-tab's table (and, on the Vendors tab, printed again right under the checkboxes too -- see .tnc-ad-bulk-bar-top -- since that table can run to several paginated screens and the bottom copy alone is easy to lose track of). */ .tnc-ad-bulk-bar{ display:flex; align-items:center; gap:14px; margin-top:12px; } .tnc-ad-bulk-bar-top{ margin-top:0; margin-bottom:16px; } .tnc-ad-bulk-count{ font-size:11.5px; color:var(--tnc-muted); font-weight:700; } @media (max-width:680px){ /* Mobile rows already stack, so a checkbox column has nothing to align against -- bulk-select stays a desktop tool there, single Block/Delete on each row still works fine. */ .tnc-ad-col-check, .tnc-ad-bulk-bar{ display:none; } } /* Profile */ .tnc-profile-row{ display:flex; align-items:center; gap:15px; flex-wrap:wrap; margin-bottom:16px; } .tnc-profile-photo{ width:64px; height:64px; border-radius:50%; overflow:hidden; flex-shrink:0; border:2px solid var(--tnc-gold); display:flex; align-items:center; justify-content:center; background:var(--tnc-cream); color:var(--tnc-oxblood); font-family:Georgia,serif; font-size:18px; } .tnc-profile-photo img{ width:100%; height:100%; object-fit:cover; } .tnc-hint-text{ color:var(--tnc-muted); font-size:12px; line-height:1.6; margin:6px 0 0; } /* Analytics tab (vendor dashboard) */ .tnc-vd-analytics-range{ display:flex; align-items:center; gap:8px; margin-bottom:16px; flex-wrap:wrap; } .tnc-vd-analytics-range-label{ font-size:11.5px; color:var(--tnc-muted); font-weight:700; text-transform:uppercase; letter-spacing:.3px; } .tnc-vd-analytics-range a.tnc-btn-outline.is-active{ background:var(--tnc-oxblood); border-color:var(--tnc-oxblood); color:#fff !important; } .tnc-vd-analytics-chart{ display:flex; align-items:flex-end; gap:3px; height:120px; padding:10px 0 0; border-bottom:1px solid var(--tnc-border); } .tnc-vd-analytics-bar{ flex:1 1 0; height:100%; display:flex; align-items:flex-end; min-width:2px; } .tnc-vd-analytics-bar-fill{ width:100%; background:var(--tnc-gold); border-radius:2px 2px 0 0; transition:.2s ease; } .tnc-vd-analytics-bar:hover .tnc-vd-analytics-bar-fill{ background:var(--tnc-oxblood); } .tnc-vd-analytics-halls{ display:flex; flex-direction:column; gap:6px; } .tnc-vd-analytics-hall-row{ display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:var(--tnc-cream); border-radius:4px; font-size:12.5px; color:var(--tnc-dark); } .tnc-vd-analytics-hall-row strong{ color:var(--tnc-oxblood); font-family:Georgia,serif; } /* Add Listing tab -- category picker (a card per category the vendor is actually registered under, not every one on the site). Same look as the homepage's own category grid (.tnc-ph-vendor in tnc-homepage.css) -- icon circle, gold top accent, number, title, blurb -- just a