/* ════════════════════════════════════════════════════════════════
admin.css — CSS global pentru TOATE paginile din /admin/
Încărcat prin: includes/header.php (toate paginile admin)
Împreună cu: header.css (navbar + layout admin)
NU este folosit pe paginile publice — pentru public vezi shared.css
════════════════════════════════════════════════════════════════ */
/* TwemojiMozilla © Mozilla Foundation, CC-BY 4.0 — flag emoji polyfill for Chrome/Windows */
@font-face {
font-family: 'FlagEmoji';
src: url('../fonts/TwemojiMozilla.woff2') format('woff2');
unicode-range: U+1F1E0-U+1F1FF;
}
/* ============================================================================
admin.css — fișier unificat (admin.css + categories-expandable.css)
============================================================================ */
* {
box-sizing: border-box;
}
/* ============================================================================
CSS VARIABLES
============================================================================ */
/* ── Light theme overrides pentru componente admin ── */
[data-theme="light"] .div-table {
border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .div-tr {
border-bottom-color: rgba(0,0,0,0.05);
}
[data-theme="light"] .div-tr--head {
background: rgba(0,0,0,0.03);
}
[data-theme="light"] .div-tr:not(.div-tr--head):hover {
background: rgba(52,152,219,0.05);
}
[data-theme="light"] .div-th {
color: #6b7280;
}
[data-theme="light"] .div-td {
color: #374151;
}
[data-theme="light"] .page-header h1 {
color: #1e293b;
}
[data-theme="light"] .form-container,
[data-theme="light"] .card,
[data-theme="light"] .settings-container {
background: #ffffff;
border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .main-footer {
background: #e2e8f0;
color: #374151;
}
[data-theme="light"] .badge-success {
background: #dcfce7;
color: #166534;
border-color: #86efac;
}
[data-theme="light"] .badge-info {
background: #dbeafe;
color: #1e40af;
border-color: #93c5fd;
}
[data-theme="light"] #schedule-wrap {
background: #e8f0f8 !important;
}
[data-theme="light"] .loc-logo-thumb {
border: 1px solid #9daabc;
}
[data-theme="light"] .accordion-section.is-open .accordion-body {
background: #d7e7f6; border-top: 1px solid #a5ddff;
}
/* ═══════════════════════════════════════════════════════
div-table — sistem de tabel generic bazat pe divuri
═══════════════════════════════════════════════════════ */
.div-table {
width: 100%;
border-radius: 8px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .07);
}
/* ── Rând ─────────────────────────────────────────────── */
.div-tr {
display: grid;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, .05);
transition: background .15s;
}
.div-tr:last-child { border-bottom: none; }
.div-tr:not(.div-tr--head):hover { background: rgba(255, 255, 255, .03); }
/* ── Header ───────────────────────────────────────────── */
.div-tr--head { background: rgba(255, 255, 255, .04); }
.div-th {
padding: .6rem 1rem;
font-size: .72rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: #667;
white-space: nowrap;
}
/* ── Celulă ───────────────────────────────────────────── */
.div-td {
padding: .75rem 1rem;
font-size: .88rem;
color: #ccd;
display: flex;
align-items: center;
gap: .4rem;
min-width: 0; /* permite text-overflow în grid */
overflow: hidden;
}
/* Label — ascuns pe desktop, vizibil pe mobile */
.div-td__label {
display: none;
font-size: .7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
color: #556;
min-width: 80px;
flex-shrink: 0;
}
.div-td__flag { font-size: 1.4rem; line-height: 1; }
.div-td__code {
background: rgba(255,255,255,.07);
padding: 2px 8px;
border-radius: 4px;
font-weight: 700;
font-family: monospace;
font-size: .85rem;
}
.div-td__actions { display: flex; gap: .4rem; flex-wrap: wrap; }
/* ═══════════════════════════════════════════════════════
Coloane specifice — Languages
8 coloane: ordine | flag | cod | nume | traduceri | status | implicit | acțiuni
═══════════════════════════════════════════════════════ */
.div-table--languages .div-tr {
grid-template-columns:
60px /* ordine */
55px /* flag */
70px /* cod */
1fr /* nume */
110px /* traduceri */
90px /* status */
195px /* implicit */
150px; /* acțiuni */
}
/* Centrări */
.div-col--flag { justify-content: center; }
.div-col--default { justify-content: center; }
/* ═══════════════════════════════════════════════════════
Responsive — sub 700px: card vertical
═══════════════════════════════════════════════════════ */
@media (max-width: 950px) {
.div-tr--head { display: none !important; }
.div-table {
border: none;
background: transparent;
display: flex;
flex-direction: column;
gap: .5rem;
}
.div-tr {
display: flex;
flex-direction: column;
align-items: stretch;
padding: .75rem 1rem;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, .07);
background: rgba(255, 255, 255, .02);
}
.div-td {
padding: .35rem 0;
border-bottom: 1px solid rgba(255,255,255,.04);
overflow: visible;
}
.div-td:last-child { border-bottom: none; }
.div-td__label { display: inline-block; }
.div-col--flag { justify-content: flex-start; }
.div-col--default { justify-content: flex-start; }
}
/* ============================================================================
PAGE LAYOUT
============================================================================ */
/* Page Header */
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: .5rem;
padding: 1rem 1rem;
/* border-bottom: 2px solid #2f7aac; */
border-bottom: 2px solid transparent;
background: linear-gradient(to right, #2f7aac, transparent) bottom / 100% 2px no-repeat;
}
.page-header h1 {
margin: 0;
color: #d9d1d1;
font-size: 1.5rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 1rem;
}
.page-h1-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
object-fit: contain;
}
svg.page-h1-icon { overflow: visible; }
.page-actions {
display: flex;
gap: 1rem;
}
/* ============================================================================
ALERTS
============================================================================ */
.alert {
padding: 1.25rem 1.75rem;
border-radius: 10px;
margin-bottom: 2rem;
position: relative;
display: flex;
align-items: center;
gap: 1rem;
font-size: 1rem;
font-weight: 500;
}
.alert::before {
content: '';
font-size: 1.5rem;
}
.alert-success {
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
color: #155724;
border-left: 5px solid #28a745;
}
.alert-success::before { content: '✓'; }
.alert-danger {
background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
color: #721c24;
border-left: 5px solid #dc3545;
}
.alert-danger::before { content: '✕'; }
.alert-warning {
background: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%);
color: #856404;
border-left: 5px solid #ffc107;
}
.alert-warning::before { content: '⚠'; }
.alert-dismissible { padding-right: 3.5rem; }
.alert .close {
position: absolute;
right: 1.25rem;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
font-size: 1.75rem;
cursor: pointer;
opacity: 0.6;
transition: all 0.3s;
width: 30px;
height: 30px;
border-radius: 50%;
}
.alert .close:hover {
opacity: 1;
background: rgba(0,0,0,0.1);
}
/* ============================================================================
BADGES
============================================================================ */
.badge {
display: inline-block;
padding: 4px 12px;
border-radius: 5px;
font-size: 12px;
font-weight: 600;
text-align: center;
white-space: nowrap;
}
.badge-primary {
background: linear-gradient(135deg, #f8f1d7 0%, #f5ebc6 100%);
color: #721c24;
border: 1px solid #dc8b35;
}
.badge-success {
background: #1d2328;
color: #13a835;
border: 1px solid #13a835;
}
.badge-danger {
background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
color: #721c24;
border: 1px solid #dc3545;
}
.badge-warning {
background: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%);
color: #856404;
border: 1px solid #ffc107;
}
.badge-info {
background: #1d2328;
color: #9cbec3;
border: 1px solid #1895ff;
}
.badge-stock { background: #3498db; color: white; }
.badge-variants { background: #9b59b6; color: white; }
.badge-available { background: #27ae60; color: white; }
.badge-unavailable { background: #e74c3c; color: white; }
/* ============================================================================
BUTTONS
============================================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.65rem 1.3rem;
border: none;
border-radius: 2px;
cursor: pointer;
text-decoration: none;
font-size: 1rem;
transition: all 0.3s;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.btn:active { transform: translateY(0); }
.btn-sm { padding: 0.4rem 1rem; font-size: 0.9rem; }
.btn-lg { padding: 1rem 2rem; font-size: 1.1rem; }
.btn-primary {
background: var(--primary-color);
color: white;
}
.btn-primary:hover { background: #2563eb; }
.btn-qr {
background: #7c3aed;
color: white;
}
.btn-qr:hover { background: #6d28d9; }
.btn-secondary {
background: #64748b;
color: #fff;
}
.btn-secondary:hover {
background: #475569;
color: #fff;
}
.btn-success {
background: #16a34a;
color: white;
}
.btn-success:hover { background: #15803d; }
.btn-danger {
background: var(--danger-color);
color: white;
}
.btn-danger:hover { background: #b91c1c; }
.btn-warning {
background: var(--warning-color);
color: white;
}
.btn-warning:hover { background: #b45309; }
.btn-info {
background: #0891b2;
color: white;
}
.btn-info:hover { background: #0e7490; }
.btn-status {
background: #3b82f6;
color: white;
}
.btn-status:hover { background: #2563eb; }
/* Butoane pentru liniile din tabele */
.btn-edit-rows {
background: #2563eb;
color: #fff;
}
.btn-edit-rows:hover {
background: #1d4ed8;
transform: translateY(-2px);
}
.btn-status-rows {
background: #d97706;
color: #fff;
}
.btn-status-rows:hover {
background: #b45309;
color: #fff;
}
.btn-danger-rows {
background: #dc2626;
color: #fff;
}
.btn-danger-rows:hover {
background: #b91c1c;
color: #fff;
}
.btn-success-rows {
background: #16a34a;
color: #fff;
}
.btn-success-rows:hover {
background: #15803d;
color: #fff;
}
/* Butoane acțiuni location (legacy - folosite în locations.php vechi) */
.action-btn {
display: flex;
align-items: center;
gap: 0.25rem;
padding: 0.75rem 1.5rem;
border-radius: 4px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s;
border: none;
cursor: pointer;
text-align: left;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.54);
}
.action-btn .btn-icon { font-size: 1.5rem; min-width: 30px; text-align: center; }
.action-btn .btn-text { flex: 1; }
/* ============================================================================
FORM ACTIONS
============================================================================ */
.form-actions {
margin-top: 3rem;
padding-top: 2rem;
border-top: 2px solid #ecf0f1;
display: flex;
gap: 1rem;
}
/* ============================================================================
EMPTY STATE
============================================================================ */
.empty-state {
text-align: center;
padding: 5rem 2rem;
background: #1d2328;
border-radius: 16px;
color: #7f8c8d;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.empty-state::before {
content: '📦';
font-size: 5rem;
display: block;
margin-bottom: 1.5rem;
opacity: 0.5;
}
.empty-state p { font-size: 1.2rem; margin: 1rem 0; }
/* ============================================================================
UTILITIES
============================================================================ */
.text-muted { color: #95a5a6; }
.text-center { text-align: center; }
.small { font-size: 0.875rem; }
.hidden { display: none !important; }
/* ============================================================================
TABLES (simple)
============================================================================ */
.table {
width: 100%;
border-collapse: collapse;
}
.table th, .table td {
padding: 0.5rem;
text-align: left;
border: 1px solid #ddd;
vertical-align: middle;
}
/* ============================================================================
TABLE CONTAINER + RESPONSIVE GRID TABLE
============================================================================ */
.table-container {
width: 100%;
overflow-x: auto;
background: transparent;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.data-table {
width: 100%;
border-collapse: collapse;
}
.data-table thead {
background: var(--secondary-color);
color: white;
}
.data-table th,
.data-table td {
padding: 1rem;
text-align: left;
}
.data-table tbody tr {
border-bottom: 1px solid var(--light-bg);
}
/* Header and Row Grid */
.table-header,
.table-row {
display: grid;
align-items: center;
width: 100%;
min-height: 60px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.table-row {
background: #272d33;
border-bottom: 1px solid #1a2332;
transition: background-color 0.2s ease;
}
.table-row:hover { background: #1b1c1e; }
.table-row.no-data {
background: #1a2332;
grid-template-columns: 1fr !important;
}
.table-header {
background: #f5f6fa;
border-bottom: 2px solid #ddd;
position: sticky;
top: 0;
z-index: 10;
}
.th {
padding: 12px;
font-weight: 600;
font-size: 14px;
color: #5b5b5b ;
text-align: left;
white-space: nowrap;
}
.table-body { width: 100%; }
.rows-td {
padding: 5px 5px;
font-size: 17px;
color: #5b5b5b ;
text-align: center;
overflow: visible;
border-right: 1px solid #423f3f;
height: 100%;
align-content: center;
}
.rows-td:first-child { padding-left: 10px; }
/* ============================================================================
COLUMN DIMENSIONS
============================================================================ */
.column-dimension-products {
grid-template-columns:
1.3fr /* Img */
2.7fr /* Nume produs */
1.5fr /* Categorie */
0.8fr /* Preț */
0.5fr /* Stoc */
0.5fr /* Variante */
1.2fr /* Status */
2.7fr; /* Acțiuni */
}
.column-dimension-users {
grid-template-columns:
0.2fr /* ID */
1fr /* Avatar */
1fr /* Username */
1.5fr /* Email */
0.6fr /* Role */
0.6fr /* Status */
1fr /* Updates */
1.5fr; /* Acțiuni */
}
.column-category-attributes {
grid-template-columns:
1.5fr 1.5fr 1fr 1fr 1fr 1fr 1fr 2fr;
}
.column-dimension-table {
grid-template-columns:
1.5fr /* Table */
1.5fr /* Hall */
0.4fr /* Seats */
1.2fr /* Qr Code */
0.7fr /* Status */
1.5fr; /* Acțiuni */
}
.column-dimension-subcategories {
grid-template-columns:
0.3fr 1.5fr 1fr 0.5fr 1fr 0.5fr 1fr 1.5fr;
}
/* Products nested (expandable) */
.column-dimension-products-nested {
grid-template-columns:
100px /* Img */
2fr /* Nume produs */
1fr /* Preț */
0.7fr /* Stoc */
0.7fr /* Variante */
1fr /* Status */
2.5fr; /* Acțiuni */
}
/* ============================================================================
ACTIONS
============================================================================ */
.actions {
display: flex;
gap: 8px;
flex-wrap: nowrap;
align-items: center;
padding-right: 10px;
}
.actions .btn {
padding: 8px 16px;
border: none;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.actions .btn-sm {
padding: 0.375rem 0.625rem;
font-size: 0.85rem;
}
/* ============================================================================
IMAGES
============================================================================ */
.product-thumb,
.products-thumb {
max-width: 150px;
height: 90px;
object-fit: cover;
border-radius: 8px;
display: block;
}
/* ============================================================================
MOBILE CARDS (tabel alternativ pe mobil)
============================================================================ */
.mobile-cards { display: none; }
.mobile-card {
background: #1d2328;
border-radius: 12px;
padding: 1rem;
margin-bottom: 1rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border: 1px solid #e9ecef;
}
.card-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
border-bottom: 1px solid #f1f3f5;
}
.card-row:last-child { border-bottom: none; padding-bottom: 0; }
.card-row:first-child { padding-top: 0; }
.card-label {
font-weight: 600;
color: #495057;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.5px;
flex: 0 0 40%;
}
.card-value {
flex: 1;
text-align: right;
color: #212529;
}
.no-data-card {
text-align: center;
padding: 3rem 1rem;
color: #7f8c8d;
background: #1d2328;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.card-value .actions {
display: flex;
gap: 0.5rem;
justify-content: flex-end;
flex-wrap: wrap;
}
.card-value img.products-thumb {
max-width: 290px;
height: 150px;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card-value .badge { display: inline-block; }
/* ============================================================================
DESKTOP TABLE (header styling)
============================================================================ */
.desktop-table thead {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.desktop-table th {
padding: 1rem;
text-align: left;
font-weight: 600;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.desktop-table tbody tr {
border-bottom: 1px solid #e9ecef;
transition: background-color 0.2s;
}
.desktop-table tbody tr:last-child { border-bottom: none; }
.desktop-table td {
padding: 1rem;
vertical-align: middle;
}
/* ============================================================================
FORM ROWS (grid layout)
============================================================================ */
.form-row.cols-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1.5rem;
}
.form-row.cols-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.form-row.cols-4 {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
/* ============================================================================
CUSTOM SELECT DROPDOWN
============================================================================ */
.custom-select-wrapper { position: relative; width: 100%; }
.select-display {
width: 100%;
background: #27272a;
border: 2px solid #3f3f46;
border-radius: 0.75rem;
padding: 0.875rem 2.5rem 0.875rem 1rem;
color: #f3f4f6;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
outline: none;
box-sizing: border-box;
font-family: 'FlagEmoji', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.select-display:hover { border-color: #52525b; background: #2f2f35; }
.custom-select-wrapper.open .select-display { cursor: text; }
.select-display:focus,
.custom-select-wrapper.open .select-display {
border-color: #a1a1aa;
box-shadow: 0 0 0 3px rgba(161, 161, 170, 0.15);
background: #18181b;
}
.select-arrow {
position: absolute;
right: 0.875rem;
top: 50%;
transform: translateY(-50%);
color: #a1a1aa;
font-size: 0.75rem;
pointer-events: none;
transition: transform 0.3s ease;
z-index: 1;
}
.custom-select-wrapper.open .select-arrow {
transform: translateY(-50%) rotate(180deg);
}
.select-dropdown {
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
right: 0;
background: #18181b;
border: 2px solid #3f3f46;
border-radius: 0.75rem;
max-height: 300px;
display: flex;
flex-direction: column;
z-index: 9999;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.2s ease;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.custom-select-wrapper.open-up .select-dropdown {
top: auto;
bottom: calc(100% + 0.5rem);
transform: translateY(10px);
}
.custom-select-wrapper.open .select-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-search {
padding: 0.75rem;
border-bottom: 1px solid #27272a;
flex-shrink: 0;
}
.search-filter {
width: 100%;
background: #27272a;
border: 1px solid #3f3f46;
border-radius: 0.5rem;
padding: 0.625rem 0.875rem;
color: #f3f4f6;
font-size: 0.875rem;
outline: none;
box-sizing: border-box;
}
.search-filter:focus { border-color: #a1a1aa; background: #202023; }
.search-filter::placeholder { color: #71717a; }
.options-list {
overflow-y: auto;
flex: 1;
padding: 0.5rem;
}
.options-list::-webkit-scrollbar { width: 6px; }
.options-list::-webkit-scrollbar-track { background: transparent; }
.options-list::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 3px; }
/* .options-list::-webkit-scrollbar-thumb:hover { background: #52525b; } */
.option-group { margin-bottom: 0.5rem; }
.option-group:last-child { margin-bottom: 0; }
.option-group.hidden { display: none; }
.group-header {
padding: 0.5rem 0.75rem;
color: #a1a1aa;
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
background: #2d3337;
border-radius: 0.375rem;
margin-bottom: 0.25rem;
border-bottom: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
}
.option-item {
padding: 0.625rem 0.75rem;
color: #e4e4e7;
cursor: pointer;
border-radius: 0.375rem;
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.2s ease;
font-size: 0.9375rem;
border-bottom: 1px solid #393636;
}
.option-item:hover { background: #2f2f35; color: #ffffff; }
.option-item.selected { background: #52525b; color: #ffffff; }
.option-item.hidden { display: none; }
.option-icon {
font-size: 1rem;
opacity: 0.8;
width: 1.5rem;
min-width: 1.5rem;
height: 1.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
flex-shrink: 0;
border-right: 1px solid #4a4a4a;
padding-right: 0.5rem;
font-family: 'FlagEmoji', "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}
.no-results {
padding: 1.5rem 1rem;
text-align: center;
color: #71717a;
font-size: 0.875rem;
display: none;
}
/* ── Custom select — light theme ── */
[data-theme="light"] .select-display { background:#f0f5fa; border-color:#bdd4e7; color:#1e293b; }
[data-theme="light"] .select-display:hover { background:#e4edf6; border-color:#93b4cc; }
[data-theme="light"] .custom-select-wrapper.open .select-display,
[data-theme="light"] .select-display:focus { background:#fff; border-color:#3a7bbf; box-shadow:0 0 0 3px rgba(58,123,191,.15); }
[data-theme="light"] .select-arrow { color:#5a8aaa; }
[data-theme="light"] .select-dropdown { background:#fff; border-color:#bdd4e7; box-shadow:0 8px 24px rgba(0,0,0,.12); }
[data-theme="light"] .dropdown-search { border-bottom-color:#ddeaf5; }
[data-theme="light"] .search-filter { background:#f0f5fa; border-color:#bdd4e7; color:#1e293b; }
[data-theme="light"] .search-filter::placeholder { color:#93b4cc; }
[data-theme="light"] .search-filter:focus { background:#fff; border-color:#3a7bbf; }
[data-theme="light"] .options-list::-webkit-scrollbar-thumb { background:#bdd4e7; }
[data-theme="light"] .group-header { background:#eef3f8; color:#4a6a88; border-color:#ddeaf5; }
[data-theme="light"] .option-item { color:#1e293b; border-bottom-color:#eef3f8; }
[data-theme="light"] .option-item:hover { background:#eef3f8; color:#1e293b; }
[data-theme="light"] .option-item.selected { background:#ddeaf5; color:#1a5a88; }
[data-theme="light"] .option-icon { border-right-color:#ddeaf5; }
[data-theme="light"] .no-results { color:#93b4cc; }
/* ============================================================================
SCHEDULE FORM (edit_locations.php)
============================================================================ */
.schedule-form {
padding: 1.5rem;
background: #272d33;
/* border-radius: 5px;
border: 1px solid #5a5b5b; */
}
.schedule-header {
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 3px solid #3498db;
display: flex;
align-items: center;
gap: 1rem;
}
.schedule-header h3 {
margin: 0;
color: #5b5b5b ;
font-size: 1.4rem;
font-weight: 700;
}
/* ════════════════════════════════════════════════════════════════
PROGRAM SĂPTĂMÂNAL — layout multi-interval
════════════════════════════════════════════════════════════════ */
/* Wrapper pentru toate zilele */
#schedule-wrap {
border: 1px solid #93c5fd;
border-radius: 5px;
overflow: hidden;
background: #233547;
}
/* ── Rând zi ── */
.schedule-grid {
display: grid;
grid-template-columns: 110px 1fr;
align-items: start;
border-bottom: 1px solid #93c5fd;
transition: background .12s;
}
.schedule-grid:last-child { border-bottom: none; }
.schedule-grid:hover { background: rgba(255,255,255,.02); }
.schedule-grid.schedule-closed { background: rgba(160,20,20,.07); }
/* ── Coloana stânga: ziua ── */
.schedule-day {
padding: .75rem .6rem;
border-right: 1px solid #93c5fd;
font-weight: 600;
color: #8faec8;
font-size: .82rem;
letter-spacing: .04em;
text-transform: uppercase;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100%;
text-align: center;
}
.schedule-day::before {
content: "📅";
font-size: 1.1rem;
display: block;
}
.schedule-day-weekend { color: #f87171; }
.schedule-day-weekend::before { content: "🎉"; }
/* ── Coloana dreapta ── */
.sched-right {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-end;
gap: .6rem;
padding: .7rem .8rem;
}
.sched-footer {
display: flex;
flex-direction: row;
align-items: center;
gap: .6rem;
padding-bottom: 3px;
flex-shrink: 0;
}
.sched-footer .schedule-checkbox {
width: auto;
margin-top: 0;
}
.intervals-wrap {
display: flex;
flex-direction: column;
gap: .35rem;
flex: 1 1 auto;
}
/* ── Un rând de interval ( [ora] – [ora] × ) ── */
.interval-row {
display: flex;
align-items: center;
gap: .5rem;
flex-wrap: nowrap;
}
/* Suprascrie width:90% + animație din regula globală */
.interval-row .schedule-input {
flex: 1 1 0;
min-width: 60px;
max-width: 110px;
width: auto !important;
animation: none !important;
padding: .25rem .4rem;
font-size: .9rem;
border: 1px solid #263545;
background: #111c28;
color: #c8daea;
border-radius: 4px;
text-align: center;
}
.interval-row .schedule-input:focus {
border-color: #3b82f6;
background: #0d1a27;
outline: none;
box-shadow: 0 0 0 2px rgba(59,130,246,.18);
}
.interval-row .schedule-input::-webkit-calendar-picker-indicator {
filter: invert(0.7) brightness(1.8);
cursor: pointer;
opacity: .75;
}
.interval-row .schedule-input::-webkit-calendar-picker-indicator:hover {
opacity: 1;
}
.schedule-closed .interval-row .schedule-input {
background: #1e1012;
border-color: #4a1a1a;
color: #9a5050;
}
.interval-sep {
color: #2e3f52;
font-weight: 700;
font-size: 1rem;
flex-shrink: 0;
user-select: none;
width: 14px;
text-align: center;
}
.interval-remove {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: #bc5050;
border: 1px solid #4a1818;
color: #fff;
border-radius: 5px;
width: 24px;
height: 24px;
font-size: 1rem;
line-height: 1;
cursor: pointer;
padding: 0;
opacity: .5;
transition: opacity .15s, background .15s, border-color .15s;
}
.interval-remove:hover { background: #c0392b; color: #fff; opacity: 1; border-color: #c0392b; }
.interval-remove:disabled { opacity: .18; cursor: not-allowed; }
/* .sched-footer removed — interval-add is now inline, checkbox moved to .schedule-day */
.interval-add {
background: none;
border: 1px dashed #1e3a58;
color: #3d78b8;
border-radius: 5px;
padding: 3px 10px;
font-size: .8rem;
cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
line-height: 1.7;
}
.interval-add:hover { background: #0d1e30; border-color: #3b82f6; color: #60a5fa; }
.interval-add:disabled { opacity: .22; cursor: not-allowed; }
.schedule-input {
padding: 0.45rem 1rem;
border: 2px solid #e9ecef;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s;
background: #1d2328;
color: #5b5b5b ;
}
.schedule-input:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}
.schedule-input:disabled {
background: #424c55;
color: #95a5a6;
cursor: not-allowed;
border-color: #dee2e6;
width: 90%;
}
.schedule-input:not(:disabled) {
animation: pulseInput 2s infinite;
width: 90%;
}
@keyframes pulseInput {
0%, 100% { border-color: #e9ecef; }
50% { border-color: #3498db; }
}
.schedule-checkbox {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 4px 6px;
border-radius: 5px;
cursor: pointer;
transition: background .2s;
margin-top: 4px;
}
.schedule-checkbox:hover { background: rgba(231, 76, 60, 0.12); }
.schedule-checkbox input[type="checkbox"] {
width: 14px;
height: 14px;
cursor: pointer;
accent-color: #e74c3c;
flex-shrink: 0;
}
.schedule-checkbox-label {
font-size: .72rem;
color: #8faec8;
font-weight: 500;
user-select: none;
}
.schedule-closed .schedule-checkbox-label { color: #f87171; }
.schedule-closed .interval-row .schedule-input {
background: #2a1515;
border-color: #5a2020;
color: #e08080;
}
/* ============================================================================
DYNAMIC ATTRIBUTES & VARIANTS
============================================================================ */
.dynamic-attributes {
margin: 1.5rem 0;
padding: 0.5rem 1.5rem;
background: #233547;
border-radius: 8px;
border-left: 4px solid #a5ddff;
}
.variants-container {
margin: 1.5rem 0;
padding: 0.5rem 1.5rem;
background: #424c55;
border-radius: 8px;
border-left: 4px solid #28a745;
}
.variant-item {
padding: 1rem;
margin-bottom: 1rem;
background: #1d2328;
border-radius: 6px;
border: 1px solid #dee2e6;
position: relative;
}
@media (max-width: 768px) {
.variants-container {
margin: 0.5rem 0;
}
/* .checkbox-label {
padding: 0.1rem 0.8rem;
} */
.avatar {
width:36px;
height:36px;
}
}
.variant-item .remove-variant {
position: absolute;
top: 10px;
right: 10px;
}
#add-variant-btn { margin-top: 1rem; }
/* ============================================================================
ATTRIBUTE MANAGEMENT (management_attributes.php)
============================================================================ */
.attributes-list { padding: 0.5rem; }
.attribute-item {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 0.75rem;
align-items: start;
padding: 0.75rem;
border: 1px solid #e1e4e8;
border-radius: 4px;
margin-bottom: 0.5rem;
background: #fff;
transition: border-color 0.2s;
}
.attribute-item:hover { border-color: #0366d6; }
.attribute-info { min-width: 0; }
.attribute-name {
font-weight: 600;
color: #24292e;
font-size: 0.9rem;
margin-bottom: 0.25rem;
}
.attribute-details {
font-size: 0.8rem;
color: #586069;
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
line-height: 1.4;
}
.attribute-details strong { font-weight: 600; color: #24292e; }
.attribute-badges {
display: flex;
gap: 0.375rem;
flex-wrap: wrap;
align-items: center;
}
.attribute-badges .badge {
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
border-radius: 3px;
}
.attribute-help {
font-size: 0.85rem;
color: #6c757d;
margin-top: 0.25rem;
}
.no-attributes {
text-align: center;
padding: 1.5rem;
color: #6a737d;
font-size: 0.9rem;
}
.filter-section {
background: #fff;
border: 1px solid #e1e4e8;
padding: 1rem;
border-radius: 6px;
margin-bottom: 1rem;
}
.filter-section h3 {
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: #24292e;
}
.filter-section input {
width: 100%;
padding: 0.5rem 0.75rem;
border: 1px solid #d1d5da;
border-radius: 4px;
font-size: 0.9rem;
}
.filter-section input:focus {
outline: none;
border-color: #0366d6;
box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.1);
}
/* ── Stat cards & quick-stats (orders.php, view_update_credit.php, dashboard) ── */
.quick-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
margin-top: 1.5rem;
}
.stat-card {
background: #272d33;
border: 1px solid #3d4347;
border-radius: 10px;
padding: 1rem 1.2rem;
text-align: left;
}
.stat-card.accent-green { border-color: rgba(34,197,94,.4); }
.stat-card.accent-red { border-color: rgba(239,68,68,.4); }
.stat-card.accent-blue { border-color: rgba(79,142,247,.4); }
.stat-card.accent-yellow { border-color: rgba(234,179,8,.4); }
.stat-card.accent-purple { border-color: rgba(168,85,247,.4); }
.stat-label {
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .06em;
color: #7a9bbb;
margin-top: 0;
}
.stat-value {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.1;
color: #e0e8f0;
}
.stat-card.accent-green .stat-value { color: #22c55e; }
.stat-card.accent-red .stat-value { color: #ef4444; }
.stat-card.accent-blue .stat-value { color: #4f8ef7; }
.stat-card.accent-yellow .stat-value { color: #eab308; }
.stat-card.accent-purple .stat-value { color: #a855f7; }
.stat-sub {
font-size: .75rem;
color: #5a7a9b;
margin-top: .25rem;
}
/* ── Filter bar ── */
.filter-bar {
background: #272d33;
border: 1px solid #3d4347;
/* border-radius: 12px; */
padding: 1rem 1.2rem;
margin-bottom: 1.5rem;
display: flex;
flex-wrap: wrap;
gap: .8rem;
align-items: flex-end;
}
.filter-bar .filter-group {
display: flex;
flex-direction: column;
gap: .3rem;
min-width: 130px;
}
.filter-bar .filter-group label {
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .05em;
color: #7a9bbb;
font-weight: 600;
}
.filter-bar .filter-actions { display: flex; gap: .5rem; align-items: flex-end; }
/* ── Orders list rows ── */
.uc-list { display: flex; flex-direction: column; gap: .4rem; }
.uc-row {
display: grid;
grid-template-columns: 140px 1fr 90px 80px 130px 110px 110px;
align-items: center;
gap: .5rem 1rem;
background: #272d33;
border: 1px solid #3d4347;
border-radius: 8px;
padding: .65rem 1rem;
font-size: .83rem;
color: #5b5b5b ;
transition: border-color .15s;
}
.uc-row:hover { border-color: #4f8ef7; background: #2a3038; }
.uc-head {
background: #1d2328;
border-color: #1d2328;
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: #4f8ef7;
padding: .5rem 1rem;
border-radius: 8px 8px 0 0;
margin-bottom: 0;
}
.uc-head:hover { background: #1d2328; border-color: #1d2328; }
.uc-lbl { display: none; font-size: .7rem; color: #5a7a9b; margin-right: .25rem; }
/* ── Order detail modal ── */
#order-modal-overlay {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,.65); z-index: 1000;
}
#order-modal {
display: none; position: fixed;
top: 50%; left: 50%; transform: translate(-50%,-50%);
width: min(780px, 95vw); max-height: 88vh; overflow-y: auto;
background: #1d2328; border: 1px solid #3d4347;
border-radius: 14px; z-index: 1001; padding: 0;
}
.om-header {
display: flex; align-items: center; justify-content: space-between;
padding: 1rem 1.4rem; border-bottom: 1px solid #3d4347;
position: sticky; top: 0; background: #1d2328; z-index: 2;
}
#om-ordno { color: #a855f7; font-weight: 700; font-size: .95rem; }
.om-close-btn { background: none; border: none; color: #7a9bbb; font-size: 1.4rem; cursor: pointer; line-height: 1; }
.om-body { padding: 1.2rem 1.4rem; display: flex; flex-direction: column; gap: 1.2rem; }
.om-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.om-card { background: #272d33; border: 1px solid #3d4347; border-radius: 8px; padding: .8rem 1rem; }
.om-card-cancel { background: #272d33; border: 1px solid rgba(239,68,68,.3); border-radius: 8px; padding: .8rem 1rem; }
.om-card-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; color: #7a9bbb; margin-bottom: .4rem; }
.om-card-label-red { font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; color: #ef4444; margin-bottom: .4rem; }
.om-loading { color: #5a7a9b; font-size: .82rem; }
.om-loc-name { font-weight: 600; margin-left: .4rem; }
.om-loc-city { color: #5a7a9b; }
.om-manager { color: #5a7a9b; font-size: .78rem; margin-top: .25rem; }
.om-session { color: #3a5a78; font-size: .72rem; margin-top: .15rem; }
.om-amt-label { color: #5a7a9b; }
.om-amt-strike { text-decoration: line-through; color: #5a7a9b; }
.om-amt-discount{ color: #ef4444; }
.om-amt-value { color: #5b5b5b ; }
.om-amt-total { color: #e0e8f0; font-size: 1rem; font-weight: 700; }
.om-amt-prep { color: #eab308; }
.om-cancel-name { color: #4f8ef7; font-weight: 600; }
.om-cancel-role { color: #5a7a9b; font-size: .78rem; }
.om-cancel-by { color: #ef4444; }
.om-cancel-rsn { color: #5b5b5b ; }
.om-cancel-time { color: #5a7a9b; font-size: .78rem; margin-top: .3rem; }
.om-cancel-none { color: #5a7a9b; }
.om-row-label { color: #5a7a9b; }
.om-row-value { color: #5b5b5b ; }
.om-fmt-empty { color: #3a5a78; }
.om-tl-row { border-bottom: 1px solid #3e4750; padding: .45rem 0; }
.om-tl-main { display: flex; align-items: center; gap: .5rem; }
.om-tl-sub { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; padding-left: 1.5rem; margin-top: .25rem; }
.om-tl-icon { flex-shrink: 0; width: 18px; text-align: center; }
.om-tl-label { font-weight: 700; flex: 1; }
.om-tl-time { color: #7a9bbb; font-size: .8rem; white-space: nowrap; }
.om-tl-user { color: #4f8ef7; background: rgba(79,142,247,.12); border-radius: 4px; padding: .1rem .4rem; font-size: .75rem; display: inline-flex; align-items: center; gap: .25rem; }
.om-tl-user .badge-svg-icon { width: 11px; height: 11px; margin: 0; }
.om-tl-role { color: #a78bfa; background: rgba(167,139,250,.14); border-radius: 4px; padding: .1rem .4rem; font-size: .72rem; font-weight: 700; }
.om-tl-dur { color: #9ca3af; font-size: .72rem; margin-left: auto; font-style: italic; white-space: nowrap; }
.om-tl-update { color: #3a5a78; font-size: .75rem; margin-top: .3rem; padding-top: .3rem; }
.om-items-grid { display: grid; grid-template-columns: 1fr 50px 80px 80px 90px; gap: .3rem .8rem; font-size: .8rem; }
.om-item-card { display: contents; }
.om-items-hcell { color: #4f8ef7; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.om-items-hcell-c { color: #4f8ef7; font-weight: 700; text-align: center; }
.om-items-hcell-r { color: #4f8ef7; font-weight: 700; text-align: right; }
.om-items-hcell-s { color: #4f8ef7; font-weight: 700; }
.om-items-cell { border-top: 1px solid #3d4347; padding-top: .3rem; }
.om-items-cell-c{ border-top: 1px solid #3d4347; padding-top: .3rem; text-align: center; color: #4f8ef7; font-weight: 700; }
.om-items-cell-p{ border-top: 1px solid #3d4347; padding-top: .3rem; text-align: right; color: #5a7a9b; }
.om-items-cell-s{ border-top: 1px solid #3d4347; padding-top: .3rem; text-align: right; color: #e0e8f0; font-weight: 600; }
.om-items-cell-st{ border-top: 1px solid #3d4347; padding-top: .3rem; }
.om-items-name { color: #5b5b5b ; }
.om-items-note { color: #5a7a9b; font-size: .72rem; }
.om-items-note-wrap { display: none; }
.om-items-dlvd { color: #3a5a78; font-size: .7rem; }
#om-extra { font-size: .75rem; color: #3a5a78; border-top: 1px solid #3d4347; padding-top: .6rem; }
#om-notes { font-size: .85rem; color: #5b5b5b ; }
#om-amounts { display: flex; flex-wrap: wrap; gap: .5rem 2rem; font-size: .85rem; }
#om-delivery { font-size: .85rem; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .8rem; }
#om-cancel { font-size: .85rem; }
#om-timeline { display: flex; flex-direction: column; gap: .35rem; font-size: .82rem; }
.om-del-fullrow { grid-column: 1 / -1; }
/* ── Pagination ── */
.pagination {
display: flex; gap: .4rem; flex-wrap: wrap;
justify-content: center; margin-top: 1.2rem;
}
.pagination a, .pagination span {
padding: .35rem .75rem; border-radius: 6px; font-size: .83rem;
border: 1px solid #3d4347;
color: #5b5b5b ; text-decoration: none;
background: #272d33; transition: background .15s;
}
.pagination a:hover { background: rgba(79,142,247,.18); border-color: #4f8ef7; }
.pagination span.current { background: #4f8ef7; border-color: #4f8ef7; color: #fff; font-weight: 700; }
.pagination span.dots { border: none; background: none; color: #5a7a9b; }
/* ── Badges de ordine ── */
.loc-id-badge {
color: #4f8ef7; font-weight: 700;
background: rgba(79,142,247,.12); border-radius: 4px;
padding: .1rem .4rem; font-size: .73rem;
white-space: nowrap; display: inline-block;
}
.ord-badge {
color: #a855f7; font-weight: 700;
background: rgba(168,85,247,.12); border-radius: 4px;
padding: .1rem .4rem; font-size: .7rem;
white-space: nowrap; display: inline-block;
letter-spacing: .02em;
}
.table-badge {
color: #eab308; font-weight: 600;
background: rgba(234,179,8,.1); border-radius: 4px;
padding: .1rem .35rem; font-size: .7rem;
display: inline-block;
}
/* ── Section title ── */
.section-title {
font-size: .78rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .07em; color: #4f8ef7;
padding: .55rem .9rem;
background: rgba(79,142,247,.1);
border-left: 3px solid #4f8ef7;
border-radius: 0 6px 6px 0;
margin-bottom: 1rem;
display: flex; align-items: center; gap: .5rem;
}
/* ── Section card (manage_category_attrs + altele) ── */
.section-card {
background: #313539;
border: 1px solid #3d4347;
border-radius: 10px;
padding: 1.35rem 1.6rem;
margin-bottom: 1.5rem;
}
.section-card h3 { margin-top: 0; color: #c8daf5; padding-bottom: .65rem; border-bottom: 1px solid #41506a; font-size: 1rem; }
/* ── Date input dark ── */
input[type="date"] {
background: #27272a;
border: 2px solid #3f3f46;
border-radius: 0.75rem;
padding: 0.875rem 1rem;
color: #f3f4f6;
font-size: 1rem;
width: 100%;
box-sizing: border-box;
min-height: 44px;
outline: none;
-webkit-appearance: none;
appearance: none;
color-scheme: dark;
}
input[type="date"]:focus {
border-color: #a1a1aa;
box-shadow: 0 0 0 3px rgba(161,161,170,.15);
background: #18181b;
}
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.6); cursor: pointer; }
.uc-col-price-delivery { color:#5a7a9b;font-size:.72rem; }
.uc-col-price-total { font-weight:700;color:#e0e8f0;font-size:.95rem; }
/* ── Orders mobile ── */
@media (max-width: 960px) {
.uc-head { display: none; }
.uc-row {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"ordno ordno"
"loc loc"
"amounts amounts"
"status pay"
"note note";
position: relative;
padding: .6rem .9rem;
gap: .2rem .5rem;
}
.uc-col-ordno { grid-area: ordno; }
.uc-col-loc { grid-area: loc; }
.uc-col-type { display: none; }
.uc-col-items { display: none; }
.uc-col-amounts { grid-area: amounts; }
.uc-col-status { grid-area: status; }
.uc-col-pay { grid-area: pay; text-align: right; }
.uc-col-note { grid-area: note; border-top: 1px solid rgba(255,255,255,.05); padding-top: .3rem; }
.uc-lbl { display: inline; }
}
@media (min-width: 961px) {
.uc-col-note { grid-column: 1 / -1; font-size: .75rem; color: #5a7a9b;
border-top: 1px solid rgba(255,255,255,.04); padding-top: .3rem; margin-top: .1rem; }
}
@media (max-width: 600px) {
.filter-bar {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .6rem;
padding: .85rem;
}
.filter-bar .filter-group {
min-width: 0;
width: 100%;
}
.filter-bar .filter-group .form-group { min-width: 0; }
.filter-bar .filter-group select,
.filter-bar .filter-group input[type="date"] {
width: 100%;
min-width: 0;
box-sizing: border-box;
font-size: 0.82rem;
}
.filter-bar .filter-group label { font-size: .65rem; }
.filter-bar .filter-group--wide,
.filter-bar .filter-actions { grid-column: 1 / -1; }
.filter-bar .filter-actions { display: flex; gap: .5rem; }
.filter-bar .filter-actions .btn { flex: 1; justify-content: center; }
.quick-stats {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: .55rem;
margin-bottom: 1rem;
margin-top: 1rem;
padding-bottom: .4rem;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.quick-stats::-webkit-scrollbar { height: 3px; }
.quick-stats::-webkit-scrollbar-thumb { background: #3d4347; border-radius: 2px; }
.stat-card {
flex: 0 0 130px;
scroll-snap-align: start;
padding: .7rem .75rem;
}
.stat-value { font-size: 1.35rem; }
.stat-sub { font-size: .66rem; }
}
@media (max-width: 560px) {
.om-items-note-wrap { display: block; }
.om-items-cell .om-items-note { display: none; }
.om-items-grid { display: block; }
.om-items-hcell, .om-items-hcell-c,
.om-items-hcell-r, .om-items-hcell-s { display: none; }
.om-items-cell, .om-items-cell-c,
.om-items-cell-p, .om-items-cell-s,
.om-items-cell-st { border-top: none; padding-top: 0; text-align: left; }
.om-item-card {
background: #1d2328; border: 1px solid #3d4347;
border-radius: 7px; padding: .6rem .8rem; margin-bottom: .5rem;
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "name qty" "note note" "price total" "status status";
gap: .15rem .5rem;
}
.om-item-card .om-items-cell { grid-area: name; font-weight: 600; }
.om-item-card .om-items-cell-c { grid-area: qty; text-align: right; font-size: .9rem; }
.om-item-card .om-items-note-wrap { grid-area: note; }
.om-item-card .om-items-cell-p { grid-area: price; color: #5a7a9b; font-size: .78rem; }
.om-item-card .om-items-cell-p::before { content: attr(data-label) ': '; }
.om-item-card .om-items-cell-s { grid-area: total; text-align: right; font-size: .95rem; }
.om-item-card .om-items-cell-st { grid-area: status; padding-top: .25rem; border-top: 1px solid #3d4347; margin-top: .2rem; }
.om-tl-row { padding: .35rem 0; }
}
/* ============================================================================
ATTRIBUTE EDIT PRODUCT (edit_product.php)
============================================================================ */
/* ── Container ── */
.attrs-list {
width: 100%;
font-size: 14px;
}
@media (max-width: 768px) {
/* ── Header ascuns ── */
.attrs-header { display: none !important; }
/* ── Fiecare rând = card vertical cu flex-wrap ── */
.attrs-row {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: .5rem !important;
padding: .75rem !important;
border-radius: 8px !important;
border: 1px solid var(--color-border) !important;
margin-bottom: .5rem !important;
grid-template-columns: unset !important;
align-items: flex-start !important;
}
.attrs-body { border-radius: 8px !important; border: none !important; }
/* ── Câmpuri: 100% lățime, cu label deasupra ── */
.attrs-col {
flex: 0 0 100% !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
gap: .2rem;
}
.attrs-col::before {
content: attr(data-label);
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--text-muted, #8b949e);
line-height: 1;
}
.attrs-col[data-label=""]::before { display: none !important; }
.attrs-col .attr-input {
width: 100% !important;
min-height: 44px !important;
font-size: 16px !important;
box-sizing: border-box !important;
}
/* ── Activ + Delete: linie proprie, orizontal, stânga-dreapta ── */
.attrs-col--active {
flex: 1 1 auto !important;
flex-direction: row !important;
align-items: center !important;
gap: .5rem !important;
}
.attrs-col--active .attr-checkbox { min-height: 24px !important; width: 24px !important; }
.attrs-col--actions {
flex: 0 0 auto !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
}
}
/* ── Header & rând folosesc același grid dinamic ── */
.attrs-header,
.attrs-row {
display: grid;
grid-template-columns: var(--attrs-cols); /* setat inline din JS */
gap: 8px;
align-items: center;
padding: 8px 12px;
}
.attrs-header {
background: var(--color-bg-subtle);
border: 1px solid var(--color-border);
border-radius: 6px 6px 0 0;
font-size: 12px;
font-weight: 500;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.attrs-body {
border: 1px solid var(--color-border);
border-top: none;
border-radius: 0 0 6px 6px;
overflow: hidden;
}
.attrs-row {
border-bottom: 1px solid var(--color-border);
transition: background 0.15s;
}
.attrs-row:last-child { border-bottom: none; }
.attrs-row:hover { background: var(--color-bg-subtle); }
/* ── Celule ── */
.attrs-col { display: flex; align-items: center; }
.attrs-col--active { justify-content: center; }
.attrs-col--actions { justify-content: center; }
/* ── Input-uri ── */
.attr-input {
width: 100%;
height: 32px;
padding: 0 8px;
font-size: 13px;
border: 1px solid var(--color-border);
border-radius: 5px;
background: var(--color-bg);
color: var(--color-text);
outline: none;
box-sizing: border-box;
transition: border-color 0.15s, box-shadow 0.15s;
}
.attr-input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-alpha);
}
.attr-input--select { cursor: pointer; }
.attr-input--price { text-align: center; }
/* ── Checkbox ── */
.attr-checkbox {
width: 16px;
height: 16px;
cursor: pointer;
accent-color: var(--color-primary);
}
/* ── Buton ștergere ── */
.attr-btn-remove {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--color-danger-border);
border-radius: 5px;
background: #a22f2f;
color: var(--color-danger);
font-size: 14px;
cursor: pointer;
padding: 0;
transition: background 0.15s;
}
.attr-btn-remove:hover { background: var(--color-danger-bg); }
/* ============================================================================
VARIANTS EDIT PRODUCT (edit_product.php)
============================================================================ */
/* ── Container principal ── */
#variants-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
.variants-list {
width: 100%;
min-width: max-content;
font-size: 14px;
}
/* ── Header (titluri coloane) ── */
.variants-header {
display: grid;
grid-template-columns: 2fr 1.2fr 1.2fr 60px 44px;
gap: 8px;
padding: 8px 12px;
background: var(--color-bg-subtle); /* sau orice fundal neutru din proiectul tău */
border: 1px solid var(--color-border);
border-radius: 6px 6px 0 0;
font-size: 12px;
font-weight: 500;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* ── Body (zona rândurilor) ── */
.variants-body {
border: 1px solid var(--color-border);
border-top: none;
border-radius: 0 0 6px 6px;
overflow: hidden;
}
/* ── Rând individual ── */
.variants-row {
display: grid;
grid-template-columns: 2fr 1.2fr 1.2fr 60px 44px;
gap: 8px;
align-items: center;
padding: 8px 12px;
border-bottom: 1px solid var(--color-border);
transition: background 0.15s;
}
.variants-row:last-child { border-bottom: none; }
.variants-row:hover { background: var(--color-bg-subtle); }
/* ── Celule generice și modificatori ── */
.variants-col {
display: flex;
align-items: center;
}
.variants-col--active { justify-content: center; }
.variants-col--actions { justify-content: center; }
/* ── Input-uri ── */
.variant-input {
width: 100%;
height: 32px;
padding: 0 8px;
font-size: 13px;
border: 1px solid var(--color-border);
border-radius: 5px;
background: var(--color-bg);
color: var(--color-text);
outline: none;
box-sizing: border-box;
transition: border-color 0.15s, box-shadow 0.15s;
}
.variant-input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-alpha);
}
.variant-input--price { text-align: right; }
/* ── Checkbox ── */
.variant-checkbox {
width: 16px;
height: 16px;
cursor: pointer;
accent-color: var(--color-primary);
}
/* ── Buton ștergere ── */
.variant-btn-remove {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--color-danger-border);
border-radius: 5px;
background: #a22f2f;
color: var(--color-danger);
font-size: 14px;
cursor: pointer;
padding: 0;
transition: background 0.15s;
}
.variant-btn-remove:hover { background: var(--color-danger-bg); }
/* ── Stare goală ── */
.variants-empty {
padding: 2rem;
text-align: center;
color: var(--color-text-muted);
font-size: 13px;
}
/* ── Buton "Adaugă variantă" ── */
.variants-add-btn {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 10px;
padding: 6px 14px;
font-size: 13px;
border: 1px solid var(--color-border);
border-radius: 5px;
background: var(--color-bg);
color: var(--color-text);
cursor: pointer;
transition: background 0.15s;
}
.variants-add-btn:hover { background: var(--color-bg-subtle); }
/* ============================================================================
PERMISSIONS (users/roles)
============================================================================ */
/* ── Wrapper expandabil ── */
.perm-form-wrapper {
display: none;
padding: 1.5rem;
background: #1a1d21;
border-bottom: 1px solid #2e3338;
}
.perm-form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-bottom: 1.5rem;
}
.perm-form-box {
background: #24292d;
padding: 1.5rem;
border-radius: 8px;
border: 1px solid #3a4048;
}
.perm-form-box h5 {
margin: 0 0 1rem 0;
color: #e0e0e0;
font-size: 1rem;
font-weight: 700;
border-bottom: 2px solid #3498db;
padding-bottom: 0.5rem;
}
.perm-form-box-scroll {
display: flex;
flex-direction: column;
gap: 0.75rem;
max-height: 300px;
overflow-y: auto;
}
.perm-form-check {
display: flex;
align-items: center;
gap: 0.75rem;
cursor: pointer;
margin: 0;
color: #cdd0d4;
font-size: 0.95rem;
}
.perm-form-check input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: #3498db;
flex-shrink: 0;
}
.perm-form-check strong { color: #ecf0f1; }
.perm-form-check small { color: #888; }
.perm-form-footer {
text-align: right;
padding-top: 1rem;
border-top: 1px solid #2e3338;
}
/* ── Grid inline ── */
.perm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding: 1.5rem; }
.perm-box { border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
.perm-box-header { background: var(--primary-color); color: #fff; padding: .6rem 1rem; font-weight: 600; font-size: .9rem; }
.perm-box-header.users-header { background: #6f42c1; }
.perm-box-scroll { max-height: 280px; overflow-y: auto; padding: .5rem 0; }
.perm-check-item { display: flex; align-items: center; gap: .6rem; padding: .45rem 1rem; cursor: pointer; transition: background .12s; font-size: .9rem; }
.perm-check-item:hover { background: rgba(0,123,255,.06); }
.perm-check-item input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary-color); flex-shrink: 0; }
.perm-check-item.checked { background: rgba(40,167,69,.08); }
.perm-check-item .role-label { font-weight: 600; }
.perm-check-item .user-email { font-size: .78rem; color: var(--text-muted); }
.perm-check-item .always-badge { margin-left: auto; font-size: .72rem; padding: 2px 7px; border-radius: 4px; background: #d4edda; color: #155724; }
.perm-box-footer { padding: .5rem 1rem; border-top: 1px solid var(--border-color); display: flex; gap: .5rem; background: var(--card-bg); }
.perm-box-footer button { font-size: .78rem; padding: 3px 10px; }
.access-badges { display: flex; gap: .3rem; flex-wrap: wrap; }
.access-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: .75rem; font-weight: 600; background: #d4edda; color: #155724; }
.access-badge.user-badge { background: #e2d9f3; color: #432874; }
.role-group-label { padding: .4rem 1rem .1rem; font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .8px; font-weight: 600; }
/* ============================================================================
LOCATIONS LIST (vechi - legacy classes păstrate pentru compatibilitate)
============================================================================ */
.locations-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin: 2rem 0;
}
.location-item {
padding: 1.5rem;
transition: all 0.3s;
border: 1px solid #5b5a5a;
border-bottom: 2px solid #5b5a5a;
background: #1d2328;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(191, 191, 191, 0.63);
}
.location-item:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
transform: translateX(4px);
}
.location-row-top,
.location-row-title {
display: grid;
grid-template-columns: 300px 1fr;
gap: 2rem;
margin-bottom: .5rem;
padding-bottom: .5rem;
border-bottom: 2px solid #ecf0f1;
}
.location-left { display: flex; flex-direction: column; gap: 1rem; }
.location-right { display: flex; flex-direction: column; gap: 1rem; }
.location-header h3 { margin: 0 0 0.5rem; color: #5b5b5b ; font-size: 1.4rem; }
.location-type-badge {
display: flex;
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
padding: 0.5rem 4.8rem;
border-radius: 12px;
font-size: 0.9rem;
font-weight: 600;
width: fit-content;
}
.location-logo-container { margin-top: 0.5rem; }
.location-logo {
width: 100%;
max-width: 250px;
height: 150px;
object-fit: cover;
border-radius: 8px;
border: 2px solid #ecf0f1;
}
.location-logo-placeholder {
width: 100%;
max-width: 250px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
background: #ecf0f1;
border-radius: 8px;
font-size: 4rem;
}
.location-info { display: flex; flex-direction: column; gap: 0.75rem; }
.location-meta {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
color: #7f8c8d;
font-size: 1rem;
}
.location-meta span { display: flex; align-items: center; gap: 0.5rem; }
.qr-preview {
display: inline-block;
padding: 0.5rem;
background: #424c55;
border-radius: 8px;
margin-top: 0.5rem;
}
.qr-preview img { width: 80px; height: 80px; border-radius: 4px; }
.location-row-bottom { margin-top: 1rem; }
.location-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
}
.location-features { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.feature-badge {
background: rgba(52, 152, 219, 0.15);
color: #3498db;
border: 1px solid rgba(52, 152, 219, 0.3);
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.85rem;
}
/* ============================================================================
LOCATIONS PAGE — classes noi (locations.php restructurat)
============================================================================ */
.loc-form-container { margin-top: 2rem; }
.loc-media-col { min-height: 343px; }
/* Header: logo thumbnail */
.loc-logo-thumb {
width: 150px;
height: 103px;
border-radius: 50px;
overflow: hidden;
flex-shrink: 0;
/* background: #1e3a5f; */
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
border: 1px solid #fff;
/* background: #fff; */
}
.loc-logo-img { width: 100%; height: 100%; object-fit: cover; }
.loc-type-label { font-weight: 400; color: #aaa; margin-left: 6px; }
.loc-rating { font-size: 0.8rem; color: #f5a623; }
.loc-rating-count { color: #888; }
/* Body */
.loc-card-body-inner { padding: 1rem 1rem 0 1rem; }
.loc-cover-wrap {
margin-bottom: 1rem;
border-radius: 8px;
overflow: hidden;
max-height: 180px;
}
.loc-cover-img {
width: 100%;
max-height: 180px;
object-fit: cover;
display: block;
}
/* Info grid */
.loc-info-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.loc-info-card { cursor: default; }
.loc-full-row { grid-column: 1 / -1; }
.lt-trans-row { font-size: .8rem; color: #8aa7cf; margin-top: .15rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-trans-missing { color: #e05252; }
.loc-info-card-inner {
flex-direction: column;
align-items: flex-start;
gap: 4px;
width: 100%;
}
.loc-link { color: #4f8ef7; text-decoration: none; }
.loc-link:hover { text-decoration: underline; }
.loc-gps-link { color: #4f8ef7; font-size: 0.72rem; text-decoration: none; }
.loc-gps-link:hover { text-decoration: underline; }
.loc-no-data { color: #666; font-style: italic; }
.loc-badges-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.loc-description { white-space: normal; line-height: 1.5; }
/* Program */
.loc-schedule-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 4px 12px;
width: 100%;
margin-top: 4px;
}
.loc-schedule-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 3px 6px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.04);
}
.loc-schedule-day { font-size: 0.82rem; font-weight: 500; color: #ccc; }
.loc-schedule-closed { font-size: 0.78rem; font-weight: 600; color: #e74c3c; }
.loc-schedule-hours { font-size: 0.82rem; font-weight: 600; color: #4fc3a1; }
/* Footer */
.loc-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
padding: 0.75rem 1rem;
margin-top: 0.75rem;
border-top: 1px solid #1e3a5f;
}
.loc-card-footer-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
justify-content: center;
}
.loc-card-description {
margin: .6rem 0 0;
padding: .55rem .75rem;
font-size: .82rem;
color: var(--c-text-muted, #94a3b8);
line-height: 1.55;
background: rgba(148,163,184,.06);
border-left: 3px solid rgba(148,163,184,.2);
border-radius: 0 6px 6px 0;
max-height: 3.8em;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.loc-card-footer-meta {
font-size: 0.73rem;
color: #555;
text-align: right;
flex-shrink: 0;
}
.loc-card-footer-meta code {
color: #4f8ef7;
background: rgba(79, 142, 247, 0.1);
padding: 1px 5px;
border-radius: 3px;
}
/* ============================================================================
EXPANDABLE CATEGORIES (categories-expandable.css)
============================================================================ */
/* ── Main Container ── */
.categories-container {
display: flex;
flex-direction: column;
gap: 8px;
margin: 2rem 0;
}
/* ── Category Section (vechi - produse page) ── */
.category-section {
margin-bottom: .5rem;
border-radius: 5px;
overflow: hidden;
background: #2c3e50;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* ── Category Header (vechi) ── */
.category-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem 1.5rem;
background: #34495e;
cursor: pointer;
transition: background-color 0.2s ease;
user-select: none;
}
.category-header:hover { background: #3d566e; }
.category-header.active { background: #2c3e50; border-bottom: 2px solid #3498db; }
.category-header-left { display: flex; align-items: center; gap: 1rem; }
.category-icon { font-size: 1.5rem; }
.category-name { font-size: 1.25rem; font-weight: 700; color: #ecf0f1; }
.category-count {
font-size: 0.875rem;
color: #95a5a6;
padding: 4px 12px;
background: rgba(52, 152, 219, 0.2);
border-radius: 12px;
}
.category-header-right {
display: flex;
align-items: center;
padding-left: 10px;
}
/* ── Fade divider — linie orizontală cu fade la capete, reutilizabilă ── */
.fade-divider {
display: none;
flex-basis: 100%;
height: 1px;
background: linear-gradient(to right,
transparent,
rgba(255, 255, 255, 0.15) 15%,
rgba(255, 255, 255, 0.15) 85%,
transparent);
margin: 0.25rem 0 0;
pointer-events: none;
}
[data-theme="light"] .fade-divider {
background: linear-gradient(to right,
transparent,
rgba(0, 0, 0, 0.12) 15%,
rgba(0, 0, 0, 0.12) 85%,
transparent);
}
.toggle-icon {
font-size: 1rem;
color: #bdc3c7;
transition: transform 0.3s ease;
}
.category-header.active .toggle-icon { transform: rotate(180deg); }
/* ── Subcategories ── */
.subcategories-wrapper { padding: 0; background: #2c3e50; }
.subcategory-section {
margin: 0;
border-top: 1px solid #1a252f;
}
.subcategory-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background: #2c3e50;
cursor: pointer;
transition: background-color 0.2s ease;
user-select: none;
}
.subcategory-header:hover { background: #34495e; }
.subcategory-header.active { background: #273746; border-left: 4px solid #3498db; }
.subcategory-header-left { display: flex; align-items: center; gap: 0.875rem; }
.subcategory-header-right { display: flex; align-items: center; }
.subcategory-icon { font-size: 1.25rem; }
.subcategory-name { font-size: 1.125rem; font-weight: 600; color: #ecf0f1; }
.subcategory-count {
font-size: 0.8rem;
color: #95a5a6;
padding: 3px 10px;
background: rgba(46, 204, 113, 0.2);
border-radius: 10px;
}
.products-wrapper { padding: 1rem; background: #1a252f; }
/* ── Animații expand ── */
@keyframes slideDown {
from { opacity: 0; max-height: 0; }
to { opacity: 1; max-height: 2000px; }
}
.subcategories-wrapper.show,
.products-wrapper.show {
animation: slideDown 0.3s ease-out;
}
/* ── Category Cards (tabele.php, locations.php) ── */
.category-card {
background: #313539;
border: 1px solid #3d4347;
border-radius: 5px;
overflow: hidden;
transition: box-shadow 0.15s, border-color 0.15s;
}
.category-card.cat-dragging { opacity: 0.4; }
.category-card:hover {
border-color: #4f8ef7;
box-shadow: 0 2px 12px rgba(79,142,247,0.12);
}
.category-card-header {
display: flex;
align-items: center;
padding: 0.75rem 1rem;
cursor: pointer;
user-select: none;
gap: 0.5rem;
flex-wrap: wrap;
transition: background 0.15s;
}
.category-card-header:hover { background: rgba(255,255,255,0.03); }
.category-card-header.open { background: rgba(79,142,247,0.06); }
.category-card-header.open .toggle-icon { transform: rotate(180deg); }
.category-card-left {
display: flex;
align-items: center;
gap: 0.6rem;
flex: 1;
min-width: 0;
}
.category-card-right {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
flex-shrink: 1;
justify-content: flex-end;
}
/* Butoanele — 3 per rând, 2 rânduri */
.loc-form-container .category-card-right {
flex: 0 1 440px;
justify-content: flex-end;
padding-right: .5rem;
}
/* Info umple spațiul rămas */
.loc-form-container .category-card-info {
flex: 1;
min-width: 0;
}
/* Separator vertical fade — ascuns pe desktop */
.loc-media-divider {
display: none;
width: 1px;
flex-shrink: 0;
align-self: stretch;
background: linear-gradient(to bottom,
transparent,
rgba(255, 255, 255, .28) 22%,
rgba(255, 255, 255, .28) 78%,
transparent);
}
/* Zona centrală în header (status badges) */
.category-card-center {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
flex-shrink: 0;
}
.category-card-info {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.category-card-name {
font-size: 1.1rem;
font-weight: 600;
color: #e8eaed;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.category-card-slug {
font-size: 0.78rem;
color: #888;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.category-card-body {
border-top: 1px solid #3d4347;
display: none;
}
.category-card-body.open { display: block; }
/* Parent-class approach — single source of truth for open/closed state */
.category-card.is-open .category-card-body { display: block; }
.category-card.is-open .category-card-header { background: rgba(79,142,247,0.06); }
.category-card.is-open .toggle-icon { transform: rotate(180deg); }
/* ── Sub Cards ── */
.sub-list {
display: flex;
flex-direction: column;
gap: 6px;
padding: 0.75rem;
}
.sub-card {
display: flex;
align-items: center;
gap: 0.75rem;
background: #272b2f;
border: 1px solid #3a3f44;
border-radius: 8px;
padding: 0.6rem 0.75rem;
transition: border-color 0.15s, background 0.15s;
}
.sub-card:hover {
border-color: #4f8ef7;
background: #2c3238;
}
.sub-card-left {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 1;
min-width: 0;
}
.left {
align-items: normal;
}
.sub-card-center {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.sub-card-right {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.sub-card-icon { font-size: 1.1rem; flex-shrink: 0; }
.sub-card-info {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.sub-card-name {
font-size: 1rem;
font-weight: 600;
color: #e0e3e7;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sub-card-slug {
font-size: 0.75rem;
color: #888;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sub-card-desc {
font-size: 0.75rem;
color: #888;
}
.sub-card-slug-currency {
font-size: 0.75rem;
color: #888;
}
.sub-card-slug-info {
width: 100%;
font-size: 0.75rem;
color: #888;
text-align: center;
padding: 0.2rem;
}
/* ── Product chips (compact info badges) ── */
.product-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
margin-top: 4px;
}
.chip {
display: inline-flex;
align-items: center;
background: #2e3338;
border: 1px solid #3a3f44;
border-radius: 5px;
padding: 2px 7px;
font-size: 0.75rem;
color: #bbb;
white-space: nowrap;
}
.chip-price {
font-weight: 700;
color: #e0e3e7;
background: #1e2226;
border-color: #4f8ef7;
}
/* ── Product meta chips (counts row) ── */
.product-meta-chips {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 6px;
}
.pmchip {
display: inline-flex;
align-items: center;
gap: 5px;
border-radius: 6px;
padding: 3px 9px;
font-size: 0.78rem;
white-space: nowrap;
border: 1px solid transparent;
}
.pmchip-ico {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.pmchip-ico svg {
width: 14px;
height: 14px;
display: block;
}
.pmchip-off {
background: #1e2226;
border-color: #2e3338;
color: #555;
}
.pmchip-on {
background: #1a2a1a;
border-color: #2d6a2d;
color: #8ecf8e;
}
.pmchip-on strong { color: #aee8ae; }
.pmchip-off strong { color: #555; }
/* ── Subcategory wrapper ── */
.subcategory-wrapper {
border: 1px solid #3a3f44;
border-radius: 8px;
margin: 6px 8px;
overflow: hidden;
}
.subcat-header-list {
margin: 0;
padding: 0;
}
.subcat-header-card {
border-radius: 0;
border: none;
border-bottom: 1px solid #3a3f44;
border-bottom: 1px solid #959e9e;
background: #424c55;
}
.product-sub-list {
padding: 0.25rem 0.5rem;
}
/* ── Product card (products.php) ── */
.product-card {
cursor: default;
align-items: center;
}
.product-card:hover {
border-color: #4f8ef7;
background: #2c3238;
}
/* Desktop: thumbnail stânga (span 3 rânduri), info dreapta în 3 rânduri */
.product-card .sub-card-info {
display: grid;
grid-template-columns: 150px 1fr;
grid-template-rows: auto auto auto;
column-gap: 0.75rem;
align-items: start;
}
.product-card .sub-card-name { grid-column: 2; grid-row: 1; }
.product-card .product-thumb-wrap { grid-column: 1; grid-row: 1 / 4; align-self: start; }
.product-card .product-chips { grid-column: 2; grid-row: 2; }
.product-card .product-meta-chips { grid-column: 2; grid-row: 3; }
.product-thumb-wrap {
width: 150px;
height: 90px;
flex-shrink: 0;
border-radius: 8px;
overflow: hidden;
background: #1e2226;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #3a3f44;
}
.product-thumb-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.product-thumb-placeholder {
font-size: 1.6rem;
opacity: 0.4;
}
.prod-drag-handle {
cursor: grab;
font-size: 1.2rem;
color: #4f8ef7;
padding: 0 6px;
user-select: none;
flex-shrink: 0;
}
.prod-drag-handle:active { cursor: grabbing; }
/* ── Drag handles ── */
.cat-drag-handle, .sub-drag-handle {
cursor: grab;
color: #bbb;
font-size: 1.2rem;
padding: 0 8px;
user-select: none;
transition: color 0.15s;
display: inline-block;
touch-action: none;
}
.cat-drag-handle:hover, .sub-drag-handle:hover { color: #4f8ef7; }
.cat-drag-handle:active, .sub-drag-handle:active { cursor: grabbing; }
/* ============================================================================
MODAL
============================================================================ */
.modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
z-index: 1000;
align-items: center;
justify-content: center;
backdrop-filter: blur(2px);
}
.modal-overlay.active { display: flex; }
.modal-box {
background: #24292d;
border-radius: 12px;
box-shadow: 0 8px 40px rgba(0,0,0,0.18);
width: 100%;
max-width: 700px;
max-height: 90vh;
overflow-y: auto;
padding: 2rem;
position: relative;
animation: modalIn 0.22s ease;
}
@keyframes modalIn {
from { opacity: 0; transform: translateY(-20px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-close {
position: absolute;
top: 1rem;
right: 1rem;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #666;
padding: 0.2rem 0.5rem;
border-radius: 6px;
transition: background 0.15s;
}
.modal-close:hover { background: #f0f0f0; color: #000; }
.modal-title {
margin: 0 0 1.5rem 0;
font-size: 1.2rem;
font-weight: 700;
}
/* ============================================================================
TOAST
============================================================================ */
#toast {
position: fixed;
bottom: 2rem;
right: 2rem;
background: #27ae60;
color: white;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 600;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
z-index: 9999;
}
#toast.show { opacity: 1; }
#toast.error { background: #e74c3c; }
#toast-map { position:fixed; bottom:2rem; right:2rem; background:#27ae60; color:#fff; padding:.75rem 1.5rem; border-radius:8px; font-weight:600; opacity:0; pointer-events:none; transition:opacity .3s; z-index:9999; }
#toast-map.show { opacity:1; }
#toast-map.error { background:#e74c3c; }
/* ============================================================================
ANIMATIONS
============================================================================ */
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.1); opacity: 0.3; }
}
/* admin/index.php */
.icon-mail { border-radius: 8px; transition: box-shadow .3s; }
.icon-mail.mail-alert svg {
filter: brightness(0) saturate(1) invert(27%) sepia(90%) saturate(600%) hue-rotate(330deg);
}
.icon-mail.mail-alert {
animation: mail-pulse 2s infinite;
}
@keyframes mail-pulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(231,76,60,.3); }
50% { box-shadow: 0 0 0 6px rgba(231,76,60,.5); }
}
/* ============================================================================
DARK MODE
============================================================================ */
@media (prefers-color-scheme: dark) {
.category-section { background: #272d33; }
.category-header { background: #272d33; }
.category-header:hover { background: #283c4d; }
.category-header.active { background: #233340; border-bottom-color: #3498db; }
.subcategories-wrapper { background: #1d2328; }
.subcategory-section { border-top-color: #0f1419; }
.subcategory-header { background: #1d2328; }
.subcategory-header:hover { background: #242938; }
.subcategory-header.active { background: #141820; }
.products-wrapper { background: #0f1419; }
.table-header {
background: #1d2328;
border: 1px solid #5b5a5a;
border-bottom: 2px solid #5b5a5a;
border-radius: 0 12px 0 12px;
box-shadow: 0 2px 8px rgba(191, 191, 191, 0.63);
}
.th { color: #5a5b5b; }
.table-row {
background: #272d33;
border-bottom-color: #55585e;
}
.table-row:hover { background: #1b1c1e; }
.card { background: #0f172a; }
.card-row { border-bottom-color: #1e293b; }
}
/* ============================================================================
RESPONSIVE
============================================================================ */
/* Tablets */
@media (max-width: 1200px) {
.column-dimension-products {
grid-template-columns: 160px 1.5fr 1.2fr 0.9fr 0.7fr 0.7fr 0.9fr 1.8fr;
}
.column-dimension-products-nested {
grid-template-columns: 80px 1.5fr 0.9fr 0.6fr 0.6fr 0.9fr 2fr;
}
.th, .rows-td { font-size: 13px; padding: 10px 5px; }
.rows-td:first-child { padding-left: 10px; }
.actions { flex-wrap: wrap; }
.form-row.schedule-cols { grid-template-columns: 1fr; }
}
/* Mobile */
@media (max-width: 768px) {
.desktop-table { display: none; }
.mobile-cards {
display: block;
padding: 0;
}
.products-thumb {
width: 310px;
height: 80px;
object-fit: cover;
border-radius: 8px;
}
.card {
background: #2c3e50;
border-radius: 12px;
padding: 16px;
margin-bottom: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.card-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #1a2332;
}
.card-row:last-child { border-bottom: none; }
.card-label { font-size: 13px; font-weight: 600; color: #94a3b8; flex: 0 0 40%; }
.card-value { font-size: 14px; color: #5b5b5b ; flex: 1; text-align: right; }
.card-value .product-thumb { max-width: 60px; height: 60px; margin-left: auto; }
.card-value .actions { justify-content: flex-end; flex-wrap: wrap; }
.card-value .actions .btn { flex: 1; min-width: 80px; padding: 8px 12px; font-size: 12px; }
.card-value .badge { font-size: 11px; padding: 3px 10px; }
.category-header { padding: 1rem; }
.category-name { font-size: 1.125rem; }
.category-icon { font-size: 1.25rem; }
.subcategory-header { padding: 0.875rem 1rem; }
.subcategory-name { font-size: 1rem; }
.products-wrapper { padding: 1rem; }
.category-count, .subcategory-count { display: none; }
/* Location header pe mobile - imagine sus, titlu jos */
.loc-logo-thumb {
width: 100%;
height: 130px;
order: 1;
}
.categories-container {
padding: 0;
}
.category-card-left {
justify-content: center;
}
.category-card-left .category-card-info {
order: 2;
width: 100%;
flex: 1 1 100%;
}
.category-card-left .cat-drag-handle {
order: 0;
align-self: flex-start;
display: none;
}
.category-card-right {
width: 100%;
justify-content: flex-start;
order: 3;
}
.toggle-icon {
order: 5;
margin: 0 auto;
}
.fade-divider { display: block; order: 4; }
/* Category card buttons - icon only */
.category-card-right .btn {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
border-radius: 8px;
}
.category-card-right .btn-text { display: none; }
/* Sub card - subcategorie header pe mobile (orizontal compact) */
.sub-card {
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.5rem;
padding: 0.6rem 0.75rem;
}
/* Rândul 1: icon + info — ocupă toată lățimea */
.sub-card-left {
flex: 1 1 100%;
min-width: 0;
}
/* Rândul 2: status la stânga, butoane la dreapta */
.sub-card-center {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.4rem;
}
.sub-card-center .order-badge {
font-size: 0.8rem;
padding: 3px 8px;
background: #3d4347;
border-radius: 4px;
color: #aaa;
font-weight: 600;
}
.sub-card-center .badge { font-size: 0.75rem; padding: 3px 7px; }
.sub-card-right {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 0.4rem;
flex-shrink: 0;
}
.sub-card-right .btn {
width: 38px;
height: 38px;
min-width: 38px;
min-height: 38px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
border-radius: 6px;
}
.sub-card-right .btn-text,
.sub-card-right .btn span { display: none; }
/* Product card - layout vertical 5 rânduri pe mobile */
.product-card {
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
gap: 0;
padding: 0.75rem;
}
.product-card .prod-drag-handle { display: none; }
.product-card .sub-card-left {
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 0;
}
/* Rândul 1: titlu */
/* Rândul 2: thumbnail */
/* Rândul 3: chips preț/disponibilitate */
/* Rândul 4: meta chips */
.product-card .sub-card-info {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 100%;
min-width: 0;
}
.product-card .sub-card-name {
font-size: 0.95rem;
font-weight: 700;
white-space: normal;
word-break: break-word;
line-height: 1.3;
/* reset grid placement */
grid-column: auto; grid-row: auto;
}
.product-card .product-thumb-wrap {
width: 100%;
height: 160px;
border-radius: 8px;
flex-shrink: 0;
/* reset grid placement */
grid-column: auto; grid-row: auto;
align-self: auto;
}
.product-card .product-chips {
gap: 4px;
margin-top: 0;
grid-column: auto; grid-row: auto;
}
.product-card .product-meta-chips {
gap: 4px;
margin-top: 0;
grid-column: auto; grid-row: auto;
}
/* Rândul 5: butoane full-width cu text vizibil */
.product-card .sub-card-right {
width: 100%;
flex-direction: row;
gap: 0.5rem;
padding: 0;
margin-top: 0.6rem;
border-top: 1px solid rgba(255,255,255,.07);
padding-top: 0.6rem;
}
.product-card .sub-card-right .btn {
flex: 1;
justify-content: center;
height: 40px;
width: auto;
min-width: 0;
min-height: 40px;
font-size: 0.88rem;
}
.product-card .sub-card-right .btn-text,
.product-card .sub-card-right .btn span { display: inline; }
/* Modal */
.modal-overlay { padding: 10px; align-items: flex-start; overflow-y: auto; }
.modal-box {
width: 100%;
max-width: 100%;
max-height: none;
min-height: auto;
margin: 0;
border-radius: 12px;
padding: 1.25rem;
}
.modal-close {
top: 0.75rem;
right: 0.75rem;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
}
.modal-title {
font-size: 1.15rem;
padding-right: 2.5rem;
margin-bottom: 1.25rem;
line-height: 1.3;
}
/* Forms */
.admin-form { gap: 0.75rem; }
.form-row.cols-2,
.form-row.cols-3 { grid-template-columns: 1fr; gap: 0.1rem; }
.loc-media-col { min-height: auto; }
.form-group label { font-size: 0.9rem; margin-bottom: 0.4rem; }
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group textarea {
padding: 0.7rem;
font-size: 16px; /* Previne zoom pe iOS */
min-height: 44px;
}
/* .checkbox-label {
margin-top: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
min-height: 44px;
} */
.form-actions { flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
/* Toggle checkbox — label e touch target (44px), input-ul vizual rămâne 23px */
.checkbox-label,
.admin-form .checkbox-label,
.form-group .checkbox-label,
.admin-form .form-group .checkbox-label {
width: fit-content !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
background: transparent !important;
border-color: transparent !important;
padding: 0 0.5rem 0 0 !important;
margin: 0 !important;
}
/* Pe mobile, toate form-group-urile pierd box-ul gri — conținutul e stilizat individual */
.admin-form .form-group {
background: transparent !important;
border-color: transparent !important;
padding: 0.25rem 0 !important;
margin-bottom: 0.75rem !important;
box-shadow: none !important;
}
/* Toggle checkbox: rămâne compact */
.admin-form .form-group:has(> .checkbox-label),
.admin-form .form-group:has(> label.checkbox-label) {
margin-bottom: 0.5rem !important;
}
.form-actions .btn {
min-height: 48px;
font-size: 1rem;
justify-content: center;
}
/* Toast */
#toast { left: 1rem; right: 1rem; bottom: 1rem; text-align: center; padding: 1rem; font-size: 0.95rem; }
/* Page header */
.page-header { flex-direction: column; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.page-header h1 { font-size: 1.3rem; line-height: 1.3; }
.page-header-actions,
.page-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
width: 100%;
}
.page-header-actions .btn,
.page-actions .btn {
width: 100%;
min-height: 44px;
justify-content: center;
}
/* Alerte */
.alert { padding: 1rem; font-size: 0.9rem; margin-bottom: 1rem; }
/* Schedule */
.schedule-grid { grid-template-columns: 70px 1fr; }
.schedule-day { padding: .6rem .3rem; font-size: .7rem; }
.sched-right { padding: .5rem .4rem; gap: .3rem; }
.interval-row .schedule-input { font-size: .85rem; padding: .2rem .3rem; }
.schedule-input { font-size: 15px; padding: 6px; }
.schedule-form { padding: .5rem; }
.label-table { position: inherit !important; }
.interval-add { font-size: .75rem; padding: 2px 7px; }
/* Attributes */
.category-header { padding: 0.625rem 0.75rem; font-size: 0.875rem; }
.attribute-item { grid-template-columns: 1fr; gap: 0.5rem; padding: 0.625rem; }
.attribute-name { font-size: 0.875rem; }
.attribute-details { font-size: 0.75rem; gap: 0.5rem; }
.attribute-badges { order: -1; margin-bottom: 0.375rem; }
.actions { justify-content: flex-start; }
.stat-label { font-size: 0.75rem; }
.filter-section { padding: 0.75rem; }
.form-container { padding: 0.75rem !important; }
.attributes-list { padding: 0.375rem; }
.form-row.mobile-cols-1 { grid-template-columns: 1fr !important; }
.form-row.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
/* Subcategories */
.column-dimension-subcategories { grid-template-columns: 1fr; gap: 0.5rem; }
.column-dimension-subcategories .table-header { display: none; }
.column-dimension-subcategories .table-row { display: flex; flex-direction: column; padding: 1rem; border: 1px solid #ddd; margin-bottom: 0.5rem; border-radius: 8px; }
.column-dimension-subcategories .table-cell { display: flex; justify-content: space-between; padding: 0.25rem 0; border-bottom: 1px solid #eee; }
.column-dimension-subcategories .table-cell:last-child { border-bottom: none; }
.column-dimension-subcategories .table-cell::before { content: attr(data-label); font-weight: bold; color: #666; }
/* Perm */
.perm-form-wrapper { padding: 1rem; }
.perm-form-grid { grid-template-columns: 1fr; gap: 1rem; }
.perm-form-footer .btn { width: 100%; min-height: 48px; justify-content: center; }
/* Locations */
.loc-card-footer { flex-direction: column; align-items: flex-start; }
.loc-card-footer-meta { text-align: left; }
.loc-info-grid { grid-template-columns: 1fr; }
.loc-schedule-grid { grid-template-columns: 1fr; }
.form-row, .form-row.cols-2 { margin-bottom: .1rem; }
}
/* Small mobile */
@media (max-width: 480px) {
.card { padding: 12px; margin-bottom: 12px; }
.card-row { flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 0; }
.card-label { flex: none; width: 100%; }
.card-value { width: 100%; text-align: left; }
.card-value .product-thumb { margin-left: 0; }
.card-value .actions { width: 100%; justify-content: flex-start; }
.card-value .actions .btn { flex: 1; min-width: 0; }
.category-header { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.attribute-details { flex-direction: column; gap: 0.25rem; }
.category-card-right .btn {
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
font-size: 1.1rem;
}
.sub-card-right .btn {
width: 38px;
height: 38px;
min-width: 38px;
min-height: 38px;
font-size: 1rem;
}
.page-header-actions, .page-actions { grid-template-columns: 1fr; }
.category-card-name { font-size: 1rem; }
.sub-card-name { font-size: 0.95rem; }
/* Schedule */
.schedule-grid { grid-template-columns: 58px 1fr; }
.schedule-day { padding: .5rem .2rem; font-size: .65rem; }
.sched-right { padding: .45rem .35rem; }
.interval-row .schedule-input { font-size: .8rem; padding: .18rem .25rem; }
.interval-sep { width: 10px; }
.schedule-input { font-size: 14px; }
.interval-add { font-size: .72rem; padding: 2px 6px; }
}
/* Extra small */
@media (max-width: 380px) {
.category-card-right .btn { width: 40px; height: 40px; min-width: 40px; min-height: 40px; font-size: 1.1rem; }
.sub-card-right .btn { width: 38px; height: 38px; min-width: 38px; min-height: 38px; font-size: 1rem; }
.page-header-actions, .page-actions { grid-template-columns: 1fr; }
.category-card-name { font-size: 1rem; }
.sub-card-name { font-size: 0.95rem; }
/* Schedule — pe ecrane mici trece la layout pe o coloană */
.schedule-grid {
grid-template-columns: 1fr;
}
.schedule-day {
flex-direction: row;
justify-content: flex-start;
border-right: none;
border-bottom: 1px solid #1a2738;
padding: .45rem .7rem;
font-size: .78rem;
text-align: left;
align-items: center;
gap: .5rem;
min-height: auto;
}
.schedule-day::before { display: inline; margin: 0; }
.sched-right { padding: .5rem .6rem .6rem; }
.sched-footer { flex-wrap: wrap; }
.interval-row .schedule-input { font-size: .82rem; width: auto; }
.admin-form label { margin: 0.2rem 0.5rem 0.2rem 0.2rem !important; }
}
@media (max-width: 360px) {
.category-card-right .btn { width: 40px; height: 40px; min-width: 40px; min-height: 40px; font-size: 1.1rem; }
.sub-card-right .btn { width: 38px; height: 38px; min-width: 38px; min-height: 38px; font-size: 1rem; }
.page-header-actions, .page-actions { grid-template-columns: 1fr; }
.category-card-name { font-size: 1rem; }
.sub-card-name { font-size: 0.95rem; }
/* .checkbox-label { padding: 0.1rem 0.8rem; } */
.admin-form label { font-size: 0.8rem !important; }
/* .checkbox-label { padding: 0 0.65rem !important; } */
.form-group{ padding: 0.65rem 0.65rem !important; }
/* .checkbox-label { padding: 0 !important; margin-top: 0 !important; } */
.form-row.cols-4 { gap: 0 !important; margin-bottom: 0 !important; }
#cw-window { width: 300px !important; }
}
/* Landscape mobile */
@media (max-width: 768px) and (orientation: landscape) {
.card-row { flex-direction: row; align-items: center; }
.card-label { flex: 0 0 35%; width: auto; }
.card-value { flex: 1; text-align: right; }
}
/* Print */
@media print {
.mobile-cards { display: none !important; }
.desktop-table { display: block !important; }
.actions { display: none !important; }
.table-row { break-inside: avoid; }
}
/* ============================================================================
FORMS - GENERAL
============================================================================ */
.form-group {
margin-bottom: 1.5rem;
position: relative;
}
.form-group label {
display: flex;
margin-bottom: 0.5rem;
font-weight: 500;
align-content: center;
}
.form-group input,
.form-group select,
.form-group textarea {
/* width: 100%; */
padding: 0.75rem;
border-radius: 4px;
font-size: 1rem;
transition: border-color 0.3s;
background: #1d2328;
color: #ccc;
border: 1px solid #3f3f46;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-color);
}
/* ============================================================================
FORMS - ADMIN (COMPACT & DARK)
============================================================================ */
.form-container {
background: #1d2328;
margin: 1rem 0;
border: 1px solid #5b5a5a;
border-radius: 5px;
/* box-shadow: 0 2px 8px rgba(191, 191, 191, 0.63); */
padding: 2rem;
}
.form-container h2 {
margin-bottom: 2rem;
color: #d9d1d1;
font-size: 1.5rem;
font-weight: 700;
padding-bottom: 0.875rem;
display: flex;
align-items: center;
gap: 0.75rem;
/*border-bottom: 2px solid #4299e1;*/
border-bottom: 2px solid transparent;
background: linear-gradient(to right, #2f7aac, transparent) bottom / 100% 2px no-repeat;
}
.admin-form .form-group {
margin-bottom: 1rem;
padding: 0.5rem 1rem 1rem 1rem;
border-radius: 5px;
border: 1px solid #3a3f4a;
background: #0d1e27;
transition: background 0.2s ease, border-color 0.2s ease;
}
.admin-form .checkbox-group {
margin-bottom: 1rem;
padding: 0.5rem 1rem 1rem 1rem;
border-radius: 5px;
border: 1px solid;
background: #1d2328;
display: flex;
flex-wrap: wrap;
}
.admin-form label {
/* display: block; */
display: inline-flex;
/* margin: 0.5rem 0.5rem 0.2rem 0.2rem; */
font-size: .73rem;
font-weight: 700;
color: #8aa7cf;
text-transform: uppercase;
letter-spacing: .05em;
width: auto;
}
/* Excepție: checkbox-label (toggle) nu moștenește width: auto de la label generic */
.admin-form label.checkbox-label { width: fit-content; }
.admin-form input[type="text"],
.admin-form input[type="email"],
.admin-form input[type="tel"],
.admin-form input[type="url"],
.admin-form input[type="number"],
.admin-form input[type="file"],
.admin-form select,
.admin-form textarea {
width: 100%;
padding: 0.35rem 0.55rem;
border: 1.5px solid #5a5b5b;
border-radius: 6px;
font-size: 0.9375rem;
transition: all 0.2s ease;
background: #1d2328;
line-height: 1.5;
color: #bec9d3;
min-width: 68px;
}
.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus {
outline: none;
border-color: #4299e1;
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
}
.admin-form input[type="file"] {
padding: 0.5rem;
border: 1.5px dashed #5c99ea;
background: #272d33;
}
.admin-form input[type="file"]:focus {
border-color: #4299e1;
border-style: solid;
}
.admin-form textarea {
resize: vertical;
min-height: 90px;
line-height: 1.5;
}
.admin-form input:hover:not(:focus),
.admin-form select:hover:not(:focus),
.admin-form textarea:hover:not(:focus) {
border-color: #5b5b5b ;
}
.admin-form label.required::after {
content: " *";
color: #e53e3e;
font-weight: 600;
}
/* ============================================================================
SETTINGS (settings_general.php)
============================================================================ */
.settings-tabs { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.5rem; padding-top: 10px; }
.settings-tabs .tab-btn {
padding:.5rem 1.2rem; border:none; border-radius:6px; cursor:pointer; text-decoration: none;
background:var(--bg-card,#1e293b); color:var(--text-muted,#94a3b8);
font-size:.9rem; transition:background .2s,color .2s;
}
.settings-tabs .tab-btn.active { background:var(--primary,#3b82f6); color:#fff; font-weight:600; }
.tab-pane { display:none; }
.tab-pane.active { display:block; }
.form-section-title {
font-size:1rem; font-weight:600; color:var(--primary,#3b82f6);
border-bottom:1px solid var(--border,#334155); padding-bottom:.4rem;
margin:1.5rem 0 1rem;
}
.hint { display: block;
font-size: .78rem;
color: var(--text-muted, #888);
margin-top: 4px;
line-height: 1.45;
font-style: italic; }
.icon-mail {
display:inline-flex;
align-items:center;
justify-content:center;
}
/* ============================================================================
DASHBOARD
============================================================================ */
/* ── Stats grid ── */
.dash-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1rem;
margin: 1.2rem 0;
}
.dash-stat-card {
background: #272d33;
border: 1px solid #3d4347;
border-radius: 10px;
padding: 1rem 1.2rem;
display: flex;
flex-direction: column;
gap: .35rem;
transition: border-color .2s, transform .15s;
text-decoration: none;
}
.dash-stat-card:hover {
border-color: #4f8ef7;
transform: translateY(-2px);
}
.dash-stat-card.accent-blue { border-left: 3px solid #3498db; }
.dash-stat-card.accent-green { border-left: 3px solid #2ecc71; }
.dash-stat-card.accent-red { border-left: 3px solid #e74c3c; }
.dash-stat-card.accent-orange { border-left: 3px solid #f39c12; }
.dash-stat-card.accent-purple { border-left: 3px solid #9b59b6; }
.ds-label {
font-size: .68rem;
text-transform: uppercase;
letter-spacing: .06em;
color: #5a7a9b;
font-weight: 600;
}
.ds-value {
font-size: 1.8rem;
font-weight: 700;
color: #e0e8f0;
line-height: 1;
}
.ds-sub {
font-size: .75rem;
color: #4a6a88;
}
.ds-alert { color: #e74c3c !important; }
/* ── 2 coloane principale ── */
.dash-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .2rem;
margin-top: 1.2rem;
align-items: start;
}
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }
/* ── Panel ── */
.dash-panel {
background: #272d33;
border: 1px solid #3d4347;
border-radius: 10px;
overflow: hidden;
padding: 1rem;
margin: 0 0.5rem 1rem 0rem;
}
.dash-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1rem;
background: rgba(52,152,219,.08);
border-bottom: 1px solid #3d4347;
font-size: .75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: #3498db;
}
.dash-panel-header a {
font-size: .72rem;
color: #4a6a88;
text-decoration: none;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
}
.dash-panel-header a:hover { color: #3498db; }
.dash-panel-body { padding: .75rem 1rem; }
/* ── Rânduri activitate ── */
.activity-row {
display: flex;
align-items: flex-start;
gap: .7rem;
padding: .5rem 0;
border-bottom: 1px solid rgba(255,255,255,.04);
font-size: .82rem;
}
.activity-row:last-child { border-bottom: none; }
.activity-avatar {
width: 25px; height: 25px;
border-radius: 50%;
background: #1d2328;
border: 1px solid #3d4347;
display: flex; align-items: center; justify-content: center;
font-size: .75rem; color: #5a7a9b;
flex-shrink: 0; overflow: hidden;
}
.activity-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.activity-action { font-weight: 600; color: #5b5b5b ; }
.activity-detail { color: #5a7a9b; font-size: .78rem; }
.activity-time { margin-left: auto; color: #3a5a78; font-size: .73rem; white-space: nowrap; flex-shrink: 0; }
/* ── Tabel locații ── */
.loc-row {
display: flex;
align-items: center;
gap: .7rem;
padding: .45rem 0;
border-bottom: 1px solid rgba(255,255,255,.04);
font-size: .83rem;
}
.loc-row:last-child { border-bottom: none; }
.loc-id {
color: #3498db; font-weight: 700; font-size: .73rem;
background: rgba(52,152,219,.1); border-radius: 4px;
padding: .1rem .4rem; white-space: nowrap; flex-shrink: 0;
}
.loc-name { font-weight: 600; color: #5b5b5b ; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-city { color: #5a7a9b; font-size: .75rem; }
.loc-prods { color: #4f8ef7; font-size: .78rem; white-space: nowrap; }
.loc-credit-ok { color: #2ecc71; font-size: .78rem; white-space: nowrap; }
.loc-credit-low { color: #e74c3c; font-size: .78rem; white-space: nowrap; }
/* ── Order status badge inline ── */
.os { min-width: 60px; text-align: center; font-size: .72rem; font-weight: 700; border-radius: 4px; white-space: nowrap; border-radius: 100px; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.2rem 0.55rem;}
.os-pending { background: rgba(243,156,18,.15); color: #f39c12; }
.os-confirmed { background: rgba(52,152,219,.15); color: #3498db; }
.os-preparing { background: rgba(52,152,219,.15); color: #a855f7; }
.os-ready { background: rgba(46,204,113,.15); color: #2ecc71; }
.os-completed { background: rgba(46,204,113,.2); color: #27ae60; }
.os-cancelled { background: rgba(231,76,60,.15); color: #e74c3c; }
/* ── Comenzi recente ── */
.order-row {
display: grid;
grid-template-columns: 120px 1fr 70px minmax(110px, max-content) 80px 40px;
align-items: center;
gap: .5rem;
padding: .45rem 0;
border-bottom: 1px solid rgba(255,255,255,.04);
font-size: .82rem;
}
.order-row:last-child { border-bottom: none; }
.order-num { color: #4f8ef7; font-size: .70rem; font-weight: 600; white-space: nowrap; }
.order-title { color: #5a7a9b; font-size: .80rem; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 100px;}
.order-loc { color: #5a7a9b; font-size: .75rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-total { color: #5b5b5b ; font-weight: 600; white-space: nowrap; }
.order-time { color: #3a5a78; font-size: .72rem; white-space: nowrap; }
/* ── Pending manageri ── */
.pending-row {
display: flex;
align-items: center;
gap: .7rem;
padding: .5rem 0;
border-bottom: 1px solid rgba(255,255,255,.04);
font-size: .82rem;
}
.pending-row:last-child { border-bottom: none; }
.pending-name { font-weight: 600; color: #5b5b5b ; flex: 1; min-width: 0; }
.pending-meta { color: #5a7a9b; font-size: .75rem; }
.pending-time { color: #3a5a78; font-size: .72rem; white-space: nowrap; }
/* ── Credit status box ── */
.credit-status-box {
display: flex;
gap: 1rem;
align-items: center;
padding: .8rem 1rem;
border-radius: 8px;
margin-bottom: .8rem;
font-size: .85rem;
}
.credit-status-dot {
width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.credit-status-desc { color: #4a6a88; font-size: .8rem; margin-left: .5rem; }
.credit-status-btn { margin-left: auto; }
.dash-empty-msg { color: #4a6a88; font-size: .85rem; padding: .5rem 0; }
/* ── Mobile ── */
@media (max-width: 600px) {
.dash-stats { grid-template-columns: 1fr 1fr; }
.ds-value { font-size: 1.4rem; }
.avatar { width:36px; height:36px; }
}
.recent-activity {
flex: 1;
min-width: 0;
display: flex;
gap: 10px;
}
/* ============================================================================
ADMIN INDEX - Grid de categorii si pagini
============================================================================ */
/* ── Grid principal de categorii ── */
.adm-index-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.25rem;
margin-top: 1rem;
}
/* ── Card categorie ── */
.adm-cat-card {
background: #1d2328;
border: 1px solid #5b5a5a;
border-radius: 12px;
overflow: hidden;
transition: box-shadow .2s, transform .2s;
box-shadow: 0 2px 8px rgba(191, 191, 191, 0.63);
}
.adm-cat-card:hover {
box-shadow: 0 6px 20px rgba(0,0,0,.5);
transform: translateY(-2px);
}
/* ── Header categorie ── */
.adm-cat-header {
display: flex;
align-items: center;
gap: .75rem;
padding: .75rem 1rem;
background: #272d33;
border-bottom: 1px solid #5b5a5a;
}
.adm-cat-icon-wrap {
font-size: 1.3rem;
line-height: 1;
}
.adm-cat-name {
flex: 1;
font-size: .95rem;
font-weight: 700;
color: #307db0 ;
text-transform: uppercase;
letter-spacing: .06em;
}
.adm-cat-count {
background: #3498db;
color: #fff;
font-size: .72rem;
font-weight: 700;
padding: .15rem .5rem;
border-radius: 10px;
min-width: 1.4rem;
text-align: center;
}
/* ── Grid de pagini in interiorul cardului ── */
.adm-pages-grid {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
padding: 1rem;
}
/* ── Item pagina ── */
.adm-page-item {
display: flex;
flex-direction: column;
align-items: center;
gap: .5rem;
text-decoration: none;
width: 90px;
transition: transform .15s;
}
.adm-page-item:hover {
transform: translateY(-3px);
}
.adm-page-item:hover .adm-page-icon {
border-color: #3498db;
box-shadow: 0 0 0 3px rgba(52,152,219,.25);
}
.adm-page-item:hover .adm-page-label {
color: #fff;
}
/* ── Cerc iconita ── */
.adm-page-icon {
width: 80px;
height: 80px;
border-radius: 10%;
background: var(--icon-circle-bg);
border: 2px solid #4a5568;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: border-color .15s, box-shadow .15s;
flex-shrink: 0;
}
.adm-page-icon img {
width: 70px;
height: 70px;
object-fit: contain;
filter: brightness(.9);
transition: filter .15s;
}
.adm-page-item:hover .adm-page-icon img {
filter: brightness(1.1);
}
/* ── Label pagina ── */
.adm-page-label {
font-size: .78rem;
font-weight: 600;
color: #94a3b8;
text-align: center;
line-height: 1.2;
max-width: 90px;
word-break: break-word;
transition: color .15s;
}
/* ── Pagina activa ── */
.adm-page-active .adm-page-icon {
border-color: #3498db;
background: rgba(52,152,219,.15);
box-shadow: 0 0 0 3px rgba(52,152,219,.25);
}
.adm-page-active .adm-page-label {
color: #3498db;
}
/* ── Responsive ── */
@media (max-width: 768px) {
.adm-index-grid {
grid-template-columns: 1fr;
}
.adm-pages-grid {
gap: .75rem;
}
.adm-page-item {
width: 75px;
}
.adm-page-icon {
width: 65px;
height: 65px;
}
.adm-page-icon img {
width: 38px;
height: 38px;
}
}
@media (max-width: 480px) {
.adm-pages-grid {
justify-content: center;
}
}
/* ── Responsive ── */
@media (max-width: 1000px) {
.order-row {
grid-template-columns: 1fr auto auto;
grid-template-rows: auto auto;
gap: 4px 8px;
border-bottom: 3px solid rgba(255, 255, 255, .04);
}
.order-num {
grid-column: 1 / 4;
font-size: .68rem;
}
.order-title{
grid-column: 1 / 4;
font-size: 1rem;
font-weight: 600;
}
.order-loc {
grid-column: 1 / 4;
}
.os {
grid-column: 1 / 4;
justify-self: start;
}
.order-total {
grid-column: 1 / 4;
}
.order-time {
grid-column: 1 / 4;
justify-self: start;
}
.dash-panel {
margin: 0;
}
}
/* SELECT CARDS */
.multi-select {
position:relative;
width:100%;
}
.multi-select-header {
border:1px solid #5a5b5b;
padding:8px 10px;
border-radius:6px;
cursor:pointer;
background:#1d2328;
user-select:none;
}
.multi-select-dropdown {
display:none;
position:absolute;
left:0;
top:100%;
background:#1d2328;
border:1px solid #5a5b5b;
border-radius:6px;
margin-top:4px;
max-height:220px;
overflow-y:auto;
padding:8px;
z-index:50;
}
.multi-select-dropdown.show {
display:block;
}
/* ============================================================================
CHECKBOX
============================================================================ */
/* Checkbox advanced */
.checkbox-label,
.admin-form .checkbox-label,
.form-group .checkbox-label {
display: inline-flex;
align-items: center;
cursor: pointer;
gap: 8px;
user-select: none;
width: auto;
background: #272d33;
padding: 0.5rem 0.8rem;
border: 1px solid #5a5b5b;
border-radius: 5px;
font-size: 0.8rem;
margin: 5px;
color: #d8eaf8;
line-height: 1.5;
}
.checkbox-label input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 50px !important;
height: 23px !important;
min-width: 50px !important;
background-color: #868686;
border-radius: 30px;
position: relative;
cursor: pointer;
transition: background-color 0.3s ease;
margin: 0;
border: 1px solid #ccc;
flex-shrink: 0;
}
.checkbox-label input[type="checkbox"]::before {
content: "";
position: absolute;
width: 19px;
height: 19px;
background-color: white;
border-radius: 50%;
top: 45%;
left: 4px;
transform: translateY(-50%);
transition: transform 0.3s ease;
}
.checkbox-label input[type="checkbox"]:checked {
background-color: #1A73E8;
border-color: #80A3F9;
}
.checkbox-label input[type="checkbox"]:checked::before {
transform: translate(23px, -50%);
}
.checkbox-label input[type="checkbox"]:hover {
background-color: #707070;
}
.checkbox-label input[type="checkbox"]:checked:hover {
background-color: #184C91;
}
/* personale */
.label-table {
position: absolute;
top: 0.5rem;
padding: 0.5rem 0;
left: 2rem;
font-size: .73rem;
font-weight: 700;
color: #8aa7cf;
text-transform: uppercase;
letter-spacing: .05em;
}
.border-degrade-vert {
position: relative;
}
.border-degrade-vert::before,
.border-degrade-vert::after {
content: "";
position: absolute;
top: 0;
width: 1px;
height: 100%;
pointer-events: none;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(204,204,204,0.3) 15%,
#808080 50%,
rgba(204,204,204,0.3) 85%,
transparent 100%
);
}
/* stânga */
.border-degrade-vert::before {
left: 0;
}
/* dreapta */
.border-degrade-vert::after {
right: 0;
}
/* Buttons circle edit, delete */
.button-circle-edit,
.button-circle-delete {
position: relative;
width: 35px;
height: 35px;
border-radius: 50%;
background-color: #2a3240;
cursor: pointer;
box-shadow: 0 0 6px rgba(0,0,0,.4);
overflow: hidden;
transition: all .3s ease;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
[data-theme="light"] .button-circle-edit,
[data-theme="light"] .button-circle-delete { background-color: #fff; box-shadow: 0 0 10px #333; }
/* EDIT */
.button-circle-edit {
border: 2px solid rgb(149, 231, 50);
}
.button-circle-edit:hover {
background-color: rgb(201, 236, 160);
transform: scale(1.15);
box-shadow: 0 0 4px #111;
}
.svg-circle-edit {
color: rgb(103, 160, 35);
transition: .3s;
}
/* DELETE */
.button-circle-delete {
border: 2px solid rgb(231, 50, 50);
}
.button-circle-delete:hover {
background-color: rgb(245, 207, 207);
transform: scale(1.15);
box-shadow: 0 0 4px #111;
}
.svg-circle-delete {
color: rgb(231, 50, 50);
transition: .3s;
}
/* ascunde textele complet */
.span-circle-edit,
.span-circle-delete {
display: none;
}
.btn-show-map { background:#1e2a38;border:1px solid #3a5a7a;color:#8ac4f0;padding:7px 16px;border-radius:2px;cursor:pointer;font-size:.87rem;display:inline-flex;align-items:center;gap:7px;}
.allows_takeaway_desc { margin:.4rem 0 0 .5rem;font-size:.78rem;color:var(--text-muted,#888);line-height:1.5; }
.delivery-box { border-radius: 8px; padding: 1rem 1.2rem; margin-bottom: 1rem; min-height: 100px; transition: all 0.2s ease; }
.delivery-box.delivery-on { background: #1d2f2b; border: 1px solid #22c55e; }
.delivery-box.delivery-off { background: #2d2529; border: 1px solid #ef4444; }
.season-box { margin-bottom: 0 !important; }
.season-off { background: #1a1e28 !important; border-color: #2a3a4a !important; }
.season-on { background: #1d2535 !important; border-color: #3b82f6 !important; }
.status-box { border-radius: 8px; padding: 1rem 1.2rem; margin-bottom: 1rem; min-height: 100px; transition: background .2s ease, border-color .2s ease; }
.status-box.status-on { background: #1d2f2b; border: 1px solid #22c55e; }
.status-box.status-off { background: #2d2529; border: 1px solid #ef4444; }
.status-box.status-danger-on { background: #2d2529; border: 1px solid #ef4444; }
.status-box.status-danger-off { background: #1d2f2b; border: 1px solid #22c55e; }
.gps-saved-info { display:flex;gap:16px;align-items:center;background:#0d1e27;border:1px solid #1e505c;border-radius:8px;padding:8px 14px;margin-bottom:10px;font-size:.85rem; }
/* ── Galerie produs ── */
.prod-gallery-grid { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.prod-gal-item {
position:relative; width:110px; height:110px;
border-radius:8px; overflow:hidden;
border:2px solid #2a3a4a; background:#141e27; flex-shrink:0;
}
.prod-gal-item img { width:100%; height:100%; object-fit:cover; display:block; }
.prod-gal-del {
position:absolute; top:4px; right:4px;
width:22px; height:22px; border-radius:50%;
background:rgba(220,38,38,.85); border:none; color:#fff;
font-size:.9rem; cursor:pointer;
display:flex; align-items:center; justify-content:center;
opacity:0; transition:opacity .15s; padding:0;
}
.prod-gal-item:hover .prod-gal-del { opacity:1; }
.prod-gal-main { border-color: #3b82f6; }
.prod-gal-item[draggable="true"] { cursor: grab; }
.prod-gal-item.dragging { opacity: .35; transform: scale(.96); }
.prod-gal-item.drag-over { outline: 3px solid #3b82f6; outline-offset: 2px; transform: scale(1.04); }
.prod-gal-drag-handle {
position: absolute; top: 4px; left: 4px;
color: rgba(255,255,255,.7); font-size: 1rem; line-height: 1;
cursor: grab; user-select: none;
opacity: 0; transition: opacity .15s;
text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.prod-gal-item:hover .prod-gal-drag-handle { opacity: 1; }
.prod-gal-badge {
position:absolute; bottom:4px; left:4px;
background:rgba(59,130,246,.85); color:#fff;
font-size:.62rem; font-weight:700;
padding:2px 6px; border-radius:4px;
text-transform:uppercase; letter-spacing:.04em;
pointer-events:none;
}
.prod-gal-upload-zone {
width:110px; height:110px; border-radius:8px;
border:2px dashed #2a4060; background:#111e2e;
display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:4px;
cursor:pointer; font-size:.72rem; color:#4a6a8a;
transition:border-color .2s, background .2s;
text-align:center; padding:8px;
}
.prod-gal-upload-zone:hover,
.prod-gal-upload-zone.drag { border-color:#3b82f6; background:#0d1e35; color:#60a5fa; }
[data-theme="light"] .prod-gal-item { border-color:#c8d8e8; background:#f0f4f8; }
[data-theme="light"] .prod-gal-upload-zone { border-color:#94afc8; background:#edf2f7; color:#4a6a8a; }
[data-theme="light"] .prod-gal-upload-zone:hover { border-color:#3b82f6; background:#dbeafe; }
/* ── Slug location field ── */
.loc-slug-group { margin-top: 14px; border-top: 1px solid #1e2d3d; padding-top: 14px; }
.loc-slug-row { display: flex; gap: 8px; align-items: center; }
.loc-slug-row input { flex: 1; }
.loc-slug-status {
min-height: 1.3rem;
font-size: .8rem;
margin-top: 4px;
line-height: 1.4;
}
[data-theme="light"] .loc-slug-group { border-top-color: #c8d8e8; }
.m-w_3r { max-width: 3rem; padding: 0.75rem;
border-radius: 4px;
font-size: 1rem;
transition: border-color 0.3s;
background: #1d2328;
color: #ccc;
border: 1px solid #3f3f46;}
/* ════════════════════════════════════════════════════════════════
FIELD HINTS & SECTION DIVIDERS
════════════════════════════════════════════════════════════════ */
.field-hint {
display: block;
font-size: .78rem;
color: var(--text-muted, #6b7a8d);
margin-top: 4px;
line-height: 1.45;
font-style: italic;
}
.form-section-divider {
font-size: .85rem;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--text-muted, #6b7a8d);
border-bottom: 1px solid #1e2d3d;
padding-bottom: 5px;
margin: 24px 0 12px;
}
/* ════════════════════════════════════════════════════════════════
FORM ACCORDION — secțiuni expandabile (location_edit etc.)
════════════════════════════════════════════════════════════════ */
.form-accordion {
display: flex;
flex-direction: column;
gap: 0.55rem;
margin: 0.25rem 0 1rem;
}
.accordion-section {
border-radius: 5px;
border: 1px solid #253547;
transition: border-color 0.2s, box-shadow 0.2s;
}
.accordion-section.is-open {
border-color: #2e5a8c;
box-shadow: 0 2px 12px rgba(47, 94, 142, 0.14);
}
.accordion-header {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.78rem 1.1rem;
cursor: pointer;
background: #192333;
user-select: none;
transition: background 0.18s;
-webkit-tap-highlight-color: transparent;
border-radius: 5px;
}
.accordion-header:hover { background: #1d2b3e; }
.accordion-section.is-open .accordion-header {
background: #162a42;
border-bottom: 1px solid #253547;
border-radius: 5px 5px 0 0;
}
.accordion-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
display: block;
object-fit: contain;
opacity: 0.9;
}
.accordion-title {
flex: 1;
font-weight: 700;
font-size: 0.82rem;
color: #8fb5d0;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.accordion-badge {
display: inline-block;
font-size: 0.65rem;
padding: 2px 8px;
border-radius: 10px;
background: rgba(59,130,246,0.12);
color: #60a5fa;
border: 1px solid rgba(59,130,246,0.22);
white-space: nowrap;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
}
.accordion-badge.acc-required {
background: rgba(239,68,68,0.12);
color: #f87171;
border-color: rgba(239,68,68,0.28);
}
.accordion-chevron {
flex-shrink: 0;
color: #3d5a78;
font-size: 0.72rem;
transition: transform 0.25s ease;
line-height: 1;
}
.accordion-section.is-open .accordion-chevron { transform: rotate(180deg); }
.accordion-body {
display: none;
padding: 1.1rem 1.15rem 1.2rem;
background: #1d2328;
border-radius: 0 0 5px 5px;
}
.accordion-section.is-open .accordion-body {
display: block;
animation: accFadeIn 0.18s ease;
background: #0d1e27;
}
.accordion-body .form-group,
.admin-form [data-lang-panel] .form-group,
.admin-form .form-group .form-group {
background: #233547;
}
@keyframes accFadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
.accordion-header { padding: 0.68rem 0.85rem; gap: 0.5rem; }
.accordion-title { font-size: 0.75rem; }
.accordion-body { padding: 0.85rem 0.7rem 1rem; }
}
/* ============================================================================
LIGHT THEME — override complet pentru toate componentele cu fundal închis f1f5f9
============================================================================ */
/* ── Body / fundal global ── */
[data-theme="light"] body { background: #ececec; color: #1e293b; }
[data-theme="light"] .container { color: #1e293b; }
/* ── Tabele div-table ── */
[data-theme="light"] .div-table { border-color: #9daabc; background: #fff; }
[data-theme="light"] .div-tr { border-bottom-color: #e2e8f0; }
[data-theme="light"] .div-tr--head { background: #f1f5f9; }
[data-theme="light"] .div-tr:not(.div-tr--head):hover { background: #f8fafc; }
[data-theme="light"] .div-th { color: #64748b; }
[data-theme="light"] .div-td { color: #374151; }
[data-theme="light"] .div-td__code { background: rgba(0,0,0,0.05); }
/* ── Page header ── */
[data-theme="light"] .page-header h1 { color: #1e293b; }
/* ── Tabele clasice ── */
[data-theme="light"] .table-wrap,
[data-theme="light"] .tbl-wrap {
background: #ffffff;
border: 1px solid #e2e8f0;
}
[data-theme="light"] .th {
background: #f1f5f9;
color: #64748b;
border-bottom-color: #e2e8f0;
}
[data-theme="light"] .table-row {
background: #ffffff;
border-bottom-color: #e2e8f0;
}
[data-theme="light"] .table-row:hover { background: #f8fafc; }
[data-theme="light"] .td, [data-theme="light"] .tc { color: #374151; }
[data-theme="light"] .table-head { background: #f1f5f9; border-bottom-color: #d1d5db; }
/* ── Card generic ── */
[data-theme="light"] .card {
background: #ffffff;
border-color: #9daabc;
}
[data-theme="light"] .card-row { border-bottom-color: #e2e8f0; }
[data-theme="light"] .card-label { color: #64748b; }
[data-theme="light"] .card-value { color: #1e293b; }
/* ── Form container ── */
[data-theme="light"] .form-container {
background: #ffffff;
border-color: #9daabc;
}
[data-theme="light"] .form-container h2,
[data-theme="light"] .form-container h3 { color: #1e293b; }
[data-theme="light"] .form-actions { border-top-color: #e2e8f0; }
/* ── Accordion sections ── */
[data-theme="light"] .accordion-section { border-color: #cdd6df; }
[data-theme="light"] .accordion-section.is-open { border-color: #3b82f6; box-shadow: 0 2px 12px rgba(59,130,246,0.08); }
[data-theme="light"] .accordion-header { background: #edf2f7; }
[data-theme="light"] .accordion-header:hover { background: #a5ddff; }
[data-theme="light"] .accordion-section.is-open .accordion-header { background: #a5ddff; border-bottom-color: #c2d6eb; }
[data-theme="light"] .accordion-title { color: #2c4a6c; }
[data-theme="light"] .accordion-chevron { color: #6a8aaa; }
[data-theme="light"] .accordion-body { background: #edf2f7; }
[data-theme="light"] .accordion-body .form-group,
[data-theme="light"] .admin-form [data-lang-panel] .form-group,
[data-theme="light"] .admin-form .form-group .form-group { background: #ffffff; }
[data-theme="light"] .field-hint { color: #64748b; }
[data-theme="light"] .form-section-divider { border-bottom-color: #c8d8e8; color: #4a6a8a; }
[data-theme="light"] img.accordion-icon { filter: brightness(0.6) saturate(1.2); }
/* ── Input-uri și select-uri native ── */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="url"],
[data-theme="light"] textarea,
[data-theme="light"] select {
background: #ffffff;
border-color: #d1d5db;
color: #1e293b;
}
[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
border-color: #3b82f6;
}
/* ── Select custom (dropdown JS) ── */
[data-theme="light"] .select-display {
background: #ffffff;
border-color: #d1d5db;
color: #1e293b;
}
[data-theme="light"] .select-display:hover { background: #f8fafc; border-color: #94a3b8; }
[data-theme="light"] .select-display.open { background: #ffffff; border-color: #3b82f6; }
[data-theme="light"] .select-placeholder { color: #9ca3af; }
[data-theme="light"] .options-list {
background: #ffffff;
border-color: #d1d5db;
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
[data-theme="light"] .search-filter {
background: #f8fafc;
border-color: #9daabc;
color: #1e293b;
}
[data-theme="light"] .search-filter::placeholder { color: #9ca3af; }
[data-theme="light"] .option-item { color: #374151; }
[data-theme="light"] .option-item:hover { background: #f1f5f9; color: #1e293b; }
[data-theme="light"] .option-item.selected { background: #dbeafe; color: #1d4ed8; }
[data-theme="light"] .dropdown-header {
background: #f8fafc;
border-bottom-color: #9daabc;
color: #374151;
}
/* ── Category card (locations/tables) ── */
[data-theme="light"] .category-card {
background: #fbfcfd;
border-color: #9daabc;
}
[data-theme="light"] .category-card:hover { border-color: #3b82f6; background: #d4f7ff;}
[data-theme="light"] .category-card-header.open { background: rgb(166, 220, 253); }
[data-theme="light"] .category-card.is-open .category-card-header { background: rgba(59,130,246,0.06); }
/* ── Edit cat/subcat (secțiuni expandabile) ── */
[data-theme="light"] .category-section { background: #f8fafc; }
[data-theme="light"] .category-header { background: #e8edf2; }
[data-theme="light"] .category-header:hover { background: #dde4ec; }
[data-theme="light"] .category-header.active { background: #d5e0ec; border-bottom-color: #3b82f6; }
[data-theme="light"] .category-name { color: #1e293b; }
[data-theme="light"] .subcategories-wrapper { background: #f1f5f9; }
[data-theme="light"] .subcategory-section { border-top-color: #9daabc; }
[data-theme="light"] .subcategory-header { background: #f1f5f9; }
[data-theme="light"] .subcategory-header:hover { background: #e8edf2; }
[data-theme="light"] .subcategory-header.active { background: #dce8f5; border-left-color: #3b82f6; }
[data-theme="light"] .subcategory-name { color: #1e293b; }
[data-theme="light"] .products-wrapper { background: #e8edf2; }
/* ── Permissions ── */
[data-theme="light"] .perm-box {
background: #ffffff;
border-color: #9daabc;
}
[data-theme="light"] .perm-check-item {
background: #f8fafc;
border-color: #9daabc;
}
[data-theme="light"] .perm-check-item:hover { background: #f1f5f9; }
[data-theme="light"] .perm-form-check { border-top-color: #9daabc; }
[data-theme="light"] .perm-form-check strong { color: #1e293b; }
[data-theme="light"] .perm-form-check small { color: #6b7280; }
/* ── Dashboard stats ── */
[data-theme="light"] .dash-stat-card {
background: #ffffff;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
[data-theme="light"] .dash-stat-card:hover { border-color: #3b82f6; }
[data-theme="light"] .ds-label { color: #64748b; }
[data-theme="light"] .ds-value { color: #1e293b; }
[data-theme="light"] .ds-sub { color: #64748b; }
/* ── Dashboard panels ── */
[data-theme="light"] .dash-panel {
background: #ffffff;
border-color: #9daabc;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
[data-theme="light"] .dash-panel-header {
background: rgba(255, 234, 150, 0.38);
border-bottom-color: #9daabc; border-radius: 10px 10px 0px 0;
}
[data-theme="light"] .dash-panel-header a { color: #64748b; }
[data-theme="light"] .dash-panel-header a:hover { color: #3b82f6; }
[data-theme="light"] .activity-row { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .activity-avatar {
background: #f1f5f9;
border-color: #9daabc;
color: #64748b;
}
[data-theme="light"] .activity-action { color: #1e293b; }
[data-theme="light"] .activity-detail { color: #64748b; }
[data-theme="light"] .activity-time { color: #94a3b8; }
[data-theme="light"] .loc-row { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .loc-name { color: #1e293b; }
[data-theme="light"] .loc-city { color: #64748b; }
[data-theme="light"] .order-row { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .order-total { color: #1e293b; }
[data-theme="light"] .order-title { color: #374151; }
[data-theme="light"] .order-loc, [data-theme="light"] .order-time { color: #94a3b8; }
[data-theme="light"] .pending-row { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .pending-name { color: #1e293b; }
[data-theme="light"] .pending-meta, [data-theme="light"] .pending-time { color: #94a3b8; }
/* ── Admin index grid (cards categorii) ── */
[data-theme="light"] .adm-cat-card {
background: #ffffff;
border-color: #9daabc;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
[data-theme="light"] .adm-cat-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
[data-theme="light"] .adm-cat-header {
background: #b1d3f4;
border-bottom-color: #9daabc;
}
[data-theme="light"] .adm-cat-name { color: #374151; }
/* ── Tabel schedule / orar ── */
[data-theme="light"] .schedule-table-wrap { background: #ffffff; border-color: #9daabc; }
[data-theme="light"] .schedule-header-row { background: #f1f5f9; border-bottom-color: #e2e8f0; }
[data-theme="light"] .schedule-row { border-bottom-color: #e2e8f0; }
[data-theme="light"] .schedule-cell { border-right-color: #e2e8f0; }
[data-theme="light"] .interval-input {
background: #ffffff;
border-color: #d1d5db;
color: #1e293b;
}
[data-theme="light"] .interval-input:focus { background: #f8fafc; border-color: #3b82f6; }
[data-theme="light"] .interval-input.error { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
[data-theme="light"] .interval-add-btn {
border-color: #93c5fd;
color: #2563eb;
background: #eff6ff;
}
[data-theme="light"] .interval-add-btn:hover { background: #dbeafe; border-color: #3b82f6; }
/* ── Waiter orders / stepper ── */
[data-theme="light"] .stepper-wrap { background: #ffffff; border-color: #9daabc; }
[data-theme="light"] .stepper-header { background: #f1f5f9; border-bottom-color: #e2e8f0; }
[data-theme="light"] .stepper-tab { color: #64748b; }
[data-theme="light"] .stepper-tab.active { border-bottom-color: #3b82f6; color: #1e293b; }
/* ── Tabel comanda (orders) ── */
[data-theme="light"] .order-card,
[data-theme="light"] .order-detail-box {
background: #ffffff;
border-color: #9daabc;
}
[data-theme="light"] .order-items-table th { background: #f1f5f9; color: #64748b; }
/* ── QR / print ── */
[data-theme="light"] .qr-cell-card { background: #f8fafc; border-color: #9daabc; }
/* ── Topping table ── */
[data-theme="light"] .topping-row { border-bottom-color: #e2e8f0; }
[data-theme="light"] .topping-row:hover { background: #f8fafc; }
/* ── Texte generice ── */
[data-theme="light"] .text-muted { color: #6b7280; }
[data-theme="light"] .page-header { color: #1e293b; }
/* ── Footer admin ── */
[data-theme="light"] .main-footer {
background: #e2e8f0 !important;
color: #374151 !important;
border-top: 1px solid #c8d8ea !important;
}
[data-theme="light"] .adm-footer { background: #f1f5f9; border-top-color: #c8d8ea; }
[data-theme="light"] .adm-footer-col-title { color: #64748b; }
[data-theme="light"] .adm-footer-link { color: #475569; }
[data-theme="light"] .adm-footer-link:hover { color: #1e293b; }
[data-theme="light"] .adm-footer-bottom { border-top-color: #c8d8ea; color: #64748b; }
[data-theme="light"] .adm-footer-brand-name { color: #1e293b; }
[data-theme="light"] .adm-footer-tagline { color: #64748b; }
[data-theme="light"] .adm-footer-see-all { color: #2a69b1; }
/* ── Location card ── */
[data-theme="light"] .location-card { background: #ffffff; border-color: #9daabc; }
[data-theme="light"] .location-header { border-bottom-color: #e2e8f0; }
[data-theme="light"] .location-header h3 { color: #1e293b; }
[data-theme="light"] .loc-type-label { color: #64748b; }
[data-theme="light"] .loc-no-data { color: #9ca3af; }
[data-theme="light"] .loc-schedule-day { color: #374151; }
/* ── Settings tabs ── */
[data-theme="light"] .settings-tabs .tab-btn { background: #f1f5f9; color: #374151; border-color: #9daabc; }
/* ── Modal regulat (.modal-box) ── */
[data-theme="light"] .modal-box { background: #ffffff; border-color: #9daabc; color: #1e293b; }
[data-theme="light"] .modal-title { color: #1e293b; }
[data-theme="light"] .modal-close { color: #475569; }
[data-theme="light"] .modal-close:hover { background: #f1f5f9; color: #1e293b; }
/* ── Modal iframe (ep-modal) ── */
[data-theme="light"] .ep-modal-box { background: #ffffff; border-color: #cbd5e1; }
[data-theme="light"] .ep-modal-hdr { border-bottom-color: #e2e8f0; }
[data-theme="light"] .ep-modal-title { color: #1e293b; }
[data-theme="light"] .ep-modal-close { color: #64748b; }
/* ── Modal map (map-modal) ── */
[data-theme="light"] .map-modal { color: #1e293b; }
[data-theme="light"] .map-modal h3,
[data-theme="light"] .map-modal h4 { color: #1e293b; }
/* ── Admin page icons (admin/index.php) ── */
[data-theme="light"] .adm-page-icon { border-color: #7a8fa0; }
[data-theme="light"] .adm-page-icon img { filter: brightness(1.05) saturate(0.9) }
[data-theme="light"] .adm-page-item:hover .adm-page-icon { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.2); }
[data-theme="light"] .adm-page-label { color: #404d61; }
[data-theme="light"] .adm-page-item:hover .adm-page-label { color: #20272c; }
[data-theme="light"] .adm-page-active .adm-page-icon { background: rgba(37,99,235,.12); border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.2); }
[data-theme="light"] .adm-page-active .adm-page-label { color: #2563eb; }
/* ── Sub card (edit_cat_subcat / tables / locations) ── */
[data-theme="light"] .sub-card { background: #fbfcfd; border-color: #d1d5db; }
[data-theme="light"] .sub-card:hover { background: #d2f6ff; border-color: #3b82f6; }
[data-theme="light"] .sub-card-name { color: #1e293b; }
[data-theme="light"] .sub-card-slug,
[data-theme="light"] .sub-card-desc,
[data-theme="light"] .sub-card-slug-currency,
[data-theme="light"] .sub-card-slug-info { color: #64748b; }
/* ── Category card name ── */
[data-theme="light"] .category-card-name { color: #404d61; }
[data-theme="light"] .category-card-slug { color: #64748b; }
[data-theme="light"] .category-card-body { border-top-color: #e2e8f0; }
/* [data-theme="light"] .category-card-header:hover { background: rgba(0,0,0,0.02); } */
/* ── Admin form (.admin-form) ── */
[data-theme="light"] .admin-form .form-group { background: #edf2f7; border-color: #3b82f6; }
[data-theme="light"] .admin-form .checkbox-group { background: #fff; }
[data-theme="light"] .admin-form label { color: #5a6a7e; }
[data-theme="light"] .admin-form input[type="text"],
[data-theme="light"] .admin-form input[type="email"],
[data-theme="light"] .admin-form input[type="tel"],
[data-theme="light"] .admin-form input[type="url"],
[data-theme="light"] .admin-form input[type="number"],
[data-theme="light"] .admin-form select,
[data-theme="light"] .admin-form textarea { background: #ffffff; border-color: #c8cdd4; color: #1e293b; }
[data-theme="light"] .admin-form input[type="file"] { background: #f1f5f9; border-color: #93c5fd; }
[data-theme="light"] .admin-form input:hover:not(:focus),
[data-theme="light"] .admin-form select:hover:not(:focus),
[data-theme="light"] .admin-form textarea:hover:not(:focus) { border-color: #94a3b8; }
/* ── Section panel pe form-row (location_edit) ── */
/* ── Season box (location_edit) ── */
[data-theme="light"] #season-box { background: #e8f0f8 !important; border-color: #93c5fd !important; }
/* ── Stat cards (orders.php) ── */
[data-theme="light"] .stat-card { background: #ffffff !important; border-color: #e2e8f0 !important; }
[data-theme="light"] .stat-card.accent-green { border-color: rgba(34,197,94,.4) !important; }
[data-theme="light"] .stat-card.accent-red { border-color: rgba(239,68,68,.4) !important; }
[data-theme="light"] .stat-card.accent-blue { border-color: rgba(79,142,247,.4) !important; }
[data-theme="light"] .stat-card.accent-yellow { border-color: rgba(234,179,8,.4) !important; }
[data-theme="light"] .stat-card.accent-purple { border-color: rgba(168,85,247,.4) !important; }
[data-theme="light"] .stat-label { color: #64748b !important; }
[data-theme="light"] .stat-value { color: #1e293b; }
[data-theme="light"] .stat-card.accent-green .stat-value { color: #16a34a; }
[data-theme="light"] .stat-card.accent-red .stat-value { color: #dc2626; }
[data-theme="light"] .stat-card.accent-blue .stat-value { color: #2563eb; }
[data-theme="light"] .stat-card.accent-yellow .stat-value { color: #b45309; }
[data-theme="light"] .stat-card.accent-purple .stat-value { color: #7c3aed; }
[data-theme="light"] .stat-sub { color: #64748b; }
/* ── Filter bar ── */
[data-theme="light"] .filter-bar { background: #e3e4e7; border-color: #d1d5db; }
[data-theme="light"] .filter-bar .filter-group label { color: #64748b; }
/* ── UC rows (orders list) ── */
[data-theme="light"] .uc-row { background: #f1f5f9; border-color: #9daabc; color: #374151; }
[data-theme="light"] .uc-row:hover { background: #e3e4e7; border-color: #3b82f6; }
[data-theme="light"] .uc-head { background: #e3e4e7 !important; border-color: #d1d5db !important; }
[data-theme="light"] .uc-head:hover { background: #e3e4e7 !important; }
[data-theme="light"] .uc-lbl { color: #64748b; }
/* ── Order modal ── */
[data-theme="light"] #order-modal { background: #ffffff; border-color: #9daabc; }
[data-theme="light"] .om-header { background: #f8fafc; border-bottom-color: #9daabc; }
[data-theme="light"] .om-card { background: #f1f5f9; border-color: #9daabc; }
[data-theme="light"] .om-card-cancel { background: #fff5f5; }
[data-theme="light"] .om-card-label { color: #64748b; }
[data-theme="light"] .om-card-label-red { color: #dc2626; }
[data-theme="light"] .om-amt-label,
[data-theme="light"] .om-amt-strike { color: #64748b; }
[data-theme="light"] .om-amt-value { color: #374151; }
[data-theme="light"] .om-amt-total { color: #1e293b; }
[data-theme="light"] .om-notes { color: #374151; }
[data-theme="light"] .om-loc-city,
[data-theme="light"] .om-manager,
[data-theme="light"] .om-session,
[data-theme="light"] .om-tl-time { color: #64748b; }
[data-theme="light"] .om-tl-row { border-bottom-color: #e2e8f0; }
[data-theme="light"] .om-items-cell,
[data-theme="light"] .om-items-cell-c,
[data-theme="light"] .om-items-cell-p,
[data-theme="light"] .om-items-cell-s,
[data-theme="light"] .om-items-cell-st { border-top-color: #e2e8f0; }
[data-theme="light"] .om-items-name { color: #374151; }
[data-theme="light"] .om-items-note { color: #64748b; }
[data-theme="light"] .om-item-card { background: #f8fafc; border-color: #9daabc; }
[data-theme="light"] .om-item-card .om-items-cell-st { border-top-color: #e2e8f0; }
[data-theme="light"] #om-extra { color: #94a3b8; border-top-color: #e2e8f0; }
[data-theme="light"] .om-row-label { color: #64748b; }
[data-theme="light"] .om-row-value { color: #374151; }
[data-theme="light"] .om-fmt-empty { color: #94a3b8; }
[data-theme="light"] .om-close-btn { color: #64748b; }
[data-theme="light"] .om-loading { color: #64748b; }
[data-theme="light"] .om-cancel-none { color: #64748b; }
[data-theme="light"] .om-cancel-time { color: #64748b; }
/* ── Pagination ── */
[data-theme="light"] .pagination a,
[data-theme="light"] .pagination span { background: #f1f5f9; border-color: #9daabc; color: #374151; }
[data-theme="light"] .pagination a:hover { background: rgba(79,142,247,.1); border-color: #3b82f6; }
/* ── Section card (manage_category_attrs) ── */
[data-theme="light"] .section-card { background: #f1f5f9; border-color: #9daabc; }
[data-theme="light"] .section-card h3 { color: #1e293b; border-bottom-color: #e2e8f0; }
/* ── Date input ── */
[data-theme="light"] input[type="date"] { background: #ffffff !important; border-color: #d1d5db !important; color: #1e293b !important; color-scheme: light; }
[data-theme="light"] input[type="date"]:focus { border-color: #3b82f6 !important; background: #f8fafc !important; }
[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator { filter: none; }
/* ── loc-info-card ── */
[data-theme="light"] .loc-info-card-inner { border-color: #9daabc; }
/* ── Table wrap generic ── */
[data-theme="light"] .table-wrap { background: #ffffff; border-color: #9daabc; }
[data-theme="light"] .table-wrap .th { background: #f1f5f9; color: #64748b; border-bottom-color: #9daabc; }
[data-theme="light"] .table-wrap .table-row { background: #ffffff; border-bottom-color: #9daabc; }
[data-theme="light"] .table-wrap .table-row:hover { background: #f8fafc; }
[data-theme="light"] .checkbox-label {background: #a5ddff;}
[data-theme="light"] .dynamic-attributes {background: #a5ddff;}
[data-theme="light"] .group-header { background: #f9eec5; border-bottom: 1px solid #be8809; border-left: 1px solid #be8809; border-right: 1px solid #be8809; color: #18181b;}
[data-theme="light"] .select-dropdown {background: #a5ddff; border: 1px solid #707070; border-radius: 0.75rem 0.75rem 0 0;}
[data-theme="light"] .uc-col-price-total { color:#84878a;}
[data-theme="light"] #om-notes { color: #84878a; }
[data-theme="light"] .om-items-cell-s{ color: #84878a; }
[data-theme="light"] .multi-select-header { background:#fff; border:1px solid #5a5b5b; }
[data-theme="light"] .multi-select-dropdown { background:#fff; border:1px solid #5a5b5b; }
[data-theme="light"] .btn-show-map { background:#a5ddff;border:1px solid #3a5a7a;color:#444749;}
[data-theme="light"] .allows_takeaway_desc { margin:.4rem 0 0 .5rem;font-size:.78rem;color:var(--text-muted,#888);line-height:1.5; }
[data-theme="light"] .interval-row .schedule-input { background: #f9eec5; color: #5a6a7e; border-color: #c8b870; }
[data-theme="light"] .schedule-checkbox-label { color: #5a6a7e; }
[data-theme="light"] .schedule-closed .schedule-checkbox-label { color: #c0392b; }
[data-theme="light"] .interval-add { border-color: #93b4d0; color: #1a5a9a; }
[data-theme="light"] .interval-add:hover { background: #e8f1f9; border-color: #3b82f6; color: #1a5a9a; }
[data-theme="light"] .gps-saved-info { background:#fff; border:1px solid #c8cdd4; }
[data-theme="light"] .delivery-box.delivery-on { background: #e8f8ee; border: 1px solid #22c55e; }
[data-theme="light"] .season-off { background: #f0f4f8 !important; border-color: #c0ccd8 !important; }
[data-theme="light"] .season-on { background: #e8effc !important; border-color: #3b82f6 !important; }
/* ── Staff limit cards (users.php) ── */
.staff-limits-row { margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:.75rem; }
.staff-limit-card {
background: #1d2328; border: 1px solid #3d4347;
border-radius: 12px; padding: .9rem 1.1rem;
min-width: 200px; flex: 1; max-width: 280px;
}
[data-theme="light"] .staff-limit-card {
background: #ffffff; border-color: rgba(0,0,0,0.1);
}
.staff-limit-loc {
font-size: .78rem; color: #8aa7cf; margin-bottom: .3rem;
font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
}
[data-theme="light"] .staff-limit-loc { color: #4b6a96; }
.staff-limit-count { display:flex; align-items:baseline; gap:.4rem; margin-bottom:.5rem; }
.staff-limit-total { color: #94a3b8; font-size: .85rem; }
[data-theme="light"] .staff-limit-total { color: #64748b; }
.staff-limit-bar {
height: 5px; background: #3d4347;
border-radius: 3px; overflow: hidden;
}
[data-theme="light"] .staff-limit-bar { background: #e2e8f0; }
.staff-limit-bar-fill { height: 100%; border-radius: 3px; transition: width .3s; }
.staff-limit-meta { font-size: .72rem; color: #94a3b8; margin-top: .4rem; }
[data-theme="light"] .staff-limit-meta { color: #64748b; }
.staff-limit-upgrade { color: #f59e0b; font-weight: 600; text-decoration: none; }
.staff-limit-upgrade:hover { text-decoration: underline; }
/* ── Quota bar (shared: import_menu_ocr, menu_pdf, users) ── */
.ocr-quota-bar{display:flex;flex-direction:column;gap:.45rem;padding:.75rem 1rem;border-radius:10px;margin-bottom:1.2rem;border:1px solid;}
.ocr-quota-bar.ocr-quota--ok{background:rgba(40,168,110,.08);border-color:rgba(40,168,110,.25);}
.ocr-quota-bar.ocr-quota--low{background:rgba(255,170,0,.08);border-color:rgba(255,170,0,.3);}
.ocr-quota-bar.ocr-quota--exhausted{background:rgba(220,50,50,.08);border-color:rgba(220,50,50,.3);}
.ocr-quota-info{display:flex;align-items:center;gap:.5rem;font-size:.88rem;}
.ocr-quota-icon{font-size:1rem;}
.ocr-quota--ok .ocr-quota-label{color:#5dd498;}
.ocr-quota--low .ocr-quota-label{color:#f0b429;}
.ocr-quota--exhausted .ocr-quota-label{color:#f87171;}
.ocr-quota-progress{height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;}
[data-theme="light"] .ocr-quota-progress{background:rgba(0,0,0,.1);}
[data-theme="light"] .ocr-quota--ok .ocr-quota-label{color:#1a7a50;}
[data-theme="light"] .ocr-quota--low .ocr-quota-label{color:#b87a00;}
[data-theme="light"] .ocr-quota--exhausted .ocr-quota-label{color:#c0392b;}
.ocr-quota-fill{height:100%;border-radius:3px;transition:width .4s;}
.ocr-quota--ok .ocr-quota-fill{background:linear-gradient(90deg,#1a72b8,#28a86e);}
.ocr-quota--low .ocr-quota-fill{background:linear-gradient(90deg,#f0b429,#ff8c00);}
.ocr-quota--exhausted .ocr-quota-fill{background:linear-gradient(90deg,#dc3545,#f87171);}
/* ── Location + permission badges in user card ── */
.loc-badge {
display: inline-block; padding: 2px 8px; border-radius: 4px;
font-size: .75rem; font-weight: 600;
background: rgba(52,152,219,.18); color: #7bc8f7;
}
[data-theme="light"] .loc-badge { background: #dbeafe; color: #1e40af; }
.perm-badge-role {
display: inline-block; padding: 2px 8px; border-radius: 4px;
font-size: .75rem; font-weight: 600;
background: rgba(74,222,128,.13); color: #4ade80;
}
[data-theme="light"] .perm-badge-role { background: #dcfce7; color: #166534; }
.perm-badge-override {
display: inline-block; padding: 2px 8px; border-radius: 4px;
font-size: .75rem; font-weight: 600;
background: rgba(167,139,250,.15); color: #c4b5fd;
}
[data-theme="light"] .perm-badge-override { background: #ede9fe; color: #5b21b6; }
[data-theme="light"] .delivery-box.delivery-off { background: #fdecec; border: 1px solid #ef4444; }
[data-theme="light"] .status-box.status-on { background: #e8f8ee; border: 1px solid #22c55e; }
[data-theme="light"] .status-box.status-off { background: #fdecec; border: 1px solid #ef4444; }
[data-theme="light"] .status-box.status-danger-on { background: #fdecec; border: 1px solid #ef4444;}
[data-theme="light"] .status-box.status-danger-off { background: #e8f8ee; border: 1px solid #22c55e; }
/* ============================================================================
settings_payment_products.php — light theme overrides
============================================================================ */
/* Package cards */
[data-theme="light"] .pkg-card { background: #ffffff; border-color: #d1d5db; }
[data-theme="light"] .pkg-card--free { border-color: rgba(34,197,94,.5); background: #a7ee9e;}
[data-theme="light"] .pkg-card--starter { border-color: rgba(59,130,246,.5); background: #86b4f0;}
[data-theme="light"] .pkg-card--pro { border-color: rgba(139,92,246,.5); background: #af8bcb;}
[data-theme="light"] .pkg-card--enterprise { border-color: rgba(217,119,6,.5); background: #f9f1b7;}
[data-theme="light"] .pkg-card-header { border-bottom-color: rgba(0,0,0,.08); }
/* Package name inline input */
[data-theme="light"] .pkg-name-input {
background: rgba(0,0,0,.04);
border-bottom-color: rgba(0,0,0,.2);
}
[data-theme="light"] .pkg-name-input:focus { background: rgba(59,130,246,.06); }
[data-theme="light"] .pkg-name-input--free { color: #16a34a; }
[data-theme="light"] .pkg-name-input--starter { color: #2563eb; }
[data-theme="light"] .pkg-name-input--pro { color: #7c3aed; }
[data-theme="light"] .pkg-name-input--enterprise { color: #b45309; }
/* Package badges */
[data-theme="light"] .badge-free { background: #dcfce7; color: #166534; }
[data-theme="light"] .badge-starter { background: #dbeafe; color: #1e40af; }
[data-theme="light"] .badge-pro { background: #ede9fe; color: #5b21b6; }
[data-theme="light"] .badge-enterprise { background: #FFD919; color: #92400e; }
/* Field labels inside pkg-card */
[data-theme="light"] .pkg-field-label { color: #6b7280; }
[data-theme="light"] .pkg-unlim-label { color: #6b7280; }
[data-theme="light"] .pkg-free-note { color: #16a34a; }
[data-theme="light"] .pkg-unlim-forever{ color: #b45309; }
/* Payment system toggle box */
[data-theme="light"] .spp-plata-box--on { background: rgba(239,68,68,.06); border-color: #ef4444; }
[data-theme="light"] .spp-plata-box--off { background: rgba(34,197,94,.06); border-color: #22c55e; }
[data-theme="light"] .spp-plata-desc { color: #6b7280; }
/* EUR suffix */
[data-theme="light"] .spp-eur-suffix { color: #6b7280; }
/* Search dropdown */
[data-theme="light"] .loc-search-input {
background: #ffffff;
border-color: #d1d5db;
color: #111827;
}
[data-theme="light"] .loc-dropdown {
background: #ffffff;
border-color: #d1d5db;
box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
[data-theme="light"] .loc-option:hover,
[data-theme="light"] .loc-option.active { background: rgba(59,130,246,.1); }
[data-theme="light"] .loc-option-meta { color: #6b7280; }
[data-theme="light"] .loc-no-results { color: #6b7280; }
/* Preview card */
[data-theme="light"] .loc-preview { background: rgba(59,130,246,.05); border-color: rgba(59,130,246,.2); }
[data-theme="light"] .loc-preview-label { color: #6b7280; }
[data-theme="light"] .loc-preview-val { color: #111827; }
/* Section title */
[data-theme="light"] .section-title {
color: #2563eb;
background: rgba(59,130,246,.08);
border-left-color: #2563eb;
}
/* Invoice table */
[data-theme="light"] .inv-table th { background: rgba(59,130,246,.08); color: #2563eb; }
[data-theme="light"] .inv-table td { border-bottom-color: rgba(0,0,0,.06); }
[data-theme="light"] .inv-table tr:hover td { background: rgba(59,130,246,.04); }
[data-theme="light"] .inv-date-val { color: #6b7280; }
[data-theme="light"] .inv-card-label { color: #6b7280; }
[data-theme="light"] .inv-mobile-card { background: #ffffff; border-color: #d1d5db; }
/* Price hints */
[data-theme="light"] .spp-valid-hint { color: #16a34a; }
[data-theme="light"] .spp-price-hint--free { color: #16a34a; }
[data-theme="light"] .spp-price-hint--normal { color: #2563eb; }
[data-theme="light"] .spp-price-hint--discount { color: #b45309; }
/* form-container flushed (tabel facturi) */
.form-container--flush { padding: 0 !important; margin: 0; }
/* ============================================================================
view_subscriptions.php
============================================================================ */
/* Stat cards grid */
.vs-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.stat-card {
background: #272d33;
border: 1px solid #3d4347;
border-radius: 10px;
padding: 1rem 1.2rem;
}
.stat-card.accent-green { border-color: rgba(34,197,94,.4); }
.stat-card.accent-red { border-color: rgba(239,68,68,.4); }
.stat-card.accent-blue { border-color: rgba(79,142,247,.4); }
.stat-card.accent-yellow { border-color: rgba(234,179,8,.4); }
.stat-label {
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .06em;
color: #7a9bbb;
margin-bottom: .25rem;
}
.stat-value {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.1;
color: #e0e8f0;
}
.stat-card.accent-green .stat-value { color: #22c55e; }
.stat-card.accent-red .stat-value { color: #ef4444; }
.stat-card.accent-blue .stat-value { color: #4f8ef7; }
.stat-card.accent-yellow .stat-value { color: #eab308; }
.stat-sub {
font-size: .75rem;
color: #5a7a9b;
margin-top: .2rem;
}
/* Filter bar */
.vs-filter-bar {
background: #272d33;
border: 1px solid #3d4347;
border-radius: 10px;
padding: 1rem 1.2rem;
margin-bottom: 1.5rem;
display: flex;
flex-wrap: wrap;
gap: .75rem;
align-items: flex-end;
}
.vs-filter-group {
display: flex;
flex-direction: column;
gap: .3rem;
min-width: 130px;
}
.vs-filter-group--wide { min-width: 220px; }
.vs-filter-group label {
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .05em;
color: #7a9bbb;
font-weight: 600;
}
.vs-filter-group input[type="date"],
.vs-filter-group select {
background: #1d2328;
border: 1px solid #3f3f46;
border-radius: 6px;
color: #bec9d3;
padding: .45rem .65rem;
font-size: .88rem;
width: 100%;
box-sizing: border-box;
}
.vs-filter-group input[type="date"]:focus,
.vs-filter-group select:focus {
outline: none;
border-color: #4f8ef7;
}
.vs-filter-actions { display: flex; gap: .5rem; align-items: flex-end; }
/* Count badge in section-title */
.vs-count-badge {
font-size: .75rem;
font-weight: 400;
color: #5a7a9b;
margin-left: .4rem;
}
/* Row list */
.vs-list { display: flex; flex-direction: column; gap: .4rem; }
.vs-row {
display: grid;
grid-template-columns: 90px 1fr 130px 110px 80px 165px 80px 80px;
align-items: start;
gap: .4rem .8rem;
background: #272d33;
border: 1px solid #3d4347;
border-radius: 8px;
padding: .65rem 1rem;
font-size: .83rem;
color: #5b5b5b ;
transition: border-color .15s;
}
.vs-row:hover { border-color: #4f8ef7; background: #2a3038; }
.vs-head {
background: #1d2328 !important;
border-color: #1d2328 !important;
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: #4f8ef7;
padding: .5rem 1rem;
border-radius: 8px 8px 0 0;
margin-bottom: 0;
align-items: center;
}
.vs-head:hover { background: #1d2328 !important; border-color: #1d2328 !important; }
/* Note + created_by — span full width */
.vs-col-notes {
grid-column: 1 / -1;
font-size: .74rem;
color: #5a7a9b;
border-top: 1px solid rgba(255,255,255,.04);
padding-top: .3rem;
margin-top: .1rem;
}
.vs-created-by { color: #4a6a88; }
/* Text helpers */
.vs-sub { font-size: .73rem; color: #5a7a9b; margin-top: .15rem; }
.vs-loc-name { font-weight: 600; }
.vs-muted { color: #3a5a78; }
.vs-amount { color: #22c55e; font-weight: 600; }
.vs-inv-num { font-family: monospace; font-size: .8rem; color: #60a5fa; }
.vs-valid-range { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; font-size: .8rem; }
.vs-arrow { color: #3a5a78; }
.vs-date-expired { color: #ef4444 !important; }
.vs-days-left { color: #4ade80; }
.vs-pkg-limits { font-size: .68rem; }
/* Status colors */
.s-ok { color: #22c55e; font-weight: 600; }
.s-red { color: #ef4444; font-weight: 600; }
.s-yellow { color: #eab308; font-weight: 600; }
.s-muted { color: #5a7a9b; }
/* Loc ID badge (shared cu alte pagini) */
.loc-id-badge {
color: #4f8ef7;
font-weight: 700;
background: rgba(79,142,247,.12);
border-radius: 4px;
padding: .1rem .4rem;
font-size: .73rem;
white-space: nowrap;
display: inline-block;
}
/* Pagination (shared) */
.pagination {
display: flex; gap: .4rem; flex-wrap: wrap;
justify-content: center; margin-top: 1.2rem;
}
.pagination a, .pagination span {
padding: .35rem .75rem; border-radius: 6px; font-size: .83rem;
border: 1px solid #3d4347; color: #5b5b5b ;
text-decoration: none; background: #272d33; transition: background .15s;
}
.pagination a:hover { background: rgba(79,142,247,.18); border-color: #4f8ef7; }
.pagination span.current { background: #4f8ef7; border-color: #4f8ef7; color: #fff; font-weight: 700; }
.pagination span.dots { border: none; background: none; color: #5a7a9b; }
/* Pe desktop hamburgerul din header e ascuns — controlul e pe sidebar */
@media (min-width: 901px) {
.sidebar-mobile-only { display: none !important; }
}
/* ── Bara de sus a sidebar-ului (desktop) ── */
.sidebar-top-bar {
display: none; /* afișat doar pe desktop via media query */
align-items: center;
justify-content: flex-end;
padding: 0 10px;
height: var(--header-height);
border-bottom: 1px solid var(--sidebar-border);
flex-shrink: 0;
}
@media (min-width: 901px) {
.sidebar-top-bar { display: flex; }
}
/* Butonul ✕ din interiorul sidebar-ului (desktop) */
.sidebar-inner-toggle {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
width: 36px;
height: 36px;
border-radius: 6px;
background: none;
border: none;
cursor: pointer;
color: var(--sidebar-text);
transition: background 0.15s;
padding: 0;
flex-shrink: 0;
}
.sidebar-inner-toggle:hover { background: var(--sidebar-hover); color: var(--sidebar-active-text); }
.sidebar-inner-toggle span {
display: block;
width: 22px;
height: 2px;
background: currentColor;
border-radius: 2px;
transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Când sidebar-ul e vizibil (is-open = deschis), butonul arată ✕ */
.sidebar-inner-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sidebar-inner-toggle.is-open span:nth-child(2) { opacity: 0; }
.sidebar-inner-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ── Buton flotant ≡ când sidebar-ul e collapsed pe desktop ── */
.sidebar-float-open {
display: none;
position: fixed;
top: calc(var(--header-height) / 2 - 18px);
left: 0;
z-index: 1051;
background: var(--sidebar-bg);
border: 1px solid var(--sidebar-border);
border-left: none;
border-radius: 0 8px 8px 0;
cursor: pointer;
padding: 10px 10px 10px 8px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
transition: background 0.15s, box-shadow 0.15s;
box-shadow: 2px 0 8px rgba(0,0,0,0.25);
}
.sidebar-float-open:hover { background: var(--sidebar-hover); box-shadow: 2px 0 12px rgba(0,0,0,0.35); }
.sidebar-float-open span {
display: block;
width: 20px;
height: 2px;
background: var(--sidebar-text);
border-radius: 2px;
}
@media (min-width: 901px) {
body.sidebar-collapsed .sidebar-float-open { display: flex; }
}
/* Buton sidebar toggle (hamburger lateral) — primul în header, stânga */
.sidebar-toggle-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
width: 36px;
height: 36px;
border-radius: 6px;
background: none;
border: none;
cursor: pointer;
color: var(--header-text);
transition: background 0.15s;
flex-shrink: 0;
padding: 0;
order: -1; /* mereu primul în flex row */
margin-right: 4px;
}
.sidebar-toggle-btn:hover { background: var(--header-hover-bg); }
.sidebar-toggle-btn span {
display: block;
width: 22px;
height: 2px;
background: var(--header-text);
border-radius: 2px;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.sidebar-toggle-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sidebar-toggle-btn.is-open span:nth-child(2) { opacity: 0; }
.sidebar-toggle-btn.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ============================================================================
ADMIN SIDEBAR
============================================================================ */
.admin-sidebar {
position: fixed;
top: 0;
left: 0;
width: var(--sidebar-width);
height: 100vh;
background: var(--sidebar-bg);
border-right: 1px solid var(--sidebar-border);
overflow-y: auto;
overflow-x: hidden;
z-index: 1050;
transition: transform 0.28s ease, box-shadow 0.28s ease;
scrollbar-width: thin;
scrollbar-color: rgba(128,128,128,0.2) transparent;
}
.admin-sidebar::-webkit-scrollbar { width: 4px; }
.admin-sidebar::-webkit-scrollbar-track { background: transparent; }
.admin-sidebar::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.2); border-radius: 2px; }
.sidebar-inner { padding: 10px 0 20px; }
/* Link home în sidebar */
.sidebar-home-link {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 14px;
margin: 0 8px 8px;
color: var(--sidebar-text);
text-decoration: none;
font-size: 0.875rem;
border-radius: 6px;
transition: background 0.15s, color 0.15s;
border-bottom: 1px solid var(--sidebar-border);
padding-bottom: 12px;
margin-bottom: 12px;
}
.sidebar-home-link:hover { color: var(--header-accent); }
/* Secțiune categorie */
.sidebar-section { margin-bottom: 1px; background: #09141a; padding-bottom: 0.1rem;}
.sidebar-section-title {
display: flex;
align-items: center;
gap: 7px;
padding: 6px 10px;
margin: 1px 0 2px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--sidebar-title-color);
cursor: pointer;
user-select: none;
white-space: nowrap;
transition: opacity 0.15s;
border-bottom: solid 1px #ccc;
background: #233547;
}
.sidebar-section-title:hover { opacity: 0.8; }
.sidebar-cat-icon {
width: 22px;
height: 22px;
object-fit: contain;
flex-shrink: 0;
border-radius: 50%;
background: var(--icon-circle-bg);
}
/* Iconițe în sidebar și mobile nav — moștenesc culoarea și font-size din context */
.sidebar-section-title .btn-ico,
.mobile-section-title.btn-ico {
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
text-transform: inherit;
color: inherit;
gap: 6px;
}
.sidebar-section-title .btn-ico::before,
.mobile-section-title.btn-ico::before {
width: 0.9em;
height: 0.9em;
opacity: 0.85;
}
.sidebar-arrow {
margin-left: auto;
font-size: 1.5rem;
opacity: 0.7;
transition: transform 0.2s;
flex-shrink: 0;
}
.sidebar-section.collapsed .sidebar-arrow { transform: rotate(-90deg); }
.sidebar-section.collapsed .sidebar-section-links { display: none; }
/* Link pagina în sidebar */
.sidebar-link {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 14px 7px 16px;
font-size: 0.86rem;
color: var(--sidebar-text);
text-decoration: none;
/* border-radius: 6px; */
margin: 1px 8px;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative; /* NECESAR pentru linia de jos */
}
.sidebar-link-icon {
width: 22px;
height: 22px;
object-fit: contain;
flex-shrink: 0;
border-radius: 50%;
background: var(--icon-circle-bg);
opacity: 0.85;
}
.sidebar-link:hover .sidebar-link-icon,
.sidebar-link.active .sidebar-link-icon {
opacity: 1;
}
.sidebar-link::after {
content: "";
position: absolute;
left: 1%;
bottom: 0;
width: 90%;
height: 1px;
background: linear-gradient(
to right,
#4e4e4e 0%,
#ccc 70%,
transparent 100%
);
}
/* Hover */
.sidebar-link:hover {
background: var(--sidebar-hover);
color: var(--header-text);
}
/* Activ */
.sidebar-link.active {
background: var(--sidebar-active-bg);
color: var(--sidebar-active-text);
font-weight: 600;
}
/* Overlay pentru mobile */
.sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
z-index: 1049;
backdrop-filter: blur(2px);
}
.sidebar-overlay.visible {
display: block;
}
/* ── Mobile ── */
@media (max-width: 860px) {
.vs-head { display: none; }
.vs-row {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"date date"
"loc loc"
"pkg amount"
"valid valid"
"inv method"
"status status"
"notes notes";
}
.vs-col-date { grid-area: date; }
.vs-col-loc { grid-area: loc; }
.vs-col-pkg { grid-area: pkg; }
.vs-col-amount { grid-area: amount; text-align: right; }
.vs-col-valid { grid-area: valid; }
.vs-col-inv { grid-area: inv; }
.vs-col-method { grid-area: method; text-align: right; }
.vs-col-status { grid-area: status; }
.vs-col-notes { grid-area: notes; }
}
@media (max-width: 600px) {
.vs-filter-bar { flex-direction: column; }
.vs-filter-group, .vs-filter-group--wide { min-width: 100%; }
.vs-stats { grid-template-columns: 1fr 1fr; }
}
.page-row{display:flex;align-items:center;gap:.75rem;padding:.6rem 1rem;border-radius:8px;background:#fff;margin:3px 0;transition:background .2s; border: 1px solid #a4a4a4;}
.page-row:hover{background:#a5ddff; }
.page-drag-handle{cursor:grab;color:#556;padding:0 4px;font-size:1.1rem;user-select:none;flex-shrink:0}
.page-drag-handle:active{cursor:grabbing}
.page-row-icon{font-size:1.2rem;min-width:26px;text-align:center;flex-shrink:0}
.page-row-info{flex:1;min-width:0;overflow:hidden}
.page-row-title{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-row-meta{font-size:.75rem;color:#888;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-row-meta code{font-size:.72rem;background:rgba(255,255,255,.07);padding:1px 4px;border-radius:3px}
.page-row-actions{display:flex;gap:.35rem;align-items:center;flex-shrink:0}
.modal-box.modal-xl{max-width:820px;width:96%}
.modal-lang-tabs{display:flex;flex-wrap:wrap;gap:.25rem;margin:.75rem 0 0;border-bottom:2px solid #1e3040;padding-bottom:.4rem;}
.modal-lang-tab{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#889;padding:.32rem .85rem;border-radius:5px 5px 0 0;cursor:pointer;font-size:.81rem;transition:background .15s,color .15s;border-bottom:2px solid transparent;margin-bottom:-2px;font-family:'FlagEmoji','Segoe UI',sans-serif;}
.modal-lang-tab:hover{background:rgba(79,142,247,.12);color:#ccd;}
.modal-lang-tab.active{background:rgba(79,142,247,.18);color:#7cf;border-color:#4f8ef7;font-weight:600;}
/* ── Span-uri pentru flag/name/code în toate tab-urile de limbă ── */
.lang-tab-code { display: none; }
.lang-tab-name { display: inline; }
.lang-tab-def { display: inline; }
@media (max-width: 600px) {
/* Pe mobile: ascunde numele complet, arată doar codul (RO, EN, DE) */
.lang-tab-name { display: none; }
.lang-tab-code { display: inline; }
.lang-tab-def { display: none; }
/* Toate clasele de butoane tab-limbă → 44px touch target, spațiere */
.modal-lang-tab,
.lang-tab-btn,
.prod-lang-tab-btn,
.loc-lang-tab-btn {
padding: .5rem .7rem;
font-size: .82rem;
min-height: 44px;
display: inline-flex;
align-items: center;
gap: .3rem;
}
/* Containerele de tab-uri → mai mult spațiu între butoane */
.modal-lang-tabs,
.lang-tabs {
gap: .4rem;
flex-wrap: wrap;
}
}
.modal-lang-panel{display:none;padding-top:.75rem;}
.modal-lang-panel.active{display:block;}
.modal-translate-row{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;}
.modal-ts{font-size:.77rem;padding:.2rem .55rem;border-radius:4px;background:rgba(255,255,255,.05);color:#667;display:none;}
.modal-ts.visible{display:inline-block;}
.modal-ts.ok{color:#4a8;background:rgba(74,170,130,.12);}
.modal-ts.err{color:#e05252;background:rgba(224,82,82,.1);}
.modal-ts.info{color:#7cf;background:rgba(79,142,247,.12);}
.no-pages{padding:.8rem 1rem;color:#556;font-style:italic;font-size:.88rem}
.tables-missing{background:rgba(220,80,40,.1);border:1px solid rgba(220,80,40,.4);border-radius:10px;padding:1.5rem 2rem;margin:2rem 0;color:#ecc}
.tables-missing pre{background:rgba(0,0,0,.3);padding:1rem;border-radius:6px;overflow-x:auto;margin:.75rem 0;font-size:.78rem;color:#cde;white-space:pre-wrap;word-break:break-all}
.nav-cat-label, .nav-page-link { color: #cbd5e0; }
/* ── Light theme overrides ── */
[data-theme="light"] .nav-cat-label, [data-theme="light"] .nav-page-link { color: #5b5b5b; }
[data-theme="light"] .stat-card { background: #ffffff; border-color: #e5e7eb; }
[data-theme="light"] .stat-card.accent-green { border-color: rgba(34,197,94,.5); }
[data-theme="light"] .stat-card.accent-red { border-color: rgba(239,68,68,.5); }
[data-theme="light"] .stat-card.accent-blue { border-color: rgba(59,130,246,.5); }
[data-theme="light"] .stat-card.accent-yellow { border-color: rgba(234,179,8,.5); }
[data-theme="light"] .stat-label { color: #6b7280; }
[data-theme="light"] .stat-value { color: #111827; }
[data-theme="light"] .stat-sub { color: #9ca3af; }
[data-theme="light"] .vs-filter-bar { background: #f9fafb; border-color: #e5e7eb; }
[data-theme="light"] .vs-filter-group label { color: #6b7280; }
[data-theme="light"] .vs-filter-group input[type="date"],
[data-theme="light"] .vs-filter-group select { background: #fff; border-color: #d1d5db; color: #111827; }
[data-theme="light"] .vs-row { background: #ffffff; border-color: #e5e7eb; color: #111827; }
[data-theme="light"] .vs-row:hover { background: #f0f7ff; border-color: #93c5fd; }
[data-theme="light"] .vs-head { background: #f8fafc !important; border-color: #e5e7eb !important; }
[data-theme="light"] .vs-head:hover { background: #f8fafc !important; border-color: #e5e7eb !important; }
[data-theme="light"] .vs-sub { color: #9ca3af; }
[data-theme="light"] .vs-muted { color: #d1d5db; }
[data-theme="light"] .vs-col-notes { color: #9ca3af; border-top-color: #e5e7eb; }
[data-theme="light"] .loc-id-badge { background: rgba(59,130,246,.1); }
[data-theme="light"] .pagination a, [data-theme="light"] .pagination span { background: #fff; border-color: #e5e7eb; color: #374151; }
[data-theme="light"] .pagination a:hover { background: #eff6ff; border-color: #93c5fd; }
[data-theme="light"] .sidebar-section { background: #fff !important; }
[data-theme="light"] .feat-card { background: #fff !important; }
[data-theme="light"] .empty-state { background: #fff !important; border: 1px solid !important; }
[data-theme="light"] .main-header .main-nav li.dropdown > .dropdown-menu { background: #fff !important;}
/* ── Language tab buttons (translation) ── */
.btn-translate {
padding: 4px 12px;
border-radius: 6px;
border: 1px solid #3a4a5a;
background: #1e2a38;
font-family: 'FlagEmoji', 'Segoe UI', sans-serif;
color: #e0eaf5;
cursor: pointer;
font-size: .85rem;
display: flex;
align-items: center;
gap: 5px;
transition: background .15s, border-color .15s;
}
.btn-translate.active { background: #1a72b8; border-color: #1a72b8; }
.btn-translate:hover:not(.active) { background: #263a50; border-color: #4a6a8a; }
[data-theme="light"] .btn-translate { background: #e8edf2; border-color: #c0cdd8; color: #1e293b; }
[data-theme="light"] .btn-translate.active { background: #1a72b8; border-color: #1a72b8; color: #fff; }
[data-theme="light"] .btn-translate:hover:not(.active) { background: #d4dde8; border-color: #94a3b8; }
/* ── Auto-translate AI button ── */
.btn-auto-translate {
margin-left: auto;
white-space: nowrap;
background: #0f2a18;
border-color: #1e5c30;
color: #5dd87e;
}
.btn-auto-translate:hover:not(:disabled) { background: #163a22; border-color: #2a7a42; color: #7feaa0; }
.btn-auto-translate:disabled { opacity: .45; cursor: not-allowed; }
.btn-auto-translate.hidden { display: none !important; }
[data-theme="light"] .btn-auto-translate { background: #e8f5ec; border-color: #7bc98f; color: #1a5e2e; }
[data-theme="light"] .btn-auto-translate:hover:not(:disabled) { background: #d2edda; border-color: #4a9a62; color: #14472a; }
/* ── Scan options (import_menu_ocr) ── */
.scan-options-box { margin-top: 1.5rem; padding: 1rem; background: #111c27; border-radius: 8px; border: 1px solid #1e3448; }
[data-theme="light"] .scan-options-box { background: #f0f4f8; border-color: rgba(0,0,0,.1); }
.scan-options-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: .75rem; }
@media (max-width: 600px) { .scan-options-row { grid-template-columns: 1fr; } }
.scan-options-row label { font-size: .8rem; color: #8aa0b4; display: block; margin-bottom: .3rem; }
.scan-options-row select { width: 100%; background: #1a2a3a; color: #e0eaf5; border: 1px solid #2a3a4a; border-radius: 6px; padding: .45rem .7rem; font-size: .9rem; }
[data-theme="light"] .scan-options-row label { color: #4b6070; }
[data-theme="light"] .scan-options-row select { background: #fff; color: #1e293b; border-color: #c8d5e0; }
[data-theme="light"] .sidebar-section-title { background: #a5ddff; }
/* ── products.php — search bar ── */
.products-search-wrap {
background: #272d33;
border-radius: 12px;
padding: 1.5rem;
margin-top: 1rem;
margin-bottom: 1.5rem;
}
.products-search-input {
padding: .75rem 1rem;
font-size: 1rem;
border: 1px solid #3a3f44;
border-radius: 8px;
width: 100%;
background: #1d2328;
color: #ccc;
box-sizing: border-box;
}
.products-search-input:focus {
outline: none;
border-color: #4f8ef7;
color: #e0e3e7;
}
[data-theme="light"] .products-search-wrap {
background: #f1f5f9;
border: 1px solid #e2e8f0;
}
[data-theme="light"] .products-search-input {
background: #fff;
border-color: #cbd5e1;
color: #1e293b;
}
[data-theme="light"] .products-search-input:focus {
border-color: #3b82f6;
color: #1e293b;
}
/* ── products.php — chips, cards, subcategory ── */
[data-theme="light"] .chip {
background: #f1f5f9;
border-color: #cbd5e1;
color: #374151;
}
[data-theme="light"] .pmchip-off {
background: #f1f5f9;
border-color: #cbd5e1;
color: #94a3b8;
}
[data-theme="light"] .pmchip-off strong { color: #94a3b8; }
[data-theme="light"] .pmchip-on {
background: #f0fdf4;
border-color: #86efac;
color: #166534;
}
[data-theme="light"] .pmchip-on strong { color: #15803d; }
[data-theme="light"] .chip-price {
background: #eff6ff;
color: #1e638c;
}
[data-theme="light"] .subcategory-wrapper {
border-color: #e2e8f0;
}
[data-theme="light"] .subcat-header-card {
background: #f1f5f9;
border-bottom-color: #e2e8f0;
}
[data-theme="light"] .product-card:hover {
background: #f0f7ff;
border-color: #3b82f6;
}
[data-theme="light"] .product-thumb-wrap {
background: #f1f5f9;
border-color: #e2e8f0;
}
/* ── Light theme divider ── */
[data-theme="light"] .loc-media-divider {
background: linear-gradient(to bottom,
transparent,
rgba(0, 0, 0, .18) 22%,
rgba(0, 0, 0, .18) 78%,
transparent);
}
/* ============================================================
LOC FORM CONTAINER — mobile layout (locations.php)
============================================================ */
@media (max-width: 768px) {
/* Header becomes a wrapping flex column on mobile */
.loc-form-container .category-card-header {
flex-wrap: wrap;
gap: 0;
padding: 0.5rem 0.75rem;
}
/* Row 1: hide drag handle */
.loc-form-container .cat-drag-handle {
display: none;
}
/* Row 1: logo (compact thumbnail) */
.loc-form-container .loc-logo-thumb {
order: 2;
width: 110px;
height: 80px;
flex-shrink: 0;
border-radius: 8px;
}
/* Row 1: title info (full-width, above everything else) */
.loc-form-container .category-card-info {
order: 1;
width: 100%;
flex: none;
padding: 0.3rem 0 0.2rem;
}
/* Row 5: toggle arrow — full width, centered, below buttons */
.loc-form-container .toggle-icon {
order: 5;
width: 100%;
text-align: center;
position: static !important;
right: auto !important;
padding: 0.2rem 0;
font-size: 0.85rem;
opacity: 0.55;
}
/* Row 3: vertical fade divider — shown on mobile */
.loc-form-container .loc-media-divider {
display: block;
order: 3;
width: 1px;
align-self: stretch;
margin: 2px 0.55rem;
flex-shrink: 0;
}
/* Row 4: buttons area */
.loc-form-container .category-card-right {
order: 4;
flex: 1;
width: auto;
flex-wrap: wrap;
align-content: flex-start;
justify-content: flex-start;
gap: 0.4rem;
padding: 0.3rem 0;
}
/* Keep buttons as 42×42 icon squares */
.loc-form-container .category-card-right .btn {
width: 42px;
height: 42px;
min-width: 42px;
min-height: 42px;
padding: 0;
}
}
[data-theme="light"] .cat-drag-handle,
[data-theme="light"] .sub-drag-handle { color: #94a3b8; }
/* ============================================================
SVG BUTTON ICON SYSTEM (mask-image)
Folosire: adaugă clasa btn-ico + ico-XXX pe buton
Ex: Adaugă
============================================================ */
.btn-ico {
display: inline-flex !important;
align-items: center;
gap: 0.4em;
}
.btn-ico::before {
content: '';
flex-shrink: 0;
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
}
/* ── Iconițe ── */
.ico-add::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.ico-back::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 5l-7 7 7 7'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 5l-7 7 7 7'/%3E%3C/svg%3E");
}
.ico-edit::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E");
}
.ico-trash::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3C/svg%3E");
}
.ico-save::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2zM17 21v-8H7v8M7 3v5h8'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2zM17 21v-8H7v8M7 3v5h8'/%3E%3C/svg%3E");
}
.ico-eye::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.ico-check::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.ico-x::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}
.ico-search::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}
.ico-download::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E");
}
.ico-upload::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E");
}
.ico-refresh::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8M21 3v5h-5M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16M3 21v-5h5'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8M21 3v5h-5M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16M3 21v-5h5'/%3E%3C/svg%3E");
}
.ico-camera::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E");
}
.ico-palette::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22C6.49 22 2 17.51 2 12S6.49 2 12 2s10 4.04 10 9c0 3.31-2.69 6-6 6h-1.77c-.28 0-.5.22-.5.5 0 .12.05.23.13.33.41.47.64 1.06.64 1.67A2.5 2.5 0 0 1 12 22z'/%3E%3Ccircle cx='8.5' cy='9' r='1.5' fill='black' stroke='none'/%3E%3Ccircle cx='15.5' cy='9' r='1.5' fill='black' stroke='none'/%3E%3Ccircle cx='12' cy='5.5' r='1.5' fill='black' stroke='none'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22C6.49 22 2 17.51 2 12S6.49 2 12 2s10 4.04 10 9c0 3.31-2.69 6-6 6h-1.77c-.28 0-.5.22-.5.5 0 .12.05.23.13.33.41.47.64 1.06.64 1.67A2.5 2.5 0 0 1 12 22z'/%3E%3Ccircle cx='8.5' cy='9' r='1.5' fill='black' stroke='none'/%3E%3Ccircle cx='15.5' cy='9' r='1.5' fill='black' stroke='none'/%3E%3Ccircle cx='12' cy='5.5' r='1.5' fill='black' stroke='none'/%3E%3C/svg%3E");
}
.ico-grid::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
}
.ico-qr::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='5' height='5' rx='1'/%3E%3Crect x='16' y='3' width='5' height='5' rx='1'/%3E%3Crect x='3' y='16' width='5' height='5' rx='1'/%3E%3Cpath d='M21 16h-3a2 2 0 0 0-2 2v3M21 21v.01M12 7v3a2 2 0 0 1-2 2H7M3 12h.01M12 3h.01M12 16v.01M16 12h1M21 12v.01M12 21v-1'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='5' height='5' rx='1'/%3E%3Crect x='16' y='3' width='5' height='5' rx='1'/%3E%3Crect x='3' y='16' width='5' height='5' rx='1'/%3E%3Cpath d='M21 16h-3a2 2 0 0 0-2 2v3M21 21v.01M12 7v3a2 2 0 0 1-2 2H7M3 12h.01M12 3h.01M12 16v.01M16 12h1M21 12v.01M12 21v-1'/%3E%3C/svg%3E");
}
.ico-info::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
}
.ico-warning::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
}
.ico-settings::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E");
}
.ico-leaf::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E");
}
.ico-list::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E");
}
.ico-fork::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2M7 2v20M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3zm0 0v7'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2M7 2v20M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3zm0 0v7'/%3E%3C/svg%3E");
}
.ico-users::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
.ico-filter::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E");
}
.ico-play::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'/%3E%3C/svg%3E");
}
.ico-smartphone::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
}
.ico-translate::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 6 6M4 14l6-6 2-3M2 5h12M7 2h1M22 22l-5-10-5 10M14 18h6'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 6 6M4 14l6-6 2-3M2 5h12M7 2h1M22 22l-5-10-5 10M14 18h6'/%3E%3C/svg%3E");
}
.ico-fullscreen::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M16 21h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M16 21h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3'/%3E%3C/svg%3E");
}
/* ── Nav / sidebar icons ── */
.ico-home::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
}
.ico-dashboard::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1'/%3E%3C/svg%3E");
}
.ico-products::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 4.27 9 5.15M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5M12 22V12'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 4.27 9 5.15M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5M12 22V12'/%3E%3C/svg%3E");
}
.ico-orders::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E");
}
.ico-locations::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
.ico-tables::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M3 15h18M9 3v18'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M3 15h18M9 3v18'/%3E%3C/svg%3E");
}
.ico-reports::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3Cline x1='2' y1='20' x2='22' y2='20'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3Cline x1='2' y1='20' x2='22' y2='20'/%3E%3C/svg%3E");
}
.ico-logs::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10 9 9 9 8 9'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10 9 9 9 8 9'/%3E%3C/svg%3E");
}
.ico-general::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpolyline points='13 2 13 9 20 9'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpolyline points='13 2 13 9 20 9'/%3E%3C/svg%3E");
}
.ico-admin::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}
.ico-profile::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E");
}
.ico-moon::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
}
.ico-sun::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41'/%3E%3C/svg%3E");
}
/* ── manager_registrations: pending payment card ── */
.pending-card-row { display:flex; align-items:center; gap:.75rem; width:100%; }
.pending-card-info { flex:1; min-width:0; }
.pending-actions { display:flex; gap:.5rem; flex-shrink:0; flex-wrap:wrap; }
.billing-info-box {
background: rgba(148,163,184,.07);
border: 1px solid rgba(148,163,184,.15);
border-radius: 8px;
padding: .65rem .9rem;
font-size: .8rem;
color: #94a3b8;
line-height: 1.7;
width: 100%;
box-sizing: border-box;
word-break: break-word;
overflow-wrap: break-word;
}
@media (max-width: 600px) {
.pending-card-row { flex-wrap: wrap; }
.pending-actions { width: 100%; }
.pending-actions .btn { flex: 1; justify-content: center; }
}
/* ── info-grid: key/value pairs (replaces ) ── */
.info-grid { display:grid; grid-template-columns:38% 1fr; font-size:.83rem; }
.info-label { color:#64748b; padding:.22rem .4rem; align-self:start; }
/* ── Iframe Modals (Toppings / Attrs / Allergens / Product Info) ── */
.ep-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:9000; align-items:center; justify-content:center; }
.ep-modal-box { background:var(--reg-bg,#1a1e23); border:1px solid #2a3a4a; border-radius:5px; width:min(800px,96vw); min-width:0; min-height:60vh; max-height:90vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 8px 40px rgba(0,0,0,.5); }
.ep-modal-box--wide { width:min(960px,97vw); min-width:0; max-height:94vh; }
.ep-modal-hdr { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1.1rem; border-bottom:1px solid #2a3a4a; flex-shrink:0; }
.ep-modal-title { font-weight:700; font-size:1.25rem; color:var(--text-color,#c8daf5); }
.ep-modal-close { background:none; border:none; color:#8aa7cf; font-size:1.4rem; cursor:pointer; line-height:1; padding:0 .25rem; }
.ep-modal-iframe { border:none; flex:1; width:100%; min-height:340px; }
.ep-modal-iframe--tall { min-height:420px; }
/* ── ep-modal mobile: bottom sheet ── */
@media (max-width: 600px) {
.ep-modal-overlay {
align-items: flex-end;
justify-content: flex-start;
padding: 0;
overflow: hidden;
}
.ep-modal-box,
.ep-modal-box--wide {
width: 100vw !important;
min-width: 0 !important;
max-width: 100vw !important;
max-height: 94vh !important;
min-height: 60vh;
border-radius: 10px 10px 0 0;
border-bottom: none;
overflow: hidden;
box-sizing: border-box;
left: 0 !important;
}
.ep-modal-hdr {
padding: .65rem 1rem;
min-height: 52px;
flex-shrink: 0;
}
.ep-modal-title { font-size: 1.15rem; }
.ep-modal-close {
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
flex-shrink: 0;
}
.ep-modal-iframe {
min-height: 60vh;
max-height: calc(94vh - 52px);
overflow-y: auto;
overflow-x: clip;
display: block;
width: 100%;
box-sizing: border-box;
}
}
.info-value { color:#cbd5e0; padding:.22rem .4rem; }
/* ═══════════════════════════════════════════════════════════════════════════
MANAGE ADMIN PAGES (manage_admin_pages.php)
═══════════════════════════════════════════════════════════════════════════ */
.map-grid { display: grid; grid-template-columns: 280px 1fr; gap: 1.5rem; align-items: start; }
.cat-list { display: flex; flex-direction: column; gap: .4rem; }
@media (max-width: 700px) {
.map-grid { grid-template-columns: 1fr; max-width: 100%; overflow-x: hidden; }
.map-grid > div { max-width: 100%; min-width: 0; }
.map-grid > div:nth-child(2) { order: -1; }
#subcats-panel { max-height: 55vh; }
.cat-list { max-height: 45vh; overflow-y: auto; }
}
@media (max-width: 900px) {
.perm-page-card .sub-card-right { flex-shrink: 0; }
.perm-page-card .sub-card-right .btn-text { display: none; }
.perm-page-card .sub-card-right .btn { padding: .2rem .35rem !important; min-width: 0; width: 30px; }
}
.cat-row { cursor: pointer; user-select: none; padding: .45rem .5rem !important; }
.cat-row-name { flex: 1; min-width: 0; font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-drag-handle { cursor: grab; opacity: .4; flex-shrink: 0; padding: 0 .15rem; }
.cat-row-count { font-size: .72rem; background: #4f8ef7; color: #fff; border-radius: 10px; padding: 1px 7px; flex-shrink: 0; }
.cat-row-icon { width: 20px; height: 20px; flex-shrink: 0; opacity: .8; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; }
.cat-row-icon .cat-slug-icon { width: 20px !important; height: 20px !important; }
/* ── Subcats panel: nu depășeste ecranul ── */
#subcats-panel { overflow-x: hidden; max-width: 100%; }
#subcats-panel .sub-card { max-width: 100%; min-width: 0; box-sizing: border-box; }
#subcats-panel .sub-card-left { min-width: 0; max-width: 100%; }
#subcats-panel .sub-card-info { min-width: 0; max-width: 100%; }
#subcats-panel .sub-card-name {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
word-break: break-word;
}
#subcats-panel .sub-card-slug code { word-break: break-all; }
.cat-row .btn-sm { padding: .2rem .3rem !important; min-width: 0; width: 28px; height: 28px; }
.cat-row.active { border-color: #4f8ef7 !important; }
.cat-row.drag-over { outline: 2px solid #4f8ef7 !important; background: rgba(79,142,247,.18) !important; transform: scale(1.02); transition: transform .1s, background .1s; }
.cat-row.drag-over .cat-row-name { color: #7eb8f7; font-weight: 700; }
.cat-row.drop-target-cat { outline: 1px dashed rgba(79,142,247,.3); }
.page-item.drag-over { outline: 2px dashed #4f8ef7; opacity: .7; }
#pages-panel { min-height: 200px; }
.page-icon { width: 28px; height: 28px; opacity: .75; }
.perm-page-card .sub-card-left { min-width: 160px; flex-shrink: 0; }
.perm-page-card .sub-card-center { flex: 1; min-width: 0; }
.perm-page-card .access-badges { flex-wrap: wrap; gap: .25rem; }
.badge-excluded { font-size: .65rem; border-radius: 4px; padding: 1px 6px; background: rgba(156,163,175,.15); color: var(--text-muted); }
[data-theme="light"] .badge-excluded { background: #e5e7eb; color: #4b5563; }
.access-badge { background: rgba(34,197,94,.15); color: #4ade80; }
.access-badge.user-badge { background: rgba(168,85,247,.15); color: #c084fc; }
[data-theme="light"] .access-badge { background: #d4edda; color: #155724; }
[data-theme="light"] .access-badge.user-badge { background: #e9d8fd; color: #6b21a8; }
.badge-svg-icon { display:inline-block; width:12px; height:12px; vertical-align:middle; margin-right:3px; margin-top:-1px; background:currentColor; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; }
.badge-svg-icon.ico-roles { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.badge-svg-icon.ico-user1 { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.badge-svg-icon.ico-save { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2zM17 21v-8H7v8M7 3v5h8'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2zM17 21v-8H7v8M7 3v5h8'/%3E%3C/svg%3E"); }
.map-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 5000; align-items: center; justify-content: center; }
.map-modal-overlay.open { display: flex; }
.map-modal { width: 600px; max-width: 95vw; max-height: 90vh; overflow-y: auto; margin: 0 !important; }
#perm-modal .perm-box { background: rgba(255,255,255,.03); }
#perm-modal .perm-box-footer { background: rgba(255,255,255,.05) !important; }
#perm-modal .perm-check-item { color: #e2eaf5; }
#perm-modal .role-group-label { color: #8a9bb5; }
#perm-modal .perm-box-header, #perm-modal .perm-box-header.users-header { background: rgba(255,255,255,.08); color: #e2eaf5; border-bottom: 1px solid rgba(255,255,255,.1); font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
[data-theme="light"] #perm-modal .perm-box { background: #f8fafc; }
[data-theme="light"] #perm-modal .perm-box-footer { background: #f1f5f9 !important; }
[data-theme="light"] #perm-modal .perm-check-item { color: #374151; }
[data-theme="light"] #perm-modal .role-group-label { color: #6b7280; }
[data-theme="light"] #perm-modal .perm-box-header, [data-theme="light"] #perm-modal .perm-box-header.users-header { background: rgba(0,0,0,.05); color: #374151; }
.excl-badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:.72rem; font-weight:600; margin-left:.3rem; }
.excl-badge.navbar { background:rgba(234,179,8,.15); color:#fbbf24; }
.excl-badge.dashboard { background:rgba(14,165,233,.15); color:#38bdf8; }
[data-theme="light"] .excl-badge.navbar { background:#fff3cd; color:#856404; }
[data-theme="light"] .excl-badge.dashboard { background:#d1ecf1; color:#0c5460; }
.role-group-label { padding:.4rem 1rem .1rem; font-size:.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.8px; font-weight:600; }
.exclude-group { background:rgba(255,193,7,.07); border:1px solid rgba(255,193,7,.3); border-radius:8px; padding:.75rem 1rem; }
.exclude-group label { display:flex; align-items:center; gap:.6rem; cursor:pointer; font-size:.9rem; padding:.3rem 0; }
.exclude-group label input { width:16px; height:16px; accent-color:#f0a500; }
.exclude-group-title { font-size:.8rem; font-weight:700; color:#856404; text-transform:uppercase; letter-spacing:.5px; margin-bottom:.5rem; }
.pkg-select-wrap { display:flex; flex-direction:column; gap:.3rem; }
.pkg-select-info { font-size:.78rem; color:var(--text-muted); }
.modal-section-divider { border:none; border-top:1px solid var(--border-color); margin:1rem 0 .75rem; }
.checkbox-label { display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; font-size:.9rem; width:fit-content; }
.lang-tabs { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1rem; }
.lang-tab { padding: .3rem .7rem; border-radius: 6px; border: 1px solid var(--border-color); background: transparent; cursor: pointer; font-size: .8rem; color: var(--text-muted); }
.lang-tab.active { background: var(--accent, #4f8ef7); color: #fff; border-color: var(--accent, #4f8ef7); }
.lang-panel { display: none; }
.lang-panel.active { display: block; }
.translate-all-btn { font-size: .75rem; padding: .25rem .6rem; }
#translate-status, #translate-pg-status { font-size: .75rem; color: var(--text-muted); margin-left: .5rem; }
/* ============================================================================
LOCATION PICKER CARD (products, tables, menu_pdf, import_ocr, translations)
============================================================================ */
.loc-picker-card{display:block;padding:1.1rem 1.4rem;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);text-decoration:none;transition:border-color .18s,transform .15s,background .15s;}
.loc-picker-card:hover{border-color:rgba(74,158,221,.6);background:rgba(74,158,221,.08);transform:translateY(-2px);}
.loc-picker-name{font-weight:600;font-size:.97rem;margin-bottom:.2rem;color:#e2eaf5;}
.loc-picker-city{font-size:.8rem;color:#8ba8c4;}
[data-theme="light"] .loc-picker-card{background:#f4f7fa;border-color:rgba(0,0,0,.1);}
[data-theme="light"] .loc-picker-card:hover{border-color:#3a7bbf;background:#e8f1f9;}
[data-theme="light"] .loc-picker-name{color:#1e293b;}
[data-theme="light"] .loc-picker-city{color:#4b5563;}
/* ============================================================================
CATEGORY ICON (edit_cat_subcat, edit_location_types, edit_pages)
============================================================================ */
.cat-icon-thumb{width:70px !important;height:70px !important;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cat-icon-big{font-size:2rem;line-height:1;}
.cat-slug-icon{width:44px;height:44px;object-fit:contain;display:block;filter:brightness(0) invert(.78);}
.cat-slug-icon.sub-ico{width:26px;height:26px;}
[data-theme="light"] .cat-slug-icon{filter:brightness(0) invert(.28);}
/* ============================================================================
LOCALE BADGE (edit_cat_subcat, edit_location_types, edit_pages)
============================================================================ */
.locale-badge{display:inline-block;font-size:.68rem;padding:1px 6px;border-radius:3px;background:rgba(74,170,130,.15);color:#4a8;margin-left:4px;vertical-align:middle;}
.locale-badge--full{background:rgba(74,170,130,.25);color:#2a7;font-weight:600;}
/* ============================================================================
LANG TAB BUTTON (product_toppings, products_allergens, edit_product_attrs, includes)
============================================================================ */
.lang-tab-btn{background:#253047;border:1px solid #2a3e5e;border-radius:6px 6px 0 0;color:#8aa7cf;padding:.28rem .7rem;cursor:pointer;font-size:.84rem;transition:background .15s,color .15s;display:inline-flex;align-items:center;gap:.3rem;line-height:1.4;font-family:'FlagEmoji','Segoe UI',sans-serif;}
.lang-tab-btn:hover{background:#2d3e58;color:#c8daf5;}
.lang-tab-btn.active{background:#1a5ea8;color:#fff;border-color:#1a5ea8;}
.lang-default-badge{background:#f0c040;color:#1a1e23;font-size:.62rem;padding:.04rem .28rem;border-radius:3px;font-weight:700;letter-spacing:.03em;}
[data-theme="light"] .lang-tab-btn{background:#e3e4e7;border-color:#cbd5e1;color:#404d61;}
[data-theme="light"] .lang-tab-btn:hover{background:#d0d8e4;}
[data-theme="light"] .lang-tab-btn.active{background:#1a5ea8;color:#fff;}
/* ============================================================================
UTILITIES (manage_category_attrs, edit_product_attrs)
============================================================================ */
.sub-card-container{display:flex;flex-wrap:wrap;}
.label-color{color:#978834 !important;}
/* ── Slug row (edit_pages.php) ── */
.prod-slug-row{display:flex;gap:.4rem;align-items:center;}
.prod-slug-row input{flex:1;margin:0;}
.prod-slug-status{font-size:.75rem;margin-top:.2rem;display:block;min-height:1rem;}
/* ============================================================================
MODAL BOX EXTRA SIZES
============================================================================ */
.modal-box.modal-xl{max-width:820px;width:96%;}
/* ============================================================================
CHAT WIDGET (includes/chat_widget.php — inclus în fiecare pagină admin)
============================================================================ */
.cw-wrap {
--cw-bg: #202124; --cw-surface: #292a2d; --cw-surface2: #35363a;
--cw-hover: #3c4043; --cw-border: #3c4043; --cw-text: #e8eaed;
--cw-text2: #9aa0a6; --cw-blue: #8ab4f8; --cw-blue-bg: #1a3250;
--cw-green: #81c995; --cw-red: #f28b82;
--cw-font: 'Google Sans','Roboto',sans-serif;
font-family: var(--cw-font);
}
#cw-fab {
position: fixed; bottom: 28px; right: 28px; width: 56px; height: 56px;
border-radius: 50%; background: #1a73e8; color: #fff; border: none;
cursor: pointer; display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,.5); z-index: 9998;
transition: background .15s, transform .15s;
}
#cw-fab:hover { background: #1557b0; transform: scale(1.07); }
#cw-fab-badge {
position: absolute; top: -4px; right: -4px; background: #ef4444; color: #fff;
font-size: .65rem; font-weight: 700; border-radius: 999px; padding: 1px 5px;
min-width: 18px; text-align: center;
}
#cw-window {
position: fixed; bottom: 96px; right: 28px; width: 360px; height: 520px;
background: var(--cw-bg); border: 1px solid var(--cw-border); border-radius: 16px;
box-shadow: 0 8px 32px rgba(0,0,0,.6); display: none; flex-direction: column;
z-index: 9999; overflow: hidden; font-family: var(--cw-font);
}
#cw-window.open { display: flex; }
.cw-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--cw-surface2); border-bottom: 1px solid var(--cw-border); flex-shrink: 0; }
.cw-header-title { flex: 1; font-size: .9rem; font-weight: 600; color: var(--cw-text); }
.cw-header-back { background: none; border: none; color: var(--cw-text2); cursor: pointer; font-size: 1rem; padding: 2px 6px; border-radius: 4px; display: none; }
.cw-header-back:hover { background: var(--cw-hover); color: var(--cw-text); }
.cw-close-btn { background: none; border: none; color: var(--cw-text2); cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 2px 6px; border-radius: 4px; }
.cw-close-btn:hover { background: var(--cw-hover); color: var(--cw-text); }
#cw-users-panel { flex: 1; overflow-y: auto; }
.cw-user-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; cursor: pointer; border-bottom: 1px solid var(--cw-border); transition: background .1s; }
.cw-user-row:hover { background: var(--cw-hover); }
.cw-user-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cw-user-avatar-ini { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .78rem; font-weight: 700; flex-shrink: 0; }
.cw-user-info { flex: 1; min-width: 0; }
.cw-user-name { font-size: .875rem; font-weight: 500; color: var(--cw-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-user-role { font-size: .72rem; color: var(--cw-text2); }
.cw-user-badge { background: #ef4444; color: #fff; font-size: .65rem; font-weight: 700; border-radius: 999px; padding: 1px 6px; min-width: 18px; text-align: center; }
.cw-empty-users { padding: 2rem 1rem; text-align: center; color: var(--cw-text2); font-size: .85rem; }
.cw-section-label { padding: 6px 16px 4px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--cw-text2); border-bottom: 1px solid var(--cw-border); background: var(--cw-surface); }
.cw-online-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--cw-bg); position: absolute; bottom: 1px; right: 1px; flex-shrink: 0; }
.cw-online-dot.online { background: #34a853; }
.cw-online-dot.offline { background: #9aa0a6; }
#cw-chat-panel { flex: 1; display: none; flex-direction: column; min-height: 0; }
#cw-chat-panel.open { display: flex; }
#cw-messages { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.cw-msg { display: flex; flex-direction: column; max-width: 80%; }
.cw-msg.mine { align-self: flex-end; align-items: flex-end; }
.cw-msg.theirs { align-self: flex-start; align-items: flex-start; }
.cw-msg-bubble { padding: 8px 12px; border-radius: 18px; font-size: .875rem; line-height: 1.4; word-break: break-word; }
.cw-msg.mine .cw-msg-bubble { background: #1a73e8; color: #fff; border-bottom-right-radius: 4px; }
.cw-msg.theirs .cw-msg-bubble { background: var(--cw-surface2); color: var(--cw-text); border-bottom-left-radius: 4px; }
.cw-msg-meta { font-size: .68rem; color: var(--cw-text2); margin-top: 2px; padding: 0 4px; }
.cw-msg-date-separator { text-align: center; font-size: .7rem; color: var(--cw-text2); padding: 4px 0; align-self: center; }
.cw-input-wrap { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--cw-border); background: var(--cw-surface); flex-shrink: 0; }
#cw-input { flex: 1; background: var(--cw-surface2); border: 1px solid var(--cw-border); border-radius: 20px; padding: 8px 14px; font-size: .875rem; color: var(--cw-text); resize: none; outline: none; max-height: 100px; min-height: 36px; font-family: var(--cw-font); line-height: 1.4; overflow-y: auto; }
#cw-input:focus { border-color: var(--cw-blue); }
#cw-input::placeholder { color: var(--cw-text2); }
#cw-send-btn { width: 36px; height: 36px; border-radius: 50%; background: #1a73e8; border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s; }
#cw-send-btn:hover { background: #1557b0; }
#cw-send-btn:disabled { background: var(--cw-hover); cursor: default; }
.cw-loading { text-align: center; padding: 1rem; color: var(--cw-text2); font-size: .8rem; }
.cw-btn-translate { background: none; border: 1px solid var(--cw-border); border-radius: 10px; padding: 1px 7px; font-size: .68rem; color: var(--cw-text2); cursor: pointer; margin-top: 3px; transition: all .15s; align-self: flex-start; }
.cw-btn-translate:hover:not(:disabled) { background: var(--cw-hover); color: var(--cw-text); }
.cw-btn-translate:disabled { opacity: .5; cursor: default; }
/* ============================================================================
TOUCH TARGETS MOBILE — minim 44px pe toate elementele interactive (≤768px)
https://developer.apple.com/design/human-interface-guidelines/accessibility
============================================================================ */
@media (max-width: 768px) {
/* ── Butoane ── */
.btn,
button.btn,
a.btn,
input[type="submit"],
input[type="button"],
input[type="reset"] {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Butoanele sm primesc și ele 44px pe mobile */
.btn-sm {
min-height: 44px;
font-size: .85rem;
}
/* Butoanele icon-only în liste (sub-card, cat-row): 44×44 */
.sub-card-right .btn,
.cat-row .btn-sm,
.category-card-right .btn {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
padding: 0;
}
/* ── Inputs text / select ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="color"],
input[type="month"],
input[type="week"],
select,
.search-filter,
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select {
min-height: 44px;
font-size: 16px; /* previne zoom automat pe iOS */
}
/* Toggle switch — mai mare pe mobile, centrat în label de 44px */
.checkbox-label input[type="checkbox"] {
width: 56px !important;
height: 30px !important;
min-width: 56px !important;
min-height: unset !important;
}
.checkbox-label input[type="checkbox"]::before {
width: 24px !important;
height: 24px !important;
left: 4px !important;
}
.checkbox-label input[type="checkbox"]:checked::before {
transform: translate(26px, -50%) !important;
}
/* ── Textarea ── */
textarea,
.form-group textarea {
min-height: 44px;
font-size: 16px;
}
/* ── Checkbox / Radio: target pe label ── */
.checkbox-label,
.admin-form .checkbox-label,
.form-group .checkbox-label,
label.tog,
.tog {
min-height: 44px;
display: inline-flex;
align-items: center;
gap: .5rem;
cursor: pointer;
}
/* Radio mai mare — zona activă e pe label */
input[type="radio"] {
width: 20px;
height: 20px;
min-width: 20px;
flex-shrink: 0;
cursor: pointer;
}
/* ── Tab-uri limbi (44px inclus în regula @600px de mai sus) ── */
.modal-lang-tab,
.lang-tab,
.lang-tab-btn,
.prod-lang-tab-btn,
.loc-lang-tab-btn {
min-height: 44px;
display: inline-flex;
align-items: center;
}
/* ── Modal close, delete, misc icon buttons ── */
.modal-close,
button[onclick*="close"],
.perm-box-footer .btn {
min-height: 44px;
min-width: 44px;
}
/* ── Nav admin tabs / filter chips ── */
.nav-tab,
.filter-chip-admin {
min-height: 44px;
display: inline-flex;
align-items: center;
}
/* ── Scan select (modal scanare) ── */
.scan-cat-sel {
min-height: 44px;
font-size: 16px;
}
/* ── Translate buttons ── */
.btn-translate,
.btn-auto-translate {
min-height: 44px;
display: inline-flex;
align-items: center;
}
/* ── Link-uri active (tabele, liste) ── */
a.btn-link,
td a,
.card-value a[href] {
min-height: 44px;
display: inline-flex;
align-items: center;
}
}
.cw-btn-translate.done { color: var(--cw-green); border-color: var(--cw-green); }