/* =========================================
   SeatKit Admin Styles (Free Core)
   ========================================= */

:root {
    --sk-primary: #0f172a;
    --sk-accent: #3b82f6;
    --sk-bg: #f8fafc;
    --sk-card: #ffffff;
    --sk-border: #e2e8f0;
    --sk-text: #334155;
    --sk-text-light: #64748b;
    --sk-success: #10b981;
    --sk-danger: #ef4444;
    --sk-warning: #f59e0b;
}

/* =========================================
   1. SHARED STYLES (Dashboard, Trips, Bookings)
   ========================================= */

/* Main Wrapper */
.seatkit-admin-wrapper { 
    max-width: 100%; 
    margin: 20px 20px 0 0; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    color: var(--sk-text); 
    box-sizing: border-box;
}

/* Cards */
.seatkit-card { 
    background: var(--sk-card); 
    border-radius: 8px; 
    border: 1px solid var(--sk-border); 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); 
    margin-bottom: 24px; 
    overflow: hidden; 
}
.seatkit-card-header { padding: 15px 20px; border-bottom: 1px solid var(--sk-border); background: #fcfcfc; }
.seatkit-card-header h2 { margin: 0; font-size: 14px; font-weight: 700; color: var(--sk-primary); }
.seatkit-card-body { padding: 20px; }
.seatkit-card-body.p-0 { padding: 0; }

/* Grid System */
.seatkit-dashboard-grid { display: flex; gap: 24px; flex-wrap: wrap; }
.seatkit-grid-main { flex: 2; min-width: 60%; }
.seatkit-grid-side { flex: 1; min-width: 300px; }

/* Badges (Status Indicators) */
.sk-badge { 
    display: inline-block; padding: 4px 8px; border-radius: 4px; 
    font-size: 10px; font-weight: 700; text-transform: uppercase; line-height: 1; 
}
.sk-badge.success, .sk-badge.confirmed, .sk-badge.paid { background: #dcfce7; color: #166534; }
.sk-badge.warning, .sk-badge.pending { background: #fef3c7; color: #92400e; }
.sk-badge.danger, .sk-badge.cancelled, .sk-badge.expired { background: #fee2e2; color: #991b1b; }
.sk-badge.neutral, .sk-badge.unpaid { background: #f1f5f9; color: #64748b; }

/* Form Helpers */
.seatkit-admin-wrapper .widefat { border-radius: 6px; padding: 8px 12px; border-color: #cbd5e1; }
.seatkit-admin-wrapper label { font-weight: 600; font-size: 13px; color: var(--sk-text); }

/* Buttons */
.seatkit-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 600;
    text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: all 0.2s;
}
.seatkit-btn.primary { background: var(--sk-primary); color: #fff; }
.seatkit-btn.primary:hover { background: #1e293b; }


/* =========================================
   2. SEAT BUILDER STYLES (Scoped)
   ========================================= */

/* Header Area */
.sk-builder-header { 
    display: flex; justify-content: space-between; align-items: center; 
    background: #fff; padding: 12px 20px; 
    border: 1px solid var(--sk-border); border-bottom: none;
    border-radius: 8px 8px 0 0;
}
.sk-builder-header .sk-title-input { 
    font-size: 16px; font-weight: 700; border: none !important; 
    background: transparent; padding: 0 !important; box-shadow: none !important; width: 300px; 
}

/* Main Container */
.sk-builder-container { 
    display: flex; height: 80vh; min-height: 600px; 
    background: #fff; border: 1px solid var(--sk-border); 
    border-radius: 0 0 8px 8px; overflow: hidden; position: relative;
    font-size: 13px;
}

/* Custom Inputs INSIDE Builder Only */
.sk-builder-container input[type="text"], 
.sk-builder-container input[type="number"], 
.sk-builder-container select {
    border: 1px solid #cbd5e1; border-radius: 6px; padding: 6px 10px; 
    width: 100%; box-sizing: border-box; height: auto;
}

/* Sidebar (Toolkit) */
.sk-builder-sidebar { 
    width: 260px; background: #fff; border-right: 1px solid var(--sk-border); 
    display: flex; flex-direction: column; flex-shrink: 0; z-index: 20; overflow-y: auto;
}
.sk-panel { border-bottom: 1px solid var(--sk-border); padding: 15px; }
.sk-panel-header { 
    font-size: 11px; font-weight: 700; text-transform: uppercase; 
    color: var(--sk-text-light); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; 
}

/* Grid Generator Inputs */
.sk-grid-inputs { display: flex; gap: 10px; margin-bottom: 10px; }
.sk-input-group { flex: 1; }
.sk-input-group label { display: block; font-size: 10px; font-weight: 700; color: var(--sk-text-light); margin-bottom: 4px; }

/* Draggable Tools (Hidden in Free Core unless Pro injects logic) */
.sk-tools-grid { 
    display: none;
    grid-template-columns: repeat(3, 1fr); gap: 10px; 
}
.sk-tool-item { 
    background: #f8fafc; border: 1px solid var(--sk-border); border-radius: 6px; 
    padding: 12px 5px; text-align: center; cursor: grab; transition: all 0.2s; 
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.sk-tool-item:hover { border-color: var(--sk-accent); background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.sk-tool-item span { font-size: 10px; color: var(--sk-text); margin-top: 5px; font-weight: 500; }
.sk-tool-item .dashicons { font-size: 20px; width: 20px; height: 20px; color: var(--sk-text-light); }

/* Sidebar Actions */
.sk-sidebar-actions { padding: 20px; margin-top: auto; border-top: 1px solid var(--sk-border); }

/* Canvas */
.sk-builder-canvas-wrapper { 
    flex: 1; background: #f1f5f9; position: relative; 
    overflow: auto; 
}
#seatkit-builder-canvas { 
    width: 100%; height: 100%; min-width: 100%; min-height: 100%;
    position: absolute; top: 0; left: 0;
    background-color: #f1f5f9;
    /* Clean Dot Grid */
    background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
    background-size: 20px 20px;
    transform-origin: 0 0;
}

/* Canvas Items */
.canvas-item { 
    position: absolute !important; 
    width: 44px; height: 44px; 
    border-radius: 8px; display: flex; align-items: center; justify-content: center; 
    font-size: 14px; font-weight: 600; cursor: pointer; user-select: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: box-shadow 0.1s;
    z-index: 10; background: #fff;
}
.canvas-item.selected { box-shadow: 0 0 0 2px var(--sk-accent), 0 4px 8px rgba(0,0,0,0.1); z-index: 50; }

/* Item Types */
.canvas-item.type-seat { background: #fff; border: 1px solid #94a3b8; color: var(--sk-primary); }
.canvas-item.type-seat:hover { border-color: var(--sk-accent); color: var(--sk-accent); }
.canvas-item.type-driver { background: #e2e8f0; border: 2px dashed #94a3b8; color: #64748b; border-radius: 50%; }
.canvas-item.type-aisle { background: transparent; border: 1px dashed #cbd5e1; box-shadow: none; pointer-events: none; }

/* Badges on Items */
.canvas-item .sk-badge {
    position: absolute; top: -6px; right: -6px; background: var(--sk-success); color: #fff;
    font-size: 9px; padding: 2px 4px; border-radius: 4px; font-weight: 700; line-height: 1; z-index: 20;
}
.canvas-item.has-category::after {
    content: ''; position: absolute; bottom: 4px; width: 4px; height: 4px; background: var(--sk-accent); border-radius: 50%;
}

/* Properties Sidebar (Slide-in) */
.sk-properties-sidebar { 
    width: 280px; background: #fff; border-left: 1px solid var(--sk-border); 
    display: flex; flex-direction: column; position: relative; z-index: 30;
    box-shadow: -2px 0 10px rgba(0,0,0,0.03); 
    margin-right: -280px; /* Hidden by default */
    transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sk-properties-sidebar:not(.hidden) { margin-right: 0; }
.sk-properties-sidebar.hidden { margin-right: -280px; }

.sk-props-header { padding: 15px; border-bottom: 1px solid var(--sk-border); display: flex; justify-content: space-between; align-items: center; }
.sk-props-header h3 { margin: 0; font-size: 14px; }
.sk-props-body { padding: 20px; flex: 1; overflow-y: auto; }
.sk-prop-group { margin-bottom: 15px; }
.sk-prop-group label { display: block; font-size: 11px; font-weight: 700; margin-bottom: 5px; color: var(--sk-text-light); }

/* Buttons inside Props */
.sk-full-btn { width: 100%; justify-content: center; margin-top: 8px; }
.button.link-delete { color: var(--sk-danger); background: none; border: none; padding: 0; text-decoration: underline; cursor: pointer; margin-top: 10px; }


/* =========================================
   3. DASHBOARD & KPI STYLES (Added for Fix)
   ========================================= */

/* Header Wrapper */
.seatkit-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

/* KPI Cards Row */
.seatkit-kpi-row {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.seatkit-kpi {
    flex: 1;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--sk-border);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    transition: transform 0.2s, box-shadow 0.2s;
}

.seatkit-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.kpi-icon .dashicons { font-size: 24px; width: 24px; height: 24px; }

/* Icon Colors */
.kpi-icon.icon-blue   { background: #eff6ff; color: #3b82f6; }
.kpi-icon.icon-green  { background: #f0fdf4; color: #10b981; }
.kpi-icon.icon-purple { background: #faf5ff; color: #a855f7; }

.kpi-content { flex: 1; }
.kpi-val { font-size: 24px; font-weight: 700; color: var(--sk-primary); line-height: 1.2; }
.kpi-label { font-size: 13px; color: var(--sk-text-light); font-weight: 500; }

/* Dashboard Upsell Banner */
.seatkit-upsell-banner {
    text-align: center;
    padding: 40px 20px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.seatkit-upsell-banner .upsell-icon {
    width: 64px; height: 64px; background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 15px;
}
.seatkit-upsell-banner h3 { margin: 0 0 8px 0; font-size: 18px; color: var(--sk-primary); }
.seatkit-upsell-banner p { margin: 0 0 20px 0; color: var(--sk-text-light); max-width: 320px; font-size: 14px; line-height: 1.5; }

/* Minimal Table Styles for Side Widget */
.seatkit-table-minimal th { border-bottom: 1px solid #e2e8f0; font-size: 12px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 12px 15px; }
.seatkit-table-minimal td { vertical-align: middle; padding: 12px 15px; color: #334155; }
.seatkit-table-minimal .row-meta { font-size: 11px; color: #94a3b8; margin-top: 2px; }

/*Booking panel style*/
/* Admin UI Enhancements */
.sk-filter-bar {
    background: #fff; padding: 15px; border: 1px solid #e2e8f0; border-radius: 8px;
    display: flex; gap: 15px; align-items: center; margin-bottom: 20px; box-shadow: 0 1px 2px rgba(0,0,0,0.02); flex-wrap: wrap;
}
.sk-filter-group { display: flex; align-items: center; gap: 8px; }
.sk-filter-group select, .sk-filter-group input { border-color: #cbd5e1; border-radius: 4px; color: #334155; }

.sk-customer-meta { display: flex; align-items: center; gap: 10px; }
.sk-customer-avatar { width: 32px; height: 32px; background: #f1f5f9; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #64748b; font-weight: 700; font-size: 12px; }

/* Seat Selector Grid */
#sk-availability-selector { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 8px; max-height: 250px; overflow-y: auto; padding: 15px; background: #fff; border: 1px solid #c3c4c7; border-radius: 4px; margin-top: 5px; }

.sk-available-seat-tag { display: flex; align-items: center; justify-content: center; height: 36px; border-radius: 4px; font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; transition: all 0.1s ease; border: 1px solid #dcdcde; }

/* Available State */
.sk-seat-available { background: #f6f7f7; color: #2c3338; }
.sk-seat-available:hover { background: #f0f0f1; border-color: #2271b1; color: #2271b1; }

/* Selected State */
.sk-available-seat-tag.sk-selected-admin { background: #2271b1 !important; color: #fff !important; border-color: #2271b1 !important; box-shadow: inset 0 2px 4px rgba(0,0,0,0.15); }

/* Taken/Disabled State */
/* This visually grays out the seat and disables interaction */
.sk-seat-taken { background: #dcdcdc; color: #a0a5aa; cursor: not-allowed; border-color: #dcdcdc; opacity: 0.6; pointer-events: none; }

.sk-seat-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.sk-seat-badge { background: #f0f0f1; border: 1px solid #dcdcde; border-radius: 3px; padding: 2px 6px; font-size: 11px; }
.button-link-delete { color: #b32d2e !important; }
.button-link-delete:hover { background: #b32d2e !important; color: #fff !important; }