/* Import Google Font Ubuntu */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');

/* ==========================================
   CSS VARIABLES: THEME SYSTEM (TELEGRAM UI)
   ========================================== */
/* LIGHT MODE (Default) */
:root {
    --bg-main: #f1f5f9;
    --bg-card: #ffffff;
    --bg-header: #ffffff;
    --text-main: #000000;
    --text-muted: #707579;
    --primary: #3390ec; /* Telegram Blue */
    --primary-hover: #50a8eb;
    --primary-light: rgba(51, 144, 236, 0.1);
    --success: #31b545;
    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.15);
    --danger: #e53935;
    --danger-bg: rgba(229, 57, 53, 0.15);
    --border: #e4e4e5;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    --transition-speed: 0.3s;
    --chat-list-bg: #e2e8f0;
    --chat-list-hover: #cbd5e1;
    --chat-bubble-admin: #3390ec;
    --chat-bubble-user: #ffffff;
}

/* DARK MODE (Telegram Night) */
[data-theme="dark"] {
    --bg-main: #0e1621;
    --bg-card: #17212b;
    --bg-header: #242f3d;
    --text-main: #f5f5f5;
    --text-muted: #aaaaaa;
    --primary: #38bdf8;
    --primary-hover: #7dd3fc;
    --primary-light: rgba(56, 189, 248, 0.15);
    --success: #10b981;
    --warning: #fbbf24;
    --warning-bg: rgba(251, 191, 36, 0.15);
    --danger: #ef4444;
    --danger-bg: rgba(239, 68, 68, 0.15);
    --border: #2b3643;
    --shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    --chat-list-bg: #5c869e;
    --chat-list-hover: #4a7287;
    --chat-bubble-admin: #38bdf8;
    --chat-bubble-user: #1e293b;
}

/* ==========================================
   GLOBAL TYPOGRAPHY & RESET
   ========================================== */
body {
    margin: 0; padding: 0;
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
    background-color: var(--bg-main);
    color: var(--text-main);
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

input, select, textarea, button {
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px; 
}

/* ==========================================
   DASHBOARD LAYOUT (SIDEBAR & MAIN CONTENT) 
   ========================================== */
.app-wrapper { display: flex; min-height: 100vh; width: 100%; }

.app-sidebar {
    width: 260px;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
}
.sidebar-brand {
    padding: 25px 20px; font-size: 22px; font-weight: 700; color: var(--primary);
    border-bottom: 1px solid var(--border); text-align: center; letter-spacing: 1px;
}
.sidebar-nav { flex: 1; padding: 20px 0; list-style: none; margin: 0; }
.sidebar-heading { padding: 25px 25px 10px 25px; font-size: 13px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.sidebar-nav li a {
    display: flex; align-items: center; padding: 14px 25px; color: var(--text-main);
    text-decoration: none; transition: background-color 0.2s, color 0.2s, border-color 0.2s; font-size: 16px; font-weight: 500;
}
.sidebar-nav li a i { margin-right: 15px; width: 24px; font-size: 19px; text-align: center; color: var(--text-muted); transition: color 0.2s; }
.sidebar-nav li a:hover, .sidebar-nav li a.active {
    background: var(--primary-light); color: var(--primary); border-right: 4px solid var(--primary);
}
.sidebar-nav li a:hover i, .sidebar-nav li a.active i { color: var(--primary); }

.app-main { flex: 1; display: flex; flex-direction: column; background: var(--bg-main); }
.app-topbar {
    height: 70px; background: var(--bg-header); border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center; padding: 0 30px; font-size: 16px;
    transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
}
.topbar-user { color: var(--text-muted); }
.topbar-user strong { color: var(--text-main); margin-right: 15px; }
.btn-logout { background: var(--danger); color: #ffffff; text-decoration: none; padding: 10px 18px; border-radius: 6px; font-size: 14px; font-weight: bold; border: none; cursor: pointer; transition: opacity 0.2s; }
.btn-logout:hover { opacity: 0.8; }

.app-content-wrapper { padding: 30px; }

/* Sidebar Badge Animasi */
.sidebar-badge {
    background-color: var(--danger); color: #ffffff; padding: 3px 8px; border-radius: 12px;
    font-size: 12px; font-weight: 700; line-height: 1; box-shadow: 0 0 8px var(--danger-bg);
    animation: pulseBadge 2s infinite;
}
@keyframes pulseBadge {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ==========================================
   GLOBAL COMPONENT UI (Buttons, Forms, Container)
   ========================================== */
.web-container {
    background: var(--bg-card); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden;
    max-width: 100%; border: 1px solid var(--border);
    transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
.web-header { background: var(--bg-header); padding: 22px 25px; border-bottom: 1px solid var(--border); }
.web-header h3 { margin: 0; color: var(--primary); font-size: 20px; }
.web-body { padding: 25px; }

.btn-action {
    padding: 12px 20px; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; color: #ffffff;
    display: inline-flex; justify-content: center; align-items: center; gap: 8px; font-size: 15px;
    transition: background-color 0.2s, opacity 0.2s;
}
.btn-action:hover { opacity: 0.9; }
.btn-primary { background: var(--primary); }
.btn-secondary { background: var(--text-muted); }
.btn-warning { background: var(--warning); color: #000; }
.btn-danger { background: var(--danger); }
.action-bar { display: flex; gap: 12px; margin-bottom: 20px; }

.theme-form-box { background: var(--bg-main); padding: 15px; border-radius: 8px; border: 1px dashed var(--border); }
.label-edit { display: block; font-size: 15px !important; color: var(--text-muted); margin-bottom: 8px !important; margin-top: 6px; font-weight: 500; }
.form-control-edit {
    width: 100%; padding: 12px 15px !important; box-sizing: border-box; font-size: 16px !important;
    background: var(--bg-card); border: 1px solid var(--border); color: var(--text-main); border-radius: 8px; 
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color var(--transition-speed), color var(--transition-speed);
}
.form-control-edit:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.input-row { display: flex; gap: 15px; }

/* ==========================================
   LEDGER TREE & TOGGLE UI
   ========================================== */
.ledger-container { display: flex; flex-direction: column; gap: 6px; margin-top: 15px;}
.node-header {
    background: var(--bg-card); border: 1px solid var(--border); padding: 16px; border-radius: 8px; position: relative; cursor: pointer;
    transition: border-color 0.2s, background-color var(--transition-speed);
}
.node-header:hover { border-color: var(--primary); }
.lvl-badge { padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; background: var(--primary-light); color: var(--primary); }
.tg-sum-badge { padding: 4px 10px; border-radius: 4px; font-size: 13px; font-weight: bold; background: var(--bg-main); color: var(--text-main); }

.trx-indicator-row { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.dot-trx {
    font-size: 11px; padding: 4px 8px; border-radius: 10px; font-weight: bold; border: 1px solid var(--border);
    background: var(--bg-main); color: var(--text-muted);
}
.dot-trx.active { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }

.tg-toggle-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid var(--border); margin-top: 15px; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--text-muted); transition: .4s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #fff; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--success); }
input:checked + .slider:before { transform: translateX(20px); }

.tg-action-toggle { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; margin-top: 10px;}
.tg-action-toggle input[type="radio"] { display: none; }
.btn-mutasi {
    padding: 10px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; 
    color: var(--text-muted); font-size: 13px; font-weight: bold; cursor: pointer; white-space: nowrap; transition: all 0.2s;
}
.tg-action-toggle input[type="radio"]:checked + .btn-mutasi { background: var(--primary); color: #ffffff; border-color: var(--primary); }

/* ==========================================
   BOT RESPONE UI (Tabel & Chat Bubble)
   ========================================== */
.chat-list-table { width: 100%; border-collapse: separate; border-spacing: 0 10px; margin-top: 5px; color: var(--text-main); }
.chat-list-table th { background: transparent; padding: 10px 25px; text-align: left; color: var(--text-muted); font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: 1px; border: none; }
.chat-list-table td { padding: 18px 25px; text-align: left; vertical-align: middle; font-size: 16px; border-top: 1px solid transparent; border-bottom: 1px solid transparent; }
.chat-list-table td:first-child { border-left: 1px solid transparent; border-top-left-radius: 8px; border-bottom-left-radius: 8px; padding-left: 35px; }
.chat-list-table td:last-child { border-right: 1px solid transparent; border-top-right-radius: 8px; border-bottom-right-radius: 8px; padding-right: 35px; }
.chat-list-table tbody tr { background-color: var(--chat-list-bg); transition: all 0.3s ease; box-shadow: var(--shadow); }
.chat-list-table tbody tr:hover { cursor: pointer; background-color: var(--chat-list-hover); box-shadow: 0 0 15px var(--primary-light); }
.chat-list-table tbody tr:hover td { border-top-color: var(--primary); border-bottom-color: var(--primary); }
.chat-list-table tbody tr:hover td:first-child { border-left-color: var(--primary); }
.chat-list-table tbody tr:hover td:last-child { border-right-color: var(--primary); }

.new-badge { background-color: var(--primary); color: #fff; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: bold; display: inline-block; box-shadow: 0 0 8px var(--primary-light); }
.bot-badge { background-color: var(--text-muted); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; border: 1px solid var(--border); }

.chat-history-container { display: flex; flex-direction: column; gap: 6px; padding: 6px 0; }
.tg-bubble { max-width: 80%; padding: 10px 14px; border-radius: 12px; font-size: 15px; line-height: 1.5; position: relative; word-wrap: break-word; box-shadow: var(--shadow); }
.tg-bubble.customer { background-color: var(--chat-bubble-user); color: var(--text-main); align-self: flex-start; border-bottom-left-radius: 4px; border: 1px solid var(--border); }
.tg-bubble.admin { background-color: var(--chat-bubble-admin); color: #ffffff; align-self: flex-end; border-bottom-right-radius: 4px; font-weight: 500; }
.tg-time { display: block; font-size: 11px; text-align: right; margin-top: 8px; opacity: 0.7; font-weight: bold; color: inherit; }

.pagination-container { display: flex; gap: 8px; justify-content: flex-end; margin-top: 25px; padding: 10px 0;}
.page-btn { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-main); padding: 8px 14px; border-radius: 6px; cursor: pointer; font-weight: bold; transition: 0.3s; font-family: 'Ubuntu', sans-serif;}
.page-btn:hover { border-color: var(--primary); color: var(--primary); }
.page-btn.active { background: var(--primary); color: #ffffff; border-color: var(--primary); }

/* ==========================================
   MODAL SYSTEM
   ========================================== */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px);
    display: none; justify-content: center; align-items: center;
    z-index: 9999; padding: 20px; box-sizing: border-box;
}
.modal-container {
    background: var(--bg-card); width: 100%; max-width: 600px;
    border-radius: 12px; border: 1px solid var(--border);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); overflow: hidden;
    animation: modalFadeIn 0.3s ease; transition: background-color var(--transition-speed), border-color var(--transition-speed);
}
[data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, 0.7); }
[data-theme="dark"] .modal-container { box-shadow: var(--shadow); }

@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
.modal-header {
    padding: 20px 25px; background: var(--bg-header); border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}
.modal-header h3 { margin: 0; font-size: 20px; color: var(--primary); }
.modal-close { cursor: pointer; font-size: 22px; color: var(--text-muted); transition: 0.2s; }
.modal-close:hover { color: var(--danger); }
.modal-body { padding: 25px; max-height: 80vh; overflow-y: auto; background: var(--bg-main); }
.modal-footer-chat { padding: 20px 25px; background: var(--bg-header); border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: center; }

/* Responsive HP */
@media (max-width: 768px) {
    .app-wrapper { flex-direction: column; }
    .app-sidebar { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--border); }
    .sidebar-nav { display: flex; flex-wrap: wrap; padding: 10px; justify-content: center; }
    .sidebar-heading { width: 100%; text-align: center; }
    .sidebar-nav li a { padding: 12px; border-right: none; border-bottom: 2px solid transparent; font-size: 14px;}
    .sidebar-nav li a.active { border-right: none; border-bottom: 2px solid var(--primary); }
    .app-content-wrapper { padding: 15px; }
}