/* =============================================================================
   custom.css — RT-19 Orchid Regency (RT19)
   Tema: Orchid/Emerald Premium, Glassmorphism, Mobile-first
   Override: Bootstrap 4 + AdminLTE 3 supaya tampil modern seperti RT.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

/* =============================================================================
   CSS VARIABLES
   ============================================================================= */
:root {
    --emerald-50:  #ecfdf5;
    --emerald-100: #d1fae5;
    --emerald-200: #a7f3d0;
    --emerald-300: #6ee7b7;
    --emerald-400: #34d399;
    --emerald-500: #10b981;
    --emerald-600: #059669;
    --emerald-700: #047857;
    --emerald-800: #065f46;
    --emerald-900: #064e3b;
    --emerald-950: #022c22;

    --teal-400: #2dd4bf;
    --teal-500: #14b8a6;
    --teal-600: #0d9488;

    --amber-400: #fbbf24;
    --amber-500: #f59e0b;

    --gradient-primary: linear-gradient(135deg, var(--emerald-600), var(--teal-600));
    --gradient-hero:    linear-gradient(135deg, var(--emerald-900) 0%, var(--emerald-700) 50%, var(--teal-600) 100%);
    --gradient-card:    linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));

    --shadow-sm:   0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow-md:   0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    --shadow-xl:   0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
    --shadow-glow: 0 0 20px rgba(16,185,129,0.3);

    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;

    --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   350ms cubic-bezier(0.4, 0, 0.2, 1);

    --sidebar-width: 260px;
}

/* =============================================================================
   BASE & RESET
   ============================================================================= */
html {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    background: linear-gradient(180deg, #f0fdf4 0%, #f8fafc 50%, #f1f5f9 100%) !important;
    min-height: 100vh;
    color: #1e293b !important;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    color: var(--emerald-900);
}

/* =============================================================================
   CUSTOM SCROLLBAR
   ============================================================================= */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--emerald-300); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--emerald-500); }

/* =============================================================================
   APP SHELL: SIDEBAR (Desktop)
   ============================================================================= */
.rt-sidebar {
    display: none;
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: var(--sidebar-width);
    background: var(--gradient-hero);
    flex-direction: column;
    padding: 1.5rem 1rem;
    z-index: 1030;
    overflow-y: auto;
}
@media (min-width: 992px) {
    .rt-sidebar { display: flex; }
    .rt-main    { margin-left: var(--sidebar-width); }
}

.rt-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 0.5rem;
    margin-bottom: 1.5rem;
    text-decoration: none;
}
.rt-sidebar-logo:hover { text-decoration: none; }
.rt-sidebar-logo-icon {
    width: 46px; height: 46px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.2);
}
.rt-sidebar-logo-icon img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.rt-sidebar-logo h1 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: white;
    line-height: 1.2;
    margin: 0;
}
.rt-sidebar-logo p {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.6);
    margin: 2px 0 0;
}

.rt-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.rt-sidebar-section {
    color: rgba(255,255,255,0.4);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1rem 0.85rem 0.4rem;
}

.rt-sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all var(--transition-fast);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}
.rt-sidebar-item:hover {
    background: rgba(255,255,255,0.1);
    color: white;
    text-decoration: none;
}
.rt-sidebar-item.active {
    background: rgba(255,255,255,0.18);
    color: white;
    font-weight: 600;
}
.rt-sidebar-item i {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.rt-sidebar-user {
    margin-top: auto;
    padding: 1rem 0.5rem 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.15);
}
.rt-sidebar-user-info {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.5rem;
}
.rt-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    border: 2px solid rgba(255,255,255,0.3);
    flex-shrink: 0;
    text-transform: uppercase;
}
.rt-sidebar-user-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
    line-height: 1.2;
}
.rt-sidebar-user-role {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.2;
}

/* =============================================================================
   MOBILE HEADER
   ============================================================================= */
.rt-mobile-header {
    background: var(--gradient-hero);
    padding: 1rem 1rem;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1020;
}
@media (min-width: 992px) {
    .rt-mobile-header { display: none; }
}
.rt-mobile-header-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: white;
    text-decoration: none;
}
.rt-mobile-header-logo:hover { color: white; text-decoration: none; }
.rt-mobile-header-logo img {
    width: 30px; height: 30px;
    border-radius: 50%;
    object-fit: cover;
}
.rt-mobile-header-logo span {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
}
.rt-mobile-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    border: 2px solid rgba(255,255,255,0.3);
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
}
.rt-mobile-avatar:hover { color: white; text-decoration: none; }

/* =============================================================================
   MAIN CONTENT
   ============================================================================= */
.rt-main {
    padding: 1rem 1rem 6rem;
    max-width: 100%;
    min-height: 100vh;
}
@media (min-width: 992px) {
    .rt-main {
        padding: 2rem;
    }
}

.rt-page-header {
    margin-bottom: 1.5rem;
}
.rt-page-header h1 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--emerald-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.rt-page-header h1 i {
    color: var(--emerald-600);
    font-size: 1.3rem;
}
.rt-page-header p {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0.3rem 0 0;
}

/* =============================================================================
   BOTTOM NAV (Mobile) — Modern FAB Style
   ============================================================================= */
.rt-bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(16,185,129,0.12);
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    padding: 0.35rem 0.5rem env(safe-area-inset-bottom, 0.35rem);
    z-index: 1020;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.06);
    height: 64px;
}
@media (min-width: 992px) {
    .rt-bottom-nav, .rt-fab-overlay, .rt-fab-popup { display: none !important; }
}

/* Nav Items */
.rt-bnav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.6rem;
    border-radius: 12px;
    color: #94a3b8;
    text-decoration: none !important;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex: 1;
    min-width: 0;
    gap: 0.2rem;
    position: relative;
    overflow: hidden;
}
.rt-bnav-item i {
    font-size: 1.15rem;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s;
}
.rt-bnav-item:active i {
    transform: scale(0.85);
}
.rt-bnav-item:hover i,
.rt-bnav-item:hover {
    color: var(--emerald-600);
    text-decoration: none;
}
.rt-bnav-item.active {
    color: var(--emerald-600);
}
.rt-bnav-item.active i {
    transform: scale(1.15);
}
.rt-bnav-item.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--emerald-500);
}

/* Center FAB Button */
.rt-bnav-fab-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.rt-bnav-fab {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--emerald-500), var(--emerald-700));
    color: white;
    font-size: 1.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(16,185,129,0.35), 0 0 0 4px rgba(16,185,129,0.08);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    top: -14px;
    z-index: 5;
    outline: none;
}
.rt-bnav-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(16,185,129,0.45), 0 0 0 6px rgba(16,185,129,0.12);
}
.rt-bnav-fab:active {
    transform: scale(0.95);
}
.rt-bnav-fab i {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rt-bnav-fab.is-open {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 4px 18px rgba(239,68,68,0.35), 0 0 0 4px rgba(239,68,68,0.08);
}
.rt-bnav-fab.is-open i {
    transform: rotate(45deg);
}

/* Overlay */
.rt-fab-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1015;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.rt-fab-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* Popup Menu */
.rt-fab-popup {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px) scale(0.9);
    z-index: 1025;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    width: calc(100% - 2rem);
    max-width: 320px;
}
.rt-fab-popup.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
}
.rt-fab-popup-inner {
    background: white;
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.04);
    padding: 0.6rem;
    max-height: 55vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.rt-fab-popup-inner::-webkit-scrollbar { width: 4px; }
.rt-fab-popup-inner::-webkit-scrollbar-thumb { background: var(--emerald-200); border-radius: 4px; }

/* Menu Items in Popup */
.rt-fab-menu-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.85rem;
    border-radius: 14px;
    color: #334155;
    text-decoration: none !important;
    font-size: 0.88rem;
    font-weight: 600;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}
.rt-fab-menu-item:hover {
    background: var(--emerald-50);
    color: var(--emerald-700);
    text-decoration: none;
}
.rt-fab-menu-item:active {
    transform: scale(0.97);
}
.rt-fab-menu-item.active {
    background: var(--emerald-50);
    color: var(--emerald-700);
}

/* Menu Icon */
.rt-fab-menu-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--emerald-100), var(--emerald-50));
    color: var(--emerald-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rt-fab-menu-item:hover .rt-fab-menu-icon {
    transform: scale(1.1);
}
.rt-fab-menu-icon.logout {
    background: linear-gradient(135deg, #fecaca, #fee2e2);
    color: #dc2626;
}

/* Ripple effect */
.rt-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.2);
    width: 100px;
    height: 100px;
    margin-top: -50px;
    margin-left: -50px;
    animation: rt-ripple-anim 0.6s ease-out forwards;
    pointer-events: none;
}
@keyframes rt-ripple-anim {
    from { transform: scale(0); opacity: 1; }
    to   { transform: scale(3); opacity: 0; }
}

/* =============================================================================
   GLASSMORPHISM CARD
   ============================================================================= */
.glass-card {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 1.25rem;
}

/* =============================================================================
   OVERRIDE — BOOTSTRAP 4 / ADMINLTE
   ============================================================================= */

/* Cards */
.card {
    border: none !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
    background: rgba(255,255,255,0.85) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg) !important;
}
.card-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(16,185,129,0.12) !important;
    padding: 1rem 1.25rem !important;
    font-weight: 600;
}
.card-header .card-title {
    color: var(--emerald-900);
    font-weight: 700;
    font-size: 1rem;
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.card-body { padding: 1.25rem !important; }
.card-footer {
    background: transparent !important;
    border-top: 1px solid rgba(16,185,129,0.12) !important;
}

/* Card variants -> tinted accents */
.card-primary:not(.card-outline) > .card-header,
.card-info:not(.card-outline) > .card-header {
    background: linear-gradient(135deg, var(--emerald-700), var(--teal-600)) !important;
    color: white !important;
    border-bottom: none !important;
}
.card-primary:not(.card-outline) > .card-header .card-title,
.card-info:not(.card-outline) > .card-header .card-title { color: white !important; }

.card-success:not(.card-outline) > .card-header {
    background: linear-gradient(135deg, var(--emerald-600), var(--emerald-500)) !important;
    color: white !important;
    border-bottom: none !important;
}
.card-success:not(.card-outline) > .card-header .card-title { color: white !important; }

.card-danger:not(.card-outline) > .card-header,
.card-danger.bg-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    border-bottom: none !important;
}
.card-danger > .card-header .card-title,
.card-danger .card-title { color: white !important; }

.card-warning:not(.card-outline) > .card-header {
    background: linear-gradient(135deg, var(--amber-500), var(--amber-400)) !important;
    color: white !important;
    border-bottom: none !important;
}

/* AdminLTE small-box -> stat card */
.small-box {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid rgba(255,255,255,0.6);
    overflow: hidden;
    position: relative;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.small-box:hover { transform: translateY(-3px); box-shadow: var(--shadow-xl) !important; }
.small-box > .inner { padding: 1.25rem; }
.small-box h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 1.7rem;
    color: white;
    margin: 0 0 0.25rem;
    line-height: 1.1;
}
.small-box p { color: rgba(255,255,255,0.9); margin: 0; font-size: 0.85rem; }
.small-box .icon { color: rgba(255,255,255,0.25); top: 12px; right: 16px; font-size: 56px; }
.small-box .icon > i { font-size: 56px; }
.small-box-footer {
    background: rgba(0,0,0,0.15) !important;
    color: rgba(255,255,255,0.95) !important;
    padding: 0.55rem 1rem;
    font-size: 0.8rem;
    text-transform: none;
    letter-spacing: 0.02em;
    transition: background var(--transition-fast);
}
.small-box-footer:hover {
    background: rgba(0,0,0,0.25) !important;
    color: white !important;
    text-decoration: none;
}

/* small-box backgrounds */
.small-box.bg-info     { background: linear-gradient(135deg, var(--teal-600), var(--emerald-600)) !important; color: white !important; }
.small-box.bg-success  { background: linear-gradient(135deg, var(--emerald-600), var(--emerald-700)) !important; color: white !important; }
.small-box.bg-warning  { background: linear-gradient(135deg, var(--amber-500), #fb923c) !important; color: white !important; }
.small-box.bg-danger   { background: linear-gradient(135deg, #ef4444, #dc2626) !important; color: white !important; }

/* Generic bg utility shifts to brand */
.bg-info     { background-color: var(--teal-600) !important; }
.bg-success  { background-color: var(--emerald-600) !important; }
.bg-primary  { background-color: var(--emerald-700) !important; }

/* Buttons */
.btn {
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    transition: all var(--transition-normal) !important;
    padding: 0.55rem 1.1rem !important;
    border: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
.btn:focus, .btn:active { box-shadow: none !important; outline: none !important; }
.btn-sm { padding: 0.35rem 0.75rem !important; font-size: 0.8rem !important; }
.btn-xs { padding: 0.25rem 0.55rem !important; font-size: 0.75rem !important; border-radius: var(--radius-sm) !important; }
.btn-block { width: 100%; }

.btn-primary {
    background: var(--gradient-primary) !important;
    color: white !important;
}
.btn-primary:hover { box-shadow: var(--shadow-glow) !important; transform: translateY(-1px); }

.btn-success {
    background: linear-gradient(135deg, var(--emerald-600), var(--emerald-700)) !important;
    color: white !important;
}
.btn-success:hover { box-shadow: 0 0 15px rgba(16,185,129,0.4) !important; transform: translateY(-1px); }

.btn-info {
    background: linear-gradient(135deg, var(--teal-500), var(--teal-600)) !important;
    color: white !important;
}
.btn-info:hover { box-shadow: 0 0 15px rgba(20,184,166,0.4) !important; transform: translateY(-1px); }

.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
}
.btn-danger:hover { box-shadow: 0 0 15px rgba(239,68,68,0.3) !important; transform: translateY(-1px); }

.btn-warning {
    background: linear-gradient(135deg, var(--amber-500), var(--amber-400)) !important;
    color: white !important;
}
.btn-warning:hover { box-shadow: 0 0 15px rgba(245,158,11,0.3) !important; transform: translateY(-1px); color: white !important; }

.btn-secondary, .btn-default {
    background: white !important;
    color: var(--emerald-700) !important;
    border: 1.5px solid var(--emerald-200) !important;
}
.btn-secondary:hover, .btn-default:hover {
    background: var(--emerald-50) !important;
    border-color: var(--emerald-400) !important;
    color: var(--emerald-700) !important;
    transform: translateY(-1px);
}

/* WhatsApp buttons */
.btn-success.btn-xs[href*="wa.me"],
a.btn[href*="wa.me"] {
    background: linear-gradient(135deg, #25d366, #128c7e) !important;
    color: white !important;
}

/* Forms */
.form-control {
    background: rgba(255,255,255,0.85) !important;
    border: 1.5px solid var(--emerald-200) !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.65rem 0.9rem !important;
    font-size: 0.9rem !important;
    font-family: 'Inter', sans-serif !important;
    color: #1e293b !important;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    height: auto !important;
}
.form-control:focus {
    border-color: var(--emerald-500) !important;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.15) !important;
    outline: none;
}
.form-control::placeholder { color: #94a3b8; }
textarea.form-control { min-height: 90px; }
select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 5.646a.5.5 0 0 1 .708 0L8 8.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    padding-right: 2.5rem !important;
}

.form-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--emerald-800);
    margin-bottom: 0.4rem;
}

/* Input groups */
.input-group-text {
    background: var(--emerald-50) !important;
    border: 1.5px solid var(--emerald-200) !important;
    color: var(--emerald-700) !important;
    border-radius: var(--radius-sm) !important;
}
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group > .input-group-append > .input-group-text { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-left: 0 !important; }

/* Custom file (Bootstrap) */
.custom-file-label {
    border: 1.5px solid var(--emerald-200) !important;
    border-radius: var(--radius-sm) !important;
    background: rgba(255,255,255,0.85) !important;
    height: auto !important;
    padding: 0.65rem 0.9rem !important;
    color: #475569;
}
.custom-file-label::after {
    background: var(--emerald-50) !important;
    color: var(--emerald-700) !important;
    border-left: 1px solid var(--emerald-200) !important;
    height: 100%;
    padding: 0.65rem 0.9rem !important;
}

/* Custom switch */
.custom-control-input:checked ~ .custom-control-label::before {
    background: var(--gradient-primary) !important;
    border-color: var(--emerald-600) !important;
}
.custom-control-label { font-size: 0.9rem; color: #334155; }

/* Tables */
.table {
    color: #334155 !important;
    font-size: 0.88rem;
}
.table thead th {
    background: var(--emerald-50) !important;
    color: var(--emerald-800) !important;
    font-weight: 600 !important;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--emerald-200) !important;
    border-top: none !important;
    white-space: nowrap;
}
.table tbody td {
    border-top: 1px solid #f1f5f9 !important;
    padding: 0.7rem 0.85rem !important;
    vertical-align: middle;
}
.table-bordered, .table-bordered td, .table-bordered th { border-color: #e2e8f0 !important; }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(16,185,129,0.03) !important; }
.table-hover tbody tr:hover { background: rgba(16,185,129,0.06) !important; }
.table tfoot th, .table tfoot td {
    background: var(--emerald-50);
    color: var(--emerald-900);
    font-weight: 700;
}

/* DataTables tweaks */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1.5px solid var(--emerald-200) !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.4rem 0.6rem !important;
    background: white;
    margin-left: 0.5rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--radius-sm) !important;
    margin: 0 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--gradient-primary) !important;
    color: white !important;
    border-color: var(--emerald-600) !important;
}
.page-link { color: var(--emerald-700) !important; }
.page-item.active .page-link {
    background: var(--gradient-primary) !important;
    border-color: var(--emerald-600) !important;
}

/* Badges */
.badge {
    border-radius: 999px !important;
    padding: 0.3rem 0.7rem !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.02em;
}
.badge-success  { background: #dcfce7 !important; color: #166534 !important; }
.badge-warning  { background: #fef3c7 !important; color: #92400e !important; }
.badge-danger   { background: #fecaca !important; color: #991b1b !important; }
.badge-info     { background: #ccfbf1 !important; color: #115e59 !important; }
.badge-primary  { background: #d1fae5 !important; color: var(--emerald-800) !important; }
.badge-secondary{ background: #e2e8f0 !important; color: #475569 !important; }

/* Modals */
.modal-content {
    border: none !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-xl) !important;
    overflow: hidden;
}
.modal-header {
    background: linear-gradient(135deg, var(--emerald-50), white) !important;
    border-bottom: 1px solid rgba(16,185,129,0.15) !important;
    padding: 1.1rem 1.5rem !important;
}
.modal-header.bg-success {
    background: linear-gradient(135deg, var(--emerald-600), var(--emerald-700)) !important;
    color: white !important;
}
.modal-header.bg-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
}
.modal-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    color: var(--emerald-900);
}
.modal-header.bg-success .modal-title,
.modal-header.bg-danger .modal-title { color: white !important; }
.modal-body { padding: 1.5rem !important; }
.modal-footer {
    border-top: 1px solid rgba(16,185,129,0.12) !important;
    padding: 1rem 1.5rem !important;
}
.modal .close {
    text-shadow: none;
    color: #94a3b8;
    opacity: 0.8;
    font-size: 1.5rem;
    line-height: 1;
}
.modal .close:hover { color: #475569; opacity: 1; }
.modal-header.bg-success .close,
.modal-header.bg-danger .close { color: white !important; }

/* Dropdowns */
.dropdown-menu {
    border: none !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 0.4rem !important;
}
.dropdown-item {
    border-radius: var(--radius-sm) !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.88rem;
    color: #334155;
}
.dropdown-item:hover {
    background: var(--emerald-50) !important;
    color: var(--emerald-800) !important;
}
.dropdown-header {
    color: var(--emerald-700);
    font-weight: 600;
    font-size: 0.8rem;
}
.dropdown-divider { border-color: var(--emerald-100) !important; }

/* products-list (dashboard tunggakan) */
.products-list .item {
    border-bottom: 1px solid rgba(255,255,255,0.15);
    padding: 0.6rem 0;
}
.products-list .product-title {
    font-weight: 600;
    font-size: 0.9rem;
}
.products-list .product-description {
    font-size: 0.8rem;
    opacity: 0.85;
}

/* Text helpers */
.text-success { color: var(--emerald-600) !important; }
.text-info    { color: var(--teal-600) !important; }
.text-primary { color: var(--emerald-700) !important; }

/* AdminLTE login-page background — replaced by our login template, but keep
   in case a stray .login-page class survives. */
.login-page {
    background: var(--gradient-hero) !important;
    min-height: 100vh;
}

/* =============================================================================
   LOGIN PAGE (RT theme)
   ============================================================================= */
.rt-login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--gradient-hero);
    position: relative;
    overflow: hidden;
}
.rt-login-container::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(52,211,153,0.15) 0%, transparent 70%);
    top: -200px; right: -200px;
    pointer-events: none;
}
.rt-login-container::after {
    content: '';
    position: absolute;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(20,184,166,0.12) 0%, transparent 70%);
    bottom: -100px; left: -100px;
    pointer-events: none;
}
.rt-login-card {
    width: 100%;
    max-width: 420px;
    padding: 2.5rem 2rem;
    text-align: center;
    position: relative;
    z-index: 1;
}
.rt-login-logo {
    width: 88px; height: 88px;
    margin: 0 auto 1.25rem;
    background: rgba(255,255,255,0.12);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid rgba(255,255,255,0.25);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.rt-login-logo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.rt-login-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: white;
    margin-bottom: 0.4rem;
}
.rt-login-subtitle {
    color: rgba(255,255,255,0.65);
    font-size: 0.9rem;
    margin-bottom: 1.75rem;
}
.rt-login-input {
    background: rgba(255,255,255,0.12) !important;
    border: 1.5px solid rgba(255,255,255,0.22) !important;
    color: white !important;
    margin-bottom: 0.85rem;
    padding: 0.8rem 1rem !important;
    border-radius: var(--radius-sm) !important;
    font-size: 0.95rem;
    width: 100%;
    transition: all var(--transition-fast);
}
.rt-login-input::placeholder { color: rgba(255,255,255,0.55); }
.rt-login-input:focus {
    background: rgba(255,255,255,0.18) !important;
    border-color: var(--emerald-300) !important;
    box-shadow: 0 0 0 3px rgba(52,211,153,0.18) !important;
    color: white !important;
}
.rt-login-btn {
    width: 100%;
    background: rgba(255,255,255,0.2) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    color: white !important;
    padding: 0.85rem !important;
    font-weight: 700 !important;
    border-radius: var(--radius-sm) !important;
    margin-top: 0.5rem !important;
    letter-spacing: 0.04em;
}
.rt-login-btn:hover {
    background: rgba(255,255,255,0.3) !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
}
.rt-login-foot {
    color: rgba(255,255,255,0.45);
    font-size: 0.75rem;
    margin-top: 1.75rem;
}

/* =============================================================================
   FOOTER
   ============================================================================= */
.rt-footer {
    text-align: center;
    color: #94a3b8;
    font-size: 0.8rem;
    padding: 1.5rem 1rem 0;
    margin-top: 2rem;
}

/* =============================================================================
   ANIMATION HELPERS
   ============================================================================= */
[data-aos] { will-change: transform, opacity; }

/* =============================================================================
   RESPONSIVE TWEAKS
   ============================================================================= */
@media (max-width: 575.98px) {
    .rt-page-header h1 { font-size: 1.25rem; }
    .small-box h3 { font-size: 1.4rem; }
    .small-box .icon, .small-box .icon > i { font-size: 42px; }
    .card-body { padding: 1rem !important; }
    .modal-body { padding: 1.1rem !important; }
    .table { font-size: 0.82rem; }
    .table thead th, .table tbody td { padding: 0.55rem 0.6rem !important; }
    
    /* Fix for DataTables responsive '+' icon covering text */
    table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
    table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control,
    table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child,
    table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child {
        padding-left: 2.2rem !important;
    }
}

/* Hide AdminLTE main-footer (we render our own) */
.main-footer { display: none !important; }

/* Print-friendly */
@media print {
    .rt-sidebar, .rt-mobile-header, .rt-bottom-nav, .rt-footer,
    .card-tools, .btn { display: none !important; }
    .rt-main { margin-left: 0 !important; padding: 0 !important; }
    .card { box-shadow: none !important; border: 1px solid #ddd !important; }
}