/*
 * LBN Cultural Events — Cultural Manager Dashboard CSS
 * DS v.3 sandy neumorphic. Maps global tokens (--primary_color, --c-sand-*,
 * --shadow-*, --r-sm, --r-md) injected by lbn-avada-manager via wp_head.
 *
 * Pre-update 8-point checklist (feedback_plugin_css_standards.md):
 * ✅ Button base radius var(--r-sm, 8px) — never pill
 * ✅ .lbn-ce-btn-sm: min-height:auto
 * ✅ Empty-state icon uses > i (direct child)
 * ✅ .lbn-ce-btn-icon { display:inline-flex !important }
 * ✅ Inputs border:0 + inset shadow (neumorphic)
 * ✅ Select: appearance:auto
 * ✅ Cards border-radius: var(--r-md, 14px)
 * ✅ Status badges 999px (tags only, not action buttons)
 * ✅ No hardcoded hex — all DS tokens with sandy fallbacks
 * ✅ lbnv= cache-busting handled in PHP enqueue
 */

/* ── Token aliases ────────────────────────────────────────────────────────── */
.lbn-ce-dashboard {
    --ce-primary:     var(--primary_color, #285260);
    --ce-primary-dk:  #1e3d47;
    --ce-on-primary:  var(--c-text-on-primary, #faf3e3);
    --ce-bg:          var(--c-sand-200, #f3e8d1);
    --ce-bg-card:     var(--c-sand-100, #faf3e3);
    --ce-bg-subtle:   var(--c-sand-300, #ece0c8);
    --ce-bg-input:    var(--c-sand-100, #faf3e3);
    --ce-text:        var(--c-text-body, #5c4a32);
    --ce-text-muted:  var(--c-text-muted, #8a7050);
    --ce-border:      var(--c-border-soft, #e4d6b8);
    --ce-shadow:      var(--shadow-raised-sm);
    --ce-shadow-md:   var(--shadow-raised);
    --ce-inset:       var(--shadow-inset-sm);
    --ce-focus:       var(--shadow-focus);
    --ce-danger:      var(--c-danger, #b85c4a);
    --ce-danger-bg:   var(--c-danger-bg, #f1d9d2);
    --ce-success:     var(--c-success, #4f8a6b);
    --ce-success-bg:  var(--c-success-bg, #dfe8de);
    --ce-warning:     var(--c-warning, #c89a4c);
    --ce-warning-bg:  var(--c-warning-bg, #f4e6cd);
}

/* ── Layout ── */
.lbn-ce-dashboard {
    font-family: Tajawal, sans-serif;
    color: var(--ce-text);
    background: var(--ce-bg);
    min-height: 100vh;
    border-radius: var(--r-md, 14px);
    box-shadow: var(--ce-shadow-md);
    overflow: hidden;
}
/* RTL: conditional only — never hardcode direction:rtl */
[dir="rtl"] .lbn-ce-dashboard,
.rtl .lbn-ce-dashboard { direction: rtl; }

/* ── Header ── */
.lbn-ce-header {
    background: var(--ce-primary);
    padding: 0 24px;
}
.lbn-ce-header-icon,
.lbn-ce-header-title,
.lbn-ce-header-name { color: var(--ce-on-primary) !important; }
.lbn-ce-header-name { opacity: .8; }
.lbn-ce-header-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    gap: 16px;
}
.lbn-ce-header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lbn-ce-header-icon {
    color: var(--ce-primary);
    font-size: 20px;
}
.lbn-ce-header-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ce-text);
}
.lbn-ce-header-user {
    display: flex;
    align-items: center;
    gap: 12px;
}
.lbn-ce-header-name {
    color: var(--ce-text-muted);
    font-size: 14px;
}

/* Sign-out button lives inside the dark-teal header */
.lbn-ce-header .lbn-ce-btn-signout {
    background: transparent;
    color: var(--ce-on-primary) !important;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: var(--r-sm, 8px);
    padding: 6px 14px;
    min-height: auto;
    font-size: 13px;
}
.lbn-ce-header .lbn-ce-btn-signout:hover { background: rgba(255,255,255,.12); }

/* ── Tab nav ── */
.lbn-ce-nav {
    background: var(--ce-bg-subtle);
    border-bottom: 2px solid var(--ce-border);
    display: flex;
    padding: 0 24px;
    overflow-x: auto;
    scrollbar-width: none;
}
.lbn-ce-nav::-webkit-scrollbar { display: none; }
.lbn-ce-nav-btn {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 16px 20px;
    color: var(--ce-text-muted);
    font-family: Tajawal, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color .2s, border-color .2s;
    white-space: nowrap;
}
.lbn-ce-nav-btn:hover { color: var(--ce-text); }
.lbn-ce-nav-btn.active {
    color: var(--ce-primary);
    border-bottom-color: var(--ce-primary);
}

/* ── Tab panels ── */
.lbn-ce-tab {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px;
}
.lbn-ce-tab-hidden { display: none; }

/* ── Tab header ── */
.lbn-ce-tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}
.lbn-ce-tab-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--ce-text);
    margin: 0;
}
.lbn-ce-tab-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── Buttons ── */
.lbn-ce-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    min-height: 44px;
    border-radius: var(--r-sm);
    border: 0;
    font-family: Tajawal, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s, background .2s;
    text-decoration: none;
}
.lbn-ce-btn:disabled { opacity: .6; cursor: not-allowed; }
.lbn-ce-btn-primary {
    background: var(--ce-primary);
    color: var(--ce-on-primary) !important;
    box-shadow: var(--ce-shadow);
}
.lbn-ce-btn-primary:hover:not(:disabled) { background: var(--ce-primary-dk); }
.lbn-ce-btn-secondary {
    background: var(--ce-bg-card);
    color: var(--ce-text) !important;
    box-shadow: var(--ce-shadow);
}
.lbn-ce-btn-secondary:hover:not(:disabled) {
    box-shadow: var(--ce-inset);
    color: var(--ce-primary) !important;
}
.lbn-ce-btn-danger {
    background: var(--ce-danger-bg);
    color: var(--ce-danger) !important;
    box-shadow: var(--ce-shadow);
}
.lbn-ce-btn-sm { padding: 6px 12px; min-height: auto; font-size: 13px; }
.lbn-ce-btn-icon { display: inline-flex !important; align-items: center; justify-content: center; line-height: 1; }

/* ── Events list ── */
.lbn-ce-events-list { display: flex; flex-direction: column; gap: 12px; }
.lbn-ce-loading {
    text-align: center;
    color: var(--ce-text-muted);
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.lbn-ce-event-row {
    background: var(--ce-bg-card);
    border-radius: var(--r-md, 14px);
    box-shadow: var(--ce-shadow);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.lbn-ce-event-row-date {
    min-width: 80px;
    text-align: center;
    background: var(--ce-bg-subtle);
    border-radius: var(--r-sm, 8px);
    padding: 8px 12px;
    font-size: 13px;
    color: var(--ce-primary);
    font-weight: 700;
}
.lbn-ce-event-row-info { flex: 1; min-width: 0; }
.lbn-ce-event-row-title { font-size: 16px; font-weight: 700; color: var(--ce-text); margin-bottom: 4px; }
.lbn-ce-event-row-meta {
    font-size: 13px;
    color: var(--ce-text-muted);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.lbn-ce-event-row-actions { display: flex; gap: 8px; align-items: center; }
.lbn-ce-event-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 600;
}
.lbn-ce-event-status-badge.publish { background: var(--ce-success-bg); color: var(--ce-success); }
.lbn-ce-event-status-badge.draft   { background: var(--ce-bg-subtle);  color: var(--ce-text-muted); }
.lbn-ce-event-status-badge.trash   { background: var(--ce-danger-bg);  color: var(--ce-danger); }

/* ── Empty state ── */
.lbn-ce-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--ce-text-muted);
    background: var(--ce-bg-card);
    border-radius: var(--r-md, 14px);
    box-shadow: var(--ce-inset);
}
.lbn-ce-empty-state > i {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
    color: var(--ce-border);
}
.lbn-ce-empty-state p { font-size: 15px; margin-bottom: 20px; }

/* ── Form ── */
.lbn-ce-form {
    background: var(--ce-bg-card);
    border-radius: var(--r-md, 14px);
    box-shadow: var(--ce-shadow-md);
    padding: 28px;
    max-width: 720px;
}
.lbn-ce-field { margin-bottom: 20px; }
.lbn-ce-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
@media (max-width: 768px) {
    .lbn-ce-header       { padding: 0 16px; }
    .lbn-ce-header-inner { height: 56px; }
    .lbn-ce-nav          { padding: 0 16px; }
    .lbn-ce-nav-btn      { padding: 14px 16px; }
    .lbn-ce-tab          { padding: 24px 16px; }
    .lbn-ce-form         { padding: 20px 16px; }
}

@media (max-width: 600px) { .lbn-ce-field-row { grid-template-columns: 1fr; } }
.lbn-ce-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ce-text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.lbn-ce-input,
.lbn-ce-textarea,
.lbn-ce-select {
    width: 100%;
    background: var(--ce-bg-input);
    border: 0;
    box-shadow: var(--ce-inset);
    border-radius: var(--r-sm, 8px);
    padding: 10px 14px;
    color: var(--ce-text);
    font-family: Tajawal, sans-serif;
    font-size: 14px;
    box-sizing: border-box;
    min-height: 44px;
}
.lbn-ce-input:focus,
.lbn-ce-textarea:focus,
.lbn-ce-select:focus {
    outline: none;
    box-shadow: var(--ce-inset), var(--ce-focus);
}
.lbn-ce-select { appearance: auto; cursor: pointer; }
.lbn-ce-textarea { resize: vertical; min-height: 120px; }
.lbn-ce-field-hint { display: block; font-size: 12px; color: var(--ce-text-muted); margin-top: 5px; }
.lbn-ce-date-type { display: flex; gap: 20px; margin-bottom: 8px; }
.lbn-ce-radio-label { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }

/* ── Image picker ── */
.lbn-ce-image-picker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lbn-ce-image-preview {
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: var(--r-sm);
    overflow: hidden;
    border: 1px solid var(--ce-border);
}
.lbn-ce-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.lbn-ce-image-remove {
    position: absolute;
    top: 4px;
    left: 4px;
    background: var(--ce-primary);
    border: none;
    border-radius: 50%;
    color: var(--ce-on-primary);
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    padding: 0;
}

/* ── Form actions ── */
.lbn-ce-form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid var(--ce-border);
}
.lbn-ce-form-notice { font-size: 13px; font-weight: 600; }
.lbn-ce-form-notice.success { color: var(--ce-success); }
.lbn-ce-form-notice.error   { color: var(--ce-danger); }

/* ── Access denied ── */
.lbn-ce-access-denied { padding: 40px; text-align: center; color: var(--ce-danger); }