:root{--primary:#2c3e50;--secondary:#34495e;--accent:#3498db;--urgent:#e74c3c;--high:#f39c12;--normal:#2980b9;--done:#27ae60;--bg:#f4f7f6;--text:#333;--white:#ffffff;--border:#ddd;--card-bg:#ffffff;--raw-bg:#f9f9f9;}
body.dark-mode{--primary:#1a1a2e;--secondary:#16213e;--accent:#0f3460;--bg:#111111;--text:#e0e0e0;--white:#1e1e1e;--border:#333;--card-bg:#1e1e1e;--raw-bg:#121212;}
*{box-sizing:border-box;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;}
body{background-color:var(--bg);margin:0;display:flex;color:var(--text);transition:0.3s;flex-direction:column;min-height:100vh;}
#app-container{display:flex;flex:1;}
#login-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--primary);display:none;align-items:center;justify-content:center;z-index:10000;}
.login-box{background:var(--card-bg);padding:30px;border-radius:10px;width:90%;max-width:400px;text-align:center;color:var(--text);box-shadow:0 4px 15px rgba(0,0,0,0.2);border:1px solid var(--border);}
.login-box h2{color:var(--accent);margin-top:0;margin-bottom:20px;}
.login-box input{width:100%;padding:12px;margin:10px 0;border:1px solid var(--border);border-radius:5px;background:var(--bg);color:var(--text);}
.menu-btn{display:none;background:transparent;border:none;font-size:1.5rem;color:var(--text);cursor:pointer;padding:0;margin-right:15px;}
.header-left{display:flex;align-items:center;}
#mobile-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:9999;opacity:0;transition:opacity 0.3s;}
#sidebar{width:250px;background:var(--primary);color:white;height:100vh;position:fixed;padding:20px 0;transition:0.3s;overflow-y:auto;display:flex;flex-direction:column;z-index:1000;}
#sidebar h2{text-align:center;font-size:1.2rem;margin-bottom:20px;color:#3498db;}
.nav-link{padding:15px 25px;display:block;color:#bdc3c7;text-decoration:none;cursor:pointer;border-left:4px solid transparent;}
.nav-link:hover,.nav-link.active{background:var(--secondary);color:white;border-left:4px solid #3498db;}
#main-content{margin-left:250px;padding:20px;width:calc(100% - 250px);transition:0.3s;display:flex;flex-direction:column;}
header{display:flex;justify-content:space-between;align-items:center;background:var(--card-bg);padding:15px 25px;border-radius:8px;margin-bottom:20px;box-shadow:0 2px 5px rgba(0,0,0,0.1);border:1px solid var(--border);}
.view-section{display:none;flex:1;}
.view-section.active{display:block;}
.tab-container{display:flex;gap:10px;margin-bottom:20px;}
.tab-btn{flex:1;background:var(--secondary);color:white;opacity:0.6;padding:12px;font-size:0.9rem;border-radius:5px;transition:0.2s;cursor:pointer;border:none;font-weight:bold;}
.tab-btn.active{opacity:1;background:var(--accent);box-shadow:0 4px 6px rgba(0,0,0,0.1);}
.tab-content{display:none;}
.tab-content.active{display:block;animation:fadeIn 0.3s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:translateY(0);}}
.progress-container{background:var(--card-bg);padding:15px 25px;border-radius:8px;margin-bottom:20px;border:1px solid var(--border);}
.progress-text{font-weight:bold;margin-bottom:8px;font-size:0.9rem;}
.progress-bar-bg{background:var(--border);height:20px;border-radius:10px;overflow:hidden;position:relative;}
.progress-bar-fill{background:var(--done);height:100%;width:0%;transition:width 0.5s ease;}
.category-container{margin-bottom:30px;background:var(--card-bg);padding:20px;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,0.05);border:1px solid var(--border);}
.category-title{padding:10px 15px;background:var(--secondary);color:white;border-radius:5px;margin-bottom:15px;font-weight:bold;display:flex;justify-content:space-between;}
.grid-tickets{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:15px;}
.ticket-card{background:var(--bg);border-radius:8px;padding:15px;border-left:8px solid #ccc;position:relative;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--border);overflow:hidden;}
.ticket-card.unassigned{border-left-color:var(--urgent);}
.ticket-card.selesai{background-color:#d4edda;border-left-color:var(--done);}
.dark-mode .ticket-card.selesai{background-color:#0b2e13;border-left-color:var(--done);}
.ticket-card.super-urgent{border:2px solid var(--urgent);border-left:8px solid var(--urgent);animation:pulse-border 2s infinite;}
@keyframes pulse-border{0%{box-shadow:0 0 0 0 rgba(231,76,60,0.4);}70%{box-shadow:0 0 0 10px rgba(231,76,60,0);}100%{box-shadow:0 0 0 0 rgba(231,76,60,0);}}
.watermark-stamp{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%) rotate(-20deg);font-size:1.6rem;font-weight:900;color:rgba(39,174,96,0.7);border:5px solid rgba(39,174,96,0.7);padding:10px 20px;border-radius:10px;text-transform:uppercase;text-align:center;pointer-events:none;z-index:10;white-space:nowrap;letter-spacing:2px;text-shadow:1px 1px 0px rgba(255,255,255,0.9);}
.dark-mode .watermark-stamp{color:rgba(46,204,113,0.6);border-color:rgba(46,204,113,0.6);text-shadow:1px 1px 0px rgba(0,0,0,0.9);}
.watermark-stamp.danger{color:rgba(231,76,60,0.78);border-color:rgba(231,76,60,0.78);}
.dark-mode .watermark-stamp.danger{color:rgba(255,99,99,0.68);border-color:rgba(255,99,99,0.68);}
.ticket-header,.ticket-body,.ticket-footer{position:relative;z-index:1;}
.ticket-header{display:flex;justify-content:space-between;font-weight:bold;margin-bottom:10px;align-items:center;gap:5px;flex-wrap:wrap;}
.ticket-body{font-size:0.9rem;margin-bottom:10px;}
.raw-text{white-space:pre-wrap;font-family:monospace;background:var(--raw-bg);padding:10px;border-radius:4px;border:1px solid var(--border);font-size:0.85rem;max-height:200px;overflow-y:auto;color:var(--text);}
.ticket-footer{font-size:0.8rem;border-top:1px solid var(--border);padding-top:10px;display:flex;flex-direction:column;gap:8px;margin-top:auto;}
.badge-special{background:#9b59b6;color:white;padding:3px 6px;border-radius:4px;font-size:0.7rem;}
.badge-urgent{background:var(--urgent);color:white;padding:3px 6px;border-radius:4px;font-size:0.7rem;font-weight:bold;}
.badge-secret{background:#1abc9c;color:white;padding:3px 6px;border-radius:4px;font-size:0.7rem;font-weight:bold;}
.badge-kat-center{position:absolute;left:50%;transform:translateX(-50%);top:0;background:#ddd;padding:3px 7px;border-radius:4px;color:#333;font-size:0.72rem;font-weight:900;text-align:center;min-width:28px;}
.form-group{margin-bottom:15px;}
label{display:block;margin-bottom:5px;font-weight:bold;}
input[type="text"],input[type="date"],select,textarea,input[type="password"]{width:100%;padding:10px;border:1px solid var(--border);border-radius:5px;background:var(--card-bg);color:var(--text);}
button{padding:10px 20px;background:var(--accent);color:white;border:none;border-radius:5px;cursor:pointer;font-weight:bold;}
button:hover{opacity:0.9;}
.btn-export{background:#25d366;}
.btn-normal{background:var(--normal);}
.btn-danger{background:var(--urgent);padding:10px;color:white;border-radius:5px;cursor:pointer;border:none;}
.btn-assign{width:100%;background:var(--secondary);margin-top:5px;}
.btn-recall{background:var(--urgent);padding:5px;font-size:0.75rem;width:100%;}

.ticket-action-panel{display:flex;flex-direction:column;gap:9px;margin-top:10px;}
.ticket-action-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(112px,145px);gap:10px;align-items:stretch;}
.ticket-action-row button{margin:0;min-height:42px;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;}
.ticket-action-row-danger{display:grid;grid-template-columns:1fr;gap:10px;}
.ticket-action-save{width:100%;margin:0!important;}
.ticket-action-pending{width:100%;padding:10px 12px!important;}
.ticket-action-delete{width:100%;padding:10px 15px!important;}
@media (max-width:520px){.ticket-action-row{grid-template-columns:1fr;}.ticket-action-row button{width:100%;}}
.btn-secret{background:#f1c40f;color:#333;padding:5px;font-size:0.75rem;width:100%;border:1px solid #d4ac0d;margin-bottom:10px;}
.btn-secret:hover{background:#d4ac0d;}
.filter-bar{background:var(--card-bg);padding:15px;border-radius:8px;margin-bottom:20px;display:flex;gap:10px;flex-wrap:wrap;border:1px solid var(--border);}
.checkbox-group{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:15px;}
.checkbox-group label{cursor:pointer;background:var(--raw-bg);padding:5px 10px;border-radius:4px;border:1px solid var(--border);font-size:0.85rem;}
.raw-list-row{display:flex;justify-content:space-between;align-items:flex-start;padding:10px;border-bottom:1px dashed var(--border);font-family:monospace;font-size:0.95rem;}
.raw-list-row:hover{background:var(--raw-bg);}
table{width:100%;border-collapse:collapse;margin-top:10px;}
th,td{padding:12px;text-align:left;border-bottom:1px solid var(--border);}
th{background:var(--raw-bg);color:var(--primary);}
.dark-mode th{color:var(--text);}
.master-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--bg);border:1px solid var(--border);margin-bottom:5px;border-radius:4px;font-weight:bold;font-size:0.9rem;}
footer{text-align:center;padding:20px;font-size:0.85rem;color:#888;border-top:1px solid var(--border);margin-top:auto;}
.roster-card{background:var(--bg);border:1px solid var(--border);padding:15px;border-radius:8px;margin-bottom:15px;}
.roster-team-title{font-weight:bold;color:var(--accent);margin-bottom:15px;display:flex;justify-content:space-between;align-items:center;font-size:1.1rem;}
.radio-group{display:flex;gap:5px;}
.radio-btn{padding:4px 8px;border:1px solid var(--border);border-radius:4px;cursor:pointer;font-size:0.75rem;font-weight:bold;background:var(--bg);color:var(--text);user-select:none;}
.radio-btn input{display:none;}
.radio-btn.active-Hadir{background:var(--done);color:white;border-color:var(--done);}
.radio-btn.active-Izin{background:#f39c12;color:white;border-color:#f39c12;}
.radio-btn.active-Sakit{background:var(--urgent);color:white;border-color:var(--urgent);}
@media (max-width:992px){#mobile-overlay.active{display:block;opacity:1;}#sidebar{transform:translateX(-100%);z-index:10001;}#sidebar.open{transform:translateX(0);}#main-content{margin-left:0;width:100%;}.menu-btn{display:block;}header{flex-direction:column;align-items:flex-start;gap:10px;}.grid-tickets{grid-template-columns:1fr;}.tab-container{flex-direction:column;}}

/* T2F46B2 MTC to CRM header switch */
.app-switch-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.22);background:#3498db;color:#fff;text-decoration:none;border-radius:999px;padding:8px 13px;font-size:13px;font-weight:900;line-height:1;box-shadow:0 1px 0 rgba(0,0,0,.3)}
.app-switch-btn:hover{filter:brightness(1.08)}
@media(max-width:700px){.app-switch-btn{padding:7px 11px;font-size:12px}}