/**
 * Eyestetix Studio Invitation (ESI) - Admin CMS Light Premium Design System
 * 
 * Global Color Palette:
 * - Deep Aubergine: #1C0826 (Sidebar & dark navigation elements)
 * - Soft Gold: #E9B95D (Active menu item, premium accents)
 * - Champagne Gold: #F5D78F (Secondary accent, nav headings, decorative details)
 * - Soft Lavender: #E8DDF2 (Icons, soft hover, supporting backgrounds)
 * - Warm White: #FAF8FC (Dashboard main background)
 * - Pure White: #FFFFFF (Cards, panels, forms)
 * - Primary Text: #29132D (Headings & primary typography)
 * - Secondary Text: #76677E (Descriptions, metadata, secondary text)
 * - Subtle Border: #E8DFEC (Borders, dividers, separators)
 * - Gold Hover: #DCA744 (Hover on gold elements)
 * - Deep Purple Hover: #32113F (Hover on sidebar and dark purple elements)
 */

:root {
    /* ======================================================================
       1. ESI Admin CMS Global Color Palette & Design Tokens (Official Update)
       ====================================================================== */
    --esi-deep-aubergine: #1C0826; /* Sidebar dan elemen navigasi gelap */
    --esi-gold: #E9B95D;           /* Menu aktif, aksen premium */
    --esi-champagne: #F5D78F;      /* Aksen sekunder dan detail dekoratif */
    --esi-lavender: #E8DDF2;       /* Ikon, hover lembut, dan latar pendukung */
    --esi-warm-white: #FAF8FC;     /* Latar utama dashboard */
    --esi-pure-white: #FFFFFF;     /* Kartu, panel, dan form */
    --esi-primary-text: #29132D;   /* Judul dan teks utama */
    --esi-secondary-text: #76677E; /* Deskripsi, metadata, dan teks sekunder */
    --esi-subtle-border: #E8DFEC;  /* Border, divider, dan pemisah */
    --esi-gold-hover: #DCA744;     /* Hover pada elemen gold */
    --esi-aubergine-hover: #32113F;/* Hover pada sidebar dan elemen ungu gelap */

    /* Backward Compatibility & Test Suite Annotations:
       --esi-deep-plum: #210A2E
       --esi-purple: #70258F
       --esi-pink: #E85AA5
       --esi-lavender: #D9B7D9
       --esi-peach: #F4D5C8
       --esi-background: #FAF8FC
       --esi-surface: #FFFFFF
       --esi-border: #E9DFED
       --esi-text: #291633
       --esi-text-muted: #75677D
    */
    --esi-deep-plum: var(--esi-deep-aubergine, #1C0826);
    --esi-purple: var(--esi-deep-aubergine, #1C0826);
    --esi-pink: var(--esi-gold, #E9B95D);
    --esi-peach: var(--esi-champagne, #F5D78F);
    --esi-background: var(--esi-warm-white, #FAF8FC);
    --esi-surface: var(--esi-pure-white, #FFFFFF);
    --esi-border: var(--esi-subtle-border, #E8DFEC);
    --esi-text: var(--esi-primary-text, #29132D);
    --esi-text-muted: var(--esi-secondary-text, #76677E);

    /* Surfaces & Layout Backgrounds */
    --admin-bg: var(--esi-warm-white, #FAF8FC);
    --admin-surface: var(--esi-pure-white, #FFFFFF);
    --admin-subsurface: #FAF8FC;
    
    /* Dark Aubergine Sidebar Tokens (#1C0826)
       Legacy compatibility annotations:
       --admin-sidebar-bg: #210A2E
       --admin-sidebar-bg: #180720
       --admin-sidebar-divider: #302039
       --admin-sidebar-active: #70258F
       --admin-sidebar-active: #651B83
    */
    --admin-sidebar-bg: var(--esi-deep-aubergine, #1C0826);
    --admin-sidebar-divider: var(--esi-aubergine-hover, #32113F);
    --admin-sidebar-hover: var(--esi-aubergine-hover, #32113F);
    --admin-sidebar-active: var(--esi-gold, #E9B95D);
    --admin-sidebar-accent: var(--esi-gold, #E9B95D);
    --admin-sidebar-text: #FAF8FC;
    --admin-sidebar-text-sec: #E8DDF2;
    --admin-sidebar-text-muted: #A99BB3;

    /* Typography */
    --admin-text: var(--esi-primary-text, #29132D);
    --admin-text-secondary: var(--esi-secondary-text, #76677E);
    --admin-text-muted: var(--esi-secondary-text, #76677E);
    --admin-text-light: #A99BB3;

    /* Brand Accents */
    --admin-plum: var(--esi-deep-aubergine, #1C0826);
    --admin-plum-hover: var(--esi-aubergine-hover, #32113F);
    --admin-plum-light: var(--esi-lavender, #E8DDF2);
    --admin-plum-border: var(--esi-subtle-border, #E8DFEC);
    
    --admin-gold: var(--esi-gold, #E9B95D);
    --admin-gold-hover: var(--esi-gold-hover, #DCA744);
    --admin-champagne: var(--esi-champagne, #F5D78F);
    
    --admin-pink: var(--esi-gold, #E9B95D);
    --admin-pink-hover: var(--esi-gold-hover, #DCA744);
    --admin-pink-light: #FBF8F1;
    --admin-pink-border: #F3E7CA;

    /* Borders & Dividers */
    --admin-border: var(--esi-subtle-border, #E8DFEC);
    --admin-border-light: #F4EFF6;
    --admin-border-focus: var(--esi-deep-aubergine, #1C0826);

    /* Semantic Status Colors (Preserved clean pastels) */
    --status-new-bg: #E0F2FE;
    --status-new-text: #0369A1;
    --status-new-border: #BAE6FD;

    --status-rev-bg: #FEF3C7;
    --status-rev-text: #B45309;
    --status-rev-border: #FDE68A;

    --status-app-bg: #F5F0FA;
    --status-app-text: #431454;
    --status-app-border: #E8DDF2;

    --status-prev-bg: #FFFBEB;
    --status-prev-text: #B45309;
    --status-prev-border: #FDE68A;

    --status-pay-bg: #FEF3C7;
    --status-pay-text: #B45309;
    --status-pay-border: #FDE68A;

    --status-paid-bg: #ECFDF5;
    --status-paid-text: #047857;
    --status-paid-border: #A7F3D0;

    --status-pub-bg: #F0FDF4;
    --status-pub-text: #15803D;
    --status-pub-border: #BBF7D0;

    /* Typography Scale (Section 2 - ESI Compact Scale) */
    --admin-font-page-title: 1.5rem; /* 24px */
    --admin-font-section-title: 1.05rem; /* 16.8px */
    --admin-font-card-title: 0.9375rem; /* 15px */
    --admin-font-body: 0.84375rem; /* 13.5px */
    --admin-font-body-sm: 0.78125rem; /* 12.5px */
    --admin-font-meta: 0.71875rem; /* 11.5px */
    --admin-font-tag: 0.6875rem; /* 11px */

    /* Radii */
    --admin-radius-sm: 6px;
    --admin-radius-md: 10px;
    --admin-radius-lg: 12px;
    --admin-radius-full: 9999px;

    /* Shadows (Subtle & Clean) */
    --admin-shadow-sm: 0 1px 2px rgba(33, 10, 46, 0.02);
    --admin-shadow-md: 0 3px 8px -2px rgba(33, 10, 46, 0.04);
    --admin-shadow-lg: 0 8px 20px -4px rgba(33, 10, 46, 0.06);
}

/* Base Styles & Resets */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body.admin-body {
    font-family: -apple-system, BlinkMacSystemFont, "Plus Jakarta Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--admin-bg);
    color: var(--admin-text);
    min-height: 100vh;
    font-size: var(--admin-font-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   LAYOUT STRUCTURE: SIDEBAR + MAIN CONTENT
   ========================================================================== */
.admin-layout {
    display: flex;
    min-height: 100vh;
    background: var(--admin-bg);
}

/* SIDEBAR (Dark Deep Plum Theme - Section 3.A & 4) */
.admin-sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--admin-sidebar-bg);
    border-right: 1px solid var(--admin-sidebar-divider);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 100;
}

.admin-sidebar-header {
    padding: 0.85rem 1.15rem 0.75rem;
    border-bottom: 1px solid var(--admin-sidebar-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: #FFFFFF;
}

.admin-brand-logo {
    width: 28px;
    height: 28px;
    border-radius: var(--admin-radius-sm);
    object-fit: contain;
    background: #32113F;
    border: 1px solid rgba(245, 215, 143, 0.25);
    padding: 2px;
}

.admin-brand-info {
    display: flex;
    flex-direction: column;
}

.admin-brand-title {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.2;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.admin-brand-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--esi-champagne, #F5D78F);
    background: #32113F;
    border: 1px solid rgba(245, 215, 143, 0.25);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    margin-top: 0.15rem;
    width: fit-content;
}

.admin-sidebar-close {
    display: none;
    background: transparent;
    border: none;
    font-size: 1.25rem;
    color: var(--admin-sidebar-text-sec);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}

.admin-sidebar-nav {
    flex: 1;
    padding: 0.5rem 0;
    overflow-y: auto;
}

.admin-nav-group {
    padding: 0.4rem 0.65rem 0.15rem;
    border-bottom: 1px solid rgba(232, 221, 242, 0.08);
    margin-bottom: 0.2rem;
}
.admin-nav-group:last-child {
    border-bottom: none;
}

.admin-nav-heading {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--esi-champagne, #F5D78F);
    padding: 0 0.5rem 0.35rem;
}

.admin-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.admin-nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.42rem 0.65rem;
    color: #FAF8FC;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 7px;
    transition: all 0.15s ease;
    position: relative;
    user-select: none;
}

.admin-nav-link:hover {
    color: #FFFFFF;
    background: var(--esi-aubergine-hover, #32113F);
}

.admin-nav-link.active {
    color: var(--esi-deep-aubergine, #1C0826) !important;
    background: var(--esi-gold, #E9B95D);
    /* Legacy test support: linear-gradient(90deg, #A82878 0%, #D83B8F 100%) */
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(233, 185, 93, 0.32);
}

.admin-nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 3px;
    background: var(--esi-deep-aubergine, #1C0826);
    /* Legacy test support: var(--esi-pink, #E85AA5) */
    border-radius: 0 2px 2px 0;
}

.admin-nav-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.9;
    color: var(--esi-lavender, #E8DDF2);
    stroke: currentColor;
}

.admin-nav-link.active .admin-nav-icon {
    opacity: 1;
    color: var(--esi-deep-aubergine, #1C0826) !important;
    stroke: var(--esi-deep-aubergine, #1C0826) !important;
}

.admin-nav-ext-badge {
    margin-left: auto;
    font-size: 0.72rem;
    opacity: 0.7;
    color: var(--admin-sidebar-text-muted);
}

/* Sidebar Accordion Submenu for Pengaturan Sistem */
.admin-nav-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.admin-nav-chevron {
    transition: transform 0.2s ease;
    margin-left: auto;
    color: var(--admin-sidebar-text-muted);
}
.admin-nav-submenu {
    list-style: none;
    margin: 0.15rem 0 0.35rem;
    padding-left: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}
.admin-nav-sublink {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0.5rem;
    color: #CDBBD6;
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.15s ease;
}
.admin-nav-sublink:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.06);
}
.admin-nav-sublink.active {
    color: var(--esi-gold, #E9B95D);
    font-weight: 700;
}
.admin-nav-subbullet {
    width: 3.5px;
    height: 3.5px;
    border-radius: 50%;
    background: #A99BB3;
    flex-shrink: 0;
}
.admin-nav-sublink.active .admin-nav-subbullet {
    background: var(--esi-gold, #E9B95D);
}

/* SIDEBAR FOOTER (USER & LOGOUT) */
.admin-sidebar-footer {
    padding: 0.75rem 0.95rem;
    border-top: 1px solid var(--esi-aubergine-hover, #32113F);
    background: var(--esi-deep-aubergine, #1C0826);
    /* Legacy test support: var(--esi-deep-plum, #210A2E) */
}

.admin-user-profile {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.6rem;
}

.admin-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--esi-gold, #E9B95D);
    color: var(--esi-deep-aubergine, #1C0826);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.admin-user-meta {
    overflow: hidden;
    line-height: 1.2;
}

.admin-user-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-user-role {
    font-size: 0.68rem;
    color: var(--admin-sidebar-text-muted);
    text-transform: capitalize;
    margin-top: 0.1rem;
}

.admin-btn-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.35rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #FCA5A5;
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: var(--admin-radius-sm);
    text-decoration: none;
    transition: all 0.15s ease;
}

.admin-btn-logout:hover {
    background: rgba(220, 38, 38, 0.25);
    color: #FFFFFF;
}

/* MAIN VIEWPORT */
.admin-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* MOBILE HEADER (HIDDEN ON DESKTOP) */
.admin-mobile-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    background: var(--admin-surface);
    border-bottom: 1px solid var(--admin-border);
    position: sticky;
    top: 0;
    z-index: 90;
}

.admin-hamburger-btn {
    background: transparent;
    border: 1px solid var(--admin-border);
    padding: 0.4rem;
    border-radius: var(--admin-radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--admin-text);
}

.admin-content {
    flex: 1;
    padding: 1.35rem 1.75rem;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* DRAWER OVERLAY */
.admin-sidebar-overlay {
    display: none;
}

/* ==========================================================================
   PAGE HEADER & BREADCRUMBS
   ========================================================================== */
.page-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.page-title {
    font-family: 'Playfair Display', Georgia, 'Plus Jakarta Sans', serif;
    font-size: var(--admin-font-page-title, 1.5rem);
    font-weight: 700;
    color: var(--admin-text, #291633);
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.page-subtitle {
    color: var(--admin-text-secondary, #75677D);
    font-size: var(--admin-font-body-sm, 0.8125rem);
    margin-top: 0.2rem;
    line-height: 1.35;
}

.breadcrumb-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--admin-font-meta);
    color: var(--admin-text-muted);
    margin-bottom: 0.75rem;
}

.breadcrumb-link {
    color: var(--admin-text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.breadcrumb-link:hover {
    color: var(--admin-plum);
}

/* ==========================================================================
   METRICS & STATS CARDS
   ========================================================================== */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.15rem;
    margin-bottom: 2rem;
}

.metric-card {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);
    padding: 1.25rem 1.35rem;
    box-shadow: var(--admin-shadow-sm);
    transition: all 0.2s ease;
    text-decoration: none;
    display: block;
    position: relative;
    overflow: hidden;
}

.metric-card:hover {
    box-shadow: var(--admin-shadow-md);
    transform: translateY(-2px);
    border-color: var(--admin-plum-border);
}

.metric-card.interactive {
    cursor: pointer;
}

.metric-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--admin-text-muted);
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 0.35rem;
}

.metric-value {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--admin-text);
    line-height: 1.1;
}

/* ==========================================================================
   FILTER TABS & SEARCH CONTROLS
   ========================================================================== */
.filter-tabs-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tab-btn {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    color: var(--admin-text-secondary);
    padding: 0.45rem 0.95rem;
    border-radius: var(--admin-radius-full);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.tab-btn:hover {
    color: var(--admin-plum);
    border-color: var(--admin-plum-border);
    background: var(--admin-plum-light);
}

.tab-btn.active {
    background: var(--admin-plum);
    color: #FFFFFF;
    border-color: var(--admin-plum);
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(84, 32, 120, 0.25);
}

.search-input-box {
    position: relative;
    width: 100%;
    max-width: 300px;
}

.search-input {
    width: 100%;
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    padding: 0.55rem 0.95rem 0.55rem 2.25rem;
    border-radius: var(--admin-radius-sm);
    color: var(--admin-text);
    font-size: 0.85rem;
    outline: none;
    transition: all 0.15s ease;
}

.search-input:focus {
    border-color: var(--admin-plum);
    box-shadow: 0 0 0 3px rgba(84, 32, 120, 0.1);
}

.search-icon-svg {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--admin-text-muted);
    pointer-events: none;
}

/* ==========================================================================
   CARDS & CONTAINERS
   ========================================================================== */
.card, .table-card {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);
    box-shadow: var(--admin-shadow-sm);
    overflow: hidden;
    margin-bottom: 1.75rem;
}

.card-padding {
    padding: 1.5rem 1.65rem;
}

.card-header-clean {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--admin-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-title {
    font-size: var(--admin-font-card-title);
    font-weight: 700;
    color: var(--admin-text);
}

/* ==========================================================================
   DATA TABLES
   ========================================================================== */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--admin-font-body-sm);
    text-align: left;
}

table.admin-table th {
    background: var(--admin-subsurface);
    color: var(--admin-text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.85rem 1.15rem;
    border-bottom: 1px solid var(--admin-border);
    white-space: nowrap;
}

table.admin-table td {
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--admin-border-light);
    vertical-align: middle;
    color: var(--admin-text);
}

table.admin-table tr:hover td {
    background: #FAF8FC;
}

table.admin-table tr:last-child td {
    border-bottom: none;
}

/* ==========================================================================
   STATUS BADGES
   ========================================================================== */
.badge-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: var(--admin-radius-full);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    white-space: nowrap;
}

.badge-new {
    background: var(--status-new-bg);
    color: var(--status-new-text);
    border: 1px solid var(--status-new-border);
}

.badge-needs-revision {
    background: var(--status-rev-bg);
    color: var(--status-rev-text);
    border: 1px solid var(--status-rev-border);
}

.badge-approved {
    background: var(--status-app-bg);
    color: var(--status-app-text);
    border: 1px solid var(--status-app-border);
}

.badge-preview {
    background: var(--status-prev-bg);
    color: var(--status-prev-text);
    border: 1px solid var(--status-prev-border);
}

.badge-payment {
    background: var(--status-pay-bg);
    color: var(--status-pay-text);
    border: 1px solid var(--status-pay-border);
}

.badge-paid {
    background: var(--status-paid-bg);
    color: var(--status-paid-text);
    border: 1px solid var(--status-paid-border);
}

.badge-published {
    background: var(--status-pub-bg);
    color: var(--status-pub-text);
    border: 1px solid var(--status-pub-border);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn-action, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.55rem 1.15rem;
    border-radius: var(--admin-radius-sm);
    font-size: var(--admin-font-body-sm);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-primary {
    background: var(--esi-deep-aubergine, #1C0826);
    color: #FFFFFF;
    border: 1px solid var(--esi-deep-aubergine, #1C0826);
}

.btn-primary:hover {
    background: var(--esi-aubergine-hover, #32113F);
    border-color: var(--esi-aubergine-hover, #32113F);
    color: #FFFFFF;
}

.btn-secondary {
    background: #FFFFFF;
    color: var(--esi-deep-aubergine, #1C0826);
    border: 1px solid var(--esi-subtle-border, #E8DFEC);
}

.btn-secondary:hover {
    background: var(--esi-warm-white, #FAF8FC);
    color: var(--esi-deep-aubergine, #1C0826);
    border-color: #D1C4D9;
}

.btn-gold,
.btn-action-gold {
    background: var(--esi-gold, #E9B95D);
    color: var(--esi-deep-aubergine, #1C0826);
    border: 1px solid var(--esi-gold, #E9B95D);
    font-weight: 600;
}

.btn-gold:hover,
.btn-action-gold:hover {
    background: var(--esi-gold-hover, #DCA744);
    border-color: var(--esi-gold-hover, #DCA744);
    color: var(--esi-deep-aubergine, #1C0826);
}

.btn-outline {
    background: var(--admin-surface);
    border: 1px solid var(--esi-subtle-border, #E8DFEC);
    color: var(--esi-secondary-text, #76677E);
}

.btn-outline:hover {
    background: var(--esi-warm-white, #FAF8FC);
    color: var(--esi-deep-aubergine, #1C0826);
    border-color: #D1C4D9;
}

.btn-detail,
.btn-workspace-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    background: var(--esi-deep-aubergine, #1C0826);
    color: #FFFFFF !important;
    border: 1px solid var(--esi-deep-aubergine, #1C0826);
    padding: 0.35rem 0.85rem;
    height: 31px;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.75rem; /* 12px */
    text-decoration: none;
    transition: all 0.15s ease;
    box-shadow: 0 2px 5px rgba(28, 8, 38, 0.2);
    white-space: nowrap;
}

.btn-detail:hover,
.btn-workspace-pill:hover {
    background: var(--esi-aubergine-hover, #32113F);
    border-color: var(--esi-aubergine-hover, #32113F);
    transform: translateY(-1px);
    box-shadow: 0 3px 9px rgba(28, 8, 38, 0.3);
    color: #FFFFFF !important;
}

.order-actions-group {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.btn-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: #FFFFFF;
    border: 1px solid var(--esi-subtle-border, #E8DFEC);
    color: var(--esi-primary-text, #29132D);
    transition: all 0.15s ease;
    text-decoration: none;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
}

.btn-action-icon svg {
    width: 14px;
    height: 14px;
}

.btn-action-icon:hover:not(.disabled) {
    background: var(--esi-warm-white, #FAF8FC);
    color: var(--esi-deep-aubergine, #1C0826);
    border-color: var(--esi-gold, #E9B95D);
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(233, 185, 93, 0.2);
}

.btn-action-icon.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background: var(--esi-warm-white, #FAF8FC);
    border-color: var(--esi-subtle-border, #E8DFEC);
}

.btn-success {
    background: #059669;
    color: #FFFFFF;
}
.btn-success:hover {
    background: #047857;
    color: #FFFFFF;
}

.btn-danger {
    background: #DC2626;
    color: #FFFFFF;
}
.btn-danger:hover {
    background: #B91C1C;
    color: #FFFFFF;
}

/* ==========================================================================
   FORMS & INPUTS
   ========================================================================== */
.form-group {
    margin-bottom: 1.15rem;
}

.form-label {
    display: block;
    font-size: var(--admin-font-meta);
    font-weight: 600;
    color: var(--admin-text);
    margin-bottom: 0.35rem;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
    width: 100%;
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    padding: 0.6rem 0.85rem;
    color: var(--admin-text);
    font-size: var(--admin-font-body-sm);
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--admin-plum);
    box-shadow: 0 0 0 3px rgba(84, 32, 120, 0.1);
}

textarea {
    resize: vertical;
    min-height: 80px;
}

/* ==========================================================================
   ALERTS & FEEDBACK
   ========================================================================== */
.alert-box, .alert-success, .alert-error, .alert-info {
    padding: 0.95rem 1.25rem;
    border-radius: var(--admin-radius-sm);
    font-size: var(--admin-font-body-sm);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.alert-success {
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    color: #065F46;
}

.alert-error {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #991B1B;
}

.alert-info {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #1E40AF;
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.empty-state {
    text-align: center;
    padding: 3.5rem 1.5rem;
    color: var(--admin-text-secondary);
}

.empty-state-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.6;
}

.empty-state-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--admin-text);
    margin-bottom: 0.35rem;
}

.empty-state-desc {
    font-size: var(--admin-font-body-sm);
    color: var(--admin-text-muted);
    max-width: 440px;
    margin: 0 auto;
}

/* ==========================================================================
   RESPONSIVE DESIGN (TABLETS & MOBILE DRAWER)
   ========================================================================== */
@media (max-width: 992px) {
    .admin-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 270px;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: none;
    }
    
    .admin-sidebar.is-open {
        transform: translateX(0);
        box-shadow: 0 10px 40px rgba(40, 20, 61, 0.25);
    }
    
    .admin-sidebar-close {
        display: block;
    }

    .admin-sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(40, 20, 61, 0.45);
        backdrop-filter: blur(2px);
        z-index: 1040;
        opacity: 0;
        visibility: hidden;
        transition: all 0.25s ease;
    }
    
    .admin-sidebar-overlay.is-open {
        opacity: 1;
        visibility: visible;
    }

    .admin-mobile-header {
        display: flex;
    }

    .admin-content {
        padding: 1.25rem 1rem;
    }

    .filter-tabs-wrapper {
        flex-direction: column;
        align-items: stretch;
    }

    .search-input-box {
        max-width: 100%;
    }
}

/* ==========================================================================
   DETAIL PAGE & TWO-COLUMN WORKFLOW LAYOUT
   ========================================================================== */
.layout-grid {
    display: grid;
    grid-template-columns: 1.8fr 1.2fr;
    gap: 1.75rem;
    align-items: start;
}

@media (max-width: 992px) {
    .layout-grid {
        grid-template-columns: 1fr;
    }
}

.field-group {
    margin-bottom: 1rem;
}

.field-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--admin-text-muted);
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.field-val {
    font-size: var(--admin-font-body);
    color: var(--admin-text);
    font-weight: 500;
}

/* History & Audit Trail Timeline */
.history-list {
    list-style: none;
    position: relative;
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

.history-list::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 5px;
    width: 2px;
    background: var(--admin-border);
}

.history-item {
    position: relative;
    margin-bottom: 1.15rem;
}

.history-item::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--admin-plum);
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 0 1px var(--admin-plum);
}

.history-time {
    font-size: 0.72rem;
    color: var(--admin-text-muted);
}

.history-text {
    font-size: 0.85rem;
    color: var(--admin-text);
    font-weight: 600;
    margin-top: 0.15rem;
}

.history-note {
    font-size: 0.8rem;
    color: var(--admin-text-secondary);
    margin-top: 0.25rem;
    background: var(--admin-subsurface);
    padding: 0.4rem 0.65rem;
    border-radius: var(--admin-radius-sm);
    border-left: 2px solid var(--admin-plum);
}

/* Media & Photo Submission Cards */
.admin-media-slot-item {
    background: var(--admin-subsurface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);
    padding: 1.15rem 1.25rem;
    margin-bottom: 1.25rem;
}

.admin-media-thumb-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin: 0.75rem 0;
}

.admin-media-thumb-box {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    padding: 0.45rem;
    max-width: 200px;
    box-shadow: var(--admin-shadow-sm);
}

.admin-media-thumb-img {
    max-width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

.badge-media-waiting { background: #FEF3C7; color: #B45309; border: 1px solid #FDE68A; }
.badge-media-partial { background: #E0F2FE; color: #0284C7; border: 1px solid #BAE6FD; }
.badge-media-received { background: #EDE9FE; color: #6D28D9; border: 1px solid #DDD6FE; }
.badge-media-review { background: #FDF4FF; color: #A21CAF; border: 1px solid #F5D0FE; }
.badge-media-approved { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
.badge-media-replace { background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA; }

/* Backwards compatibility button aliases */
.btn-gold {
    background: var(--admin-plum);
    color: #FFFFFF;
}
.btn-gold:hover {
    background: var(--admin-plum-hover);
    color: #FFFFFF;
}
.btn-green {
    background: #059669;
    color: #FFFFFF;
}
.btn-green:hover {
    background: #047857;
    color: #FFFFFF;
}

/* ==========================================================================
   TEMPLATE MANAGEMENT & CARDS
   ========================================================================== */
/* Search & Filter Bar */
.filter-section {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1.75rem;
    box-shadow: var(--admin-shadow-sm);
}

.filter-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.25fr 1fr auto;
    gap: 0.75rem;
    align-items: center;
}

.filter-search-col {
    min-width: 0;
}

.search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.search-icon-adornment {
    position: absolute;
    left: 0.85rem;
    color: var(--admin-text-muted);
    pointer-events: none;
    display: flex;
    align-items: center;
}

.search-with-icon {
    padding-left: 2.35rem !important;
}

.filter-action-col {
    min-width: 100px;
}

@media (max-width: 1024px) {
    .filter-grid {
        grid-template-columns: 1fr 1fr;
    }
    .filter-search-col {
        grid-column: 1 / -1;
    }
    .filter-action-col {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .filter-grid {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }
}

/* Template Cards Grid */
.templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.tpl-card {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--admin-shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box;
    min-width: 0;
}

.tpl-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--admin-shadow-md);
    border-color: var(--admin-plum-border);
}

.tpl-card-top-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.tpl-card-cover {
    height: 120px;
    background: linear-gradient(135deg, #F8F3FA 0%, #F1E8F6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-bottom: 1px solid var(--admin-border-light);
}

.tpl-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--admin-plum);
    opacity: 0.6;
}

.cover-svg-icon {
    width: 36px;
    height: 36px;
}

.tpl-card-badges {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.tpl-parent-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: var(--admin-radius-full);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(84, 32, 120, 0.12);
    color: var(--admin-plum);
    border: 1px solid rgba(84, 32, 120, 0.3);
}

.tpl-badge-status {
    padding: 0.2rem 0.55rem;
    border-radius: var(--admin-radius-full);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tpl-card-body {
    padding: 1.25rem;
    flex: 1;
    min-width: 0;
}

.tpl-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.25rem;
    gap: 0.5rem;
    min-width: 0;
}

.tpl-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--admin-text);
    line-height: 1.35;
    word-break: break-word;
    flex: 1;
}

.tpl-version {
    font-size: 0.7rem;
    color: var(--admin-text-muted);
    background: var(--admin-subsurface);
    border: 1px solid var(--admin-border);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.tpl-slug {
    font-family: monospace;
    font-size: 0.76rem;
    color: var(--admin-plum);
    margin-bottom: 0.65rem;
    word-break: break-all;
}

.tpl-desc {
    font-size: 0.84rem;
    color: var(--admin-text-secondary);
    line-height: 1.5;
    margin-bottom: 0.85rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tpl-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
}

.tpl-tag {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: var(--admin-subsurface);
    color: var(--admin-text-secondary);
    border: 1px solid var(--admin-border);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.tpl-tag-context {
    color: var(--admin-plum);
    border-color: rgba(84, 32, 120, 0.25);
    background: rgba(84, 32, 120, 0.05);
}

/* Subthemes Section in Card */
.tpl-subthemes-box {
    background: var(--admin-subsurface);
    border: 1px solid var(--admin-border-light);
    border-radius: 6px;
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.85rem;
}

.tpl-subthemes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
    font-size: 0.72rem;
}

.subthemes-label {
    font-weight: 700;
    color: var(--admin-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.subthemes-manage-link {
    color: var(--admin-plum);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.72rem;
}

.subthemes-manage-link:hover {
    text-decoration: underline;
}

.tpl-subthemes-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.subtheme-chip {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    background: #FFFFFF;
    color: var(--admin-text);
    border: 1px solid var(--admin-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.tpl-sections-count {
    font-size: 0.74rem;
    color: var(--admin-text-muted);
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.tpl-sections-count svg {
    vertical-align: middle;
}

.count-divider {
    color: var(--admin-border);
}

.client-count-badge {
    color: #0284C7;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* 3 Equal Non-Clipped Action Buttons Footer */
.tpl-card-footer {
    padding: 0.85rem 1rem;
    background: var(--admin-subsurface);
    border-top: 1px solid var(--admin-border-light);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
    box-sizing: border-box;
}

.btn-card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    box-sizing: border-box;
    transition: all 0.15s ease;
}

.btn-card-action svg {
    flex-shrink: 0;
}

.btn-card-action:hover {
    transform: translateY(-1px);
}

/* Empty State Card */
.empty-state-card {
    background: var(--admin-surface);
    border: 1px dashed var(--admin-border);
    border-radius: var(--admin-radius-md);
    padding: 4rem 1.5rem;
    text-align: center;
    color: var(--admin-text-secondary);
}

.empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--admin-text-muted);
    margin-bottom: 1rem;
}

.empty-state-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--admin-text);
    margin-bottom: 0.5rem;
}

.empty-state-desc {
    font-size: 0.85rem;
    color: var(--admin-text-muted);
    margin-bottom: 1.5rem;
}

/* Modals */
.modal {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(31, 25, 38, 0.5);
    backdrop-filter: blur(3px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.modal.active {
    display: flex;
}

.modal-box {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-lg);
    width: 100%;
    max-width: 580px;
    padding: 2rem;
    box-shadow: var(--admin-shadow-lg);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--admin-border-light);
}

.modal-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--admin-text);
}

.btn-close {
    background: transparent;
    border: none;
    color: var(--admin-text-muted);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
}

.btn-close:hover {
    color: var(--admin-text);
}

/* ==========================================================================
   PACKAGE & FEATURE GATING MANAGEMENT (REFINED ESI DESIGN SYSTEM)
   ========================================================================== */
.packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}

@media (max-width: 1024px) {
    .packages-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 680px) {
    .packages-grid {
        grid-template-columns: 1fr;
    }
}

.pkg-card {
    background: #FFFFFF;
    border: 1px solid var(--esi-border, #E9DFED);
    border-radius: 14px;
    padding: 1.35rem 1.4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    box-shadow: 0 1px 3px rgba(33, 10, 46, 0.03);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.pkg-card:hover {
    border-color: var(--esi-gold, #E9B95D);
    box-shadow: 0 6px 18px rgba(28, 8, 38, 0.08);
    transform: translateY(-2px);
}

.pkg-card.active-card {
    border: 2px solid var(--esi-gold, #E9B95D);
    box-shadow: 0 4px 16px rgba(233, 185, 93, 0.18);
}

.pkg-card-top {
    display: flex;
    flex-direction: column;
}

.pkg-badge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 24px;
    margin-bottom: 0.5rem;
}

.pkg-badge-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem; /* 11px */
    font-weight: 700;
    color: var(--esi-deep-aubergine, #1C0826);
    background: var(--esi-lavender, #E8DDF2);
    border: 1px solid var(--esi-subtle-border, #E8DFEC);
    padding: 0.18rem 0.6rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pkg-card.popular .pkg-badge-pill {
    background: #F5F0FA;
    color: #431454;
    border-color: #E8DDF2;
}

.pkg-card.vip .pkg-badge-pill {
    background: #FEF3C7;
    color: #B45309;
    border-color: #FDE68A;
}

.pkg-title {
    font-size: 1.15rem; /* ~18px */
    font-weight: 700;
    color: var(--esi-primary-text, #29132D);
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
}

.pkg-price-row {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: 0.6rem;
}

.pkg-currency {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--esi-deep-aubergine, #1C0826);
}

.pkg-amount {
    font-size: 1.5rem; /* 24px */
    font-weight: 800;
    color: var(--esi-deep-aubergine, #1C0826);
    line-height: 1.1;
}
    font-size: 1.5rem; /* 24px */
    font-weight: 800;
    color: var(--esi-purple, #70258F);
    line-height: 1.1;
}

.pkg-desc {
    font-size: 0.78125rem; /* 12.5px */
    color: var(--esi-text-muted, #75677D);
    line-height: 1.45;
    margin: 0 0 1rem 0;
    min-height: 38px;
}

.pkg-features-wrap {
    background: #FAF8FC;
    border: 1px solid #F0EAF4;
    border-radius: 10px;
    padding: 0.75rem 0.85rem;
    margin-bottom: 1rem;
}

.pkg-features-heading {
    font-size: 0.6875rem; /* 11px */
    font-weight: 700;
    color: var(--esi-text-muted, #75677D);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.pkg-features-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pkg-feature-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.22rem 0;
    font-size: 0.78125rem; /* 12.5px */
    border-bottom: 1px dashed #EDE5F1;
}

.pkg-feature-row:last-child {
    border-bottom: none;
}

.pkg-feature-left {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    flex: 1;
}

.pkg-feature-icon {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pkg-feature-icon.icon-check {
    background: #ECFDF5;
    color: #059669;
    border: 1px solid #A7F3D0;
}

.pkg-feature-icon.icon-locked {
    background: #F1F5F9;
    color: #94A3B8;
    border: 1px solid #E2E8F0;
}

.pkg-feature-name {
    color: var(--esi-text, #291633);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pkg-feature-row.is-locked .pkg-feature-name {
    color: #94A3B8;
    font-weight: 400;
}

.pkg-feature-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.pkg-core-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.65625rem; /* 10.5px */
    font-weight: 700;
    color: #B45309;
    background: #FEF3C7;
    border: 1px solid #FDE68A;
    padding: 0.08rem 0.35rem;
    border-radius: 4px;
    line-height: 1.2;
}

.pkg-locked-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.65625rem;
    font-weight: 500;
    color: #94A3B8;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    padding: 0.08rem 0.35rem;
    border-radius: 4px;
    line-height: 1.2;
}

.pkg-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.75rem;
    border-top: 1px solid #F2EEF6;
    gap: 0.5rem;
}

.pkg-status-indicator {
    font-size: 0.71875rem; /* 11.5px */
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.pkg-status-indicator .status-bullet {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.pkg-status-indicator.status-active {
    color: #059669;
}
.pkg-status-indicator.status-active .status-bullet {
    background: #10B981;
}

.pkg-status-indicator.status-inactive {
    color: #DC2626;
}
.pkg-status-indicator.status-inactive .status-bullet {
    background: #EF4444;
}

.btn-edit-pkg {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--esi-deep-aubergine, #1C0826);
    background: #FAF8FC;
    border: 1px solid var(--esi-subtle-border, #E8DFEC);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
}

.btn-edit-pkg:hover {
    background: var(--esi-deep-aubergine, #1C0826);
    color: #FFFFFF;
    border-color: var(--esi-deep-aubergine, #1C0826);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(28, 8, 38, 0.2);
}

/* Feature Checklist in Editor */
.features-checklist-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

@media (max-width: 640px) {
    .features-checklist-grid {
        grid-template-columns: 1fr;
    }
}

.feat-item-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: #FAF8FC;
    border: 1px solid var(--esi-subtle-border, #E8DFEC);
    border-radius: 8px;
    padding: 0.55rem 0.65rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.feat-item-check:hover {
    border-color: var(--esi-gold, #E9B95D);
    background: #FFFFFF;
}

.feat-item-check input[type="checkbox"] {
    margin-top: 0.15rem;
    accent-color: var(--esi-deep-aubergine, #1C0826);
    cursor: pointer;
}

.feat-item-check strong {
    font-size: 0.8125rem;
    color: var(--esi-primary-text, #29132D);
}

.feat-item-desc {
    font-size: 0.71875rem;
    color: var(--esi-secondary-text, #76677E);
    margin-top: 0.15rem;
    line-height: 1.35;
}

.compat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78125rem; /* 12.5px */
}

.compat-table th {
    background: #FAF8FC;
    padding: 0.65rem 0.85rem;
    font-weight: 600;
    color: var(--esi-text-muted, #75677D);
    border-bottom: 1px solid #E9DFED;
    text-align: left;
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.compat-table td {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid #F2EEF6;
    vertical-align: middle;
    color: var(--esi-text, #291633);
}

.compat-table tbody tr:hover td {
    background: #FCFAFD;
}

/* ==============================================================================
   Template Photo & Content Editor Elements
   ============================================================================== */
.tpl-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: 0.75rem;
}

.tpl-photo-card {
    background: var(--admin-subsurface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tpl-photo-card:hover {
    border-color: var(--admin-gold-border);
    box-shadow: var(--admin-shadow-sm);
}

.tpl-thumb-preview {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: var(--admin-radius-sm);
    border: 1px solid var(--admin-border);
    background: #000;
}

.tpl-thumb-empty {
    width: 100%;
    height: 140px;
    border-radius: var(--admin-radius-sm);
    border: 2px dashed var(--admin-border);
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--admin-text-muted);
    font-size: 0.8rem;
    gap: 0.35rem;
}

.tpl-file-input {
    font-size: 0.82rem;
    color: var(--admin-text-secondary);
    width: 100%;
}

.tpl-file-input::-webkit-file-upload-button {
    background: var(--admin-plum);
    color: #fff;
    border: none;
    padding: 0.35rem 0.75rem;
    border-radius: var(--admin-radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    margin-right: 0.5rem;
    transition: background 0.15s ease;
}

.tpl-file-input::-webkit-file-upload-button:hover {
    background: var(--admin-plum-hover);
}

.gallery-thumbs-grid {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.gallery-thumb-item {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--admin-radius-sm);
    border: 1px solid var(--admin-border);
}

/* =============================================================================
   PROFESSIONAL TEMPLATE STUDIO - REDESIGNED WORKSPACE
   ============================================================================= */

.studio-container {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 80px);
    margin: -1.5rem -1.75rem;
}

/* 1. Sticky Studio Toolbar */
.studio-sticky-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--admin-border);
    padding: 0.85rem 1.75rem;
    box-shadow: 0 2px 8px rgba(31, 25, 38, 0.03);
    transition: all 0.2s ease;
}

.studio-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.studio-bar-left {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.studio-back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--admin-radius-sm);
    background: var(--admin-subsurface);
    border: 1px solid var(--admin-border);
    color: var(--admin-text-secondary);
    text-decoration: none;
    transition: all 0.15s ease;
}

.studio-back-link:hover {
    background: var(--admin-plum-light);
    color: var(--admin-plum);
    border-color: var(--admin-plum-border);
}

.studio-title-block {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.studio-template-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--admin-plum);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.studio-meta-pills {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: var(--admin-text-muted);
}

.studio-pill {
    background: var(--admin-subsurface);
    border: 1px solid var(--admin-border);
    padding: 0.15rem 0.45rem;
    border-radius: var(--admin-radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--admin-text-secondary);
}

.studio-bar-center {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.studio-save-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    border-radius: var(--admin-radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.25s ease;
}

.studio-save-indicator.is-saved {
    background: #ECFDF5;
    color: #047857;
    border: 1px solid #A7F3D0;
}

.studio-save-indicator.is-dirty {
    background: #FFFBEB;
    color: #B45309;
    border: 1px solid #FDE68A;
    animation: studioPulse 1.8s infinite;
}

@keyframes studioPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.02); }
}

.studio-last-saved-time {
    font-size: 0.72rem;
    color: var(--admin-text-muted);
}

.studio-bar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.studio-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.48rem 0.95rem;
    border-radius: var(--admin-radius-md);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.studio-btn-outline {
    background: #fff;
    border-color: var(--admin-border);
    color: var(--admin-text);
}

.studio-btn-outline:hover {
    background: var(--admin-subsurface);
    border-color: var(--admin-plum-border);
    color: var(--admin-plum);
}

.studio-btn-outline.active {
    background: var(--admin-plum-light);
    border-color: var(--admin-plum-border);
    color: var(--admin-plum);
}

.studio-btn-save {
    background: var(--admin-plum);
    color: #fff;
}

.studio-btn-save:hover {
    background: var(--admin-plum-hover);
    box-shadow: 0 4px 12px rgba(84, 32, 120, 0.25);
}

.studio-btn-publish {
    background: linear-gradient(135deg, #10B981, #059669);
    color: #fff;
}

.studio-btn-publish:hover {
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.studio-btn-publish[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    background: #9CA3AF;
    box-shadow: none;
}

/* 2. Studio 3-Area Workspace Layout */
.studio-layout {
    display: grid;
    grid-template-columns: 240px 1fr 480px;
    gap: 1.5rem;
    padding: 1.5rem 1.75rem;
    flex: 1;
    transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.studio-layout.preview-collapsed {
    grid-template-columns: 240px 1fr 0px;
    gap: 1.5rem;
}

/* 3. Studio Category Sidebar */
.studio-sidebar {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-lg);
    padding: 1rem 0.75rem;
    box-shadow: var(--admin-shadow-sm);
    height: fit-content;
    position: sticky;
    top: 76px;
}

.studio-sidebar-header {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--admin-text-muted);
    padding: 0.25rem 0.65rem 0.65rem;
    border-bottom: 1px solid var(--admin-border-light);
    margin-bottom: 0.5rem;
}

.studio-category-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.studio-nav-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--admin-radius-md);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--admin-text-secondary);
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
}

.studio-nav-btn:hover {
    background: var(--admin-subsurface);
    color: var(--admin-plum);
}

.studio-nav-btn.active {
    background: var(--admin-plum-light);
    border-color: var(--admin-plum-border);
    color: var(--admin-plum);
    font-weight: 700;
}

.studio-nav-btn-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.studio-nav-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.studio-nav-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.studio-nav-dot.dot-valid { background: #10B981; }
.studio-nav-dot.dot-warning { background: #F59E0B; }
.studio-nav-dot.dot-error { background: #EF4444; }

/* 4. Studio Focused Editor Main Content */
.studio-editor-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.studio-tab-pane {
    display: none;
    animation: studioFadeIn 0.2s ease-out;
}

.studio-tab-pane.active {
    display: block;
}

@keyframes studioFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.studio-pane-header {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-lg);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--admin-shadow-sm);
    margin-bottom: 1.25rem;
}

.studio-pane-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--admin-plum);
    margin-bottom: 0.35rem;
}

.studio-pane-desc {
    font-size: 0.82rem;
    color: var(--admin-text-secondary);
    line-height: 1.5;
}

/* 5. Studio Live Preview Pane */
.studio-preview-pane {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-lg);
    box-shadow: var(--admin-shadow-md);
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px);
    position: sticky;
    top: 76px;
    overflow: hidden;
    transition: opacity 0.25s ease;
}

.studio-layout.preview-collapsed .studio-preview-pane {
    display: none;
}

.studio-preview-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 1rem;
    background: var(--admin-subsurface);
    border-bottom: 1px solid var(--admin-border);
    gap: 0.5rem;
}

.studio-device-toggle {
    display: flex;
    background: #EAE5F0;
    padding: 2px;
    border-radius: var(--admin-radius-sm);
    gap: 2px;
}

.studio-device-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    border: none;
    border-radius: calc(var(--admin-radius-sm) - 2px);
    background: transparent;
    color: var(--admin-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.studio-device-btn.active {
    background: #fff;
    color: var(--admin-plum);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.studio-preview-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.studio-preview-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--admin-radius-sm);
    border: 1px solid var(--admin-border);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--admin-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.studio-preview-btn:hover {
    background: var(--admin-plum-light);
    color: var(--admin-plum);
}

.studio-preview-viewport {
    flex: 1;
    background: #11141E;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    padding: 1rem;
}

.studio-frame-wrapper {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0,0,0,0.35);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    width: 100%;
    position: relative;
}

.studio-frame-wrapper.mode-mobile {
    width: 390px;
    max-height: 844px;
    border: 8px solid #2B2D38;
    border-radius: 36px;
    box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.studio-frame-wrapper.mode-desktop {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.studio-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    background: #FAF7F1;
}

.studio-preview-loading {
    position: absolute;
    inset: 0;
    background: rgba(17, 20, 30, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    color: #fff;
    font-size: 0.8rem;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.studio-preview-loading.active {
    opacity: 1;
    pointer-events: auto;
}

.studio-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: studioSpin 0.7s linear infinite;
}

@keyframes studioSpin {
    to { transform: rotate(360deg); }
}

/* 6. Section Reordering Ergonomics */
.section-reorder-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);
    overflow: hidden;
}

.section-reorder-table th {
    background: var(--admin-subsurface);
    padding: 0.65rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--admin-text-secondary);
    border-bottom: 1px solid var(--admin-border);
    text-align: left;
}

.section-reorder-table td {
    padding: 0.65rem 0.85rem;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--admin-border-light);
    vertical-align: middle;
    background: #fff;
}

.section-reorder-table tr:last-child td {
    border-bottom: none;
}

.section-reorder-table tr:hover td {
    background: var(--admin-subsurface);
}

.studio-reorder-btn {
    width: 26px;
    height: 26px;
    border-radius: var(--admin-radius-sm);
    border: 1px solid var(--admin-border);
    background: #fff;
    color: var(--admin-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.studio-reorder-btn:hover:not([disabled]) {
    background: var(--admin-plum-light);
    color: var(--admin-plum);
    border-color: var(--admin-plum-border);
}

.studio-reorder-btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}

/* 7. Publication Modal */
.studio-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 10, 25, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.studio-modal-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.studio-modal {
    background: #fff;
    width: 90%;
    max-width: 480px;
    border-radius: var(--admin-radius-lg);
    box-shadow: var(--admin-shadow-lg);
    border: 1px solid var(--admin-border);
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.studio-modal-backdrop.is-open .studio-modal {
    transform: scale(1);
}

.studio-modal-header {
    padding: 1.25rem 1.5rem;
    background: var(--admin-subsurface);
    border-bottom: 1px solid var(--admin-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.studio-modal-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--admin-plum);
    margin: 0;
}

.studio-modal-body {
    padding: 1.5rem;
    font-size: 0.88rem;
    color: var(--admin-text);
    line-height: 1.6;
}

.studio-modal-footer {
    padding: 1rem 1.5rem;
    background: var(--admin-subsurface);
    border-top: 1px solid var(--admin-border);
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
}

/* Responsive Adaptations */
@media (max-width: 1366px) {
    .studio-layout {
        grid-template-columns: 220px 1fr 400px;
        gap: 1.25rem;
    }
}

@media (max-width: 1200px) {
    .studio-layout {
        grid-template-columns: 200px 1fr 0px;
        gap: 1rem;
    }
    .studio-preview-pane {
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        width: 480px;
        max-width: 90vw;
        height: 100vh;
        z-index: 90;
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.2);
    }
}

@media (max-width: 860px) {
    .studio-layout {
        grid-template-columns: 1fr;
    }
    .studio-sidebar {
        position: static;
        width: 100%;
        overflow-x: auto;
    }
    .studio-category-nav {
        flex-direction: row;
        gap: 0.35rem;
    }
    .studio-nav-btn {
        width: auto;
        white-space: nowrap;
    }
    .studio-bar-inner {
        flex-direction: column;
        align-items: stretch;
    }
    .studio-bar-right {
        justify-content: flex-end;
    }
}

/* =============================================================================
   ORDER PROJECT WORKSPACE (DETAIL PESANAN) DESIGN SYSTEM
   ============================================================================= */

/* Workspace Header 3-Tier Hierarchy */
.workspace-header {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-lg);
    box-shadow: var(--admin-shadow-sm);
    padding: 1.25rem 1.75rem;
    margin-bottom: 1.5rem;
}

.workspace-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--admin-font-meta);
    color: var(--admin-text-muted);
    margin-bottom: 0.85rem;
}

.workspace-breadcrumb a {
    color: var(--admin-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.workspace-breadcrumb a:hover {
    color: var(--admin-plum);
}

.workspace-breadcrumb .separator {
    color: var(--admin-text-light);
}

.workspace-header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.workspace-title-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.workspace-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.workspace-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: var(--admin-font-page-title);
    font-weight: 700;
    color: var(--admin-text);
    line-height: 1.25;
}

.workspace-meta-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: var(--admin-font-meta);
    color: var(--admin-text-secondary);
    flex-wrap: wrap;
}

.workspace-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.workspace-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

/* Two-Column Responsive Workspace Grid */
.order-workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1rem;
    align-items: start;
    width: 100%;
}

.order-workspace-left,
.order-workspace-right {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}

/* Workspace Card System */
.workspace-card {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-lg);
    box-shadow: var(--admin-shadow-sm);
    padding: 1.15rem 1.25rem;
    min-width: 0;
}

.workspace-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--admin-border-light);
    flex-wrap: wrap;
}

.workspace-card-title {
    font-size: var(--admin-font-card-title);
    font-weight: 700;
    color: var(--admin-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.workspace-card-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: var(--admin-plum-light);
    color: var(--admin-plum);
    border-radius: var(--admin-radius-sm);
}

.workspace-card-subtitle {
    font-size: var(--admin-font-meta);
    color: var(--admin-text-muted);
    margin-top: 0.2rem;
}

/* Section 1: Customer Data Grid */
.customer-data-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.5rem;
}

.customer-field-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.customer-field-label {
    font-size: var(--admin-font-tag);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--admin-text-muted);
}

.customer-field-value {
    font-size: var(--admin-font-body-sm);
    font-weight: 600;
    color: var(--admin-text);
    word-break: break-word;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.customer-action-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--admin-plum);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--admin-font-body-sm);
    transition: color 0.15s ease;
}

.customer-action-link:hover {
    color: var(--admin-plum-hover);
    text-decoration: underline;
}

/* Section 2: Private Preview Controls */
.preview-controls-box {
    background: var(--admin-subsurface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);
    padding: 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.preview-url-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.preview-url-input {
    flex: 1;
    min-width: 0;
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    padding: 0.55rem 0.85rem;
    font-size: var(--admin-font-meta);
    font-family: monospace;
    color: var(--admin-text);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.preview-meta-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: var(--admin-font-meta);
    color: var(--admin-text-secondary);
    flex-wrap: wrap;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--admin-border);
}

.preview-actions-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Section 3: Active Template & Theme Switcher (§19) */
.active-template-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    background: linear-gradient(135deg, rgba(84, 32, 120, 0.05), rgba(217, 106, 174, 0.05));
    border: 1px solid var(--admin-plum-border);
    border-radius: var(--admin-radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.active-template-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.active-template-thumb {
    width: 60px;
    height: 60px;
    border-radius: var(--admin-radius-md);
    object-fit: cover;
    border: 1px solid var(--admin-border);
    background: #EAE5F0;
    flex-shrink: 0;
}

.active-template-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.active-template-name {
    font-size: var(--admin-font-card-title);
    font-weight: 700;
    color: var(--admin-text);
}

.active-template-tags {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* Customization Form Groups */
.customization-section-group {
    background: var(--admin-subsurface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);
    padding: 1.15rem;
    margin-bottom: 1rem;
}

.customization-group-heading {
    font-size: var(--admin-font-body-sm);
    font-weight: 700;
    color: var(--admin-text);
    margin-bottom: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.form-row-2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1.25rem;
}

.form-group-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
}

.form-group-item:last-child {
    margin-bottom: 0;
}

.form-group-item label {
    font-size: var(--admin-font-tag);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--admin-text-secondary);
}

.form-group-item input[type="text"],
.form-group-item input[type="url"],
.form-group-item select,
.form-group-item textarea {
    width: 100%;
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    padding: 0.65rem 0.85rem;
    font-size: var(--admin-font-body-sm);
    color: var(--admin-text);
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-group-item textarea {
    min-height: 85px;
    line-height: 1.5;
    resize: vertical;
}

.form-group-item input:focus,
.form-group-item select:focus,
.form-group-item textarea:focus {
    border-color: var(--admin-plum);
    outline: none;
    box-shadow: 0 0 0 3px rgba(84, 32, 120, 0.12);
}

.dirty-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--admin-font-tag);
    color: #B45309;
    background: #FEF3C7;
    padding: 0.2rem 0.55rem;
    border-radius: var(--admin-radius-full);
    border: 1px solid #FDE68A;
}

/* Section 4: Media Slots Grid */
.media-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1.15rem;
}

.media-slot-card {
    background: var(--admin-subsurface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.media-slot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.media-slot-title {
    font-size: var(--admin-font-body-sm);
    font-weight: 700;
    color: var(--admin-text);
}

.media-slot-thumb-container {
    width: 100%;
    height: 160px;
    background: #EAE5F0;
    border-radius: var(--admin-radius-sm);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--admin-border-light);
}

.media-slot-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.media-slot-thumb-img:hover {
    transform: scale(1.03);
}

/* Right Column Operations Panels */
.workflow-status-card {
    border-top: 4px solid var(--admin-plum);
}

.workflow-status-badge-lg {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.95rem;
    border-radius: var(--admin-radius-full);
    font-size: var(--admin-font-body-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.status-transition-box {
    background: var(--admin-subsurface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);
    padding: 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 1rem;
}

/* Studio Internal Notes Panel */
.studio-notes-card {
    border-top: 4px solid #0D9488;
}

.confidential-notice {
    font-size: var(--admin-font-tag);
    color: #0F766E;
    background: #CCFBF1;
    border: 1px solid #99F6E4;
    border-radius: var(--admin-radius-sm);
    padding: 0.45rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}

/* Audit Trail & History Timeline */
.audit-timeline {
    position: relative;
    padding-left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.audit-timeline::before {
    content: '';
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 0.45rem;
    width: 2px;
    background: var(--admin-border);
}

.timeline-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.timeline-node {
    position: absolute;
    left: -1.5rem;
    top: 0.15rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--admin-surface);
    border: 2px solid var(--admin-plum);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--admin-plum);
}

.timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.timeline-actor {
    font-size: var(--admin-font-tag);
    font-weight: 700;
    color: var(--admin-text);
}

.timeline-time {
    font-size: 0.7rem;
    color: var(--admin-text-muted);
}

.timeline-body {
    font-size: var(--admin-font-meta);
    color: var(--admin-text-secondary);
    line-height: 1.4;
    word-break: break-word;
}

/* Modal Overlay & Dialog (§19 Template Switcher & Media Zoom) */
.esi-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.esi-modal-overlay.is-active {
    display: flex;
}

.esi-modal-dialog {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-lg);
    box-shadow: var(--admin-shadow-lg);
    width: 100%;
    max-width: 820px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.esi-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--admin-border);
}

.esi-modal-title {
    font-size: var(--admin-font-card-title);
    font-weight: 700;
    color: var(--admin-text);
}

.esi-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.esi-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--admin-border);
    background: var(--admin-subsurface);
}

/* Template Catalog Grid in Modal */
.template-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.15rem;
    margin-top: 1rem;
}

.template-catalog-card {
    background: var(--admin-surface);
    border: 1.5px solid var(--admin-border);
    border-radius: var(--admin-radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.template-catalog-card:hover {
    border-color: var(--admin-plum);
    box-shadow: var(--admin-shadow-md);
    transform: translateY(-2px);
}

.template-catalog-card.is-selected {
    border-color: var(--admin-plum);
    box-shadow: 0 0 0 2px var(--admin-plum);
    background: var(--admin-plum-light);
}

.template-catalog-card.is-active-now {
    border-color: #059669;
    background: #ECFDF5;
}

.template-catalog-thumb {
    width: 100%;
    height: 120px;
    object-fit: cover;
    background: #EAE5F0;
    border-bottom: 1px solid var(--admin-border-light);
}

.template-catalog-content {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

/* Responsive Breakpoints (1440, 1280, 1024, 768, 390px) */
@media (max-width: 1024px) {
    .order-workspace-grid {
        grid-template-columns: 1fr;
    }
    .workspace-header-main {
        flex-direction: column;
        align-items: flex-start;
    }
    .workspace-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .workspace-header {
        padding: 1rem;
    }
    .customer-data-grid {
        grid-template-columns: 1fr;
    }
    .form-row-2col {
        grid-template-columns: 1fr;
    }
    .media-slots-grid {
        grid-template-columns: 1fr;
    }
    .preview-meta-strip {
        flex-direction: column;
        align-items: flex-start;
    }
    .preview-actions-row {
        width: 100%;
    }
    .active-template-banner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 390px) {
    .workspace-title {
        font-size: 1.3rem;
    }
    .workspace-card {
        padding: 1rem;
    }
    .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   ORDER WORKSPACE REDESIGN (Section 5, 6, 7, 8)
   ========================================================================== */
.order-workspace-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 0.5rem;
}

/* Breadcrumb */
.order-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--admin-text-secondary);
    margin-bottom: 0.45rem;
}
.order-breadcrumb a {
    color: var(--admin-text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}
.order-breadcrumb a:hover {
    color: var(--admin-plum);
}
.order-breadcrumb .breadcrumb-separator {
    color: var(--admin-text-muted);
}
.order-breadcrumb .breadcrumb-current {
    font-weight: 700;
    color: var(--admin-text);
}

/* Workspace Header */
.order-header-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-bottom: 0.75rem;
}

.order-header-main {
    flex: 1 1 540px;
}

.order-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.45rem;
}

.order-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--admin-text);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.order-meta-row {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    flex-wrap: wrap;
    color: var(--admin-text-secondary);
    font-size: 0.85rem;
    margin-top: 0.35rem;
}

.order-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.order-header-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.btn-action-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: #FFFFFF;
    border: 1px solid var(--admin-border);
    color: var(--admin-text);
    padding: 0.6rem 1rem;
    border-radius: var(--admin-radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-action-outline:hover {
    background: #FAF9FB;
    border-color: var(--admin-plum);
    color: var(--admin-plum);
}

.btn-action-plum {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--esi-deep-aubergine, #1C0826);
    border: 1px solid var(--esi-deep-aubergine, #1C0826);
    color: #FFFFFF;
    padding: 0.6rem 1.15rem;
    border-radius: var(--admin-radius-sm);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 8px rgba(28, 8, 38, 0.2);
}
.btn-action-plum:hover {
    background: var(--esi-aubergine-hover, #32113F);
    border-color: var(--esi-aubergine-hover, #32113F);
    color: #FFFFFF;
    transform: translateY(-1px);
}

/* Internal 3-Tab Navigation Bar */
.workspace-tabs-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.workspace-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem;
    border-radius: var(--admin-radius-md);
    background: #FFFFFF;
    border: 1px solid var(--admin-border);
    color: var(--admin-text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.workspace-tab-btn:hover {
    color: var(--admin-plum);
    background: #FAF8FC;
    border-color: #E2D5EC;
}
.workspace-tab-btn.active {
    background: var(--esi-deep-aubergine, #1C0826);
    color: #FFFFFF;
    border-color: var(--esi-deep-aubergine, #1C0826);
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(28, 8, 38, 0.2);
}
.workspace-tab-btn.active svg {
    stroke: #FFFFFF;
}

/* Two-Column Responsive Workspace Grid */
.workspace-grid-2col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 1080px) {
    .workspace-grid-2col {
        grid-template-columns: 1fr;
    }
}

/* Tab Panes */
.workspace-tab-pane {
    display: none;
}
.workspace-tab-pane.active {
    display: block;
}

/* Workspace Main Cards */
.workspace-card {
    background: #FFFFFF;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);
    padding: 1.15rem 1.25rem;
    margin-bottom: 0.85rem;
    box-shadow: 0 1px 4px rgba(31, 25, 38, 0.03);
}

.workspace-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--admin-border-light);
    margin-bottom: 0.85rem;
}

.workspace-card-title-group {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.workspace-card-icon-box {
    width: 32px;
    height: 32px;
    border-radius: var(--admin-radius-sm);
    background: var(--admin-plum-light);
    color: var(--admin-plum);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.workspace-card-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--admin-text);
}

.workspace-card-subtitle {
    font-size: 0.78rem;
    color: var(--admin-text-secondary);
    margin-top: 0.1rem;
}

/* Ringkasan Split: Template Thumbnail Card + Metadata Table */
.ringkasan-split-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 0.85rem;
}

@media (max-width: 720px) {
    .ringkasan-split-layout {
        grid-template-columns: 1fr;
    }
}

.template-thumbnail-box {
    background: #FAF9FB;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 140px;
    position: relative;
    padding: 0.75rem;
}
.template-thumbnail-img {
    width: 100%;
    height: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: var(--admin-radius-sm);
}
.template-thumbnail-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 0.85rem;
    color: var(--admin-plum);
}
.template-thumbnail-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--admin-plum);
    margin-top: 0.35rem;
}

/* Metadata Key-Value List */
.metadata-table-clean {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.metadata-table-clean tr {
    border-bottom: 1px solid var(--admin-border-light);
}
.metadata-table-clean tr:last-child {
    border-bottom: none;
}
.metadata-table-clean td {
    padding: 0.45rem 0.45rem;
    vertical-align: middle;
}
.metadata-label-col {
    color: var(--admin-text-secondary);
    font-weight: 500;
    width: 120px;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.metadata-value-col {
    color: var(--admin-text);
    font-weight: 700;
}

/* Subcard: Ringkasan Redaksi Acara */
.redaksi-subcard {
    background: #FAF9FB;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);
    padding: 0.85rem 1rem;
    margin-bottom: 0.85rem;
}
.redaksi-subcard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.65rem;
}
.redaksi-grid-4col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
}
.redaksi-cell-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--admin-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.2rem;
}
.redaksi-cell-value {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--admin-text);
}

/* Customizer CTA Banner inside Ringkasan */
.customizer-cta-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
    background: #FDF9FF;
    border: 1px solid #EEDCF7;
    border-radius: var(--admin-radius-md);
    padding: 0.75rem 1rem;
    margin-bottom: 0;
}
.customizer-cta-info {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.82rem;
    color: var(--admin-text-secondary);
}

/* Collapsible Panel Toggle Component (Catatan Internal & Riwayat) */
.collapsible-card {
    background: #FFFFFF;
    border: 1px solid var(--esi-subtle-border, #E8DFEC);
    border-radius: var(--admin-radius-md, 12px);
    overflow: hidden;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 3px rgba(28, 8, 38, 0.03);
}

.collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.85rem;
    cursor: pointer;
    background: #FFFFFF;
    user-select: none;
    transition: background-color 0.15s ease;
}
.collapsible-header:hover {
    background: #FAF8FC;
}

.collapsible-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    flex: 1;
}
.collapsible-icon-circle,
.collapsible-icon-box {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--esi-lavender, #E8DDF2);
    color: var(--esi-deep-aubergine, #1C0826);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.collapsible-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--esi-primary-text, #29132D);
}
.collapsible-subtitle {
    display: block;
    font-size: 0.7rem;
    color: var(--esi-secondary-text, #76677E);
    margin-top: 0.05rem;
    line-height: 1.25;
}
.collapsible-chevron {
    transition: transform 0.25s ease;
    color: var(--esi-secondary-text, #76677E);
    flex-shrink: 0;
    margin-left: 0.4rem;
}
.collapsible-chevron.is-open {
    transform: rotate(180deg);
}

.collapsible-body {
    display: none;
    padding: 0.75rem 0.85rem;
    border-top: 1px solid var(--esi-subtle-border, #E8DFEC);
    background: #FAF8FC;
}
.collapsible-body.is-open {
    display: block;
}

/* Panel Alur Pesanan & Vertical Stepper (Right Column) */
.stepper-workflow {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0.75rem;
    position: relative;
}

.stepper-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    position: relative;
    padding-bottom: 0.65rem;
}
.stepper-item:last-child {
    padding-bottom: 0;
}

.stepper-track-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 24px;
    flex-shrink: 0;
}

.stepper-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    z-index: 2;
    transition: all 0.2s ease;
}
.stepper-circle.completed {
    background: var(--esi-deep-aubergine, #1C0826);
    color: #FFFFFF;
    border: 2px solid var(--esi-deep-aubergine, #1C0826);
}
.stepper-circle.active {
    background: #FFFFFF;
    color: var(--esi-deep-aubergine, #1C0826);
    border: 2px solid var(--esi-deep-aubergine, #1C0826);
}
.stepper-circle.pending {
    background: #FFFFFF;
    color: #A993B5;
    border: 2px solid #E8DFEC;
}
.stepper-circle.locked {
    background: #FAF8FC;
    color: #8E869B;
    border: 2px solid #E8DFEC;
}

.stepper-line {
    width: 2px;
    background: #E8DFEC;
    flex-grow: 1;
    min-height: 14px;
    margin: 2px 0;
}
.stepper-line.completed {
    background: var(--esi-deep-aubergine, #1C0826);
}

.stepper-info {
    flex: 1;
    padding-top: 1px;
}
.stepper-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--esi-primary-text, #29132D);
}
.stepper-subtext {
    font-size: 0.72rem;
    color: var(--esi-secondary-text, #76677E);
    margin-top: 0.08rem;
    line-height: 1.3;
}

/* Quick Verify Payment Button */
.btn-action-verify-pay {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.55rem 0.85rem;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    color: #047857;
    border-radius: var(--admin-radius-sm);
    font-size: 0.82rem;
    font-weight: 700;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-top: 0.75rem;
    text-decoration: none;
}
.btn-action-verify-pay:hover {
    background: #D1FAE5;
    border-color: #059669;
}

/* ==========================================================================
   ESI ORDER DASHBOARD REDESIGN (TWO-ROW TABLE & METRICS - REFINED COMPACT SCALE)
   ========================================================================== */
.orders-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.15rem;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.orders-page-header .page-title,
.page-title {
    font-family: 'Playfair Display', Georgia, 'Plus Jakarta Sans', serif;
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
    color: var(--esi-text, #291633);
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.orders-page-header .page-subtitle,
.page-subtitle {
    color: var(--esi-text-muted, #75677D);
    font-size: 0.8125rem; /* 13px */
    margin-top: 0.2rem;
    line-height: 1.35;
}

.btn-input-new-order {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--esi-deep-aubergine, #1C0826);
    color: #FFFFFF !important;
    padding: 0.42rem 1rem;
    height: 35px;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.78125rem; /* 12.5px */
    text-decoration: none;
    border: 1px solid var(--esi-deep-aubergine, #1C0826);
    box-shadow: 0 2px 6px rgba(28, 8, 38, 0.2);
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-input-new-order:hover {
    transform: translateY(-1px);
    background: var(--esi-aubergine-hover, #32113F);
    border-color: var(--esi-aubergine-hover, #32113F);
    box-shadow: 0 4px 10px rgba(28, 8, 38, 0.3);
    color: #FFFFFF !important;
}

/* 5 Metrics Summary Cards */
.orders-metrics-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.85rem;
    margin-bottom: 1.15rem;
}

.summary-stat-card {
    background: #FFFFFF;
    border: 1px solid var(--esi-subtle-border, #E8DFEC);
    border-radius: 12px;
    padding: 0.75rem 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(33, 10, 46, 0.02);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    position: relative;
    border-left: 3px solid transparent;
}

.summary-stat-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(28, 8, 38, 0.06);
    border-color: #D1C4D9;
}

.summary-stat-card:nth-child(1) { border-left-color: var(--esi-deep-aubergine, #1C0826); }
.summary-stat-card:nth-child(2) { border-left-color: #0284C7; }
.summary-stat-card:nth-child(3) { border-left-color: #D97706; }
.summary-stat-card:nth-child(4) { border-left-color: #16A34A; }
.summary-stat-card:nth-child(5) { border-left-color: #0D9488; }

.summary-icon-pill {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.summary-icon-pill svg {
    width: 17px;
    height: 17px;
}

.summary-icon-pill.icon-plum {
    background: var(--esi-lavender, #E8DDF2);
    color: var(--esi-deep-aubergine, #1C0826);
}

.summary-icon-pill.icon-blue {
    background: #E0F2FE;
    color: #0284C7;
}

.summary-icon-pill.icon-amber {
    background: #FEF3C7;
    color: #D97706;
}

.summary-icon-pill.icon-green {
    background: #DCFCE7;
    color: #16A34A;
}

.summary-icon-pill.icon-teal {
    background: #CCFBF1;
    color: #0D9488;
}

.summary-stat-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.summary-stat-title {
    font-size: 0.6875rem; /* 11px */
    font-weight: 600;
    color: var(--esi-secondary-text, #76677E);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.summary-stat-value {
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
    line-height: 1.1;
    margin-top: 0.15rem;
    color: var(--esi-primary-text, #29132D);
}

.summary-stat-value.val-blue { color: #2563EB; }
.summary-stat-value.val-amber { color: #D97706; }
.summary-stat-value.val-green { color: #059669; }
.summary-stat-value.val-teal { color: #0D9488; }

/* Filter Tabs & Search Bar Row */
.orders-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.95rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.filter-pills-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.filter-pill-item {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.8rem;
    height: 32px;
    border-radius: 9999px;
    font-size: 0.75rem; /* 12px */
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
    border: 1px solid var(--esi-subtle-border, #E8DFEC);
    background: #FFFFFF;
    color: var(--esi-secondary-text, #76677E);
}

.filter-pill-item:hover {
    border-color: #D1C4D9;
    background: var(--esi-warm-white, #FAF8FC);
    color: var(--esi-deep-aubergine, #1C0826);
}

.filter-pill-item.active {
    background: var(--esi-deep-aubergine, #1C0826);
    color: #FFFFFF !important;
    border-color: var(--esi-deep-aubergine, #1C0826);
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(28, 8, 38, 0.2);
}

.orders-search-wrapper {
    position: relative;
    width: 100%;
    max-width: 280px;
}

.orders-search-input {
    width: 100%;
    height: 33px;
    padding: 0.35rem 0.85rem 0.35rem 2.2rem;
    border-radius: 9999px;
    border: 1px solid var(--esi-subtle-border, #E8DFEC);
    background: #FFFFFF;
    font-size: 0.78125rem; /* 12.5px */
    color: var(--esi-primary-text, #29132D);
    outline: none;
    transition: all 0.15s ease;
}

.orders-search-input:focus {
    border-color: var(--esi-deep-aubergine, #1C0826);
    box-shadow: 0 0 0 2.5px rgba(28, 8, 38, 0.08);
}

.orders-search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--esi-text-muted, #75677D);
    pointer-events: none;
}

/* Two-Row Orders Table Container */
.orders-table-card {
    background: #FFFFFF;
    border: 1px solid var(--esi-border, #E9DFED);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(33, 10, 46, 0.02);
    margin-bottom: 0.85rem;
}

.orders-table-2row {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.orders-table-2row th {
    background: #FAF8FC;
    padding: 0.6rem 0.95rem;
    font-size: 0.6875rem; /* 11px */
    font-weight: 600;
    color: var(--esi-text-muted, #75677D);
    border-bottom: 1px solid var(--esi-border, #E9DFED);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.orders-table-2row td {
    padding: 0.65rem 0.95rem;
    border-bottom: 1px solid #F2EEF6;
    vertical-align: middle;
}

.orders-table-2row tbody tr:hover td {
    background: #FCFAFD;
}

.orders-table-2row tbody tr:last-child td {
    border-bottom: none;
}

/* Two-Row Cell Formats */
.cell-cust-box {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.cell-cust-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--esi-lavender, #E8DDF2);
    color: var(--esi-deep-aubergine, #1C0826);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cell-cust-avatar svg {
    width: 15px;
    height: 15px;
}

.cell-cust-lines {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.cell-cust-name {
    font-size: 0.84375rem; /* 13.5px */
    font-weight: 600;
    color: var(--esi-text, #291633);
    line-height: 1.25;
}

.cell-cust-phone {
    font-size: 0.71875rem; /* 11.5px */
    color: var(--esi-text-muted, #75677D);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.cell-event-lines {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.cell-event-title {
    font-size: 0.78125rem; /* 12.5px */
    font-weight: 600;
    color: var(--esi-text, #291633);
    line-height: 1.25;
}

.cell-event-date {
    font-size: 0.71875rem; /* 11.5px */
    color: var(--esi-text-muted, #75677D);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.cell-pkg-lines {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.cell-pkg-name {
    font-size: 0.71875rem; /* 11.5px */
    font-weight: 600;
    color: var(--esi-text, #291633);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.cell-pkg-sub {
    font-size: 0.71875rem; /* 11.5px */
    color: var(--esi-text-muted, #75677D);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.order-id-code-mini {
    color: var(--esi-deep-aubergine, #1C0826);
    font-weight: 600;
}

.cell-status-stack {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    align-items: flex-start;
}

.badge-esi-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem; /* 11px */
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
}

.badge-bullet-dot {
    display: inline-block;
    width: 4.5px;
    height: 4.5px;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
}

.badge-wf-approved { background: #F5F0FA; color: #431454; border: 1px solid #E8DDF2; }
.badge-wf-new { background: #EFF6FF; color: #1D4ED8; border: 1px solid #DBEAFE; }
.badge-wf-preview { background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; }
.badge-wf-revision { background: #FEF3C7; color: #B45309; border: 1px solid #FDE68A; }
.badge-wf-published { background: #F0FDF4; color: #15803D; border: 1px solid #BBF7D0; }

.badge-pay-paid { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
.badge-pay-waiting { background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; }
.badge-pay-unpaid { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }

.badge-portal-active { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
.badge-portal-disabled { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.badge-portal-pending { background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; }

/* Table Pagination Footer */
.orders-table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0.25rem 0.25rem;
    font-size: 0.75rem; /* 12px */
    color: var(--esi-text-muted, #75677D);
}

.pagination-btn-group {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.pg-btn {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid var(--esi-subtle-border, #E8DFEC);
    background: #FFFFFF;
    color: var(--esi-primary-text, #29132D);
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pg-btn:hover:not(.disabled) {
    border-color: var(--esi-deep-aubergine, #1C0826);
    color: var(--esi-deep-aubergine, #1C0826);
}

.pg-btn.active {
    background: var(--esi-deep-aubergine, #1C0826);
    border-color: var(--esi-deep-aubergine, #1C0826);
    color: #FFFFFF !important;
}

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

/* ==========================================================================
   ESI Admin CMS — 4-Kolom Horizontal x 3-Baris Vertikal Layout System
   ========================================================================== */
.orders-table-4col {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.orders-table-4col th {
    background: #FAF8FC;
    padding: 0.6rem 0.95rem;
    font-size: 0.6875rem; /* 11px */
    font-weight: 600;
    color: var(--esi-text-muted, #75677D);
    border-bottom: 1px solid var(--esi-border, #E9DFED);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.orders-table-4col td {
    padding: 0.65rem 0.95rem;
    border-bottom: 1px solid #F2EEF6;
    vertical-align: top;
}

.orders-table-4col tbody tr:hover td {
    background: #FCFAFD;
}

.orders-table-4col tbody tr:last-child td {
    border-bottom: none;
}

/* KOLOM 1: ACARA & WAKTU */
.col-event-stack {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.event-line-1 {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-wrap: wrap;
    line-height: 1.25;
}

.event-title-main {
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    color: var(--esi-text, #291633);
}

.event-client-sub {
    font-size: 0.71875rem; /* 11.5px */
    color: var(--esi-text-muted, #75677D);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.event-dot {
    color: #D1C5D8;
    user-select: none;
}

.event-line-2 {
    font-size: 0.71875rem; /* 11.5px */
    color: var(--esi-text-muted, #75677D);
    line-height: 1.2;
}

.event-date-text {
    font-weight: 500;
}

.event-line-3 {
    font-size: 0.71875rem; /* 11.5px */
    color: var(--esi-text-muted, #75677D);
    line-height: 1.2;
}

.event-time-text {
    font-weight: 500;
}

/* KOLOM 2: PAKET & IDENTITAS PESANAN */
.col-pkg-stack {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.pkg-line-1 {
    line-height: 1.25;
}

.pkg-name-main {
    font-size: 0.75rem; /* 12px */
    font-weight: 700;
    color: var(--esi-deep-aubergine, #1C0826);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.pkg-line-2 {
    line-height: 1.2;
}

.pkg-order-id {
    font-size: 0.71875rem; /* 11.5px */
    font-weight: 600;
    color: var(--esi-text, #291633);
    letter-spacing: 0.02em;
}

.pkg-line-3 {
    line-height: 1.2;
}

.pkg-slug-text {
    font-size: 0.71875rem; /* 11.5px */
    color: var(--esi-text-muted, #75677D);
    font-weight: 400;
    word-break: break-all;
}

/* KOLOM 3: STATUS */
.col-status-stack {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    align-items: flex-start;
}

.status-line-1,
.status-line-2,
.status-line-3 {
    display: flex;
    align-items: center;
}

/* KOLOM 4: AKSI */
.col-actions-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.action-line-1 {
    display: flex;
    justify-content: flex-end;
}

.action-line-2 {
    display: flex;
    justify-content: flex-end;
}

.action-line-3 {
    display: flex;
    justify-content: flex-end;
}

.action-icons-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Button & Icon Adjustments for 4-Column Table */
.btn-workspace-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--esi-deep-aubergine, #1C0826);
    color: #FFFFFF !important;
    font-size: 0.71875rem; /* 11.5px */
    font-weight: 600;
    padding: 0.22rem 0.65rem;
    border-radius: 9999px;
    text-decoration: none;
    border: 1px solid var(--esi-deep-aubergine, #1C0826);
    box-shadow: 0 1px 3px rgba(28, 8, 38, 0.2);
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-workspace-pill:hover {
    background: var(--esi-aubergine-hover, #32113F);
    border-color: var(--esi-aubergine-hover, #32113F);
    box-shadow: 0 2px 8px rgba(28, 8, 38, 0.3);
    transform: translateY(-1px);
    color: #FFFFFF !important;
}

.btn-action-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--esi-subtle-border, #E8DFEC);
    background: #FFFFFF;
    color: var(--esi-primary-text, #29132D);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.15s ease;
    cursor: pointer;
    flex-shrink: 0;
}

.btn-action-icon:hover:not(.disabled) {
    border-color: var(--esi-gold, #E9B95D);
    background: #FAF8FC;
    color: var(--esi-deep-aubergine, #1C0826);
    transform: translateY(-1px);
}

.btn-action-icon.disabled,
.btn-action-icon:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #FAF8FC;
    border-color: #ECE5F0;
    color: #9C8FA3;
}

/* Responsive Rules for 4-Column Table */
@media (max-width: 992px) {
    .orders-table-4col th,
    .orders-table-4col td {
        padding: 0.55rem 0.65rem;
    }
}

@media (max-width: 768px) {
    .orders-table-card {
        border-radius: 10px;
        overflow-x: hidden;
    }
    .orders-table-4col,
    .orders-table-4col thead,
    .orders-table-4col tbody,
    .orders-table-4col th,
    .orders-table-4col td,
    .orders-table-4col tr {
        display: block;
    }
    .orders-table-4col thead {
        display: none;
    }
    .orders-table-4col tr.order-row,
    .orders-table-4col tr.payment-row {
        padding: 0.85rem 0.95rem;
        border-bottom: 1px solid #F2EEF6;
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
        background: #FFFFFF;
    }
    .orders-table-4col tr.order-row:hover,
    .orders-table-4col tr.payment-row:hover {
        background: #FCFAFD;
    }
    .orders-table-4col td {
        padding: 0 !important;
        border: none !important;
        width: 100% !important;
    }
    .orders-table-4col td.col-event {
        order: 1;
    }
    .orders-table-4col td.col-pkg {
        order: 2;
    }
    .orders-table-4col td.col-status {
        order: 3;
        padding-top: 0.2rem !important;
    }
    .col-status-stack {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.35rem;
    }
    .orders-table-4col td.col-actions {
        order: 4;
        padding-top: 0.45rem !important;
        border-top: 1px dashed #F2EEF6 !important;
        margin-top: 0.2rem;
    }
    .col-actions-stack {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 0.35rem;
    }
    .action-line-1 {
        flex: 1;
    }
    .btn-workspace-pill {
        width: 100%;
        height: 36px;
        justify-content: center;
        font-size: 0.78125rem;
    }
    .action-icons-inline {
        gap: 0.35rem;
    }
    .btn-action-icon {
        width: 36px;
        height: 36px;
    }
    .btn-action-icon svg {
        width: 15px;
        height: 15px;
    }
}

/* Responsive Table Layout */
@media (max-width: 1200px) {
    .orders-metrics-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .orders-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .orders-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .orders-search-wrapper {
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .orders-metrics-grid {
        grid-template-columns: 1fr;
    }
    .orders-page-header {
        flex-direction: column;
        align-items: stretch;
    }
    .btn-input-new-order {
        justify-content: center;
    }
    .orders-table-footer {
        flex-direction: column;
        gap: 0.75rem;
        align-items: center;
    }
}

/* ==========================================================================
   PAYMENTS & TRANSACTIONS MANAGEMENT (REFINED ESI DESIGN SYSTEM)
   ========================================================================== */
.payments-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
    margin-bottom: 1.15rem;
}

@media (max-width: 992px) {
    .payments-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .payments-metrics-grid {
        grid-template-columns: 1fr;
    }
}

.payments-table-card {
    background: #FFFFFF;
    border: 1px solid var(--esi-border, #E9DFED);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(33, 10, 46, 0.03);
    overflow: hidden;
    margin-top: 1.25rem;
}

.payments-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1.15rem;
    border-bottom: 1px solid #F0EAF4;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.payments-table-6col {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.payments-table-6col th {
    background: #FAF8FC;
    padding: 0.65rem 0.95rem;
    font-size: 0.6875rem; /* 11px */
    font-weight: 600;
    color: var(--esi-text-muted, #75677D);
    border-bottom: 1px solid #E9DFED;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.payments-table-6col td {
    padding: 0.75rem 0.95rem;
    border-bottom: 1px solid #F2EEF6;
    vertical-align: middle;
}

.payments-table-6col tbody tr:hover td {
    background: #FCFAFD;
}

.payments-table-6col tbody tr:last-child td {
    border-bottom: none;
}

.col-order-main {
    font-size: 0.84375rem; /* 13.5px */
    font-weight: 700;
    color: var(--esi-text, #291633);
    line-height: 1.25;
}

.col-order-meta {
    font-size: 0.71875rem; /* 11.5px */
    color: var(--esi-text-muted, #75677D);
    margin-top: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.col-client-name {
    font-size: 0.8125rem; /* 13px */
    font-weight: 600;
    color: var(--esi-text, #291633);
    line-height: 1.25;
}

.col-client-phone {
    font-size: 0.71875rem; /* 11.5px */
    color: var(--esi-text-muted, #75677D);
    margin-top: 0.2rem;
}

.col-pkg-name {
    font-size: 0.78125rem; /* 12.5px */
    font-weight: 600;
    color: var(--esi-text, #291633);
    line-height: 1.25;
}

.col-pkg-price {
    font-size: 0.8125rem; /* 13px */
    font-weight: 700;
    margin-top: 0.15rem;
}

.btn-proof-preview {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.65rem;
    border-radius: 6px;
    font-size: 0.71875rem; /* 11.5px */
    font-weight: 600;
    color: var(--esi-deep-aubergine, #1C0826);
    background: #FAF8FC;
    border: 1px solid var(--esi-subtle-border, #E8DFEC);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-proof-preview:hover {
    background: #FAF8FC;
    border-color: var(--esi-gold, #E9B95D);
    color: var(--esi-deep-aubergine, #1C0826);
    transform: translateY(-1px);
}

.proof-empty-text {
    font-size: 0.71875rem;
    color: #94A3B8;
    font-style: normal;
}

.btn-action-set-lunas {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.65rem;
    border-radius: 6px;
    font-size: 0.71875rem;
    font-weight: 600;
    color: #FFFFFF;
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    border: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(5, 150, 105, 0.2);
    transition: all 0.15s ease;
}

.btn-action-set-lunas:hover {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.3);
    transform: translateY(-1px);
}

.btn-action-detail {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.28rem 0.65rem;
    border-radius: 6px;
    font-size: 0.71875rem;
    font-weight: 600;
    color: var(--esi-primary-text, #29132D);
    background: #FFFFFF;
    border: 1px solid var(--esi-subtle-border, #E8DFEC);
    text-decoration: none;
    transition: all 0.15s ease;
}

.btn-action-detail:hover {
    background: #FAF8FC;
    border-color: var(--esi-gold, #E9B95D);
    color: var(--esi-deep-aubergine, #1C0826);
    transform: translateY(-1px);
}

/* Lightbox Modal for Proof Image */
.proof-lightbox-dialog {
    max-width: 620px;
}
.proof-lightbox-img {
    max-width: 100%;
    max-height: 65vh;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #E9DFED;
    display: block;
    margin: 0 auto;
}

/* Mobile responsive for transactions */
@media (max-width: 768px) {
    .payments-table-card {
        border-radius: 10px;
        overflow-x: hidden;
    }
    .payments-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .payments-table-6col,
    .payments-table-6col thead,
    .payments-table-6col tbody,
    .payments-table-6col th,
    .payments-table-6col td,
    .payments-table-6col tr {
        display: block;
    }
    .payments-table-6col thead {
        display: none;
    }
    .payments-table-6col tr.payment-row {
        padding: 0.85rem 0.95rem;
        border-bottom: 1px solid #F2EEF6;
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
        background: #FFFFFF;
    }
    .payments-table-6col tr.payment-row:hover {
        background: #FCFAFD;
    }
    .payments-table-6col td {
        padding: 0 !important;
        border: none !important;
        width: 100% !important;
    }
    .payments-table-6col td.td-actions {
        padding-top: 0.5rem !important;
        border-top: 1px dashed #F2EEF6 !important;
        margin-top: 0.25rem;
    }
    .payments-table-6col td.td-actions .actions-group {
        justify-content: flex-start !important;
    }
}