/* ============================================================
   Admin CSS Component Library
   Brand color is controlled via --brand-* custom properties.
   To change the accent color, edit ONLY the :root block below.
   ============================================================ */

:root {
    --brand-50:  #FDF8E8;   /* lightest tint */
    --brand-100: #FAF0C8;   /* light tint */
    --brand-500: #D4A017;   /* primary */
    --brand-600: #C8960C;   /* buttons, section headers */
    --brand-700: #B8860B;   /* hover */
    --brand-800: #9A7209;   /* active / pressed */
    --brand-400: #E0B840;   /* sidebar active submenu item */
    --brand-ring: rgba(212, 160, 23, 0.45); /* focus rings */
}

/* ─── Coupon Badge Glow ───────────────────────────────────── */
.coupon-badge-glow {
    box-shadow: 0 0 12px 2px rgba(212, 160, 23, 0.35);
}

/* ─── Buttons ──────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition: all 150ms ease;
    cursor: pointer;
    text-decoration: none;
    border: none;
    text-align: center;
}

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Primary (brand gold) */
.btn-primary {
    background-color: var(--brand-600);
    color: #fff;
}
.btn-primary:hover:not(:disabled) {
    background-color: var(--brand-700);
}
.btn-primary:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--brand-ring);
}

/* Secondary (gray) */
.btn-secondary {
    background-color: #f3f4f6;
    color: #374151;
}
.btn-secondary:hover:not(:disabled) {
    background-color: #e5e7eb;
}

/* Danger (red) */
.btn-danger {
    background-color: #dc2626;
    color: #fff;
}
.btn-danger:hover:not(:disabled) {
    background-color: #b91c1c;
}

/* Success (green) */
.btn-success {
    background-color: #16a34a;
    color: #fff;
}
.btn-success:hover:not(:disabled) {
    background-color: #15803d;
}

/* Size variants */
.btn-lg {
    padding: 0.625rem 1.5rem;
    font-size: 1rem;
}
.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    line-height: 1rem;
}
.btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    border-radius: 0.375rem;
}

/* ─── Utility: Brand background/hover (replaces Tailwind bg-blue-*) ── */
.bg-brand {
    background-color: var(--brand-600) !important;
}
.hover\:bg-brand-hover:hover {
    background-color: var(--brand-700) !important;
}
.text-brand {
    color: var(--brand-600) !important;
}
.hover\:text-brand:hover {
    color: var(--brand-700) !important;
}
.border-brand {
    border-color: var(--brand-500) !important;
}
.hover\:border-brand:hover {
    border-color: var(--brand-600) !important;
}
.bg-brand-light {
    background-color: var(--brand-50) !important;
}
.hover\:bg-brand-light:hover {
    background-color: var(--brand-100) !important;
}

/* ─── Utility: Brand focus ring (for legacy Tailwind inputs) ── */
.focus\:border-brand:focus {
    border-color: var(--brand-500) !important;
}
.focus\:ring-brand:focus {
    --tw-ring-color: var(--brand-ring) !important;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}

/* ─── Utility: Brand toggle (peer-checked) ────────────────── */
.peer:checked ~ .toggle-track-brand {
    background-color: var(--brand-600) !important;
}

/* ─── Info Box (neutral slate) ─────────────────────────────── */

:root {
    --info-bg:     #f8fafc;  /* slate-50 */
    --info-border: #94a3b8;  /* slate-400 */
    --info-border-light: #cbd5e1; /* slate-300 */
    --info-icon:   #94a3b8;  /* slate-400 */
    --info-text:   #334155;  /* slate-700 */
    --info-heading:#1e293b;  /* slate-800 */
}

.info-box {
    background-color: var(--info-bg) !important;
    border-left: 4px solid var(--info-border) !important;
    padding: 1rem;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.info-box-bordered {
    background-color: var(--info-bg) !important;
    border: 1px solid var(--info-border-light) !important;
    border-radius: 0.5rem;
    padding: 1rem;
}

.info-box-simple {
    background-color: var(--info-bg) !important;
    border-radius: 0.5rem;
    padding: 1rem;
}

.info-box-icon {
    color: var(--info-icon) !important;
}

.info-box-text {
    color: var(--info-text) !important;
}

.info-box-heading {
    color: var(--info-heading) !important;
}

/* ─── Action Icons ────────────────────────────────────────── */

.action-edit {
    color: #2563eb;            /* blue-600 */
    transition: color 150ms ease, background-color 150ms ease;
    padding: 0.25rem;
    border-radius: 0.25rem;
}

.action-edit:hover {
    color: #1e3a8a;            /* blue-900 */
    background-color: #eff6ff; /* blue-50 */
}

/* ─── Form Labels ──────────────────────────────────────────── */

/* Make all form field labels bold (overrides Tailwind font-medium) */
label.text-sm.font-medium.text-gray-700,
.text-sm.font-medium.text-gray-700 {
    font-weight: 700 !important;
}

/* ─── Table Headers ──────────────────────────────────────────── */

/* Make all table column headers bold */
th {
    font-weight: 700 !important;
}

/* ─── Form Inputs ──────────────────────────────────────────── */

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    background-color: #fff;
    color: #111827;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--brand-ring);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: #9ca3af;
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
    background-color: #f9fafb;
    cursor: not-allowed;
}

.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
    border-color: #dc2626;
}

/* ─── Section Headers (price-plans style) ──────────────────── */

.section-header {
    font-size: 1.125rem;
    font-weight: 500;
    color: #fff;
    background-color: var(--brand-600);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
}

/* ─── Sidebar Navigation ───────────────────────────────────── */

.submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.submenu.open {
    max-height: 500px;
}

.bracket-left, .bracket-right {
    position: absolute;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.bracket-left {
    left: 8px;
}
.bracket-right {
    right: 8px;
}
.submenu-item:hover .bracket-left,
.submenu-item:hover .bracket-right,
.submenu-item.active .bracket-left,
.submenu-item.active .bracket-right {
    opacity: 1;
}

@media (max-width: 768px) {
    #mobile-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    #mobile-sidebar.open {
        transform: translateX(0);
    }
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    transition: background-color 150ms ease;
}
.sidebar-link:hover {
    background-color: var(--brand-600);
}
.sidebar-link.active {
    background-color: var(--brand-600);
}
.sidebar-link.active:hover {
    background-color: var(--brand-700);
}

.sidebar-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    transition: background-color 150ms ease;
}
.sidebar-btn:hover {
    background-color: var(--brand-600);
}
.sidebar-btn.active {
    background-color: var(--brand-600);
}
.submenu-item {
    position: relative;
    margin: 0.25rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.375rem;
    transition: background-color 150ms ease, border-color 150ms ease;
}
.submenu-item:hover {
    border-color: rgba(255, 255, 255, 0.25);
}
.submenu-item.active,
.submenu-item.sidebar-sub-item.active {
    border-color: rgba(255, 255, 255, 0.3);
}

.sidebar-sub-item.active {
    background-color: var(--brand-400);
}

/* ─── Cards ────────────────────────────────────────────────── */

.card {
    background-color: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid #f3f4f6;
    overflow: hidden;
}

.card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f3f4f6;
}

.card-body {
    padding: 1.5rem;
}

/* ─── Badge ────────────────────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

.badge-success { background-color: #dcfce7; color: #166534; }
.badge-danger  { background-color: #fee2e2; color: #991b1b; }
.badge-warning { background-color: #fef9c3; color: #854d0e; }
.badge-info    { background-color: #dbeafe; color: #1e40af; }
.badge-gray    { background-color: #f3f4f6; color: #374151; }

/* ─── Table base ───────────────────────────────────────────── */

.admin-table {
    width: 100%;
    font-size: 0.875rem;
}
.admin-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}
.admin-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
}
.admin-table tbody tr:hover {
    background-color: #f9fafb;
}

/* ─── Booking Selection Pages ──────────────────────────────── */

/* Selected badge on rental/extra cards */
.selected-badge.badge-brand {
    background-color: var(--brand-600) !important;
    color: #fff;
}

/* "Selected" button state on rental/extra cards */
.selected-btn.btn-brand-selected {
    background-color: var(--brand-600) !important;
    border-color: var(--brand-600) !important;
    color: #fff;
}

/* Extra card selected state */
.extra-card.is-selected {
    border-color: var(--brand-500) !important;
    background-color: #fffbeb !important; /* warm light tint */
}

/* Email input saved state */
.email-input-saved {
    background-color: #fffbeb !important;
    border-color: var(--brand-500) !important;
}

/* Email button saved state */
.email-btn-saved {
    background-color: var(--brand-700) !important;
}
.email-btn-saved:hover {
    background-color: var(--brand-800) !important;
}

/* Coupon text */
.text-coupon {
    color: var(--brand-600) !important;
}

/* Discounted price text */
.text-discount {
    color: var(--brand-600) !important;
}

/* Duration discount badge header */
.discount-badge-header {
    background-color: #fffbeb !important;
    border-color: var(--brand-400) !important;
    color: var(--brand-800) !important;
}

/* Duration discount icon circle */
.discount-icon-circle {
    background-color: #fffbeb !important;
}
.discount-icon-circle svg {
    color: var(--brand-600) !important;
}

/* Duration discount value text */
.text-discount-value {
    color: var(--brand-600) !important;
}

/* Rental header in extras page */
.rental-header-bar {
    background-color: #1e293b; /* slate-800 */
}
.rental-header-bar .rental-avatar {
    border-color: rgba(255,255,255,0.25);
    background-color: #334155; /* slate-700 */
}
.rental-header-bar .rental-avatar-placeholder {
    background-color: #334155; /* slate-700 */
}
.rental-header-bar .rental-qty {
    color: rgba(255,255,255,0.5);
}
.rental-header-bar .rental-subtitle {
    color: rgba(255,255,255,0.6);
}

/* Extra no-icon fallback */
.extra-icon-fallback {
    background-color: #fffbeb !important;
}
.extra-icon-fallback svg {
    color: var(--brand-600) !important;
}