/* BPR Modern Theme v2.0 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --p: #1e3a5f; --p2: #2563eb; --p3: #3b82f6;
  --acc: #f59e0b; --acc2: #fbbf24;
  --bg: #f0f4f8; --bg2: #e8edf3;
  --white: #fff; --card: #fff;
  --txt: #1e293b; --txt2: #475569; --txt3: #94a3b8;
  --border: #e2e8f0; --border2: #cbd5e1;
  --success: #10b981; --danger: #ef4444; --warn: #f59e0b;
  --sh: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --sh2: 0 4px 16px rgba(0,0,0,.10);
  --sh3: 0 10px 40px rgba(30,58,95,.15);
  --r: 12px; --r2: 8px; --r3: 20px;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif!important;background:var(--bg)!important;color:var(--txt)!important;font-size:14px;line-height:1.6}

/* NAV */
/* ===== HEADER CLIENT ===== */
#header{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:8px 16px!important;height:auto!important;min-height:60px!important;background:#fff!important;overflow:visible!important;flex-wrap:nowrap!important;gap:8px!important;box-sizing:border-box!important;width:100%!important}
#header .pull-right{float:none!important;order:2!important;display:flex!important;align-items:center!important;flex-shrink:0!important;overflow:visible!important}
#header a#logo{float:none!important;display:flex!important;align-items:center!important;order:1!important;text-decoration:none!important;flex:1 1 auto!important;min-width:0!important;overflow:hidden!important}
#header a#logo img{max-height:50px!important;max-width:100%!important;width:auto!important;height:auto!important;display:block!important}
#header span.valign-helper{display:none!important}
#header .pull-right p{margin:0!important;padding:0!important;width:auto!important;display:flex!important;align-items:center!important;gap:5px!important;white-space:nowrap!important;flex-wrap:nowrap!important;overflow:visible!important}
#header .pull-right p a{color:#1e3a5f!important;font-size:13px!important;font-weight:700!important;text-decoration:none!important;padding:6px 14px!important;background:#fff!important;border:2px solid #1e3a5f!important;border-radius:7px!important;box-shadow:none!important;line-height:1.4!important;white-space:nowrap!important;display:inline-block!important;transition:all .2s!important}
#header .pull-right p a:hover{color:#fff!important;background:#1e3a5f!important;text-decoration:none!important}
#header .pull-right p a.flag{padding:3px 5px!important;background:transparent!important;border:1px solid #e2e8f0!important;box-shadow:none!important}
@media(max-width:480px){
  #header{padding:6px 10px!important;min-height:50px!important}
  #header a#logo img{max-height:36px!important}
  #header .pull-right p a{font-size:12px!important;padding:5px 10px!important}
}

/* NAV */
#nav{background:var(--white)!important;background-image:none!important;border-bottom:none!important;border-top:none!important;padding:0 28px!important;box-shadow:0 2px 8px rgba(0,0,0,.07)!important;margin:0!important;height:auto!important;list-style:none!important;display:flex!important;align-items:center!important;gap:2px!important}
#nav li{display:flex!important;align-items:center!important}
#nav li a{color:#64748b!important;font-weight:500!important;font-size:14px!important;padding:16px 20px!important;border-bottom:3px solid transparent!important;border-top:3px solid transparent!important;transition:all .2s ease!important;background-image:none!important;background-color:transparent!important;display:inline-flex!important;align-items:center!important;gap:7px!important;letter-spacing:.2px!important;text-decoration:none!important;white-space:nowrap!important;line-height:1!important}
#nav li a.home,#nav li a.kb,#nav li a.new,#nav li a.status,#nav li a.tickets{background-image:none!important}
#nav li a.home::before{content:'🏠';font-size:15px}
#nav li a.new::before{content:'🎫';font-size:15px}
#nav li a.status::before{content:'🔍';font-size:15px}
#nav li a.kb::before{content:'📚';font-size:15px}
#nav li a.tickets::before{content:'📋';font-size:15px}
#nav li a:hover{color:var(--p)!important;background-color:#f0f4f8!important;background-image:none!important;border-bottom-color:var(--p3)!important}
#nav li a.active{color:var(--p)!important;background-color:transparent!important;background-image:none!important;border-bottom:3px solid var(--acc)!important;font-weight:700!important}

/* CONTENT */
#content{max-width:1140px!important;margin:28px auto!important;padding:0 20px!important}

/* MESSAGES */
#msg_error,.error_bar{background:#fef2f2!important;border:1px solid #fecaca!important;border-left:4px solid var(--danger)!important;color:#991b1b!important;padding:12px 16px!important;border-radius:var(--r2)!important;margin-bottom:16px!important}
#msg_notice,.notice_bar{background:#f0fdf4!important;border:1px solid #bbf7d0!important;border-left:4px solid var(--success)!important;color:#166534!important;padding:12px 16px!important;border-radius:var(--r2)!important;margin-bottom:16px!important}
#msg_warning,.warning_bar{background:#fffbeb!important;border:1px solid #fde68a!important;border-left:4px solid var(--warn)!important;color:#92400e!important;padding:12px 16px!important;border-radius:var(--r2)!important;margin-bottom:16px!important}

/* LOGIN */
.login-modern-wrap{display:flex;justify-content:center;padding:30px 20px}
.login-modern-card{background:var(--white);border-radius:var(--r);box-shadow:var(--sh3);width:100%;max-width:420px;overflow:hidden;border:1px solid var(--border)}
.login-modern-header{background:linear-gradient(135deg,var(--p),#2563eb);padding:30px 36px 24px;text-align:center}
.login-modern-header h1{color:#fff;font-size:18px;font-weight:700;margin:10px 0 6px}
.login-modern-header p{color:rgba(255,255,255,.75);font-size:13px}
.login-modern-body{padding:24px 36px 28px}
.login-modern-body .form-group{margin-bottom:16px}
.login-modern-body label{display:block;font-size:11px;font-weight:600;color:var(--txt2);margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px}
.login-modern-body input[type=text],.login-modern-body input[type=password]{width:100%!important;padding:10px 13px!important;border:1.5px solid var(--border)!important;border-radius:var(--r2)!important;font-size:14px!important;font-family:inherit!important;color:var(--txt)!important;background:var(--bg)!important;transition:all .2s!important;outline:none!important;box-sizing:border-box!important}
.login-modern-body input:focus{border-color:var(--p3)!important;background:var(--white)!important;box-shadow:0 0 0 3px rgba(37,99,235,.1)!important}
.btn-login{width:100%;padding:12px;background:linear-gradient(135deg,var(--p),var(--p2));color:#fff!important;border:none!important;border-radius:var(--r2)!important;font-size:14px!important;font-weight:600!important;font-family:inherit!important;cursor:pointer!important;transition:all .2s!important;margin-top:6px;display:block;text-align:center;text-decoration:none;box-sizing:border-box}
.btn-login:hover{box-shadow:0 4px 12px rgba(30,58,95,.3)!important;transform:translateY(-1px)!important;color:#fff!important;text-decoration:none!important}
.login-modern-footer{border-top:1px solid var(--border);padding:16px 36px;text-align:center;font-size:13px;color:var(--txt2)}
.login-modern-footer a{color:var(--p);text-decoration:none;font-weight:500}
.login-divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--txt3);font-size:12px}
.login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.agent-link{display:inline-flex;align-items:center;gap:6px;color:var(--txt2);font-size:13px;text-decoration:none;padding:7px 16px;border:1px solid var(--border);border-radius:20px;transition:all .2s}
.agent-link:hover{background:var(--bg);border-color:var(--p3);color:var(--p)}
.forgot-link{display:block;text-align:center;margin-top:10px;color:var(--txt3);font-size:12px;text-decoration:none}
.forgot-link:hover{color:var(--p)}
#clientLogin{background-image:none!important;background:var(--white)!important;border:1px solid var(--border)!important;border-radius:var(--r)!important;box-shadow:none!important;padding:20px!important;margin-top:0!important}

/* SIDEBAR */
.sidebar.pull-right{background:var(--white);border-radius:var(--r);border:1px solid var(--border);box-shadow:var(--sh);overflow:hidden;padding:0!important;width:230px!important}
.sidebar .front-page-button{background:linear-gradient(135deg,var(--p),var(--p2));padding:16px!important}
.sidebar .front-page-button a.button{display:block!important;padding:10px 14px!important;border-radius:var(--r2)!important;font-weight:600!important;font-size:13px!important;text-align:center!important;text-decoration:none!important;margin-bottom:8px!important;transition:all .2s!important}
.sidebar .front-page-button a.blue{background:rgba(255,255,255,.15)!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.3)!important}
.sidebar .front-page-button a.green{background:var(--acc)!important;color:var(--p)!important;border:none!important}
.sidebar .front-page-button a:hover{transform:translateY(-1px)!important;box-shadow:0 3px 8px rgba(0,0,0,.2)!important}
.sidebar .content{padding:14px 16px!important}
.sidebar .content section{margin-bottom:14px}
.sidebar .content .header{font-size:11px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.8px!important;color:var(--txt3)!important;margin-bottom:8px!important;padding-bottom:6px!important;border-bottom:1px solid var(--border)!important}
.sidebar .content div a{color:var(--p)!important;font-size:13px!important;text-decoration:none!important;display:block!important;padding:4px 0!important;line-height:1.4!important}
.sidebar .content div a:hover{text-decoration:underline!important}

/* MAIN CONTENT */
.main-content{background:var(--white);border-radius:var(--r);box-shadow:var(--sh);padding:28px;border:1px solid var(--border)}
.main-content h1{color:var(--p);font-size:20px;font-weight:700;margin-bottom:16px}

/* TICKET TABLE */
#ticketTable{width:100%;border-collapse:collapse;background:var(--white);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);border:1px solid var(--border)}
#ticketTable caption{text-align:left;padding:12px 16px;font-size:13px;color:var(--txt2);font-weight:500;background:var(--bg);border-bottom:1px solid var(--border)}
#ticketTable thead th{background:linear-gradient(135deg,var(--p),var(--p2));color:rgba(255,255,255,.9);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;padding:12px 16px;text-align:left}
#ticketTable thead th a{color:rgba(255,255,255,.9)!important;text-decoration:none!important}
#ticketTable tbody tr{border-bottom:1px solid var(--border);transition:background .15s}
#ticketTable tbody tr:hover{background:var(--bg)}
#ticketTable tbody td{padding:12px 16px;font-size:13px;color:var(--txt2);vertical-align:middle}
#ticketTable tbody td a{color:var(--p)!important;text-decoration:none!important;font-weight:500!important}
#ticketTable tbody td a:hover{text-decoration:underline!important}

/* SEARCH BAR */
.search.well{background:var(--white)!important;border:1px solid var(--border)!important;border-radius:var(--r)!important;padding:16px 20px!important;margin-bottom:20px!important;box-shadow:var(--sh)!important}
.search.well input[type=text]{border:1.5px solid var(--border)!important;border-radius:var(--r2)!important;padding:9px 14px!important;font-size:13px!important;width:220px}
.search.well input[type=submit]{background:linear-gradient(135deg,var(--p),var(--p2))!important;color:#fff!important;border:none!important;border-radius:var(--r2)!important;padding:9px 18px!important;font-weight:600!important;cursor:pointer!important}
h1 .states a.state{display:inline-block;padding:4px 14px;border-radius:20px;font-size:12px;font-weight:600;background:var(--bg2);color:var(--txt2);text-decoration:none;transition:all .2s}
h1 .states a.state.active,h1 .states a.state:hover{background:var(--p);color:#fff}

/* FORMS */
#ticketForm table{width:100%!important;background:var(--white);border-radius:var(--r);box-shadow:var(--sh);border:1px solid var(--border);padding:24px}
#ticketForm td{padding:8px 12px!important;vertical-align:top}
#ticketForm input[type=text],#ticketForm input[type=email],#ticketForm select,#ticketForm textarea,#clientLogin input[type=text],#clientLogin input[type=email],#clientLogin input[type=password]{border:1.5px solid var(--border)!important;border-radius:var(--r2)!important;padding:9px 12px!important;font-family:inherit!important;font-size:13px!important;color:var(--txt)!important;background:var(--bg)!important;transition:all .2s!important;outline:none!important}
#ticketForm input:focus,#ticketForm select:focus,#ticketForm textarea:focus{border-color:var(--p3)!important;background:var(--white)!important;box-shadow:0 0 0 3px rgba(37,99,235,.1)!important}
#ticketForm input[type=submit],.buttons input[type=submit]{background:linear-gradient(135deg,var(--p),var(--p2))!important;color:#fff!important;border:none!important;border-radius:var(--r2)!important;padding:11px 28px!important;font-weight:600!important;font-family:inherit!important;font-size:14px!important;cursor:pointer!important;transition:all .2s!important}
#ticketForm input[type=submit]:hover,.buttons input[type=submit]:hover{box-shadow:0 4px 12px rgba(30,58,95,.25)!important;transform:translateY(-1px)!important}
#ticketForm input[type=reset],#ticketForm input[type=button]{background:var(--bg2)!important;color:var(--txt2)!important;border:1px solid var(--border)!important;border-radius:var(--r2)!important;padding:11px 24px!important;font-weight:500!important;font-family:inherit!important;font-size:14px!important;cursor:pointer!important;transition:all .2s!important}

/* Fix tombol form agar tidak keluar dari card */
.bpr-form-actions{position:relative!important;float:none!important;clear:both!important;display:flex!important;gap:10px!important;flex-wrap:wrap!important}
p.buttons{position:relative!important;float:none!important;clear:both!important;text-align:left!important;margin:20px 0 0!important;padding-top:20px!important;border-top:1px solid var(--border)!important}

/* RESPONSIVE */
@media(max-width:768px){
  #nav{padding:0 14px!important;overflow-x:auto}
  #content{padding:0 12px!important;margin:14px auto!important}
  .login-modern-header,.login-modern-body,.login-modern-footer{padding-left:20px!important;padding-right:20px!important}
  .sidebar.pull-right{width:100%!important;float:none!important}
}

/* ============================================
   RESPONSIVE MOBILE - Client Portal
   ============================================ */

/* Tablet */
@media (max-width: 900px) {
    #landing_page {
        display: block !important;
    }
    .sidebar.pull-right {
        float: none !important;
        width: 100% !important;
        margin-bottom: 16px !important;
    }
    .sidebar .front-page-button {
        display: flex !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
    }
    .sidebar .front-page-button a.button {
        flex: 1 !important;
        margin-bottom: 0 !important;
    }
}

/* Mobile */
@media (max-width: 640px) {
    /* Header */
    #header {
        padding: 8px 14px !important;
        min-height: 56px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    #header a#logo img {
        height: 40px !important;
    }
    #header .pull-right p {
        font-size: 11px !important;
    }

    /* Nav */
    #nav {
        padding: 0 10px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    #nav::-webkit-scrollbar { display: none !important; }
    #nav li a {
        padding: 12px 12px !important;
        font-size: 12px !important;
    }
    #nav li a.home::before,
    #nav li a.new::before,
    #nav li a.status::before,
    #nav li a.kb::before,
    #nav li a.tickets::before {
        font-size: 13px !important;
    }

    /* Content */
    #content {
        margin: 12px auto !important;
        padding: 0 10px !important;
    }

    /* Login card */
    .login-modern-wrap {
        padding: 16px 12px !important;
    }
    .login-modern-card {
        border-radius: 12px !important;
    }
    .login-modern-header {
        padding: 22px 20px 18px !important;
    }
    .login-modern-header h1 {
        font-size: 16px !important;
    }
    .login-modern-body {
        padding: 18px 20px 22px !important;
    }
    .login-modern-footer {
        padding: 14px 20px !important;
    }

    /* Stat cards */
    .bpr-stat-row {
        grid-template-columns: 1fr 1fr !important;
        display: grid !important;
        gap: 10px !important;
    }
    .bpr-stat-card {
        padding: 14px 14px !important;
        min-width: unset !important;
    }
    .bpr-stat-num { font-size: 22px !important; }
    .bpr-stat-action {
        grid-column: 1 / -1 !important;
    }

    /* Toolbar */
    .bpr-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 12px 14px !important;
    }
    .bpr-search-input {
        width: 100% !important;
    }
    .bpr-search-wrap {
        width: 100% !important;
    }
    .bpr-filter-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Ticket table - scroll horizontal */
    .bpr-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    #ticketTable {
        min-width: 500px !important;
    }

    /* Form */
    .bpr-form-card {
        padding: 16px !important;
    }
    .bpr-info-row {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .bpr-form-actions {
        flex-direction: column !important;
    }
    .bpr-form-actions input {
        width: 100% !important;
        text-align: center !important;
    }

    /* Sidebar */
    .sidebar.pull-right {
        float: none !important;
        width: 100% !important;
        margin-bottom: 16px !important;
    }

    /* Footer */
    #footer {
        padding: 14px 12px !important;
        font-size: 11px !important;
    }
}