/* OneEventHub — Brand styles
   One Event Group official palette:
   Teal:   #3BA981  (primary)
   Grey:   #A3A09F  (secondary)
   Salmon: #F3966B  (accent)
   Dark:   #383533  (text, navbar)
*/

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600&family=Inter:wght@300;400;500;600&display=swap');

:root {
    --oe-teal: #3BA981;
    --oe-teal-dark: #2d8a68;
    --oe-teal-light: #e8f5ef;
    --oe-teal-10: rgba(59, 169, 129, 0.1);
    --oe-grey: #A3A09F;
    --oe-grey-light: #f0efef;
    --oe-salmon: #F3966B;
    --oe-salmon-light: #fef0ea;
    --oe-dark: #383533;
    --oe-dark-soft: #4a4744;
    --oe-bg: #f7f7f6;
    --oe-white: #ffffff;
    --oe-border: #e8e6e4;
    --oe-radius: 10px;
    --oe-shadow-sm: 0 1px 3px rgba(56, 53, 51, 0.06);
    --oe-shadow-md: 0 4px 12px rgba(56, 53, 51, 0.08);
    --oe-shadow-lg: 0 8px 24px rgba(56, 53, 51, 0.1);

    /* Status colors (Deals) */
    --oe-status-received: #3BA981;
    --oe-status-pending: #A3A09F;
    --oe-status-confirmed: #2d6fa3;
    --oe-status-invoiced: #7B5EA7;
    --oe-status-cancelled: #c0392b;
    --oe-status-postponed: #F3966B;
    --oe-status-declined: #A3A09F;
}

body {
    background-color: var(--oe-bg);
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    color: var(--oe-dark);
    font-size: 0.9rem;
}

/* ── Brand utilities ──────────────────────────── */
.text-teal { color: var(--oe-teal) !important; }
.text-salmon { color: var(--oe-salmon) !important; }
.text-oe-grey { color: var(--oe-grey) !important; }
.text-oe-dark { color: var(--oe-dark) !important; }
.bg-teal { background-color: var(--oe-teal) !important; }
.bg-salmon { background-color: var(--oe-salmon) !important; }

/* ── Hero Banner / Navbar ─────────────────────── */
.navbar-oe {
    background: url('/static/img/zueco 1.jpg') center 65% / 40% auto no-repeat;
    background-color: var(--oe-dark);
    position: relative;
    padding: 0;
    box-shadow: var(--oe-shadow-lg);
}
.navbar-oe::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(56, 53, 51, 0.7) 0%,
        rgba(56, 53, 51, 0.55) 50%,
        rgba(59, 169, 129, 0.25) 100%
    );
    z-index: 1;
}
.navbar-oe > * {
    position: relative;
    z-index: 2;
}

.navbar-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 20px 18px;
    gap: 6px;
}

.navbar-logo {
    height: 70px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

.navbar-app-name {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    font-size: 1.8rem;
    color: var(--oe-white);
    letter-spacing: 6px;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.navbar-oe .navbar-brand {
    text-decoration: none;
}
.navbar-oe .navbar-brand:hover .navbar-app-name {
    color: var(--oe-teal);
    transition: color 0.3s;
}

.navbar-stats-bar {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(4px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.stat-pill {
    background: rgba(255, 255, 255, 0.15);
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    transition: all 0.2s;
    letter-spacing: 0.3px;
}
.stat-pill:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}
.stat-pill.active {
    background: #fff !important;
    color: var(--oe-teal) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.stat-pill .stat-num {
    color: var(--oe-white);
    font-weight: 600;
}

/* ── Buttons ──────────────────────────────────── */
.btn-teal {
    background-color: var(--oe-teal);
    border-color: var(--oe-teal);
    color: white;
    border-radius: 8px;
    font-weight: 500;
}
.btn-teal:hover {
    background-color: var(--oe-teal-dark);
    border-color: var(--oe-teal-dark);
    color: white;
}

.btn-salmon {
    background-color: var(--oe-salmon);
    border-color: var(--oe-salmon);
    color: white;
    border-radius: 8px;
}
.btn-salmon:hover {
    background-color: #e8875e;
    border-color: #e8875e;
    color: white;
}

.btn-outline-teal {
    border: 1.5px solid var(--oe-border);
    color: var(--oe-dark-soft);
    font-size: 0.78rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.15s ease;
}
.btn-outline-teal:hover {
    border-color: var(--oe-teal);
    color: var(--oe-teal);
    background-color: var(--oe-teal-10);
}
.btn-outline-teal.active {
    background-color: var(--oe-teal);
    border-color: var(--oe-teal);
    color: white;
}

/* ── Filter panel ─────────────────────────────── */
.filter-card {
    border: none;
    border-radius: var(--oe-radius);
    box-shadow: var(--oe-shadow-sm);
    background: var(--oe-white);
}
.filter-card .card-title {
    color: var(--oe-dark);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.filter-card .form-label {
    color: var(--oe-grey) !important;
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.filter-card .form-select,
.filter-card .form-control {
    border-color: var(--oe-border);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--oe-dark);
}
.filter-card .form-select:focus,
.filter-card .form-control:focus {
    border-color: var(--oe-teal);
    box-shadow: 0 0 0 3px var(--oe-teal-10);
}
.filter-card .form-check-input:checked {
    background-color: var(--oe-teal);
    border-color: var(--oe-teal);
}

/* ── Supplier list ────────────────────────────── */
.supplier-list {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    padding-right: 4px;
}

.supplier-card {
    cursor: pointer;
    border: 1px solid var(--oe-border);
    border-radius: var(--oe-radius);
    padding: 14px 16px;
    margin-bottom: 6px;
    background: var(--oe-white);
    transition: all 0.15s ease;
}
.supplier-card:hover {
    border-color: var(--oe-teal);
    box-shadow: var(--oe-shadow-md);
    transform: translateY(-1px);
}
.supplier-card.selected {
    border-color: var(--oe-teal);
    border-width: 2px;
    background-color: var(--oe-teal-light);
}

.supplier-card .supplier-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--oe-dark);
}
.supplier-card .supplier-meta {
    font-size: 0.78rem;
    color: var(--oe-grey);
    margin-top: 2px;
}
.supplier-card .supplier-badge {
    font-size: 0.68rem;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 6px;
}

/* ── Category icons — using brand palette ─────── */
.cat-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.cat-hotel      { background: var(--oe-teal-light); color: var(--oe-teal); }
.cat-restaurant { background: var(--oe-salmon-light); color: var(--oe-salmon); }
.cat-venue      { background: #f3eef8; color: #7c3aed; }
.cat-activity   { background: #e8f5ef; color: #059669; }
.cat-transport  { background: var(--oe-grey-light); color: var(--oe-dark-soft); }

/* Category badge colors */
.badge-hotel      { background: var(--oe-teal-light) !important; color: var(--oe-teal) !important; }
.badge-restaurant { background: var(--oe-salmon-light) !important; color: var(--oe-salmon) !important; }
.badge-venue      { background: #f3eef8 !important; color: #7c3aed !important; }
.badge-activity   { background: #e8f5ef !important; color: #059669 !important; }
.badge-transport  { background: var(--oe-grey-light) !important; color: var(--oe-dark-soft) !important; }

/* ── Detail panel ─────────────────────────────── */
.detail-card {
    border: none;
    border-radius: var(--oe-radius);
    box-shadow: var(--oe-shadow-sm);
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    background: var(--oe-white);
}

.detail-header {
    background: linear-gradient(135deg, var(--oe-teal), var(--oe-teal-dark));
    color: white;
    padding: 24px;
    border-radius: var(--oe-radius);
    margin: 12px;
    position: relative;
    overflow: hidden;
}
.detail-header::after {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
}
.detail-header .detail-category {
    font-size: 0.75rem;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.detail-header h5 {
    font-weight: 600;
    margin-top: 4px;
}

.detail-section-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--oe-grey);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--oe-teal-light);
}

.detail-field-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--oe-grey);
    margin-bottom: 1px;
}
.detail-field-value {
    font-weight: 500;
    font-size: 0.88rem;
    color: var(--oe-dark);
}

/* ── Service rows ─────────────────────────────── */
.services-container {
    border: 1px solid var(--oe-border);
    border-radius: 8px;
    overflow: hidden;
}
.service-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--oe-border);
    font-size: 0.85rem;
    transition: background 0.1s;
}
.service-row:last-child {
    border-bottom: none;
}
.service-row:hover {
    background: var(--oe-bg);
}
.service-name {
    color: var(--oe-dark);
    font-weight: 500;
}
.service-remarks {
    font-size: 0.75rem;
    color: var(--oe-grey);
}
.service-price {
    font-weight: 600;
    color: var(--oe-teal);
    white-space: nowrap;
    font-size: 0.9rem;
}

/* ── Stars ────────────────────────────────────── */
.stars {
    color: var(--oe-salmon);
    letter-spacing: -1px;
}

/* ── Preferred ────────────────────────────────── */
.preferred-star {
    color: var(--oe-salmon);
}
.badge-preferred {
    background: var(--oe-salmon) !important;
    color: white !important;
    font-size: 0.7rem;
    font-weight: 500;
}

/* ── Empty state ──────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--oe-grey);
}
.empty-state i {
    font-size: 2.5rem;
    color: var(--oe-border);
    margin-bottom: 12px;
}

/* ── Scrollbar ────────────────────────────────── */
.supplier-list::-webkit-scrollbar,
.detail-card::-webkit-scrollbar {
    width: 5px;
}
.supplier-list::-webkit-scrollbar-track,
.detail-card::-webkit-scrollbar-track {
    background: transparent;
}
.supplier-list::-webkit-scrollbar-thumb,
.detail-card::-webkit-scrollbar-thumb {
    background: var(--oe-border);
    border-radius: 3px;
}
.supplier-list::-webkit-scrollbar-thumb:hover,
.detail-card::-webkit-scrollbar-thumb:hover {
    background: var(--oe-grey);
}

/* ── CRUD Modal ───────────────────────────────── */
#supplierModal .modal-content {
    border: none;
    border-radius: var(--oe-radius);
    box-shadow: var(--oe-shadow-lg);
}
#supplierModal .modal-title {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    color: var(--oe-dark);
}
#supplierModal .form-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--oe-grey);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
#supplierModal .form-control,
#supplierModal .form-select {
    border-color: var(--oe-border);
    border-radius: 8px;
    font-size: 0.85rem;
}
#supplierModal .form-control:focus,
#supplierModal .form-select:focus {
    border-color: var(--oe-teal);
    box-shadow: 0 0 0 3px var(--oe-teal-10);
}

/* Hotel detail panel sections */
.hotel-detail-section {
    background: rgba(59, 169, 129, 0.04);
    border-left: 3px solid var(--oe-teal);
    border-radius: 0 8px 8px 0;
    padding: 8px 12px;
}
.bg-salmon {
    background-color: var(--oe-salmon) !important;
    color: #fff;
}
.bg-teal {
    background-color: var(--oe-teal) !important;
    color: #fff;
}

/* Hotel grouped sections in form (Rooms, Meeting Rooms) */
.hotel-section {
    background: var(--oe-teal-10, rgba(59, 169, 129, 0.06));
    border-left: 3px solid var(--oe-teal);
    border-radius: 0 8px 8px 0;
    padding: 10px 14px;
}

/* Default service in detail panel */
.service-default {
    background: rgba(59, 169, 129, 0.06);
    border-left: 3px solid var(--oe-teal);
}

/* Default radio in service edit row */
.svc-default-wrap {
    min-width: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.svc-default-wrap .form-check-input {
    margin: 0;
    cursor: pointer;
}
.svc-default-wrap .form-check-input:checked {
    background-color: var(--oe-teal);
    border-color: var(--oe-teal);
}

.service-edit-row {
    animation: fadeIn 0.15s ease;
}
.svc-drag-handle {
    cursor: grab;
    color: var(--oe-grey);
    font-size: 1.1rem;
    padding: 0 2px;
    user-select: none;
}
.svc-drag-handle:active { cursor: grabbing; }
.svc-drag-ghost {
    opacity: 0.4;
    background: var(--oe-teal-light);
    border-radius: 6px;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.btn-outline-danger {
    border-color: var(--oe-border);
    color: var(--oe-grey);
    border-radius: 8px;
}
.btn-outline-danger:hover {
    border-color: #dc3545;
    color: #dc3545;
    background: rgba(220, 53, 69, 0.06);
}

#deleteModal .modal-content {
    border: none;
    border-radius: var(--oe-radius);
}

/* ── Map button ───────────────────────────────── */
.btn-map {
    border: 1.5px solid var(--oe-border);
    color: var(--oe-dark-soft);
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.15s;
}
.btn-map:hover {
    border-color: var(--oe-teal);
    color: var(--oe-teal);
    background: var(--oe-teal-10);
}

/* ── Status badges (Deals) — on-brand colors ─── */
.status-badge {
    font-size: 0.70rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #fff;
}
.status-received  { background-color: var(--oe-status-received); }
.status-pending   { background-color: var(--oe-status-pending); }
.status-confirmed { background-color: var(--oe-status-confirmed); }
.status-invoiced  { background-color: var(--oe-status-invoiced); }
.status-cancelled { background-color: var(--oe-status-cancelled); }
.status-postponed { background-color: var(--oe-status-postponed); }
.status-declined  { background-color: var(--oe-status-declined); opacity: 0.7; }