/* Mengeksekusi Phase 14 - Task 14.1, 14.5, 14.6 (Jundi Design System, Layout & Semantic Buttons) */
:root {
    /* ═══ JUNDI KREATIF — Brand Colors ═══ */
    --jundi-primary: #005BEA;
    --jundi-primary-dark: #0043B0;
    --jundi-primary-light: #E8F0FE;
    --jundi-secondary: #02948D;
    --jundi-accent: #FF6B35;

    /* ═══ Semantic Colors ═══ */
    --jundi-success: #10B981;
    --jundi-warning: #F59E0B;
    --jundi-danger: #EF4444;
    --jundi-info: #3B82F6;

    /* ═══ Neutral Palette ═══ */
    --jundi-text-primary: #1F2937;
    --jundi-text-secondary: #6B7280;
    --jundi-text-muted: #9CA3AF;
    --jundi-border: #E5E7EB;
    --jundi-bg-page: #F3F4F6;
    --jundi-bg-card: #FFFFFF;
    --jundi-bg-sidebar: #FFFFFF;

    /* ═══ Typography ═══ */
    --jundi-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --jundi-font-size-xs: 0.75rem;
    --jundi-font-size-sm: 0.8125rem;
    --jundi-font-size-base: 0.875rem;
    --jundi-font-size-md: 1rem;
    --jundi-font-size-lg: 1.125rem;
    --jundi-font-size-xl: 1.5rem;

    /* ═══ Spacing Scale (8px grid) & Radius ═══ */
    --jundi-space-1: 0.25rem;
    --jundi-space-2: 0.5rem;
    --jundi-space-3: 0.75rem;
    --jundi-space-4: 1rem;
    --jundi-space-5: 1.5rem;
    --jundi-space-6: 2rem;
    --jundi-radius-sm: 6px;
    --jundi-radius-md: 8px;
    --jundi-radius-lg: 12px;

    /* ═══ Shadows & Transitions ═══ */
    --jundi-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --jundi-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --jundi-transition: all 0.2s ease-in-out;
}

body {
    font-family: var(--jundi-font-family) !important;
    font-size: var(--jundi-font-size-base) !important;
    color: var(--jundi-text-primary) !important;
    background-color: var(--jundi-bg-page) !important;
}

/* Base button reset */
.btn, .jundi-btn {
    font-family: var(--jundi-font-family);
    font-size: var(--jundi-font-size-base) !important;
    font-weight: 500;
    border-radius: var(--jundi-radius-md) !important;
    padding: 10px 18px !important;
    transition: var(--jundi-transition);
    border: 1px solid transparent;
    cursor: pointer;
    min-height: 36px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    line-height: normal !important;
    white-space: nowrap !important;
}

/* ═══ BUTTON SEMANTIC HIERARCHY ═══ */
.jundi-btn-primary, .btn-primary {
    background-color: var(--jundi-primary) !important;
    border-color: var(--jundi-primary) !important;
    color: #fff !important;
    font-weight: 600;
}
.jundi-btn-primary:hover, .btn-primary:hover {
    background-color: var(--jundi-primary-dark) !important;
    border-color: var(--jundi-primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: var(--jundi-shadow-md);
}

.jundi-btn-secondary {
    background-color: transparent !important;
    border: 1px solid var(--jundi-border) !important;
    color: var(--jundi-text-secondary) !important;
    font-weight: 500;
}
.jundi-btn-secondary:hover {
    background-color: var(--jundi-bg-page) !important;
    border-color: var(--jundi-text-muted) !important;
    color: var(--jundi-text-primary) !important;
}

.jundi-btn-create, .btn-success {
    background-color: var(--jundi-success) !important;
    border-color: var(--jundi-success) !important;
    color: #fff !important;
    font-weight: 500;
}
.jundi-btn-create:hover, .btn-success:hover {
    background-color: #059669 !important;
    border-color: #059669 !important;
    transform: translateY(-1px);
}

.jundi-btn-danger, .btn-danger, .bg-maroon {
    background-color: var(--jundi-danger) !important;
    border-color: var(--jundi-danger) !important;
    color: #fff !important;
    font-weight: 500;
}
.jundi-btn-danger:hover, .btn-danger:hover {
    background-color: #DC2626 !important;
}

/* ═══ ACTION BARS ═══ */
.jundi-action-bar-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--jundi-space-2);
    flex-wrap: wrap;
}
.box-header .box-tools.jundi-action-bar-top {
    position: relative;
    top: auto;
    right: auto;
    margin: 0;
}

.jundi-action-bar-bottom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--jundi-space-3);
    padding: var(--jundi-space-4) 0;
    margin-top: var(--jundi-space-4);
    border-top: 1px solid var(--jundi-border);
}

.jundi-action-bar-bottom.jundi-split {
    justify-content: space-between;
}
.jundi-action-bar-bottom.jundi-split .jundi-action-left {
    display: flex;
    gap: var(--jundi-space-2);
}
.jundi-action-bar-bottom.jundi-split .jundi-action-right {
    display: flex;
    gap: var(--jundi-space-2);
}

.modal-footer.jundi-action-bar-bottom {
    border-top: 1px solid var(--jundi-border);
    padding: var(--jundi-space-3) var(--jundi-space-4);
}

.jundi-danger-zone {
    margin-top: var(--jundi-space-6);
    padding: var(--jundi-space-4);
    border: 1px solid var(--jundi-danger);
    border-radius: var(--jundi-radius-md);
    background-color: rgba(239, 68, 68, 0.04);
}
.jundi-danger-zone .jundi-danger-zone-title {
    color: var(--jundi-danger);
    font-weight: 600;
    font-size: var(--jundi-font-size-sm);
    text-transform: uppercase;
    margin-bottom: var(--jundi-space-3);
}

/* ═══ TABEL RESPONSIF & LAYOUT CLEANUP ═══ */
.table { border-collapse: separate; border-spacing: 0; }
thead { background-color: var(--jundi-primary) !important; color: #fff; }
thead th { padding: var(--jundi-space-3) var(--jundi-space-4) !important; color: #fff !important; border-bottom: 2px solid var(--jundi-primary-dark) !important;}
.table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--jundi-primary-light) !important; }

.box { border-radius: var(--jundi-radius-md) !important; border: 1px solid var(--jundi-border) !important; box-shadow: var(--jundi-shadow-sm) !important; }
.form-control { border-radius: var(--jundi-radius-md) !important; }

/* ═══ MOBILE RESPONSIVENESS (<768px) ═══ */
@media (max-width: 768px) {
    .btn, .jundi-btn {
        min-height: 44px !important;
        padding: 12px 20px !important;
        font-size: var(--jundi-font-size-md) !important;
        width: 100% !important; /* Full width form buttons */
        margin-bottom: 8px !important;
    }
    .jundi-action-bar-bottom { flex-direction: column-reverse; gap: var(--jundi-space-2); }
    .jundi-action-bar-bottom.jundi-split { flex-direction: column-reverse; }
    .jundi-action-bar-bottom.jundi-split .jundi-action-left, .jundi-action-bar-bottom.jundi-split .jundi-action-right { width: 100%; flex-direction: column; }
    .jundi-action-bar-bottom.jundi-split .jundi-action-right .btn, .jundi-action-bar-bottom.jundi-split .jundi-action-left .btn { width: 100%; }

    .jundi-action-bar-top { width: 100%; margin-top: var(--jundi-space-2); justify-content: stretch; }
    
    .table.table-hover tr, .table.table-striped.table-hover tr {
        display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--jundi-border);
    }
    .table.table-hover td { border: 0 !important; }
    .box-footer.navbar-fixed-bottom { padding-bottom: calc(var(--jundi-space-3) + env(safe-area-inset-bottom, 0px)) !important; }
}