* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: #f7f8f9;
overflow-x: hidden;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* ============================================
COLOR SCHEME — kontrol form native mengikuti tema aplikasi
============================================ */
/* di index.html membuat browser
merender input/select/textarea/date-picker mengikuti preferensi OS — GELAP saat
OS dark meskipun aplikasi sedang LIGHT mode (dan sebaliknya), karena dark mode
aplikasi bersifat class-based (.dark), bukan prefers-color-scheme. Ikat
color-scheme ke tema aplikasi agar kontrol form otomatis menyesuaikan mode.
Catatan: author CSS menimpa deklarasi meta (UA-level); .dark ditulis SETELAH
:root agar menang saat dark mode aktif (spesifisitas sama, urutan menentukan). */
:root { color-scheme: light; }
.dark { color-scheme: dark; }
/* ============================================
DARK MODE - ENHANCED VISIBILITY
============================================ */
.dark body, .dark {
background-color: #0f172a;
color: #f1f5f9;
background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.03) 1px, transparent 0);
background-size: 16px 16px;
}
/* Sidebar */
.dark .sidebar {
background-color: #1e293b;
border-color: #334155;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* Sidebar brand & section labels — teks terang di dark mode */
.dark .sidebar h2,
.dark .sidebar .text-slate-800 {
color: #f8fafc !important;
}
.dark .sidebar .text-slate-400 {
color: #94a3b8;
}
.dark .sidebar nav > p {
color: #cbd5e1 !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
/* NAV MENU (SIDEBAR) — NORMAL MODE: teks selalu jelas */
.sidebar .nav-btn {
color: #475569;
font-weight: 500;
}
.sidebar .nav-btn:hover {
color: #1e293b;
background-color: #f1f5f9;
}
.sidebar .nav-btn.active {
color: #0747A6;
font-weight: 600;
}
.sidebar .nav-btn .ticket-count-badge:not(.hidden) {
display: inline-flex;
}
/* NAV MENU (SIDEBAR) — DARK MODE: teks terang biasa (tidak bold, tanpa glow) */
.dark .sidebar .nav-btn {
color: #f8fafc;
font-weight: 500;
}
.dark .sidebar .nav-btn:hover {
background-color: rgba(59, 130, 246, 0.22);
color: #ffffff;
box-shadow: inset 3px 0 0 #3b82f6;
}
.dark .sidebar .nav-btn.active {
background: linear-gradient(135deg, #1d4ed8, #2563eb);
color: #ffffff;
font-weight: 500;
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.45), inset 3px 0 0 #93c5fd;
}
.dark .sidebar .nav-btn.active:hover {
background: linear-gradient(135deg, #2563eb, #3b82f6);
}
/* Header */
.dark header {
background-color: #1e293b;
border-color: #334155;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.dark header h1, .dark header .text-slate-800 {
color: #f8fafc;
font-weight: 600;
}
.dark header .text-slate-700 { color: #f1f5f9; }
.dark header input {
background-color: #334155;
border-color: #475569;
color: #f8fafc;
transition: all 0.2s ease;
}
.dark header input::placeholder { color: #94a3b8; }
.dark header input:focus {
background-color: #334155;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
transform: translateY(-1px);
}
.dark header input:active {
transform: translateY(0);
}
/* Header buttons (dark mode) */
.dark header button:hover {
color: #ffffff;
transform: translateY(-1px);
}
.dark header button.rounded-lg:hover {
background-color: #334155;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.dark header button:active {
transform: translateY(0);
}
/* Dark mode toggle button - enhanced visibility */
.dark #darkModeToggle {
background-color: #2563eb;
color: #ffffff;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3), 0 2px 8px rgba(59, 130, 246, 0.4);
}
.dark #darkModeToggle:hover {
background-color: #1d4ed8;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4), 0 4px 12px rgba(59, 130, 246, 0.5);
}
/* Main content area */
.dark main {
background-color: #0f172a;
background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.02) 1px, transparent 0);
background-size: 12px 12px;
}
.dark .bg-surface {
background-color: #0f172a;
background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.02) 1px, transparent 0);
background-size: 12px 12px;
}
/* White cards / panels */
.dark .bg-white {
background-color: #1e293b;
border-color: #334155;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
}
.dark .bg-white:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transform: translateY(-1px);
}
.dark .bg-white:active {
transform: translateY(0);
}
.dark .bg-white.border { border-color: #334155; }
/* Card borders */
.dark .border-slate-100 { border-color: #334155; }
.dark .border-slate-200 { border-color: #334155; }
/* Text colors - Enhanced contrast */
.dark .text-slate-800 { color: #f8fafc; }
.dark .text-slate-700 { color: #f1f5f9; }
.dark .text-slate-600 { color: #e2e8f0; }
.dark .text-slate-500 { color: #cbd5e1; }
.dark .text-slate-400 { color: #94a3b8; }
.dark .text-slate-300 { color: #64748b; }
.dark .text-slate-900 { color: #f1f5f9; }
.dark select { color: #e2e8f0; }
.dark button.period-btn { color: #cbd5e1; }
/* Buttons */
.dark .bg-slate-50 {
background-color: #1e293b;
transition: all 0.2s ease;
}
.dark .bg-slate-100 {
background-color: #334155;
transition: all 0.2s ease;
}
.dark .hover\:bg-slate-50:hover {
background-color: #334155;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transform: translateY(-1px);
}
.dark .hover\:bg-slate-100:hover {
background-color: #475569;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
transform: translateY(-1px);
}
.dark .hover\:bg-slate-200:hover {
background-color: #475569;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
transform: translateY(-1px);
}
.dark button:active {
transform: translateY(0);
}
/* Dropdowns */
.dark .bg-white.rounded-xl.shadow-lg { background-color: #1e293b; border-color: #334155; }
/* Table */
.dark thead.bg-slate-50 { background-color: #1e293b; }
.dark tbody.divide-y { border-color: #334155; }
.dark td, .dark th { border-color: #334155; }
/* Forms */
.dark input, .dark select, .dark textarea {
background-color: #334155;
border-color: #475569;
color: #e2e8f0;
}
.dark input::placeholder, .dark select::placeholder, .dark textarea::placeholder {
color: #64748b;
}
.dark input:focus, .dark select:focus, .dark textarea:focus {
background-color: #334155;
border-color: #0747A6;
}
.dark select option { background-color: #1e293b; color: #e2e8f0; }
/* Modals */
.dark .modal-overlay,
.dark .dialog-overlay { background-color: rgba(0, 0, 0, 0.7); }
.dark #calendarDate > div > div.bg-white,
.dark #ticketDetail > div > div.bg-white,
.dark #createTicket > div > div > div.bg-white,
.dark #createUser > div > div > div.bg-white,
.dark #assetView > div > div > div.bg-white {
background-color: #1e293b;
border-color: #334155;
}
.dark #ticketDetail .bg-slate-50 {
background-color: #0f172a;
border-color: #334155;
}
/* Kanban */
.dark .kanban-column { background-color: #1e293b; border-color: #334155; }
.dark .ticket-card { background-color: #334155; border-color: #475569; }
.dark .ticket-card:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); }
.dark .column-header h4 { color: #94a3b8; }
.dark .label-chip { background-color: #312e81; color: #a5b4fc; }
/* Calendar */
.dark .calendar-day-cell { background-color: #1e293b; border-color: #334155; }
.dark .calendar-day-cell:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }
.dark .calendar-empty-cell { background-color: #0f172a; }
.dark .bg-blue-50 { background-color: #1e3a5f; }
.dark .border-blue-500 { border-color: #3b82f6; }
.dark .text-blue-700 { color: #60a5fa; }
.dark #calendarView .bg-gradient-to-r { background-image: none; background-color: #1e293b; }
.dark .calendar-search { background-color: #334155; border-color: #475569; }
.dark .calendar-search input { color: #e2e8f0; }
.dark .calendar-search input::placeholder { color: #94a3b8; }
.dark .calendar-search i { color: #94a3b8; }
.dark .calendar-search kbd { background-color: #1e293b; border-color: #475569; color: #94a3b8; }
.dark .calendar-icon-button, .dark .calendar-today-button, .dark .calendar-mode-select {
background-color: #334155; border-color: #475569; color: #e2e8f0;
}
.dark .calendar-icon-button:hover, .dark .calendar-today-button:hover, .dark .calendar-mode-select:hover {
background-color: #475569;
}
.dark .calendar-date-mark { border-color: #475569; }
.dark .calendar-date-mark strong { color: #e2e8f0; }
.dark .calendar-month-heading h3 { color: #e2e8f0; }
.dark .calendar-month-heading p { color: #94a3b8; }
.dark .calendar-toolbar-wrap { border-bottom-color: #334155; }
.dark .calendar-header-cell { background-color: #1e293b; border-color: #334155; color: #94a3b8; }
.dark .calendar-page-header { border-bottom-color: #334155; }
.dark .calendar-tabs { border-bottom-color: #334155; }
.dark .calendar-tab { color: #94a3b8; }
.dark .calendar-tab:hover { color: #60a5fa; }
.dark .calendar-tab.is-active { color: #60a5fa; border-bottom-color: #60a5fa; }
.dark .calendar-search-results { background-color: #1e293b; border-color: #334155; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5); }
.dark .calendar-search-results p { color: #94a3b8; }
.dark .calendar-search-result { border-bottom-color: #334155; }
.dark .calendar-search-result:hover { background-color: #334155; }
.dark .calendar-search-result strong { color: #60a5fa; }
.dark .calendar-search-result span { color: #cbd5e1; }
.dark .calendar-state { background-color: #1e293b; color: #94a3b8; }
.dark .calendar-day-number { color: #e2e8f0; }
/* Chart cards */
.dark canvas { filter: brightness(0.9); }
/* Scrollbar */
.dark ::-webkit-scrollbar-thumb { background: #475569; }
.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }
/* ============================================
DARK MODE - KONTRAS CHIP & TEKS BERWARNA (audit 2026-08-19)
Melengkapi pasangan warna yang belum di-override gelap:
- bg gelap (kanban tray /70, chip -50/-100) agar teks terang terbaca
- teks warna brand/status (text-primary, text-*-600/700) versi terang
============================================ */
/* Kanban column trays (bg-*-50/70) — di dark harus gelap agar teks terang kontras */
.dark .bg-slate-100\/70 { background-color: rgba(51, 65, 85, 0.7); }
.dark .bg-blue-50\/70 { background-color: rgba(30, 58, 95, 0.7); }
.dark .bg-amber-50\/70 { background-color: rgba(69, 49, 16, 0.7); }
.dark .bg-purple-50\/70 { background-color: rgba(49, 46, 129, 0.7); }
.dark .bg-emerald-50\/70 { background-color: rgba(6, 78, 59, 0.7); }
/* Chip backgrounds -50 — ikut gelap agar pasangan text-*-600/700 terang kontras */
.dark .bg-amber-50 { background-color: #3b2a10; }
.dark .bg-emerald-50 { background-color: #0b2f20; }
.dark .bg-red-50 { background-color: #3a1616; }
.dark .bg-purple-50 { background-color: #2c1a45; }
.dark .bg-orange-50 { background-color: #2e1d0e; }
.dark .bg-yellow-50 { background-color: #332805; }
.dark .bg-green-50 { background-color: #0a2e1c; }
.dark .bg-indigo-50 { background-color: #1f2140; }
.dark .bg-slate-100 { background-color: #1e293b; }
.dark .bg-slate-200 { background-color: #334155; }
/* Track bar Distribusi Rating: bg-slate-100 di dalam kartu sama warnanya dengan kartu
(#1e293b) sehingga track tidak terlihat di dark mode. Beri warna track khusus. */
.dark #feedbackDistribution .bg-slate-100 { background-color: #334155; }
/* Varian translusen bg-*-50/50 & bg-white/60 (panel bantuan/help, dropzone) */
.dark .bg-blue-50\/30 { background-color: rgba(30, 58, 95, 0.3); }
.dark .bg-blue-50\/50 { background-color: rgba(30, 58, 95, 0.5); }
.dark .bg-amber-50\/50 { background-color: rgba(69, 49, 16, 0.5); }
.dark .bg-emerald-50\/50 { background-color: rgba(6, 78, 59, 0.5); }
.dark .bg-indigo-50\/50 { background-color: rgba(38, 40, 80, 0.5); }
.dark .bg-orange-50\/50 { background-color: rgba(69, 40, 12, 0.5); }
.dark .bg-purple-50\/50 { background-color: rgba(49, 46, 129, 0.5); }
.dark .bg-rose-50\/50 { background-color: rgba(88, 28, 50, 0.5); }
.dark .bg-sky-50\/50 { background-color: rgba(12, 74, 110, 0.5); }
.dark .bg-violet-50\/50 { background-color: rgba(49, 46, 129, 0.5); }
.dark .bg-cyan-50\/50 { background-color: rgba(6, 42, 54, 0.5); }
.dark .bg-amber-100\/50 { background-color: rgba(74, 52, 20, 0.5); }
.dark .bg-white\/60 { background-color: rgba(51, 65, 85, 0.6); }
.dark .hover\:bg-slate-50\/50:hover { background-color: rgba(51, 65, 85, 0.5); }
/* Chip backgrounds -100 */
.dark .bg-blue-100 { background-color: #1e3a5f; }
.dark .bg-amber-100 { background-color: #4a3414; }
.dark .bg-emerald-100 { background-color: #123c2a; }
.dark .bg-red-100 { background-color: #451d1d; }
.dark .bg-purple-100 { background-color: #38204f; }
.dark .bg-orange-100 { background-color: #3a2612; }
.dark .bg-yellow-100 { background-color: #3f3208; }
.dark .bg-green-100 { background-color: #103823; }
.dark .bg-indigo-100 { background-color: #262850; }
/* Text warna brand — versi terang di atas permukaan gelap */
.dark .text-primary { color: #93c5fd; }
.dark .hover\:text-primary-dark:hover { color: #60a5fa; }
/* Chip brand yang tetap terang (bg-primary-light) harus tetap teks gelap */
.dark .bg-primary-light.text-primary { color: #0747A6; }
/* Text warna status -600 (badge hitung kanban, statistik, label status) */
.dark .text-blue-600 { color: #60a5fa; }
.dark .text-amber-600 { color: #fbbf24; }
.dark .text-purple-600 { color: #a78bfa; }
.dark .text-emerald-600 { color: #34d399; }
.dark .text-red-600 { color: #f87171; }
.dark .text-indigo-600 { color: #a5b4fc; }
/* Text warna status -700/-800 (label chip status/prioritas) */
.dark .text-amber-700 { color: #fcd34d; }
.dark .text-amber-800 { color: #fcd34d; }
.dark .text-emerald-700 { color: #34d399; }
.dark .text-red-700 { color: #fca5a5; }
.dark .text-purple-700 { color: #d8b4fe; }
.dark .text-orange-700 { color: #fdba74; }
.dark .text-yellow-700 { color: #fde047; }
.dark .text-green-700 { color: #6ee7b7; }
.dark .text-indigo-700 { color: #c7d2fe; }
/* Hover variant chip agar tetap gelap saat hover */
.dark .hover\:bg-blue-100:hover { background-color: #2f4a75; }
/* Analytics combo period — teks non-aktif lebih jelas */
.dark .combo-period-btn.text-slate-500 { color: #cbd5e1; }
.onboarding-card {
max-height: 90vh;
overflow-y: auto;
}
@media (max-width: 480px) {
.onboarding-card {
max-height: 95vh;
border-radius: 16px !important;
}
.onboarding-card .onboarding-card-header {
padding-top: 1.5rem;
}
}
/* Onboarding Spotlight */
.onboarding-spotlight {
position: fixed;
z-index: 75;
pointer-events: none;
border-radius: 12px;
box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.65), 0 0 20px rgba(7, 71, 166, 0.4);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.onboarding-element-highlight {
position: relative;
z-index: 76 !important;
border-radius: 12px;
box-shadow: 0 0 0 3px rgba(7, 71, 166, 0.7), 0 0 16px rgba(7, 71, 166, 0.3) !important;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.onboarding-tooltip {
position: fixed;
z-index: 80;
background: white;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
width: 380px;
max-width: calc(100vw - 32px);
max-height: calc(100vh - 40px);
overflow: hidden;
display: flex;
flex-direction: column;
transition: opacity 0.3s ease, transform 0.3s ease;
opacity: 1;
transform: translateY(0);
box-sizing: border-box;
}
.onboarding-tooltip * {
box-sizing: border-box;
}
.onboarding-tooltip #onboardingContent {
scrollbar-width: thin;
}
.onboarding-tooltip #onboardingContent::-webkit-scrollbar {
width: 4px;
}
.onboarding-tooltip #onboardingContent::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 2px;
}
.onboarding-tooltip.fade-in {
animation: onboardingFadeIn 0.35s ease;
}
@keyframes onboardingFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 480px) {
.onboarding-tooltip {
width: calc(100vw - 16px);
max-width: calc(100vw - 16px);
max-height: calc(100vh - 20px);
border-radius: 12px;
}
.onboarding-tooltip .onboarding-footer {
flex-direction: column;
gap: 0.5rem;
}
.onboarding-tooltip .onboarding-footer .onboarding-dots-wrap {
order: 2;
width: 100%;
justify-content: center;
}
.onboarding-tooltip .onboarding-footer .onboarding-btns-wrap {
order: 1;
width: 100%;
justify-content: center;
}
.onboarding-tooltip .onboarding-btns-wrap button {
font-size: 11px;
padding: 6px 10px;
}
}
.onboarding-tooltip-arrow {
position: fixed;
z-index: 79;
width: 16px;
height: 16px;
background: white;
transform: rotate(45deg);
box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.06);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.dark .onboarding-tooltip { background: #1e293b; color: #e2e8f0; }
.dark .onboarding-tooltip-arrow { background: #1e293b; }
.dark .onboarding-spotlight {
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.75), 0 0 20px rgba(7, 71, 166, 0.4);
}
/* Onboarding dots — carousel style (max 4 visible) */
#onboardingDots {
position: relative;
overflow: hidden;
width: 82px;
}
.onboarding-dots-track {
display: flex;
align-items: center;
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.onboarding-dot-slot {
width: 16px;
height: 16px;
margin-right: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: none;
padding: 0;
cursor: pointer;
flex-shrink: 0;
}
.onboarding-dot-slot:last-child { margin-right: 0; }
.onboarding-dot {
width: 6px;
height: 6px;
border-radius: 9999px;
background: #cbd5e1;
transition: all 0.3s ease;
display: block;
}
.onboarding-dot-slot:hover .onboarding-dot { background: #94a3b8; }
.onboarding-dot-slot.active .onboarding-dot {
width: 20px;
background: #1d4ed8;
}
.dark .onboarding-dot { background: #475569; }
.dark .onboarding-dot-slot:hover .onboarding-dot { background: #64748b; }
.dark .onboarding-dot-slot.active .onboarding-dot { background: #60a5fa; }
/* Flash update */
.dark .flash-update { animation-name: flashUpdateDark; }
@keyframes flashUpdateDark { 0% { background-color: #1e3a5f; } 100% { background-color: #1e293b; } }
/* Login page */
.dark #loginPage { background: #0f172a; }
.dark #loginPage .bg-white { background-color: #1e293b; border-color: #334155; }
/* Kanban Board */
.kanban-column {
min-width: 260px;
max-width: 300px;
/* Pastikan kolom tidak memotong konten card */
overflow: visible;
}
.kanban-container {
min-height: calc(100vh - 260px);
}
.kanban-lane {
min-height: 80px;
}
.kanban-lane > .ticket-card + .ticket-card {
margin-top: 10px;
}
.lane-title {
border-bottom: 1px solid rgba(148, 163, 184, 0.2);
padding-bottom: 0.75rem;
}
.kanban-toolbar {
padding: 12px 0;
border-bottom: 1px solid rgba(15,23,42,0.04);
margin-bottom: 12px;
}
.compact-view .ticket-card { padding: 10px 12px; }
.compact-view .ticket-card h4 { font-size: 13px; }
.compact-view .ticket-card .label-chip { font-size: 10px; padding: 2px 5px; }
.main-content {
transition: margin-left 0.3s ease;
}
.compact-view .main-content { margin-left: 64px !important; }
.compact-view .main-content header .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.sidebar {
transition: width 0.3s ease;
}
.compact-sidebar { width: 64px !important; }
.compact-sidebar .nav-btn {
justify-content: center;
padding-left: 0;
padding-right: 0;
}
.compact-sidebar .nav-btn span,
.compact-sidebar nav > p,
.compact-sidebar .p-5.border-b h2,
.compact-sidebar .p-5.border-b p,
.compact-sidebar .p-4.border-t .flex-1,
.compact-sidebar .p-3.border-t #realtimeLabel,
.compact-sidebar .p-3.border-t #lastSyncLabel {
display: none;
}
.compact-sidebar .nav-btn i {
margin-right: 0;
margin-left: 0;
}
.compact-sidebar .p-5.border-b { padding: 0.75rem !important; }
.compact-sidebar .p-5.border-b > div {
justify-content: center;
}
.compact-sidebar .p-3.border-t .rounded-lg {
display: flex;
justify-content: center;
}
.compact-sidebar .p-3.border-t #realtimeDot {
margin-right: 0;
}
.compact-sidebar .p-4.border-t > div {
justify-content: center;
}
.compact-sidebar #sidebarAvatar {
margin: 0 auto;
}
.compact-sidebar .nav-btn[title]:hover::after {
content: attr(title);
position: absolute;
left: calc(100% + 8px);
top: 50%;
transform: translateY(-50%);
background: #1e293b;
color: white;
font-size: 12px;
padding: 4px 10px;
border-radius: 6px;
white-space: nowrap;
z-index: 999;
pointer-events: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.compact-sidebar .nav-btn {
position: relative;
}
.compact-sidebar .nav-btn .ticket-count-badge:not(.hidden) {
position: absolute;
top: 1px;
right: 1px;
min-width: 16px;
height: 16px;
padding: 0 3px;
font-size: 9px;
}
.label-chip { background: #EEF2FF; color: #4F46E5; padding: 3px 6px; border-radius: 999px; font-size: 11px; font-weight:600; }
.asset-code-badge {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 2px 8px;
border-radius: 6px;
background: #F1F5F9;
border: 1px solid #E2E8F0;
color: #0747A6;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
.dark .asset-code-badge {
background: #0F172A;
border-color: #334155;
color: #60A5FA;
}
.kanban-column .column-header { display:flex; align-items:center; justify-content:space-between; padding:8px; margin-bottom:8px; }
.kanban-column .column-header h4 { font-size:12px; text-transform:uppercase; color:#475569; }
.ticket-card.compact { padding:10px 12px; }
.ticket-card {
transition: all 0.2s ease;
cursor: pointer;
/* Overflow hidden agar konten tidak keluar dari card */
overflow: hidden;
/* Word break untuk judul panjang */
word-break: break-word;
/* Box sizing konsisten */
box-sizing: border-box;
width: 100%;
}
.ticket-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}
/* Label chip tidak melar keluar dari card */
.ticket-card .label-chip {
flex-shrink: 0;
max-width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Realtime indicator */
#realtimeDot {
transition: background-color 0.3s ease;
}
#realtimeDot.online {
background-color: #10b981;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
animation: dotPulse 2s infinite;
}
#realtimeDot.offline {
background-color: #ef4444;
}
@keyframes dotPulse {
0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.35); }
70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
/* Overdue / near-deadline pulse */
.pulse-animation {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.35); }
70% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
/* Toast notifications */
.toast {
animation: slideInRight 0.35s ease;
}
@keyframes slideInRight {
from { transform: translateX(110%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
/* Ticket Success Popup */
#ticketSuccessPopupCard {
animation: popupScaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes popupScaleIn {
from { transform: scale(0.9); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
#ticketSuccessPopup.hidden #ticketSuccessPopupCard {
animation: popupScaleOut 0.2s ease forwards;
}
@keyframes popupScaleOut {
from { transform: scale(1); opacity: 1; }
to { transform: scale(0.9); opacity: 0; }
}
/* Success popup details styling */
#ticketSuccessDetails {
display: grid;
grid-template-columns: max-content 1fr;
gap: 8px 12px;
font-size: 13px;
}
#ticketSuccessDetails dt {
color: #64748b;
font-weight: 500;
}
#ticketSuccessDetails dd {
color: #334155;
font-weight: 600;
margin: 0;
text-align: right;
}
#ticketSuccessDetails dd.status {
color: #16a34a;
font-weight: 700;
}
#ticketSuccessDetails dd.priority-highest { color: #ef4444; }
#ticketSuccessDetails dd.priority-high { color: #f97316; }
#ticketSuccessDetails dd.priority-medium { color: #3b82f6; }
#ticketSuccessDetails dd.priority-low { color: #10b981; }
.dark #ticketSuccessDetails dt { color: #94a3b8; }
.dark #ticketSuccessDetails dd { color: #e2e8f0; }
.dark #ticketSuccessDetails dd.status { color: #34d399; }
.dark #ticketSuccessDetails dd.priority-highest { color: #f87171; }
.dark #ticketSuccessDetails dd.priority-high { color: #fb923c; }
.dark #ticketSuccessDetails dd.priority-medium { color: #60a5fa; }
.dark #ticketSuccessDetails dd.priority-low { color: #34d399; }
/* Loading spinner */
.spinner {
border: 3px solid rgba(0, 0, 0, 0.08);
border-radius: 50%;
border-top: 3px solid #0747A6;
width: 36px;
height: 36px;
animation: spin 0.9s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Scrollbar */
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #d1d5db;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #9ca3af;
}
/* Responsive sidebar */
@media (max-width: 1023px) {
.sidebar {
transform: translateX(-100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: none;
}
.sidebar.open {
transform: translateX(0);
box-shadow: 4px 0 24px rgba(15, 23, 42, 0.15);
}
.sidebar-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(2px);
z-index: 45;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.sidebar-overlay.visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 0.2s ease, visibility 0s;
}
body.sidebar-open {
overflow: hidden;
}
.kanban-container {
overflow-x: auto;
padding-bottom: 20px;
}
.main-content {
margin-left: 0 !important;
}
.compact-view .main-content {
margin-left: 0 !important;
}
}
.modal-overlay,
.dialog-overlay {
background-color: rgba(15, 23, 42, 0.45);
}
/* Ticket card just-updated flash, used for realtime feedback */
@keyframes flashUpdate {
0% { background-color: #DEEBFF; }
100% { background-color: #ffffff; }
}
.flash-update {
animation: flashUpdate 1.2s ease;
}
/* Calendar workspace: Jira Blue focuses actions, priority colors identify work. */
.calendar-workspace { overflow: hidden; }
.calendar-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.5rem; border-bottom: 1px solid #e2e8f0; }
.calendar-breadcrumb { margin: 0 0 .4rem; color: #64748b; font-size: .75rem; font-weight: 600; }
.calendar-breadcrumb span { color: #94a3b8; padding: 0 .35rem; }
.calendar-tabs { display: flex; gap: .35rem; padding: 0 1.5rem; overflow-x: auto; border-bottom: 1px solid #e2e8f0; }
.calendar-tab { min-height: 44px; padding: 0 .7rem; color: #475569; border-bottom: 2px solid transparent; font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.calendar-tab:hover { color: #0747A6; }
.calendar-tab.is-active { color: #0747A6; border-bottom-color: #0747A6; }
.calendar-toolbar-wrap { padding: 1.25rem 1.5rem; border-bottom: 1px solid #e2e8f0; }
.calendar-toolbar { display: flex; align-items: center; gap: .875rem; }
.calendar-date-mark { display: grid; flex: 0 0 48px; width: 48px; overflow: hidden; text-align: center; border: 1px solid #cbd5e1; border-radius: .6rem; }
.calendar-date-mark span { padding: .2rem; color: white; background: #0747A6; font-size: .625rem; font-weight: 700; }
.calendar-date-mark strong { padding: .25rem; color: #1e293b; font-size: 1rem; }
.calendar-month-heading { min-width: 0; }
.calendar-month-heading h3 { margin: 0; color: #1e293b; font-size: 1rem; font-weight: 700; }
.calendar-month-heading p { margin: .18rem 0 0; color: #64748b; font-size: .75rem; }
.calendar-controls { display: flex; align-items: center; justify-content: flex-end; flex: 1; gap: .45rem; }
.calendar-icon-button, .calendar-today-button, .calendar-mode-select { min-height: 40px; color: #334155; background: white; border: 1px solid #cbd5e1; border-radius: .5rem; font-size: .8125rem; font-weight: 600; }
.calendar-icon-button { width: 40px; }
.calendar-today-button { padding: 0 .75rem; }
.calendar-mode-select { padding: 0 .65rem; }
.calendar-create-button { min-height: 40px; padding: 0 .85rem; color: white; background: #0747A6; border: 1px solid #0747A6; border-radius: .5rem; font-size: .8125rem; font-weight: 700; }
.calendar-icon-button:hover, .calendar-today-button:hover, .calendar-mode-select:hover { background: #f8fafc; }
.calendar-create-button:hover { background: #053b87; }
.calendar-icon-button:focus-visible, .calendar-today-button:focus-visible, .calendar-mode-select:focus-visible, .calendar-create-button:focus-visible, .calendar-tab:focus-visible, .calendar-day-cell:focus-visible, .calendar-agenda-card:focus-visible, .calendar-date-strip-item:focus-visible { outline: 2px solid #0747A6; outline-offset: 2px; }
.calendar-search { position: relative; display: flex; align-items: center; width: min(360px, 100%); min-height: 42px; gap: .55rem; padding: 0 .7rem; background: white; border: 1px solid #cbd5e1; border-radius: .5rem; }
.calendar-search i { color: #64748b; }
.calendar-search input { width: 100%; min-width: 0; color: #1e293b; outline: none; font-size: .8125rem; }
.calendar-search kbd { padding: .15rem .35rem; color: #64748b; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: .25rem; font-size: .625rem; white-space: nowrap; }
.calendar-search-results { position: absolute; top: calc(100% + .35rem); left: 0; z-index: 30; width: 100%; overflow: hidden; background: white; border: 1px solid #cbd5e1; border-radius: .5rem; box-shadow: 0 12px 24px rgba(15, 23, 42, .12); }
.calendar-search-results p { margin: 0; padding: .8rem; color: #64748b; font-size: .8125rem; }
.calendar-search-result { display: grid; width: 100%; gap: .15rem; padding: .7rem .8rem; text-align: left; border-bottom: 1px solid #e2e8f0; }
.calendar-search-result:hover { background: #f8fafc; }
.calendar-search-result strong { color: #0747A6; font-size: .75rem; }.calendar-search-result span { overflow: hidden; color: #334155; font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }
.calendar-state { margin: 1rem 1.5rem 0; padding: .8rem; color: #475569; background: #f8fafc; border-radius: .5rem; font-size: .8125rem; }.calendar-error { color: #b91c1c; background: #fef2f2; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-left: 1px solid #e2e8f0; }
.calendar-header-cell { min-height: 40px; padding: .75rem .5rem; color: #64748b; background: #f8fafc; border-right: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; font-size: .75rem; font-weight: 700; text-align: center; }
.calendar-day-cell { display: flex; min-width: 0; min-height: 124px; flex-direction: column; gap: .5rem; padding: .6rem; text-align: left; background: white; border-right: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; transition: background-color .15s ease; }
.calendar-day-cell:hover { background: #f8fafc; }.calendar-day-cell.is-outside { background: #f8fafc; }.calendar-day-cell.is-outside .calendar-day-number { color: #94a3b8; }
.calendar-day-number { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: #334155; border-radius: 999px; font-size: .75rem; font-weight: 700; }.calendar-day-number.is-today { color: white; background: #0747A6; }
.calendar-ticket-stack { display: grid; min-width: 0; gap: .25rem; }.calendar-ticket-badge { display: flex; min-width: 0; align-items: center; gap: .3rem; padding: .25rem .35rem; border-radius: .3rem; font-size: .625rem; line-height: 1.2; }.calendar-ticket-badge.is-highest { color: #b91c1c; background: #fef2f2; }.calendar-ticket-badge.is-medium { color: #92400e; background: #fffbeb; }.calendar-ticket-badge.is-low { color: #475569; background: #f1f5f9; }.calendar-pill-time { flex: 0 0 auto; font-weight: 700; }.calendar-off-hours { flex: 0 0 6px; width: 6px; height: 6px; background: #7C3AED; border-radius: 999px; }.calendar-more { padding: .15rem .35rem; color: #0747A6; font-size: .625rem; font-weight: 700; }
.calendar-agenda { display: none; }.calendar-create-fab { display: none; }
@media (min-width: 768px) and (max-width: 1024px) {
.calendar-page-header { align-items: stretch; flex-direction: column; }
.calendar-search { width: 100%; }
.calendar-day-cell { min-height: 100px; padding: .45rem; }
.calendar-ticket-badge .truncate { display: none; }
.calendar-ticket-badge { justify-content: center; }
}
@media (max-width: 767px) {
.calendar-page-header { padding: 1rem; flex-direction: column; }
.calendar-search { width: 100%; min-height: 44px; }
.calendar-tabs { padding: 0 1rem; }
.calendar-toolbar-wrap { padding: 1rem; }
.calendar-toolbar { flex-wrap: wrap; }
.calendar-month-heading { flex: 1; }
.calendar-controls { width: 100%; flex: 0 0 100%; justify-content: space-between; }
.calendar-controls .calendar-icon-button { flex: 0 0 44px; width: 44px; min-height: 44px; }
.calendar-controls .calendar-today-button,
.calendar-controls .calendar-mode-select { min-height: 44px; }
.calendar-create-button { display: none; }
.calendar-mode-select { flex: 1; }
.calendar-grid { display: none; }
.calendar-agenda { display: block; padding: 1rem; }
.calendar-date-strip { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .45rem; scrollbar-width: thin; }
.calendar-date-strip-item { display: grid; flex: 0 0 48px; min-height: 58px; place-items: center; color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .5rem; font-size: .625rem; text-transform: capitalize; }
.calendar-date-strip-item strong { font-size: .875rem; }
.calendar-date-strip-item.is-selected { color: white; background: #0747A6; border-color: #0747A6; }
.calendar-agenda-list { margin-top: 1.25rem; }
.calendar-agenda-list header { margin-bottom: .75rem; }.calendar-agenda-list header p { margin: 0; color: #64748b; font-size: .75rem; font-weight: 700; }.calendar-agenda-list header h3 { margin: .2rem 0 0; color: #1e293b; font-size: 1rem; }
.calendar-agenda-card { display: flex; width: 100%; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-top: .6rem; padding: .9rem; text-align: left; background: white; border: 1px solid #e2e8f0; border-radius: .65rem; }
.calendar-agenda-card > div:first-child { min-width: 0; }.calendar-agenda-code { color: #0747A6; font-size: .6875rem; font-weight: 700; }.calendar-agenda-card h4 { margin: .25rem 0; color: #1e293b; font-size: .875rem; line-height: 1.35; }.calendar-agenda-card p { margin: 0; color: #64748b; font-size: .75rem; }.calendar-agenda-card > div:last-child { display: grid; justify-items: end; gap: .45rem; flex: 0 0 auto; }.calendar-status-label { color: #475569; font-size: .625rem; font-weight: 600; }
.calendar-empty-state { padding: 2rem 1rem; color: #64748b; text-align: center; border: 1px dashed #cbd5e1; border-radius: .65rem; }.calendar-empty-state i { color: #94a3b8; font-size: 1.5rem; }.calendar-empty-state p { margin: .65rem 0 0; font-size: .8125rem; }
.calendar-create-fab { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 25; display: grid; width: 52px; height: 52px; place-items: center; color: white; background: #0747A6; border-radius: 999px; box-shadow: 0 8px 20px rgba(7, 71, 166, .3); }
}
@media (min-width: 768px) {
.calendar-workspace.calendar-mode-agenda .calendar-grid { display: none; }
.calendar-workspace.calendar-mode-agenda .calendar-agenda { display: block; padding: 1.5rem; }
.calendar-workspace.calendar-mode-agenda .calendar-date-strip { display: none; }
.calendar-agenda-list { max-width: 760px; }.calendar-agenda-list header { margin-bottom: .75rem; }.calendar-agenda-list header p { margin: 0; color: #64748b; font-size: .75rem; font-weight: 700; }.calendar-agenda-list header h3 { margin: .2rem 0 0; color: #1e293b; font-size: 1rem; }.calendar-agenda-card { display: flex; width: 100%; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-top: .6rem; padding: .9rem; text-align: left; background: white; border: 1px solid #e2e8f0; border-radius: .65rem; }.calendar-agenda-card h4 { margin: .25rem 0; color: #1e293b; font-size: .875rem; }.calendar-agenda-card p { margin: 0; color: #64748b; font-size: .75rem; }.calendar-agenda-card > div:last-child { display: grid; justify-items: end; gap: .45rem; }.calendar-agenda-code { color: #0747A6; font-size: .6875rem; font-weight: 700; }.calendar-status-label { color: #475569; font-size: .625rem; font-weight: 600; }
}
.dark #calendarView .calendar-breadcrumb { color: #94a3b8; }
.dark #calendarView .calendar-tabs,
.dark #calendarView .calendar-toolbar-wrap { border-color: #334155; }
.dark #calendarView .calendar-tab { color: #cbd5e1; }
.dark #calendarView .calendar-tab:hover,
.dark #calendarView .calendar-tab.is-active { color: #60a5fa; }
.dark #calendarView .calendar-date-mark { border-color: #475569; }
.dark #calendarView .calendar-date-mark strong,
.dark #calendarView .calendar-month-heading h3,
.dark #calendarView .calendar-agenda-list header h3,
.dark #calendarView .calendar-agenda-card h4 { color: #f1f5f9; }
.dark #calendarView .calendar-month-heading p,
.dark #calendarView .calendar-agenda-list header p,
.dark #calendarView .calendar-agenda-card p { color: #94a3b8; }
.dark #calendarView .calendar-controls .calendar-icon-button,
.dark #calendarView .calendar-controls .calendar-today-button,
.dark #calendarView .calendar-controls .calendar-mode-select {
color: #e2e8f0;
background-color: #1e293b;
border-color: #475569;
}
.dark #calendarView .calendar-controls .calendar-icon-button:hover,
.dark #calendarView .calendar-controls .calendar-today-button:hover,
.dark #calendarView .calendar-controls .calendar-mode-select:hover { background-color: #334155; }
.dark #calendarView .calendar-search,
.dark #calendarView .calendar-search-results { background-color: #1e293b; border-color: #475569; }
.dark #calendarView .calendar-search input { color: #f8fafc; background-color: transparent; }
.dark #calendarView .calendar-search kbd { color: #cbd5e1; background-color: #334155; border-color: #475569; }
.dark #calendarView .calendar-search-results p { color: #cbd5e1; }
.dark #calendarView .calendar-search-result { border-bottom-color: #334155; }
.dark #calendarView .calendar-search-result:hover { background-color: #334155; }
.dark #calendarView .calendar-search-result strong { color: #60a5fa; }
.dark #calendarView .calendar-search-result span { color: #e2e8f0; }
.dark #calendarView .calendar-state { color: #cbd5e1; background-color: #1e293b; }
.dark #calendarView .calendar-state.calendar-error { color: #fca5a5; background-color: #3a1616; }
.dark #calendarView .calendar-grid { border-color: #334155; }
.dark #calendarView .calendar-header-cell { color: #cbd5e1; background-color: #1e293b; border-color: #334155; }
.dark #calendarView .calendar-day-cell.is-outside { background-color: #172234; }
.dark #calendarView .calendar-ticket-badge.is-highest { color: #fca5a5; background-color: #3a1616; }
.dark #calendarView .calendar-ticket-badge.is-medium { color: #fcd34d; background-color: #332805; }
.dark #calendarView .calendar-ticket-badge.is-low { color: #cbd5e1; background-color: #334155; }
.dark #calendarView .calendar-more { color: #60a5fa; }
.dark #calendarView .calendar-date-strip-item { color: #cbd5e1; background-color: #1e293b; border-color: #475569; }
.dark #calendarView .calendar-date-strip-item.is-selected { color: #fff; background-color: #0747a6; border-color: #0747a6; }
.dark #calendarView .calendar-agenda-card { background-color: #1e293b; border-color: #334155; }
.dark #calendarView .calendar-agenda-card:hover { border-color: #60a5fa; }
.dark #calendarView .calendar-status-label { color: #cbd5e1; }
.dark #calendarView .calendar-empty-state { color: #cbd5e1; border-color: #475569; }
#upcomingTicketsContainer {
scrollbar-width: thin;
scrollbar-color: #cbd5e1 #f1f5f9;
}
#upcomingTicketsContainer::-webkit-scrollbar {
width: 6px;
}
#upcomingTicketsContainer::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 10px;
}
#upcomingTicketsContainer::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 10px;
}
#upcomingTicketsContainer::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
/* ============================================
TICKET CLICKABLE STYLES
============================================ */
.list-ticket-row {
transition: background-color 0.15s ease;
cursor: pointer;
}
.list-ticket-row:hover {
background-color: #f8fafc;
}
.list-ticket-row:active {
background-color: #f1f5f9;
}
.calendar-ticket-badge {
transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.calendar-ticket-badge:hover {
transform: scale(1.05);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.calendar-ticket-badge:active {
transform: scale(0.98);
}
.upcoming-ticket-card {
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.upcoming-ticket-card:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.upcoming-ticket-card:active {
transform: translateY(0);
}
.calendar-date-ticket-card {
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.calendar-date-ticket-card:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border-color: rgba(7, 71, 166, 0.3);
}
.calendar-date-ticket-card:active {
transform: translateY(0);
}
.dark .list-ticket-row:hover {
background-color: #334155;
}
.dark .list-ticket-row:active {
background-color: #475569;
}
.dark .calendar-ticket-badge:hover {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.dark .upcoming-ticket-card:active {
background-color: #334155;
}
.dark .calendar-date-ticket-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* ============================================
CREATE TICKET MODAL — RESPONSIVE
============================================ */
.create-modal-footer {
border-radius: 0 0 1rem 1rem;
}
@media (max-width: 639px) {
.create-modal-footer {
position: sticky;
bottom: 0;
z-index: 10;
background-color: white;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
border-radius: 0 0 1rem 1rem;
padding: 1rem;
}
.create-modal-footer button[type="submit"] {
width: 100%;
padding: 0.875rem 1.5rem;
font-size: 0.9375rem;
border-radius: 0.75rem;
}
.create-modal-footer button[type="button"] {
width: 100%;
}
}
/* ============================================
TICKET DETAIL MODAL — RESPONSIVE
============================================ */
@media (max-width: 639px) {
#ticketDetail .grid {
gap: 1rem;
}
#ticketDetail .sticky {
position: relative;
}
#btnSaveChanges,
#btnDeleteTicket {
width: 100%;
}
}
/* ============================================
LIST VIEW — RESPONSIVE (touch-friendly rows)
============================================ */
@media (max-width: 639px) {
#listView table thead {
display: none;
}
#listTableBody tr.list-ticket-row {
display: flex;
flex-direction: column;
padding: 0.875rem 1rem;
border-bottom: 1px solid #f1f5f9;
gap: 0.25rem;
}
#listTableBody tr.list-ticket-row td {
padding: 0.125rem 0;
border: none;
display: flex;
align-items: center;
gap: 0.5rem;
}
#listTableBody tr.list-ticket-row td::before {
content: attr(data-label);
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #94a3b8;
min-width: 4.5rem;
flex-shrink: 0;
}
#listTableBody tr.list-ticket-row td:first-child {
font-weight: 600;
font-size: 0.875rem;
}
#listTableBody tr.list-ticket-row td:first-child::before {
display: none;
}
.dark #listTableBody tr.list-ticket-row {
border-bottom-color: #334155;
}
}
/* ============================================
CALENDAR — RESPONSIVE
============================================ */
@media (max-width: 639px) {
.calendar-grid {
gap: 4px;
}
.calendar-day-cell {
min-height: 60px;
padding: 0.25rem;
}
.calendar-day-cell .text-xs {
font-size: 0.625rem;
}
.calendar-empty-cell {
min-height: 40px;
}
}
/* Image Upload Dropzone */
.image-dropzone {
transition: all 0.2s ease;
}
.image-dropzone:hover,
.image-dropzone.drag-over {
border-color: #0747A6;
background-color: rgba(7, 71, 166, 0.03);
}
.image-dropzone.drag-over {
transform: scale(1.01);
box-shadow: 0 0 0 3px rgba(7, 71, 166, 0.15);
}
/* Image Preview Item */
.image-preview-item {
animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
/* Dark mode for image upload zone */
/* Dark mode for create modal footer */
.dark .create-modal-footer {
background-color: #1e293b !important;
border-color: #334155;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}
.dark .image-dropzone {
border-color: #475569;
background-color: #1e293b;
}
.dark .image-dropzone:hover,
.dark .image-dropzone.drag-over {
border-color: #0747A6;
background-color: rgba(7, 71, 166, 0.1);
}
.dark .image-preview-item img {
border-color: #475569;
}
/* ============================================
NOTIFICATION PANEL
============================================ */
#mobileNotifSlot { display: none; }
@media (max-width: 767px) {
#notifHeaderSlot:empty { display: none; }
#mobileNotifSlot { display: block; }
#mobileNotifSlot #notifWrapper { width: 100%; }
#mobileNotifSlot #notifBell {
width: 100%;
height: auto;
justify-content: flex-start;
gap: 0.75rem;
padding: 0.625rem 0.75rem;
text-align: left;
}
#mobileNotifSlot #notifBell > i { width: 1rem; text-align: center; }
#mobileNotifSlot #notifBadge { top: 0.625rem; right: 0.75rem; }
}
#notifPanel {
animation: notifSlideIn 0.2s ease;
}
@keyframes notifSlideIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
#notifList::-webkit-scrollbar { width: 5px; }
#notifList::-webkit-scrollbar-track { background: transparent; }
#notifList::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
#notifList::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.dark #notifList::-webkit-scrollbar-thumb { background: #475569; }
.dark #notifList::-webkit-scrollbar-thumb:hover { background: #64748b; }
.dark #notifPanel {
background-color: #1e293b;
border-color: #334155;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.dark #notifPanel .text-slate-800 { color: #f1f5f9; }
.dark #notifPanel .text-slate-500 { color: #94a3b8; }
.dark #notifPanel .text-slate-400 { color: #64748b; }
.dark #notifPanel .border-b { border-color: #334155; }
.dark .notif-item:hover {
background-color: rgba(51, 65, 85, 0.3) !important;
}
.dark .notif-item.bg-blue-50\/50 {
background-color: rgba(7, 71, 166, 0.1) !important;
}
/* ============================================
IMAGE PREVIEW LIGHTBOX
============================================ */
#imagePreview {
animation: lightboxIn 0.2s ease;
}
#imagePreview img {
animation: lightboxImgIn 0.25s ease;
}
@keyframes lightboxIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes lightboxImgIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
.dark #imagePreviewName {
background-color: rgba(0, 0, 0, 0.6);
}
/* ============================================
RESPONSIVE & INTERACTIVE — ALL DEVICES
============================================ */
/* Safe area for notched phones */
.safe-top {
padding-top: env(safe-area-inset-top, 0);
}
.safe-bottom {
padding-bottom: env(safe-area-inset-bottom, 0);
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Touch-friendly interactive targets - all clickable elements */
.menu-toggle-btn,
.nav-btn,
header button,
.board-view-btn,
.list-ticket-row,
.upcoming-ticket-card,
.calendar-ticket-badge,
.calendar-day-cell,
.dash-history-ticket,
.dash-activity-ticket,
.dash-deadline-ticket,
.dash-project-row,
.user-dropdown-btn,
.notif-bell,
#menuToggle,
#sidebarClose,
.combo-period-btn,
.period-btn,
.stat-card,
.ticket-card,
.chat-send-btn,
.chat-icon-btn {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
min-height: 44px;
min-width: 44px;
}
/* Konten utama mengisi penuh lebar (viewport − sidebar) di SEMUA ukuran monitor.
Catatan: cap lama `max-width: 1600px` pada .main-area (≥1600px) dihapus karena
menyisakan dead-zone besar di sisi kanan pada monitor lebar / zoom < 100%,
dan berlaku ke semua menu sekaligus karena .main-area adalah induk semua view. */
/* Touch-friendly interactive targets */
.menu-toggle-btn,
.nav-btn,
header button,
.board-view-btn {
-webkit-tap-highlight-color: transparent;
}
.nav-btn {
transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.nav-btn:active {
transform: scale(0.98);
}
.nav-btn.active {
background-color: #DEEBFF;
color: #0747A6;
}
/* Settings submenu — collapsible */
#menuSettingsSubmenu {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.25s ease, opacity 0.2s ease;
}
#menuSettingsSubmenu.open {
max-height: 200px;
opacity: 1;
}
.settings-toggle-icon.rotated {
transform: rotate(180deg);
}
/* Stat cards — hover & press feedback */
.stat-card,
.main-area .bg-white.rounded-xl.shadow-sm {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) {
.stat-card:hover,
.main-area .bg-white.rounded-xl.shadow-sm:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
}
.stat-card:active {
transform: scale(0.99);
}
/* Kanban horizontal scroll with snap on mobile/tablet */
.kanban-scroll {
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.kanban-scroll .kanban-column {
scroll-snap-align: start;
}
@media (max-width: 1024px) {
.kanban-scroll .kanban-column {
min-width: min(85vw, 300px);
max-width: min(85vw, 320px);
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.kanban-scroll .kanban-column {
min-width: 260px;
max-width: 280px;
}
}
@media (min-width: 1024px) {
.sidebar-overlay {
display: none !important;
}
}
/* Scroll hint removed — kanban uses native snap scroll */
/* Toast — klik harus tembus ke menu di bawahnya (container click-through) */
.toast-container {
pointer-events: none;
}
/* Kosong = tidak ada box overlay sama sekali (tidak menghalangi inspeksi/klik) */
.toast-container:empty {
display: none !important;
}
.toast-container .toast {
max-width: 100%;
pointer-events: auto;
}
@media (max-width: 767px) {
.toast-container {
top: auto !important;
bottom: calc(1rem + env(safe-area-inset-bottom, 0)) !important;
left: 1rem !important;
right: 1rem !important;
/* Batasi tumpukan toast agar tidak menutup seluruh layar HP */
max-height: 45vh;
max-height: 45dvh;
overflow-y: auto;
overscroll-behavior: contain;
}
.toast-container .toast {
min-width: 0 !important;
width: 100%;
animation: slideInUp 0.35s ease;
}
@keyframes slideInUp {
from { transform: translateY(110%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
}
/* Header action buttons — ukuran sentuh konsisten (min 44px) */
header .w-9.h-9 {
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
/* Menu toggle button - ensure adequate touch size */
#menuToggle,
#sidebarClose {
min-width: 44px;
min-height: 44px;
}
/* Notification panel — full-screen mobile sheet with a scrollable list */
@media (max-width: 1023px) {
#notifPanel {
position: fixed !important;
inset: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
border-radius: 0 !important;
height: 100vh !important;
height: 100dvh !important;
max-height: 100vh !important;
max-height: 100dvh !important;
z-index: 60;
flex-direction: column;
animation: sheetSlideUp 0.25s ease;
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
#notifPanel:not(.hidden) { display: flex; }
#notifPanel > div:first-child { flex: 0 0 auto; }
#notifList {
flex: 1 1 auto;
min-height: 0;
max-height: none !important;
}
#notifPanel .notif-item .flex-1 > p:first-of-type {
font-size: 0.875rem;
line-height: 1.45;
}
#notifPanel .notif-item .flex-1 > p + p {
font-size: 0.75rem;
line-height: 1rem;
}
@keyframes sheetSlideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
}
body.notif-open { overflow: hidden; }
/* Animasi tutup bottom sheet + overlay notifikasi (mobile) */
.notif-closing {
animation: sheetSlideDown 0.2s ease forwards !important;
}
@keyframes sheetSlideDown {
from { transform: translateY(0); }
to { transform: translateY(100%); }
}
#notifOverlay {
transition: opacity 0.2s ease;
}
.notif-overlay-closing {
opacity: 0;
}
/* Header / layout tightening for smaller devices — kompak & rapi di HP */
@media (max-width: 767px) {
/* Baris header: rata tengah sempurna + padding vertikal ramping */
.main-content header .flex.items-center.justify-between.gap-2.px-3.sm\:px-4.lg\:px-6.py-2\.5.sm\:py-3\.5 {
align-items: center;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
/* Semua tombol ikon header 44×44 — standar minimum touch target */
header .w-9.h-9,
#menuToggle,
#sidebarClose {
min-width: 44px;
min-height: 44px;
}
/* Grup kanan makin rapat */
header .flex.items-center.gap-1.sm\:gap-2.lg\:gap-3.flex-shrink-0 {
gap: 0.25rem;
}
/* Grup kiri: jarak hamburger → judul rapat agar judul tidak terpotong */
header .flex.items-center.gap-2.sm\:gap-4.flex-1.min-w-0 {
gap: 0.375rem;
}
#userDropdownBtn {
padding-left: 0.375rem;
padding-right: 0.125rem;
}
/* Avatar header 28px + chevron mungil di HP (hemat ruang untuk judul) */
#headerAvatar {
width: 1.75rem;
height: 1.75rem;
font-size: 0.65rem;
}
#headerAvatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 9999px;
}
#userDropdownBtn .fa-chevron-down {
font-size: 0.625rem;
}
/* Tombol Buat Tiket (mode ikon di HP) tetap proporsional */
#btnCreateTicket {
min-height: 44px;
padding-left: 0.625rem;
padding-right: 0.625rem;
}
#userDropdown {
right: 0;
width: min(14rem, calc(100vw - 1.5rem));
}
}
@media (max-width: 639px) {
.main-area {
padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
}
#pageTitle {
font-size: 0.95rem;
letter-spacing: -0.01em;
}
/* Tombol ikon Buat Tiket harus simetris pada header mobile. */
#btnCreateTicket {
width: 44px;
min-width: 44px;
height: 44px;
min-height: 44px;
flex: 0 0 44px;
justify-content: center;
padding: 0;
}
#btnCreateTicket .fa-plus {
margin: 0;
}
}
/* Canvas and chart cards stay within viewport */
canvas {
max-width: 100%;
}
/* Ticket detail modal responsiveness */
#ticketDetail > div > div.bg-white,
.ticket-detail-modal {
display: flex;
flex-direction: column;
overflow: hidden;
}
#ticketDetail > div > div.bg-white > .grid,
.ticket-detail-body {
flex: 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
.ticket-detail-shell {
max-height: 100vh;
}
.ticket-detail-header {
flex-shrink: 0;
}
.ticket-detail-body {
scrollbar-gutter: stable;
}
@media (min-width: 1024px) {
.ticket-detail-modal {
height: min(90vh, 920px);
}
}
@media (max-width: 1023px) {
.ticket-detail-modal {
max-height: 95vh;
}
}
@media (max-width: 1023px) {
#ticketDetail > div {
align-items: flex-end;
padding: 0;
}
#ticketDetail > div > div.bg-white {
width: 100%;
max-width: 100%;
max-height: 95vh;
border-radius: 1rem 1rem 0 0;
}
}
@media (max-width: 767px) {
#ticketDetail .ticket-detail-body { touch-action: pan-y; }
#ticketDetail #btnRequestDeleteTicket,
#ticketDetail #btnApproveDeleteRequest,
#ticketDetail #btnRejectDeleteRequest { min-height: 44px; }
}
@media (max-width: 639px) {
#ticketDetail .flex.items-center.justify-between.p-5.border-b.border-slate-100.sticky.top-0.bg-white.z-10 {
padding: 1rem;
}
#ticketDetail .grid.grid-cols-1.lg\:grid-cols-3.gap-6.p-5 {
padding: 1rem;
gap: 1rem;
}
.chat-container,
.chat-thread,
.chat-input-bar,
.chat-row,
.chat-bubble {
min-width: 0;
}
.chat-thread {
max-height: min(300px, 42vh);
padding: 0.75rem;
gap: 0.625rem;
}
.chat-row {
gap: 0.4rem;
}
.chat-bubble {
max-width: calc(100% - 2.4rem);
}
.chat-meta {
flex-wrap: wrap;
column-gap: 0.35rem;
row-gap: 0.1rem;
}
.chat-input-bar {
display: grid;
grid-template-columns: 44px 44px minmax(0, 1fr);
align-items: center;
gap: 0.5rem;
padding: 0.625rem 0.75rem;
}
#commentEmojiBtn {
grid-column: 1;
grid-row: 1;
}
#commentAttachLabel {
grid-column: 2;
grid-row: 1;
}
.chat-input {
grid-column: 1 / -1;
grid-row: 2;
width: 100%;
min-width: 0;
min-height: 44px;
max-height: 120px;
}
#commentInternalWrapper {
grid-column: 1 / span 2;
grid-row: 3;
width: auto;
min-width: 0;
padding: 0;
}
#commentSubmitBtn {
grid-column: 3;
grid-row: 3;
justify-self: end;
margin: 0;
}
}
/* Calendar usability on phone — 7 kolom SELALU muat penuh (tanpa scroll horizontal).
(Dulu: .calendar-grid min-width 640px membuat hanya 4 kolom terlihat di HP.) */
@media (max-width: 639px) {
.calendar-grid {
gap: 3px;
}
/* Header hari 2 huruf (JS merender ganda: MinMi) */
.calendar-header-cell {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
font-size: 0.6875rem;
line-height: 1.25rem;
}
/* Sel tanggal ramping; angka tanggal sedikit diperkecil */
.calendar-day-cell {
min-height: 56px;
padding: 0.25rem;
}
.calendar-day-cell > div:first-child {
font-size: 0.8125rem;
line-height: 1.125rem;
}
}
/* Help and analytics cards avoid horizontal crowding */
@media (max-width: 639px) {
#helpView .p-6,
#analyticsView .p-5,
#dashboardView .p-5,
#feedbackView .p-5 {
padding-left: 1rem;
padding-right: 1rem;
}
}
/* Excel modal footer stacks on narrow screens */
@media (max-width: 639px) {
.xlsx-modal-footer {
flex-direction: column;
align-items: stretch;
}
.xlsx-modal-footer button {
width: 100%;
}
}
/* Sidebar bottom area remains visible on short screens */
.sidebar {
overscroll-behavior: contain;
}
/* Prevent long content from stretching cards */
.ticket-card,
.calendar-date-ticket-card,
.upcoming-ticket-card,
.chat-bubble,
#feedbackRecentList > div {
min-width: 0;
}
.chat-bubble,
#detailDescription,
#detailReporter,
#detailDepartment,
#detailCategory,
#detailAsset {
overflow-wrap: anywhere;
}
/* Dense action bars in admin/profile sections */
@media (max-width: 639px) {
#usersView .flex.items-center.justify-between.mb-5,
#agentsView .flex.items-center.justify-between.mb-5,
#assetsView .flex.flex-wrap.items-center.justify-between.gap-3.mb-5,
#feedbackView .flex.items-center.justify-between.mb-4,
#profileView #adminProfileEditForm .flex.justify-end.space-x-3.pt-2 {
flex-direction: column;
align-items: stretch;
}
#usersView .flex.items-center.justify-between.mb-5 button,
#agentsView .flex.items-center.justify-between.mb-5 button,
#assetsView .flex.flex-wrap.items-center.justify-between.gap-3.mb-5 button,
#profileView #adminProfileEditForm .flex.justify-end.space-x-3.pt-2 button {
width: 100%;
}
}
/* Table cells can break long values on mobile cards */
@media (max-width: 767px) {
.responsive-table-wrap tbody td {
gap: 0.75rem;
word-break: break-word;
}
.responsive-table-wrap tbody td > * {
min-width: 0;
}
}
/* Notification/user dropdown safety above sticky header */
#notifPanel,
#userDropdown {
max-width: calc(100vw - 1rem);
}
/* Mobile login/forgot modal spacing */
@media (max-width: 479px) {
#loginPage,
#forgotPassword {
padding: 1rem;
}
}
/* Combo period toggle buttons - ensure adequate touch targets */
#comboPeriodToggle .combo-period-btn {
min-height: 44px;
padding: 0.75rem 0.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Ensure all analytic action buttons have touch-action: manipulation */
#comboPeriodToggle [data-action],
#comboPeriodToggle .combo-period-btn {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Keep comment attachment previews inside viewport */
#commentPreviewBar,
#ticketImagePreviewContainer,
#detailAttachmentsContainer {
max-width: 100%;
overflow-x: auto;
}
/* Dashboard mini sections better on very small width */
@media (max-width: 374px) {
.stat-card,
#dashboardView .bg-white.rounded-xl.shadow-sm,
#analyticsView .bg-white.rounded-xl.shadow-sm,
#feedbackView .bg-white.rounded-xl.shadow-sm {
padding: 0.875rem;
}
}
/* Hide compact sidebar mode behavior on mobile/tablet */
@media (max-width: 1023px) {
.compact-sidebar {
width: 16rem !important;
}
}
/* Main content should never exceed viewport width */
.main-content,
.main-area,
.view-panel {
min-width: 0;
}
.view-panel {
overflow-x: hidden;
}
/* Restore scroll for views that intentionally scroll horizontally */
.kanban-scroll,
.responsive-table-wrap,
#calendarContainer {
overflow-x: auto;
}
/* Dark mode for mobile modal sheets */
.dark #createUser > div > div,
.dark #editUser > div > div,
.dark #createAgent > div > div,
.dark #editAgent > div > div,
.dark #assetView > div > div,
.dark #calendarDate > div > div,
.dark #forgotPassword .bg-white,
.dark #ticketDetail > div > div.bg-white {
border-color: #334155;
}
.dark #ticketDetail .flex.items-center.justify-between.p-5.border-b.border-slate-100.sticky.top-0.bg-white.z-10 {
background-color: #1e293b;
border-color: #334155;
}
.dark .calendar-grid {
background-color: transparent;
}
/* Admin tables — card layout on mobile */
@media (max-width: 767px) {
.responsive-table-wrap {
overflow-x: visible;
}
.responsive-table-wrap table thead {
display: none;
}
.responsive-table-wrap tbody tr {
display: block;
padding: 0.75rem 0.875rem;
border-bottom: 1px solid #f1f5f9;
}
.responsive-table-wrap tbody td {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.375rem 0;
border: none;
font-size: 0.75rem;
gap: 0.5rem;
}
.responsive-table-wrap tbody td::before {
content: attr(data-label);
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #94a3b8;
min-width: 4rem;
max-width: 5rem;
flex-shrink: 0;
}
.dark .responsive-table-wrap tbody tr {
border-bottom-color: #334155;
}
}
/* Calendar — tablet & mobile */
@media (max-width: 1023px) {
#calendarView .p-6 {
padding: 1rem;
}
#calendarSidebar .sticky {
position: relative;
top: auto;
}
}
/* Pagination — stack on mobile */
@media (max-width: 479px) {
#listView .px-5.py-4.border-t {
flex-direction: column;
gap: 0.75rem;
align-items: stretch;
}
#listView .px-5.py-4.border-t > div {
justify-content: center;
}
}
/* Modals — full screen on small phones */
@media (max-width: 479px) {
#createTicket > div > div,
#ticketDetail > div > div.bg-white,
#createUser > div > div,
#editUser > div > div,
#createAgent > div > div,
#editAgent > div > div,
#assetView > div > div,
#calendarDate > div > div,
#forgotPassword > div {
max-height: 100vh;
border-radius: 0;
min-height: 100vh;
width: 100%;
}
#createTicket,
#ticketDetail,
#createUser,
#editUser,
#createAgent,
#editAgent,
#assetView,
#calendarDate,
#forgotPassword {
padding: 0 !important;
}
}
/* Modal body scroll guard */
#createUser form,
#editUser form,
#createAgent form,
#editAgent form,
#assetView form,
#forgotPassword .bg-white,
#calendarDate > div > div,
#ticketDetail > div > div.bg-white {
max-height: min(92vh, 100%);
}
/* Generic mobile modal polish */
@media (max-width: 639px) {
#createUser > div,
#editUser > div,
#createAgent > div,
#editAgent > div,
#assetView > div,
#calendarDate > div,
#forgotPassword {
align-items: flex-end;
padding: 0;
}
#createUser > div > div,
#editUser > div > div,
#createAgent > div > div,
#editAgent > div > div,
#assetView > div > div,
#calendarDate > div > div,
#forgotPassword .bg-white {
width: 100%;
max-width: 100%;
border-radius: 1rem 1rem 0 0;
max-height: 94vh;
overflow-y: auto;
}
#editUser .flex.justify-between.items-center.pt-3.border-t.border-slate-100,
#editAgent .flex.justify-between.items-center.pt-3.border-t.border-slate-100,
#createUser .flex.justify-end.space-x-3.pt-2,
#createAgent .flex.justify-end.space-x-3.pt-2,
#assetView .flex.justify-end.space-x-3.pt-2 {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
}
#editUser .flex.justify-between.items-center.pt-3.border-t.border-slate-100 > div:last-child,
#editAgent .flex.justify-between.items-center.pt-3.border-t.border-slate-100 > div:last-child,
#createUser .flex.justify-end.space-x-3.pt-2,
#createAgent .flex.justify-end.space-x-3.pt-2,
#assetView .flex.justify-end.space-x-3.pt-2 {
width: 100%;
}
#editUser .flex.justify-between.items-center.pt-3.border-t.border-slate-100 button,
#editAgent .flex.justify-between.items-center.pt-3.border-t.border-slate-100 button,
#createUser .flex.justify-end.space-x-3.pt-2 button,
#createAgent .flex.justify-end.space-x-3.pt-2 button,
#assetView .flex.justify-end.space-x-3.pt-2 button,
#calendarDate button,
#forgotPassword button[type="submit"] {
width: 100%;
margin-left: 0;
margin-right: 0;
}
#editUser .grid.grid-cols-2.gap-4,
#createUser .grid.grid-cols-2.gap-4,
#assetView .grid.grid-cols-2.gap-4,
#profileView #adminProfileEditForm .grid.grid-cols-2.gap-4 {
grid-template-columns: 1fr;
}
#editUser .flex.gap-2,
#profileView #adminProfileEditForm .flex.space-x-2 {
flex-direction: column;
}
}
/* Login page — mobile polish */
#loginPage {
position: relative;
isolation: isolate;
}
#loginPage > div,
#forgotPassword .bg-white {
position: relative;
z-index: 1;
}
#loginPage input,
#loginPage button,
#loginPage a,
#forgotPassword input,
#forgotPassword button {
position: relative;
z-index: 2;
}
@media (max-width: 479px) {
#loginPage {
align-items: flex-start;
padding-top: max(1rem, env(safe-area-inset-top, 0px));
padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
}
#loginPage > div {
padding: 1.5rem;
border-radius: 1rem;
margin-top: auto;
margin-bottom: auto;
}
#loginPage h1 {
font-size: 1.25rem;
}
}
#forgotPasswordAlert {
line-height: 1.45;
word-break: break-word;
}
/* Dashboard stat grid — tighter on phone */
@media (max-width: 479px) {
#dashboardView .grid.grid-cols-1.sm\\:grid-cols-2.lg\\:grid-cols-4 > div {
padding: 1rem;
}
#dashboardView .text-2xl {
font-size: 1.375rem;
}
}
/* Riwayat Tiket per Status — mobile: 1 tiket terbaru + expand per kategori.
Desktop/tablet: selalu tampil semua (toggle disembunyikan). */
.status-history-toggle {
display: none;
}
@media (max-width: 639px) {
.status-history-box:not(.expanded) .status-history-extra {
display: none;
}
.status-history-box .status-history-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
width: 100%;
min-height: 44px;
margin-top: 0.5rem;
padding: 0.625rem 0.75rem;
border-radius: 0.625rem;
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(148, 163, 184, 0.25);
font-size: 0.75rem;
font-weight: 600;
color: #475569;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.15s ease;
}
.status-history-box .status-history-toggle:active {
transform: scale(0.99);
}
.status-history-box .status-history-toggle i {
transition: transform 0.25s ease;
}
.status-history-box.expanded .status-history-toggle i {
transform: rotate(180deg);
}
.dark .status-history-box .status-history-toggle {
background-color: rgba(51, 65, 85, 0.7);
border-color: #475569;
color: #cbd5e1;
}
}
/* Focus visible for keyboard/accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid #0747A6;
outline-offset: 2px;
}
/* ============================================================
HISTORY TIMELINE COMPACT
============================================================ */
.history-timeline {
display: flex;
flex-direction: column;
gap: 0;
min-width: 0;
}
.history-item {
display: grid;
grid-template-columns: 14px minmax(0, 1fr);
align-items: start;
gap: 0.5rem;
min-width: 0;
}
.history-dot-col {
display: flex;
flex-direction: column;
align-items: center;
width: 14px;
min-height: 100%;
}
.history-dot {
width: 7px;
height: 7px;
border-radius: 9999px;
background: #2563eb;
margin-top: 0.3rem;
flex-shrink: 0;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.history-line {
width: 1px;
flex: 1;
min-height: 12px;
margin-top: 0.2rem;
background: #cbd5e1;
}
.history-content {
min-width: 0;
padding-bottom: 0.45rem;
}
.history-item-last .history-content,
.history-item:last-child .history-content {
padding-bottom: 0;
}
.history-action {
font-size: 11px;
line-height: 1.35;
color: #334155;
margin: 0;
word-break: break-word;
}
.history-meta {
margin: 1px 0 0;
font-size: 10px;
line-height: 1.3;
color: #94a3b8;
}
/* Toggle tombol riwayat tambahan */
#historyToggleBtn {
background: none;
border: none;
cursor: pointer;
padding: 2px 0;
font-size: 11px;
}
.dark .history-dot {
background: #60a5fa;
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
}
.dark .history-line {
background: #475569;
}
.dark .history-action {
color: #cbd5e1;
}
.dark .history-meta {
color: #64748b;
}
@media (max-width: 639px) {
.history-item {
grid-template-columns: 12px minmax(0, 1fr);
gap: 0.45rem;
}
.history-dot-col {
width: 12px;
}
.history-dot {
width: 6px;
height: 6px;
margin-top: 0.28rem;
}
.history-action {
font-size: 10.5px;
}
.history-meta {
font-size: 9.5px;
}
}
/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
html {
scroll-behavior: auto;
}
}
/* ============================================
CHAT-STYLE COMMENT BUBBLES
============================================ */
.chat-container {
border: 1px solid #e2e8f0;
border-radius: 1rem;
overflow: hidden;
background-color: #f8fafc;
margin-bottom: 1rem;
}
.chat-thread {
max-height: 380px;
overflow-y: auto;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
background-color: #f8fafc;
}
.chat-row {
display: flex;
align-items: flex-end;
gap: 0.5rem;
max-width: 100%;
}
.chat-row-own {
flex-direction: row-reverse;
}
.chat-avatar {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 9999px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
font-weight: 700;
color: #ffffff;
background-color: #94a3b8;
user-select: none;
}
/* Avatar image: fill lingkaran sempurna, cover mode */
.chat-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.chat-avatar-own {
background-color: #0747A6;
}
.chat-avatar-internal {
background-color: #7c3aed;
}
.chat-avatar-profile-trigger {
padding: 0;
border: 0;
cursor: pointer;
transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.chat-avatar-profile-trigger:hover { transform: translateY(-1px); }
.chat-avatar-profile-trigger:focus-visible {
outline: 2px solid #0747A6;
outline-offset: 3px;
}
.chat-profile-card {
position: fixed;
z-index: 100;
width: min(320px, calc(100vw - 24px));
padding: 16px;
color: #1e293b;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}
.chat-profile-card:focus { outline: none; }
.chat-profile-card-header {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.chat-profile-card-avatar {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 48px;
width: 48px;
height: 48px;
overflow: hidden;
color: #0747A6;
background: #eaf1fb;
border-radius: 9999px;
font-size: 14px;
font-weight: 700;
}
.chat-profile-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-profile-card-identity { flex: 1; min-width: 0; }
.chat-profile-card-name {
margin: 0;
overflow-wrap: anywhere;
color: #1e293b;
font-size: 14px;
font-weight: 700;
line-height: 1.35;
}
.chat-profile-card-role {
display: inline-block;
margin-top: 4px;
color: #475569;
font-size: 11px;
line-height: 1.4;
}
.chat-profile-card-close {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 36px;
width: 36px;
height: 36px;
color: #64748b;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
cursor: pointer;
}
.chat-profile-card-close:hover { color: #0f172a; background: #f1f5f9; }
.chat-profile-card-close:focus-visible { outline: 2px solid #0747A6; outline-offset: 2px; }
.chat-profile-card-details {
display: grid;
gap: 8px;
margin: 14px 0 0;
padding-top: 12px;
border-top: 1px solid #e2e8f0;
}
.chat-profile-card-detail { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; }
.chat-profile-card-detail dt { color: #64748b; font-size: 11px; }
.chat-profile-card-detail dd { min-width: 0; margin: 0; color: #334155; font-size: 12px; overflow-wrap: anywhere; }
.chat-bubble {
max-width: 75%;
padding: 0.55rem 0.75rem 0.45rem;
border-radius: 0.9rem;
border-top-left-radius: 0.25rem;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
word-break: break-word;
}
.chat-bubble-in {
background-color: #F3F4F6;
border: 1px solid #e2e8f0;
}
.chat-bubble-internal {
background-color: #f5f3ff;
border: 1px solid #ddd6fe;
}
.chat-bubble-own {
background-color: #0747A6;
border-radius: 0.9rem;
border-top-right-radius: 0.25rem;
border: none;
}
.chat-bubble-internal-own {
background-color: #6d28d9;
border-radius: 0.9rem;
border-top-right-radius: 0.25rem;
border: none;
}
.chat-internal-badge {
display: inline-block;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
padding: 0.1rem 0.45rem;
border-radius: 9999px;
margin-bottom: 0.3rem;
background-color: rgba(124, 58, 237, 0.15);
color: #7c3aed;
}
.chat-bubble-own .chat-internal-badge,
.chat-bubble-internal-own .chat-internal-badge {
background-color: rgba(255, 255, 255, 0.18);
color: #ffffff;
}
.chat-text {
font-size: 0.85rem;
line-height: 1.45;
color: #334155;
white-space: pre-wrap;
word-break: break-word;
overflow-wrap: anywhere;
}
.chat-bubble-own .chat-text,
.chat-bubble-internal-own .chat-text {
color: #ffffff;
}
.chat-meta {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.35rem;
}
.chat-author {
font-size: 0.68rem;
font-weight: 700;
color: #0747A6;
}
.chat-bubble-own .chat-author,
.chat-bubble-internal-own .chat-author {
color: rgba(255, 255, 255, 0.85);
}
.chat-time {
font-size: 0.62rem;
color: #94a3b8;
}
.chat-bubble-own .chat-time,
.chat-bubble-internal-own .chat-time {
color: rgba(255, 255, 255, 0.7);
}
.chat-input-bar {
display: flex;
align-items: center; /* Ubah dari flex-end ke center untuk alignment sempurna */
gap: 0.65rem; /* Lebih lega: 8px → 10.4px */
padding: 0.6rem 0.75rem;
background-color: #ffffff;
border-top: 1px solid #e2e8f0;
}
.chat-input {
resize: none;
border: 1px solid #e2e8f0;
border-radius: 9999px;
padding: 0.55rem 1rem;
font-size: 0.85rem;
line-height: 1.4;
background-color: #f1f5f9;
color: #0f172a;
}
.chat-input:focus {
outline: 2px solid #0747A6;
outline-offset: 0;
background-color: #ffffff;
border-color: #0747A6;
}
.chat-input::placeholder {
color: #94a3b8;
}
.chat-send-btn {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
background-color: #0747A6;
color: #ffffff;
font-size: 0.95rem;
border: none;
cursor: pointer;
transition: background-color 0.15s ease;
}
.chat-send-btn:hover {
background-color: #06398c;
}
.chat-send-btn:disabled {
background-color: #94a3b8;
cursor: not-allowed;
}
/* Dark mode */
.dark .chat-container {
background-color: #0f172a;
border-color: #334155;
}
.dark .chat-thread {
background-color: #0f172a;
}
.dark .chat-bubble-in {
background-color: #1e293b;
border-color: #334155;
}
.dark .chat-bubble-internal {
background-color: #312e81;
border-color: #4338ca;
}
.dark .chat-bubble-in .chat-text {
color: #e2e8f0;
}
.dark .chat-bubble-internal .chat-text {
color: #e2e8f0;
}
.dark .chat-bubble-internal .chat-author {
color: #a5b4fc;
}
.dark .chat-bubble-internal .chat-internal-badge {
background-color: rgba(165, 180, 252, 0.18);
color: #a5b4fc;
}
.dark .chat-avatar {
background-color: #475569;
}
.dark .chat-profile-card {
color: #e2e8f0;
background: #1e293b;
border-color: #475569;
}
.dark .chat-profile-card-name { color: #f1f5f9; }
.dark .chat-profile-card-role,
.dark .chat-profile-card-detail dd { color: #cbd5e1; }
.dark .chat-profile-card-detail dt { color: #94a3b8; }
.dark .chat-profile-card-details { border-top-color: #475569; }
.dark .chat-profile-card-close { color: #cbd5e1; background: #334155; border-color: #475569; }
.dark .chat-input-bar {
background-color: #1e293b;
border-top-color: #334155;
}
.dark .chat-input {
background-color: #334155;
border-color: #475569;
color: #e2e8f0;
}
.dark .chat-input:focus {
background-color: #334155;
border-color: #0747A6;
}
.dark .chat-input::placeholder {
color: #64748b;
}
@media (max-width: 479px) {
.chat-bubble {
max-width: 85%;
}
.chat-internal-badge {
white-space: normal;
}
}
/* ============================================
MOBILE RESPONSIVE: COMMENT COMPOSER LAYOUT
============================================
Grid 2-row layout for mobile:
- Row 1: emoji + attach + textarea (3-column)
- Row 2: internal-checkbox + send-button (2-column, auto-width)
Touch targets ≥44px, no horizontal overflow.
============================================ */
@media (max-width: 639px) {
.chat-thread {
max-height: min(300px, 42vh);
overflow-y: auto;
padding: 0.75rem;
}
/* Mobile: tetap horizontal flex, tapi dengan sizing optimal */
.chat-input-bar {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 0.75rem;
}
/* Icon buttons: ukuran optimal untuk touch */
.chat-icon-btn {
width: 40px;
height: 40px;
flex-shrink: 0;
font-size: 1.05rem;
}
/* Textarea: lebih compact di mobile */
#commentText {
min-height: 44px;
max-height: 100px;
font-size: 0.875rem;
}
/* Send button: ukuran touch-friendly */
#commentSubmitBtn {
width: 44px;
height: 44px;
flex-shrink: 0;
}
/* Internal checkbox: sembunyikan di mobile untuk save space */
#commentInternalWrapper {
position: absolute;
bottom: 100%;
left: 0.75rem;
margin-bottom: 0.5rem;
padding: 0.35rem 0.65rem;
background: rgba(124, 58, 237, 0.1);
border-radius: 6px;
}
.chat-bubble {
max-width: 88%;
font-size: 0.82rem;
}
.chat-send-btn {
min-width: 44px;
min-height: 44px;
}
}
/* ============================================
UI AUDIT FIX: CHAT — IMAGES IN BUBBLE
============================================ */
.chat-bubble img.chat-img {
display: block;
max-width: 100%;
max-height: 250px;
object-fit: cover;
border-radius: 8px;
margin-top: 0.35rem;
cursor: pointer;
transition: opacity 0.15s;
}
.chat-bubble img.chat-img:hover { opacity: 0.92; }
/* ============================================
UI AUDIT FIX: CHAT INPUT — ICON BUTTONS
============================================ */
.chat-icon-btn {
flex-shrink: 0;
width: 40px; /* 36px → 40px untuk touch target lebih baik */
height: 40px;
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
color: #64748b;
font-size: 1.1rem; /* Sedikit lebih besar */
border: none;
cursor: pointer;
transition: color 0.15s, background-color 0.15s;
user-select: none;
}
.chat-icon-btn:hover {
color: #0747A6;
background-color: #EFF6FF;
}
.dark .chat-icon-btn { color: #94a3b8; }
.dark .chat-icon-btn:hover { color: #93c5fd; background-color: rgba(7,71,166,0.2); }
/* ============================================
UI AUDIT FIX: CHAT — IMAGE PREVIEW BAR
============================================ */
.chat-preview-bar {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
background-color: #ffffff;
border-top: 1px solid #e2e8f0;
}
.chat-preview-bar:empty { display: none !important; }
.dark .chat-preview-bar {
background-color: #1e293b;
border-top-color: #334155;
}
.chat-preview-thumb {
position: relative;
width: 70px;
height: 70px;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e2e8f0;
flex-shrink: 0;
box-shadow: 0 1px 3px rgba(15,23,42,0.08);
}
.chat-preview-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.chat-preview-remove {
position: absolute;
top: 3px;
right: 3px;
width: 18px;
height: 18px;
border-radius: 9999px;
background: rgba(15, 23, 42, 0.72);
color: #fff;
font-size: 0.55rem;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
line-height: 1;
}
.chat-preview-remove:hover { background: rgba(220, 38, 38, 0.9); }
/* ============================================
UI AUDIT FIX: EMOJI PICKER POPUP
============================================ */
.emoji-picker-popup {
position: fixed;
left: max(0.5rem, env(safe-area-inset-left));
bottom: max(0.5rem, env(safe-area-inset-bottom));
z-index: 55;
max-width: calc(100vw - 1rem);
max-height: calc(100vh - 1rem);
overflow: auto;
}
/* ============================================
UI AUDIT FIX: ASSET TABLE STICKY HEADER
============================================ */
#assetsView .overflow-x-auto {
max-height: 68vh;
overflow-y: auto;
overflow-x: auto;
}
#assetsView table {
table-layout: fixed;
min-width: 700px;
}
#assetsView thead th {
position: sticky;
top: 0;
z-index: 2;
background-color: #f8fafc;
box-shadow: 0 1px 0 #e2e8f0;
}
.dark #assetsView thead th {
background-color: #1e293b;
box-shadow: 0 1px 0 #334155;
}
/* ============================================
UI FIX: Equal button heights in asset modal
Batal (outlined) & Simpan (primary) harus same height
============================================ */
#assetView .flex.justify-end.space-x-3.pt-2 button {
min-height: 42px;
box-sizing: border-box;
}
/* ============================================
UI AUDIT FIX: IMPORT EXCEL MODAL
============================================ */
.xlsx-modal-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.62);
display: flex;
align-items: center;
justify-content: center;
z-index: 60;
padding: 1rem;
}
.xlsx-modal-card {
background: #fff;
border-radius: 1rem;
width: 100%;
max-width: 660px;
max-height: 80vh;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(15,23,42,0.2);
overflow: hidden;
}
.dark .xlsx-modal-card {
background: #1e293b;
border: 1px solid #334155;
}
.ticket-report-modal-card {
max-width: min(1120px, calc(100vw - 2rem));
max-height: 88vh;
}
.ticket-report-preview-wrap {
border: 1px solid #e2e8f0;
border-radius: 0.75rem;
overflow: auto;
max-height: 52vh;
}
.dark .ticket-report-preview-wrap { border-color: #334155; }
.ticket-report-generator-panel { padding: 1.5rem; }
.report-chart-grid { align-items: stretch; }
.report-chart-card {
border: 1px solid #e2e8f0;
border-radius: 0.75rem;
padding: 1rem;
background: #ffffff;
}
.report-chart-card h5 {
font-size: 0.75rem;
font-weight: 800;
color: #334155;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 0.8rem;
}
.report-bar-chart { display: flex; flex-direction: column; gap: 0.65rem; }
.report-bar-row {
display: grid;
grid-template-columns: minmax(90px, 1fr) 2fr 32px;
align-items: center;
gap: 0.6rem;
font-size: 0.72rem;
}
.report-bar-label {
color: #475569;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.report-bar-track {
height: 0.6rem;
background: #e2e8f0;
border-radius: 999px;
overflow: hidden;
}
.report-bar-fill {
height: 100%;
border-radius: 999px;
}
.report-bar-value {
color: #0f172a;
font-weight: 800;
text-align: right;
}
.report-donut-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 1.1rem;
min-height: 175px;
}
.report-donut {
width: 128px;
height: 128px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.report-donut > div {
width: 76px;
height: 76px;
border-radius: 999px;
background: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: inset 0 0 0 1px #e2e8f0;
}
.report-donut b { font-size: 1.35rem; line-height: 1; color: #0f172a; }
.report-donut span { font-size: 0.65rem; color: #64748b; margin-top: 0.2rem; }
.report-legend { display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.72rem; color: #475569; }
.report-legend span { display: flex; align-items: center; gap: 0.45rem; }
.report-legend i { width: 0.65rem; height: 0.65rem; border-radius: 999px; display: inline-block; }
.xlsx-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
border-bottom: 1px solid #e2e8f0;
flex-shrink: 0;
}
.dark .xlsx-modal-header { border-color: #334155; }
.xlsx-modal-body {
padding: 1.25rem;
overflow-y: auto;
flex: 1;
}
.xlsx-dropzone {
border: 2px dashed #cbd5e1;
border-radius: 0.75rem;
padding: 2.5rem 1.5rem;
text-align: center;
cursor: pointer;
transition: border-color 0.2s, background-color 0.2s;
background-color: #f8fafc;
}
.xlsx-dropzone:hover,
.xlsx-dropzone.dragover,
.xlsx-dropzone.drag-over {
border-color: #0747A6;
background-color: #eff6ff;
}
.dark .xlsx-dropzone {
border-color: #475569;
background-color: #0f172a;
}
.dark .xlsx-dropzone:hover,
.dark .xlsx-dropzone.dragover,
.dark .xlsx-dropzone.drag-over {
border-color: #0747A6;
background-color: rgba(7,71,166,0.15);
}
.xlsx-preview-wrap {
margin-top: 1rem;
overflow-x: auto;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
}
.dark .xlsx-preview-wrap { border-color: #334155; }
.xlsx-preview-table {
width: 100%;
border-collapse: collapse;
font-size: 0.8rem;
}
.xlsx-preview-table th,
.xlsx-preview-table td {
padding: 0.4rem 0.65rem;
border-bottom: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
text-align: left;
white-space: nowrap;
}
.xlsx-preview-table thead th {
background: #f1f5f9;
font-weight: 600;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #64748b;
position: sticky;
top: 0;
}
.dark .xlsx-preview-table th,
.dark .xlsx-preview-table td { border-color: #334155; }
.dark .xlsx-preview-table thead th { background: #0f172a; color: #94a3b8; }
.xlsx-modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
padding: 0.875rem 1.25rem;
border-top: 1px solid #e2e8f0;
flex-shrink: 0;
}
.dark .xlsx-modal-footer { border-color: #334155; }
.xlsx-mapping-wrap {
margin-top: 1rem;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
padding: 0.75rem;
background: #f8fafc;
}
.dark .xlsx-mapping-wrap { border-color: #334155; background: #0f172a; }
.xlsx-mapping-list { display: flex; flex-direction: column; gap: 0.4rem; max-height: 220px; overflow-y: auto; padding-right: 0.25rem; }
.xlsx-mapping-row {
display: flex;
align-items: center;
gap: 0.6rem;
border: 1px solid #e2e8f0;
background: #fff;
padding: 0.35rem 0.6rem;
border-radius: 0.45rem;
}
.dark .xlsx-mapping-row { border-color: #334155; background: #1e293b; }
.xlsx-mapping-row .xlsx-map-col {
flex: 1;
min-width: 0;
font-size: 0.78rem;
color: #64748b;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.xlsx-mapping-row .xlsx-map-select { flex: 1; min-width: 0; }
.xlsx-mapping-row select {
width: 100%;
padding: 0.35rem 0.5rem;
font-size: 0.78rem;
border: 1px solid #cbd5e1;
border-radius: 0.375rem;
background: #fff;
color: #0f172a;
}
.dark .xlsx-mapping-row select { background: #334155; border-color: #475569; color: #f1f5f9; }
.xlsx-mapping-row select.xlsx-mapped-req {
border-color: #10b981;
box-shadow: 0 0 0 1px rgba(16,185,129,0.25);
}
.dark .xlsx-mapping-row select.xlsx-mapped-req { border-color: #34d399; }
.xlsx-result-wrap {
margin-top: 0.75rem;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
padding: 0.6rem 0.75rem;
font-size: 0.78rem;
}
.dark .xlsx-result-wrap { border-color: #334155; }
.xlsx-result-wrap .xlsx-result-line { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.2rem 0; }
.xlsx-result-wrap .xlsx-failed-list {
margin-top: 0.4rem;
max-height: 120px;
overflow-y: auto;
padding-left: 1rem;
list-style: disc;
color: #dc2626;
}
.xlsx-modal-footer .check-label { display: flex; align-items: center; gap: 0.4rem; }
@media (max-width: 640px) {
.xlsx-mapping-row { flex-direction: column; align-items: stretch; }
.xlsx-mapping-row .xlsx-map-select { width: 100%; }
}
/* ============================================
UI AUDIT FIX: PROFILE BUTTON STATES
============================================ */
#changePasswordForm button[type="submit"],
#btnAdminProfileSave,
#btnChangePhoto {
transition: background-color 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
}
#changePasswordForm button[type="submit"]:active,
#btnAdminProfileSave:active { transform: scale(0.97); }
#changePasswordForm button[type="submit"]:disabled,
#btnAdminProfileSave:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
}
/* ============================================
Z-INDEX & OVERFLOW — stacking order terpusat
header(30) < sidebar(40) < modal overlay(0) < kartu modal(50) < emoji(55) < toast(60)
============================================ */
header { position: sticky; top: 0; z-index: 30; }
.sidebar { z-index: 40; }
#requestDelete { z-index: 100; }
#reviewDeleteRequest { z-index: 110; }
/* BACKDROP modal harus SELALU berada DI BAWAH kartu modal.
Kartu modal memakai z-index 10 di dalam kontainer modal (z-50),
jadi backdrop memakai z-index 0.
PERINGATAN: jangan memberi backdrop z-index > 10 — seluruh modal
menjadi "beku" dan tidak bisa diklik (bug UI audit sebelumnya). */
.modal-overlay,
.dialog-overlay { z-index: 0; }
/* Overlay Excel adalah wadah modal itu sendiri (kartu ada DI DALAM-nya),
sehingga aman diberi z-index 50. */
.xlsx-modal-overlay { z-index: 50; }
.emoji-picker-popup { z-index: 55; }
.toast-container { z-index: 60; }
#app, main { overflow-x: hidden; }
/* ============================================
NEUMORPHIC RATING CARD TEMPLATE
============================================ */
.rating-template-card {
background: radial-gradient(circle at center, #dbeafe 0%, #e0e7ff 45%, #c7d2fe 100%);
border-radius: 28px;
padding: 24px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 12px 30px -5px rgba(99, 102, 241, 0.18);
width: 100%;
}
.dark .rating-template-card {
background: radial-gradient(circle at center, #1e1b4b 0%, #0f172a 70%, #020617 100%);
box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.45);
}
.rating-card-inner {
background: #eef2ff;
border-radius: 22px;
padding: 28px 24px;
width: 100%;
max-width: 440px;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), inset 0 2px 3px rgba(255, 255, 255, 0.85);
border: 1px solid rgba(255, 255, 255, 0.7);
}
.dark .rating-card-inner {
background: #1e293b;
border-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.05);
}
.rating-card-title {
font-size: 1.25rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 8px;
letter-spacing: -0.015em;
}
.dark .rating-card-title {
color: #f8fafc;
}
.rating-card-desc {
font-size: 0.8125rem;
line-height: 1.55;
color: #64748b;
margin-bottom: 22px;
padding: 0 6px;
}
.dark .rating-card-desc {
color: #94a3b8;
}
.rating-stars-wrapper {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-bottom: 22px;
}
.rating-star-btn {
background: none;
border: none;
cursor: pointer;
padding: 4px;
font-size: 2.25rem;
line-height: 1;
color: #cbd5e1;
transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.06));
}
.rating-star-btn:hover {
transform: scale(1.22) rotate(-4deg);
}
.rating-star-btn.active,
.rating-star-btn.hover-active {
color: #fbbf24;
filter: drop-shadow(0 4px 10px rgba(245, 158, 11, 0.45));
}
.dark .rating-star-btn {
color: #475569;
}
.dark .rating-star-btn.active,
.dark .rating-star-btn.hover-active {
color: #fbbf24;
filter: drop-shadow(0 4px 12px rgba(251, 191, 36, 0.5));
}
.rating-textarea-wrapper {
margin-bottom: 20px;
}
.rating-textarea {
width: 100%;
background: #e0e7ff;
border: 1px solid rgba(199, 210, 254, 0.6);
border-radius: 16px;
padding: 14px 16px;
font-size: 0.875rem;
color: #1e293b;
outline: none;
resize: none;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
transition: all 0.2s ease;
}
.rating-textarea::placeholder {
color: #94a3b8;
}
.rating-textarea:focus {
background: #eef2ff;
border-color: #818cf8;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.dark .rating-textarea {
background: #0f172a;
border-color: #334155;
color: #f1f5f9;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}
.dark .rating-textarea::placeholder {
color: #64748b;
}
.dark .rating-textarea:focus {
background: #1e293b;
border-color: #6366f1;
}
.rating-btn-wrapper {
display: flex;
justify-content: center;
}
.rating-submit-btn {
background: linear-gradient(180deg, #fcd34d 0%, #f59e0b 100%);
color: #78350f;
font-weight: 700;
font-size: 0.875rem;
padding: 10px 40px;
border-radius: 9999px;
border: none;
cursor: pointer;
box-shadow: 0 4px 14px rgba(245, 158, 11, 0.38);
transition: all 0.2s ease;
}
.rating-submit-btn:hover {
transform: translateY(-2px) scale(1.03);
box-shadow: 0 6px 18px rgba(245, 158, 11, 0.48);
background: linear-gradient(180deg, #ffe066 0%, #d97706 100%);
}
.rating-submit-btn:active {
transform: translateY(0) scale(0.98);
}
.rating-submit-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* ===== HELP / PANDUAN ACCORDION — smooth grid-row animation ===== */
/* Open state: membuka ke tinggi konten asli (tanpa cap 800px, tanpa
terpotong pada section tinggi seperti "Masalah IT Umum") */
.help-item.open > .help-detail {
grid-template-rows: 1fr;
opacity: 1;
}
/* Default state: collapsed (row 0fr) */
.help-item > .help-detail {
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
opacity: 0;
transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
/* Clipper: mencegah konten keluar dari row 0fr saat tertutup. Spasi bawah
ditaruh di sini supaya tidak melompat saat buka/tutup. */
.help-detail-inner {
overflow: hidden;
padding-bottom: 1.25rem;
}
/* Chevron rotation */
.help-item .fa-chevron-down {
transition: transform 0.25s ease;
}
.help-item.open .fa-chevron-down {
transform: rotate(180deg);
}
/* Card hover & open state */
.help-item {
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.help-item:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.help-item.open {
border-color: rgba(var(--color-primary-rgb, 59,130,246), 0.25);
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
/* Search filter */
.help-item.hidden-by-search {
display: none !important;
}
/* Highlight sesaat ketika section dibuka lewat tombol Quick Action,
agar user langsung menyadari detail guide mana yang baru terbuka. */
.help-item-flash {
animation: helpItemFlash 1.2s ease;
}
@keyframes helpItemFlash {
0% { box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 59,130,246), 0.45); }
100% { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
}
/* Help view scrollbar */
#helpView {
max-height: calc(100vh - 70px);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #cbd5e1 transparent;
}
#helpView::-webkit-scrollbar {
width: 6px;
}
#helpView::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 3px;
}
/* ============================================
REVAMPED ANALYTICS DASHBOARD CUSTOM STYLES
============================================ */
#analyticsView .bg-gradient-to-br {
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
}
#analyticsView .bg-gradient-to-br:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.3);
}
.dark #analyticsView .bg-white {
background-color: #1e293b;
border-color: #334155;
}
#analyticsView canvas {
max-width: 100%;
}
#analyticsOverviewTab {
--analytics-surface: #f8fafc;
}
#analyticsOverviewTab .max-w-\[1440px\] {
position: relative;
z-index: 1;
}
#analyticsOverviewTab .bg-white {
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
#analyticsOverviewTab .grid > .bg-white,
#analyticsOverviewTab > .bg-white {
border-radius: 1rem;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* ---- Analytics: polish kartu — radius konsisten + lift halus (khusus pointer device) ---- */
#analyticsView .grid > .bg-white,
#analyticsOverviewTab > .bg-white {
border-radius: 1rem;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) {
#analyticsView .grid > .bg-white:hover,
#analyticsOverviewTab > .bg-white:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px -10px rgba(15, 23, 42, 0.16);
}
.dark #analyticsView .grid > .bg-white:hover,
.dark #analyticsOverviewTab > .bg-white:hover {
box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.55);
}
}
/* ---- Analytics: ritme section rapat & konsisten di semua device ---- */
/* Header 20px, section grid 16px (= gap antar kartu) → ritme vertikal seragam */
#analyticsView .analytics-header { margin-bottom: 1.25rem; }
#analyticsView .analytics-top-grid,
#analyticsView .analytics-bottom-grid { margin-bottom: 1rem; }
#analyticsPerformanceTab > .grid.mb-6 { margin-bottom: 1rem; }
/* Judul kartu lebih rapat ke isinya */
#analyticsView h3.mb-4 { margin-bottom: 0.75rem; }
#analyticsOverviewTab .user-analytics-date-field input[type="date"] {
min-width: 0;
max-width: 100%;
flex: 1 1 0%;
}
/* ---- Analytics: mobile ≤639px — header, tab, KPI, dan kartu lebih compact ---- */
@media (max-width: 639px) {
/* Header halaman: rapatkan jarak judul↔tab dan margin bawah */
#analyticsView .analytics-header { gap: 0.75rem; margin-bottom: 1rem; }
#analyticsView h2 { font-size: 1.05rem; }
#analyticsView h2 i { font-size: 0.95rem; }
/* Segmented tab memenuhi lebar layar, tombol setara & 44px (touch target) */
#analyticsView .analytics-subtabs { width: 100%; }
#analyticsView .analytics-subtabs > button { flex: 1 1 auto; justify-content: center; min-height: 44px; }
/* Kartu analytics: padding seragam 1rem di semua sisi (kiri/kanan sudah diatur rule lain) */
#analyticsView .p-5 { padding: 1rem; }
/* Grid antar-kartu lebih rapat */
#analyticsView .analytics-top-grid { gap: 0.75rem; }
#analyticsView .analytics-bottom-grid { gap: 0.75rem; }
/* Kartu KPI biru: padding & angka lebih ramping, ikon menyusut proporsional */
.analytics-kpi-stack { gap: 0.625rem; }
#analyticsView .analytics-kpi-stack > div { padding: 0.875rem 1rem; }
.analytics-kpi-stack .text-3xl { font-size: 1.375rem; margin-top: 0.25rem; }
.analytics-kpi-stack .w-12.h-12 { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
/* Tab Detail Performa: grid antar-kartu lebih rapat di HP */
#analyticsPerformanceTab .grid { gap: 0.75rem; }
/* Lingkaran angka prioritas Open Tickets lebih ramping di HP */
.analytics-bottom-grid .w-14.h-14 { width: 3rem; height: 3rem; font-size: 0.95rem; }
/* User analytics: compact mobile layout agar tidak terlalu lebar/tinggi */
#analyticsOverviewTab .max-w-\[1440px\] {
padding-left: 0.75rem !important;
padding-right: 0.75rem !important;
padding-top: 0.75rem !important;
padding-bottom: 1rem !important;
}
#analyticsOverviewTab .grid,
#analyticsOverviewTab .flex,
#analyticsOverviewTab .sm\:flex-row {
min-width: 0;
}
#analyticsOverviewTab .bg-white {
padding: 0.875rem !important;
}
#analyticsOverviewTab .flex-col.sm\:flex-row {
gap: 0.625rem !important;
}
#analyticsOverviewTab .user-analytics-date-group {
width: 100% !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0.5rem !important;
}
#analyticsOverviewTab .user-analytics-date-field {
width: 100% !important;
min-width: 0 !important;
padding: 0.5rem 0.625rem !important;
}
#analyticsOverviewTab .user-analytics-date-field input[type="date"] {
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
#analyticsOverviewTab .gap-3.sm\:gap-4,
#analyticsOverviewTab .gap-2\.5.sm\:gap-3 {
gap: 0.625rem !important;
}
#analyticsOverviewTab .user-composition-card {
padding: 0.875rem !important;
}
#analyticsOverviewTab .user-composition-body {
gap: 0.75rem !important;
margin-bottom: 0.75rem !important;
}
#analyticsOverviewTab .user-composition-legend {
gap: 0.25rem !important;
}
#analyticsOverviewTab .user-composition-legend > div {
min-height: 0 !important;
}
#analyticsOverviewTab .user-composition-legend span {
line-height: 1.2 !important;
}
#analyticsOverviewTab .user-composition-priority {
padding-top: 0.625rem !important;
}
#analyticsOverviewTab .user-composition-priority > div + div {
margin-top: 0.5rem !important;
}
#analyticsOverviewTab #userDonut {
width: 76px !important;
height: 76px !important;
min-height: 76px !important;
max-height: 76px !important;
aspect-ratio: 1 / 1;
display: block;
}
#analyticsOverviewTab .user-composition-card .relative {
width: 76px !important;
height: 76px !important;
}
#analyticsOverviewTab #userDonutTotal {
font-size: 1rem !important;
}
#analyticsOverviewTab #userDonut + div {
gap: 0.35rem !important;
}
#analyticsOverviewTab #userDonut + div span {
font-size: 10px !important;
}
#analyticsOverviewTab .text-4xl {
font-size: 2rem !important;
}
#analyticsOverviewTab .text-xl {
font-size: 1.25rem !important;
}
#analyticsOverviewTab .text-base {
font-size: 0.875rem !important;
}
#analyticsOverviewTab .text-\[10px\] {
font-size: 9px !important;
}
#analyticsOverviewTab .text-\[11px\] {
font-size: 10px !important;
}
#analyticsOverviewTab .overflow-x-auto {
-webkit-overflow-scrolling: touch;
}
#analyticsOverviewTab table {
min-width: 620px;
}
#analyticsOverviewTab canvas {
max-width: 100%;
}
#analyticsOverviewTab canvas:not(#userDonut) {
min-height: 150px;
}
#analyticsOverviewTab .space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
margin-top: 0.35rem !important;
}
#analyticsOverviewTab .space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
margin-top: 0.5rem !important;
}
}
/* ---- Analytics: distribusi isi kartu — hilangkan ruang kosong vertikal ---- */
/* Kartu SLA: grup progress menyebar mengisi tinggi kartu, footer tetap di dasar */
#analyticsView .analytics-sla-card > div:first-child {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* Margin antar grup SLA hanya dinolkan saat kartu ter-stretch (≥768px);
di HP kartu mengikuti tinggi konten → margin 16px dipertahankan agar tidak dempet */
@media (min-width: 768px) {
#analyticsView .analytics-sla-card .mb-6 { margin-bottom: 0; }
}
@media (max-width: 767px) {
#analyticsView .analytics-sla-card .mb-6 { margin-bottom: 1rem; }
}
/* Widget Due Times: daftar jadwal mengisi tinggi kartu secara merata */
#analyticsView .analytics-due-card > div {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
/* Widget Open Tickets: 3 baris prioritas menyebar mengisi kartu (bukan my-auto + void) */
#analyticsView .analytics-bottom-grid > div:nth-child(3) > div {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
/* Saat kartu ter-stretch (≥768px), jarak bawaan space-y dinolkan agar tidak
dobel dengan space-evenly; di HP margin bawaan tetap dipakai */
@media (min-width: 768px) {
#analyticsView .analytics-due-card .space-y-2\.5 > :not([hidden]) ~ :not([hidden]),
#analyticsView .analytics-bottom-grid .space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0; }
}
/* KPI biru: kartu mengisi tinggi kolom secara merata (tanpa gap besar antar kartu) */
@media (min-width: 768px) {
.analytics-kpi-stack > div { flex: 1 1 0; min-height: 88px; }
}
/* Layar lebar: daftar Due Times & Open Tickets dalam ukuran terukur & terpusat */
@media (min-width: 1280px) {
#analyticsView .analytics-due-card > div,
#analyticsView .analytics-bottom-grid > div:nth-child(3) > div {
max-width: 26rem;
width: 100%;
margin-inline: auto;
}
}
/* ============================================
TICKET REPORT PRINT / PDF STYLES
============================================ */
.ticket-report-print {
color: #0f172a;
background: #ffffff;
}
.ticket-report-print table {
border-collapse: collapse;
width: 100%;
}
.ticket-report-print thead {
display: table-header-group;
}
.ticket-report-print tr,
.ticket-report-print .report-section,
.ticket-report-print .rounded-xl,
.ticket-report-print .rounded-2xl {
break-inside: avoid;
page-break-inside: avoid;
}
#ticketReportPrintRoot {
display: none;
}
@media print {
@page {
size: A4 landscape;
margin: 8mm;
}
html,
body {
width: 100%;
min-height: 100%;
background: #ffffff !important;
color: #0f172a !important;
overflow: visible !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
body * {
visibility: hidden !important;
}
#ticketReportPrintRoot,
#ticketReportPrintRoot * {
visibility: visible !important;
}
.no-print,
.no-print * {
display: none !important;
visibility: hidden !important;
}
#ticketReportPrintRoot {
display: block !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: #ffffff !important;
color: #0f172a !important;
overflow: visible !important;
text-align: center !important;
}
#ticketReportPrintRoot .ticket-report-print {
width: 100% !important;
max-width: 280mm !important;
margin: 0 auto !important;
padding: 0 !important;
background: #ffffff !important;
color: #0f172a !important;
font-size: 8.6px !important;
line-height: 1.22 !important;
text-align: left !important;
}
.ticket-report-print .shadow-sm,
.ticket-report-print .shadow,
.ticket-report-print .shadow-lg {
box-shadow: none !important;
}
.ticket-report-print .rounded-xl,
.ticket-report-print .rounded-2xl,
.ticket-report-print .rounded-lg {
border-radius: 8px !important;
}
.ticket-report-print .report-print-header {
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
margin-bottom: 8px !important;
padding-bottom: 7px !important;
border-bottom: 1px solid #94a3b8 !important;
}
.ticket-report-print h2,
.ticket-report-print h4 {
font-size: 15px !important;
line-height: 1.1 !important;
margin: 1px 0 !important;
text-align: left !important;
}
.ticket-report-print h3,
.ticket-report-print h5 {
color: #0f172a !important;
}
.ticket-report-print .report-print-header .text-xs,
.ticket-report-print .report-print-header .text-sm {
font-size: 7.4px !important;
line-height: 1.15 !important;
}
.ticket-report-print table {
width: 100% !important;
border-collapse: collapse !important;
font-size: 7.2px !important;
table-layout: fixed !important;
}
.ticket-report-print thead {
display: table-header-group !important;
}
.ticket-report-print th,
.ticket-report-print td {
border: 1px solid #cbd5e1 !important;
padding: 3px 4px !important;
color: #0f172a !important;
vertical-align: top !important;
word-break: break-word !important;
white-space: normal !important;
}
.ticket-report-print th {
background: #e2e8f0 !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.02em !important;
}
.ticket-report-print tbody tr:nth-child(even) td {
background: #f8fafc !important;
}
.ticket-report-print .report-table th:nth-child(1),
.ticket-report-print .report-table td:nth-child(1) { width: 24% !important; }
.ticket-report-print .report-table th:nth-child(2),
.ticket-report-print .report-table td:nth-child(2) { width: 13% !important; }
.ticket-report-print .report-table th:nth-child(3),
.ticket-report-print .report-table td:nth-child(3) { width: 12% !important; }
.ticket-report-print .report-table th:nth-child(4),
.ticket-report-print .report-table td:nth-child(4) { width: 9% !important; }
.ticket-report-print .report-table th:nth-child(5),
.ticket-report-print .report-table td:nth-child(5) { width: 10% !important; }
.ticket-report-print .report-table th:nth-child(6),
.ticket-report-print .report-table td:nth-child(6) { width: 14% !important; }
.ticket-report-print .report-table th:nth-child(7),
.ticket-report-print .report-table td:nth-child(7) { width: 7% !important; text-align: center !important; }
.ticket-report-print .report-table th:nth-child(8),
.ticket-report-print .report-table td:nth-child(8) { width: 11% !important; }
.ticket-report-print .overflow-x-auto {
overflow: visible !important;
}
.ticket-report-print .grid {
display: grid !important;
}
.ticket-report-print .report-print-kpi-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 5px !important;
margin-bottom: 7px !important;
}
.ticket-report-print .report-kpi-card {
padding: 6px 8px !important;
border: 1px solid #cbd5e1 !important;
background: #f8fafc !important;
text-align: center !important;
}
.ticket-report-print .report-kpi-head {
justify-content: center !important;
gap: 5px !important;
}
.ticket-report-print .report-kpi-head p {
font-size: 6.8px !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
}
.ticket-report-print .report-kpi-value {
font-size: 14px !important;
line-height: 1 !important;
margin-top: 3px !important;
text-align: center !important;
}
.ticket-report-print .report-print-chart-grid,
.ticket-report-print .report-chart-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 6px !important;
margin-bottom: 7px !important;
}
.ticket-report-print .report-print-breakdown-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 6px !important;
margin-bottom: 7px !important;
}
.ticket-report-print .report-chart-card,
.ticket-report-print .report-section {
border: 1px solid #cbd5e1 !important;
background: #ffffff !important;
padding: 6px !important;
min-height: auto !important;
}
.ticket-report-print .report-chart-card h5,
.ticket-report-print .report-section h5 {
font-size: 6.8px !important;
line-height: 1.1 !important;
margin-bottom: 5px !important;
text-align: center !important;
letter-spacing: 0.05em !important;
}
.ticket-report-print .report-bar-chart {
gap: 3px !important;
}
.ticket-report-print .report-bar-row {
grid-template-columns: minmax(58px, 1fr) 2fr 18px !important;
gap: 4px !important;
font-size: 6.6px !important;
}
.ticket-report-print .report-bar-track {
height: 5px !important;
background: #e2e8f0 !important;
}
.ticket-report-print .report-donut-wrap {
gap: 8px !important;
min-height: 76px !important;
justify-content: center !important;
}
.ticket-report-print .report-donut {
width: 68px !important;
height: 68px !important;
}
.ticket-report-print .report-donut > div {
width: 40px !important;
height: 40px !important;
background: #ffffff !important;
}
.ticket-report-print .report-donut b {
font-size: 11px !important;
}
.ticket-report-print .report-donut span,
.ticket-report-print .report-legend {
font-size: 6.5px !important;
}
.ticket-report-print .report-legend {
gap: 2px !important;
}
.ticket-report-print .report-legend i {
width: 5px !important;
height: 5px !important;
}
.ticket-report-print .report-status-summary .grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 3px !important;
font-size: 6.8px !important;
}
.ticket-report-print .report-status-summary .bg-slate-50 {
padding: 3px 4px !important;
text-align: center !important;
}
#ticketReportPrintRoot.is-landscape .ticket-report-print {
max-width: 280mm !important;
font-size: 8.6px !important;
}
#ticketReportPrintRoot.is-portrait .ticket-report-print {
max-width: 196mm !important;
font-size: 7.8px !important;
line-height: 1.18 !important;
}
#ticketReportPrintRoot.is-portrait .report-print-header {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: end !important;
gap: 7px !important;
margin-bottom: 7px !important;
padding-bottom: 6px !important;
}
#ticketReportPrintRoot.is-portrait .report-print-header h4 {
font-size: 13px !important;
line-height: 1.08 !important;
}
#ticketReportPrintRoot.is-portrait .report-print-header .text-right {
min-width: 34mm !important;
text-align: right !important;
}
#ticketReportPrintRoot.is-portrait .report-print-kpi-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 4px !important;
margin-bottom: 6px !important;
}
#ticketReportPrintRoot.is-portrait .report-kpi-card {
padding: 4px 5px !important;
border-radius: 6px !important;
}
#ticketReportPrintRoot.is-portrait .report-kpi-head {
gap: 3px !important;
}
#ticketReportPrintRoot.is-portrait .report-kpi-head p {
font-size: 5.9px !important;
line-height: 1.05 !important;
}
#ticketReportPrintRoot.is-portrait .report-kpi-value {
font-size: 11px !important;
margin-top: 2px !important;
}
#ticketReportPrintRoot.is-portrait .report-print-chart-grid,
#ticketReportPrintRoot.is-portrait .report-chart-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 5px !important;
margin-bottom: 6px !important;
}
#ticketReportPrintRoot.is-portrait .report-print-chart-grid .report-chart-card:first-child {
grid-column: 1 / -1 !important;
}
#ticketReportPrintRoot.is-portrait .report-print-breakdown-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 5px !important;
margin-bottom: 6px !important;
}
#ticketReportPrintRoot.is-portrait .report-print-breakdown-grid .report-status-summary {
grid-column: 1 / -1 !important;
}
#ticketReportPrintRoot.is-portrait .report-chart-card,
#ticketReportPrintRoot.is-portrait .report-section {
padding: 5px !important;
border-radius: 6px !important;
}
#ticketReportPrintRoot.is-portrait .report-chart-card h5,
#ticketReportPrintRoot.is-portrait .report-section h5 {
font-size: 6.3px !important;
margin-bottom: 4px !important;
}
#ticketReportPrintRoot.is-portrait .report-bar-chart {
gap: 2px !important;
}
#ticketReportPrintRoot.is-portrait .report-bar-row {
grid-template-columns: minmax(54px, 1fr) 1.65fr 16px !important;
gap: 3px !important;
font-size: 6px !important;
}
#ticketReportPrintRoot.is-portrait .report-bar-track {
height: 4px !important;
}
#ticketReportPrintRoot.is-portrait .report-donut-wrap {
display: grid !important;
grid-template-columns: 60px minmax(0, 1fr) !important;
min-height: 58px !important;
gap: 7px !important;
justify-content: stretch !important;
}
#ticketReportPrintRoot.is-portrait .report-donut {
width: 56px !important;
height: 56px !important;
justify-self: center !important;
}
#ticketReportPrintRoot.is-portrait .report-donut > div {
width: 32px !important;
height: 32px !important;
}
#ticketReportPrintRoot.is-portrait .report-donut b {
font-size: 9px !important;
}
#ticketReportPrintRoot.is-portrait .report-donut span,
#ticketReportPrintRoot.is-portrait .report-legend {
font-size: 5.8px !important;
line-height: 1.12 !important;
}
#ticketReportPrintRoot.is-portrait .report-legend {
gap: 1px !important;
}
#ticketReportPrintRoot.is-portrait .report-status-summary .grid {
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
gap: 3px !important;
font-size: 6px !important;
}
#ticketReportPrintRoot.is-portrait .report-status-summary .bg-slate-50 {
padding: 3px !important;
border: 1px solid #e2e8f0 !important;
border-radius: 5px !important;
}
#ticketReportPrintRoot.is-portrait .report-table {
font-size: 5.9px !important;
line-height: 1.12 !important;
}
#ticketReportPrintRoot.is-portrait .report-table th,
#ticketReportPrintRoot.is-portrait .report-table td {
padding: 2px 2px !important;
}
#ticketReportPrintRoot.is-portrait .report-table td:nth-child(1) div {
max-width: none !important;
overflow: visible !important;
text-overflow: clip !important;
white-space: normal !important;
}
#ticketReportPrintRoot.is-portrait .report-table th:nth-child(1),
#ticketReportPrintRoot.is-portrait .report-table td:nth-child(1) { width: 24% !important; }
#ticketReportPrintRoot.is-portrait .report-table th:nth-child(2),
#ticketReportPrintRoot.is-portrait .report-table td:nth-child(2) { width: 11% !important; }
#ticketReportPrintRoot.is-portrait .report-table th:nth-child(3),
#ticketReportPrintRoot.is-portrait .report-table td:nth-child(3) { width: 10% !important; }
#ticketReportPrintRoot.is-portrait .report-table th:nth-child(4),
#ticketReportPrintRoot.is-portrait .report-table td:nth-child(4) { width: 8% !important; }
#ticketReportPrintRoot.is-portrait .report-table th:nth-child(5),
#ticketReportPrintRoot.is-portrait .report-table td:nth-child(5) { width: 10% !important; }
#ticketReportPrintRoot.is-portrait .report-table th:nth-child(6),
#ticketReportPrintRoot.is-portrait .report-table td:nth-child(6) { width: 13% !important; }
#ticketReportPrintRoot.is-portrait .report-table th:nth-child(7),
#ticketReportPrintRoot.is-portrait .report-table td:nth-child(7) { width: 7% !important; text-align: center !important; }
#ticketReportPrintRoot.is-portrait .report-table th:nth-child(8),
#ticketReportPrintRoot.is-portrait .report-table td:nth-child(8) { width: 17% !important; }
.ticket-report-print .text-white,
.ticket-report-print .text-slate-900,
.ticket-report-print .text-slate-800,
.ticket-report-print .text-slate-700,
.ticket-report-print .text-slate-600,
.ticket-report-print .text-slate-500 {
color: #0f172a !important;
}
.ticket-report-print .bg-slate-50,
.ticket-report-print .bg-white {
background-color: #ffffff !important;
}
.ticket-report-print .bg-blue-600,
.ticket-report-print .bg-emerald-600,
.ticket-report-print .bg-amber-500,
.ticket-report-print .bg-red-500,
.ticket-report-print .bg-purple-500,
.ticket-report-print .bg-indigo-500 {
color: #ffffff !important;
}
}
/* Lampiran protected: gambar disembunyikan sampai blob URL siap (fetch ber-Authorization) */
.chat-img-loading,
.detail-img-loading,
.preview-img-loading {
opacity: 0;
}
/* ============================================================
ENHANCED RESPONSIVE & ALL-DEVICE FRIENDLY SYSTEM STYLES
============================================================ */
/* 1. Dynamic Safe Area Insets for Modern Mobile Browsers */
:root {
--sat: env(safe-area-inset-top, 0px);
--sab: env(safe-area-inset-bottom, 0px);
--sal: env(safe-area-inset-left, 0px);
--sar: env(safe-area-inset-right, 0px);
}
.safe-top {
padding-top: var(--sat);
}
.safe-bottom {
padding-bottom: var(--sab);
}
/* Ensure body & main containers respect safe area padding on mobile */
@media (max-width: 767px) {
body {
padding-left: var(--sal);
padding-right: var(--sar);
}
.main-area {
padding-bottom: calc(1.25rem + var(--sab));
}
}
/* 2. Responsive Table Wrappers & Touch Scroll Polish */
.responsive-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, 0.4) transparent;
}
.responsive-table-wrap::-webkit-scrollbar {
height: 6px;
width: 6px;
}
.responsive-table-wrap::-webkit-scrollbar-thumb {
background-color: rgba(148, 163, 184, 0.4);
border-radius: 9999px;
}
.dark .responsive-table-wrap::-webkit-scrollbar-thumb {
background-color: rgba(100, 116, 139, 0.5);
}
/* Table Cell Wrapping & Badge Protection */
.responsive-table-wrap table th,
.responsive-table-wrap table td {
vertical-align: middle;
}
.responsive-table-wrap table td .asset-code-badge,
.responsive-table-wrap table td span.rounded-full,
.responsive-table-wrap table td button {
white-space: normal;
}
/* Override: List View STATUS badges harus nowrap + responsive sizing */
#listTableBody td[data-label="Status"] span.rounded-full {
white-space: nowrap;
display: inline-block;
font-size: 10px; /* mobile base */
padding: 0.25rem 0.5rem;
line-height: 1.3;
}
/* Tablet portrait (640px–1023px): badge lebih besar & jelas */
@media (min-width: 640px) and (max-width: 1023px) {
#listTableBody td[data-label="Status"] span.rounded-full {
font-size: 11px;
padding: 0.35rem 0.65rem;
}
}
/* Desktop (≥1024px): badge optimal */
@media (min-width: 1024px) {
#listTableBody td[data-label="Status"] span.rounded-full {
font-size: 11px;
padding: 0.25rem 0.5rem;
}
}
#assetsView tbody td[data-label="Kode"] .asset-code-badge,
#assetsView tbody td[data-label="Status"] > span {
overflow-wrap: anywhere;
word-break: break-word;
}
/* 2b. MOBILE CARD LAYOUT — Dashboard & Asset (<768px / di bawah breakpoint md)
Tabel "Tiket Project Internal" (Dashboard) & "Database Asset" berubah menjadi
kartu ringkas khas HP. MURNI CSS memakai atribut data-label yang sudah ada
pada setiap | — tanpa mengubah render JS/arsitektur sama sekali. */
@media (max-width: 1024px) {
/* Semua panel body ikut menyesuaikan lebar kolom di tablet & mobile */
#assetsView {
width: 100%;
max-width: 100%;
}
#assetsView > .bg-white {
width: 100%;
max-width: 100%;
padding: 1rem;
border-radius: 16px;
box-sizing: border-box;
}
#assetsView .responsive-table-wrap,
#assetsView table,
#assetsView tbody {
width: 100%;
max-width: 100%;
}
#assetsView .flex.flex-wrap.items-center.justify-between.gap-3.mb-5 { margin-bottom: 1rem; }
#assetsView .flex.flex-wrap.items-center.justify-between.gap-3 > .flex.items-center.gap-2 { width: 100%; }
#btnImportAssetExcel,
#btnCreateAsset {
flex: 1 1 calc(50% - 0.25rem);
justify-content: center;
min-height: 42px;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
#assetsView .responsive-table-wrap {
overflow-x: visible;
overflow-y: visible;
max-height: none;
}
#assetsView thead { display: none; }
#assetsView table,
#assetsView tbody {
display: block;
width: 100%;
min-width: 0;
}
#assetsView tbody tr {
display: block;
width: 100%;
max-width: 100%;
background-color: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 0.9rem 0.9rem 0.7rem;
margin-bottom: 12px;
box-sizing: border-box;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
#assetsView tbody tr:last-child { margin-bottom: 0; }
#assetsView tbody td {
display: grid;
grid-template-columns: minmax(84px, 110px) minmax(0, 1fr);
align-items: center;
gap: 0.375rem 0.75rem;
min-width: 0;
padding: 0.52rem 0;
border: none;
border-bottom: 1px solid #f1f5f9;
text-align: left;
font-size: 13px;
overflow-wrap: anywhere;
}
#assetsView tbody td::before {
content: attr(data-label);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #94a3b8;
line-height: 1.3;
}
#assetsView tbody td[data-label="Kode"] {
display: block;
padding-bottom: 10px;
border-bottom: 1px solid #eef2f7;
}
#assetsView tbody td[data-label="Kode"]::before {
display: block;
margin-bottom: 6px;
}
#assetsView tbody td[data-label="Kode"] .asset-code-badge {
display: block;
width: 100%;
max-width: 100%;
font-family: 'Courier New', monospace;
font-size: 11px;
line-height: 1.45;
word-break: break-word;
overflow-wrap: anywhere;
white-space: normal;
background: #edf3ff;
color: #0f4dbb;
padding: 7px 8px;
border-radius: 8px;
border: 1px solid rgba(59, 130, 246, 0.12);
}
#assetsView tbody td[data-label="Perangkat"] {
font-weight: 600;
color: #1e293b;
}
#assetsView tbody td[data-label="Status"] {
padding-top: 0.7rem;
}
#assetsView tbody td[data-label="Status"] > span {
justify-self: start;
display: inline-flex;
align-items: center;
width: fit-content;
max-width: 100%;
}
#assetsView tbody td[data-label="Aksi"] {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.9rem;
margin-top: 0.25rem;
padding-top: 0.8rem;
border-top: 1px dashed #e2e8f0;
border-bottom: none;
}
#assetsView tbody td[data-label="Aksi"]::before { display: none; }
#assetsView tbody td[data-label="Aksi"] .edit-asset-btn,
#assetsView tbody td[data-label="Aksi"] .delete-asset-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 38px;
padding: 0.5rem 0.9rem;
border-radius: 8px;
border: 1px solid #e2e8f0;
background: #ffffff;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
transition: all 0.15s ease;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
#assetsView tbody td[data-label="Aksi"] .edit-asset-btn {
color: #2563eb;
}
#assetsView tbody td[data-label="Aksi"] .delete-asset-btn {
color: #dc2626;
}
#assetsView tbody td[data-label="Aksi"] .edit-asset-btn:active {
background-color: #eff6ff;
transform: scale(0.97);
}
#assetsView tbody td[data-label="Aksi"] .delete-asset-btn:active {
background-color: #fef2f2;
transform: scale(0.97);
}
.dark #assetsView tbody tr { background-color: #1e293b; border-color: #334155; }
.dark #assetsView tbody td { border-bottom-color: #334155; }
.dark #assetsView tbody td[data-label="Kode"] { border-bottom-color: #334155; }
.dark #assetsView tbody td[data-label="Aksi"] { border-top-color: #334155; }
.dark #assetsView tbody td[data-label="Kode"] .asset-code-badge {
background-color: #0f172a;
color: #60a5fa;
border-color: rgba(96, 165, 250, 0.2);
}
.dark #assetsView tbody td[data-label="Perangkat"] {
color: #f1f5f9;
}
.dark #assetsView tbody td[data-label="Aksi"] .edit-asset-btn,
.dark #assetsView tbody td[data-label="Aksi"] .delete-asset-btn {
background-color: #334155;
border-color: #475569;
}
.dark #assetsView tbody td[data-label="Aksi"] .edit-asset-btn {
color: #60a5fa;
}
.dark #assetsView tbody td[data-label="Aksi"] .delete-asset-btn {
color: #f87171;
}
.dark #assetsView tbody td[data-label="Aksi"] .edit-asset-btn:active {
background-color: #1e293b;
}
.dark #assetsView tbody td[data-label="Aksi"] .delete-asset-btn:active {
background-color: #1e293b;
}
}
@media (max-width: 767px) {
#dashboardView .bg-white.rounded-xl { padding: 1rem; }
#dashboardView .mb-6 { margin-bottom: 1rem; }
#assetsView > .bg-white {
padding: 1rem;
border-radius: 16px;
}
#assetsView .flex.flex-wrap.items-center.justify-between.gap-3.mb-5 { margin-bottom: 1rem; }
#assetsView .flex.flex-wrap.items-center.justify-between.gap-3 > .flex.items-center.gap-2 { width: 100%; }
#btnImportAssetExcel,
#btnCreateAsset {
flex: 1 1 calc(50% - 0.25rem);
justify-content: center;
min-height: 42px;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
/* --- Tabel → kartu: Tiket Project Internal (Dashboard) --- */
#internalProjectsPanel .responsive-table-wrap { overflow-x: visible; }
#internalProjectsPanel thead { display: none; }
#internalProjectsPanel table,
#internalProjectsPanel tbody { display: block; width: 100%; }
#internalProjectsPanel tbody tr {
display: block;
background-color: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 0.75rem;
padding: 0.5rem 0.75rem;
margin-bottom: 0.625rem;
}
#internalProjectsPanel tbody tr:last-child { margin-bottom: 0; }
#internalProjectsPanel tbody td {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
min-width: 0;
padding: 0.4375rem 0;
border: none;
text-align: right;
overflow-wrap: anywhere;
}
#internalProjectsPanel tbody td::before {
content: attr(data-label);
flex-shrink: 0;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
text-align: left;
color: #94a3b8;
}
/* Baris kosong "Belum ada data" (colspan) tetap pesan tengah tanpa label */
#assetsView tbody td[colspan],
#internalProjectsPanel tbody td[colspan] {
display: block;
padding: 2.5rem 1rem;
text-align: center;
}
#assetsView tbody td[colspan]::before,
#internalProjectsPanel tbody td[colspan]::before { content: none; }
/* Riwayat Tiket per Status: 2 kolom di HP agar ringkas (expand tetap bekerja) */
#statusHistoryGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Dark mode untuk kartu tabel */
.dark #assetsView tbody tr,
.dark #internalProjectsPanel tbody tr {
background-color: #1e293b;
border-color: #334155;
}
.dark #assetsView tbody td[data-label="Aksi"] { border-top-color: #334155; }
.dark #assetsView tbody td[data-label="Aksi"] .edit-asset-btn,
.dark #assetsView tbody td[data-label="Aksi"] .delete-asset-btn {
background-color: #0f172a;
border-color: #334155;
}
/* Tablet & desktop kecil (768–1023px): tabel tetap tabel, sel dirapatkan agar
tidak terlalu lebar (di bawah 768px tabel sudah menjadi kartu) */
@media (min-width: 768px) and (max-width: 1023px) {
#assetsView th, #assetsView td,
#internalProjectsPanel th, #internalProjectsPanel td {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
/* 3. Kanban Board Touch Drag & Smooth Scroll Optimization */
.kanban-scroll {
touch-action: pan-x pan-y;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
.kanban-column {
touch-action: pan-y;
}
.ticket-card {
touch-action: pan-y;
}
/* 5. Modals & Virtual Keyboard Adaptation */
.modal-overlay,
.dialog-overlay {
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
/* Dynamic Viewport Unit Modal height for iOS/Android keyboards */
@supports (height: 100dvh) {
#createTicket > div > div.bg-white,
#ticketDetail > div > div.bg-white,
#createUser > div > div.bg-white,
#editUser > div > div.bg-white,
#createAgent > div > div.bg-white,
#editAgent > div > div.bg-white,
#assetView > div > div.bg-white,
#calendarDate > div > div.bg-white {
max-height: 92dvh;
}
}
/* Sticky Modal Header & Footer with Scrollable Content Body */
#createTicket form,
#ticketDetail .ticket-detail-body,
#createUser form,
#editUser form,
#createAgent form,
#editAgent form,
#assetView form {
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* 6. Filter Controls Flex Wrapping on Mobile & Tablet */
#listView .flex.flex-wrap.gap-2,
#kanbanView .grid.grid-cols-1.sm\:grid-cols-2,
#archiveView .flex.items-center.gap-2.flex-wrap,
#assetsView .flex.flex-wrap.items-center {
align-items: center;
}
@media (max-width: 639px) {
#archiveView .archive-filters {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
width: 100%;
gap: 0.5rem;
}
#archiveView .archive-filters input {
width: 100%;
min-width: 0;
min-height: 44px;
}
#archiveView #btnArchiveFilterApply {
grid-column: 1 / -1;
justify-content: center;
min-height: 44px;
}
#archiveView #archivePagination {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
}
#archiveView #archivePagination > span:first-child { text-align: center; }
#archiveView #archivePagination > span:last-child {
display: flex;
width: 100%;
gap: 0.5rem;
margin: 0;
}
#archiveView #archivePagination > span:last-child button {
flex: 1 1 0;
min-width: 0;
min-height: 44px;
}
}
@media (max-width: 639px) {
#listFilterStatus,
#listFilterPriority,
#listFilterCategory {
flex: 1 1 calc(50% - 0.5rem);
min-width: 130px;
}
}
@media (max-width: 1023px) {
#archiveView .responsive-table-wrap { overflow: visible; }
#archiveView table,
#archiveView tbody,
#archiveView tr,
#archiveView td { display: block; width: 100%; }
#archiveView thead { display: none; }
#archiveView tbody { display: grid; gap: .75rem; }
#archiveView tbody tr {
padding: .75rem;
border: 1px solid #e2e8f0;
border-radius: .75rem;
background: #fff;
}
#archiveView tbody td {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: .75rem;
min-width: 0;
padding: .5rem 0;
overflow-wrap: anywhere;
border-bottom: 1px solid #f1f5f9;
text-align: right;
}
#archiveView tbody td::before {
content: attr(data-label);
flex: 0 0 36%;
color: #475569;
font-size: .7rem;
font-weight: 600;
text-align: left;
}
#archiveView tbody td[data-label="Aksi"] button { min-width: 44px; min-height: 44px; }
#archiveView tbody td[colspan] {
display: block;
padding: 2rem 1rem;
border: 0;
text-align: center;
}
#archiveView tbody td[colspan]::before { content: none; }
.dark #archiveView tbody tr { border-color: #334155; background: #1e293b; }
.dark #archiveView tbody td { border-color: #334155; }
.dark #archiveView tbody td::before { color: #cbd5e1; }
}
/* ============================================================
KANBAN FILTER BAR — DUAL THEME: LIGHT + DARK (2026-09-21)
Referensi gambar: dark navy filter toolbar (untuk dark mode)
Hanya mempengaruhi #kanbanView .kanban-filter-bar
Sistem: class-based .dark pada
============================================================ */
/* ===== BASE / LIGHT MODE (default, tanpa .dark) ===== */
#kanbanView .kanban-filter-bar {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border: 1px solid rgba(226, 232, 240, 0.9);
border-radius: 14px;
padding: 16px 18px;
margin-bottom: 20px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
/* Search — Light */
#kanbanView .kanban-filter-bar #boardSearch {
background-color: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(203, 213, 225, 0.9);
color: #1e293b;
caret-color: #2563eb;
}
#kanbanView .kanban-filter-bar #boardSearch::placeholder {
color: #94a3b8;
}
#kanbanView .kanban-filter-bar #boardSearch:focus {
background-color: #ffffff;
border-color: rgba(59, 130, 246, 0.55);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
/* Selects — Light */
#kanbanView .kanban-filter-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-color: rgba(255, 255, 255, 0.95);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px !important;
color: #334155;
border: 1px solid rgba(203, 213, 225, 0.9);
}
#kanbanView .kanban-filter-select:focus {
background-color: #ffffff;
border-color: rgba(59, 130, 246, 0.55);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
/* Option text — Light */
#kanbanView .kanban-filter-select option {
background-color: #ffffff;
color: #1e293b;
padding: 8px;
}
/* Search icon — Light */
#kanbanView .kanban-filter-bar .fa-magnifying-glass {
color: #94a3b8;
}
/* ===== DARK MODE (.dark) — sesuai gambar referensi navy ===== */
.dark #kanbanView .kanban-filter-bar {
background: linear-gradient(135deg, #1e293b 0%, #172033 100%);
border: 1px solid rgba(51, 65, 85, 0.6);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* Search — Dark */
.dark #kanbanView .kanban-filter-bar #boardSearch {
background-color: rgba(30, 41, 59, 0.9);
border: 1px solid rgba(71, 85, 105, 0.6);
color: #e2e8f0;
caret-color: #60a5fa;
}
.dark #kanbanView .kanban-filter-bar #boardSearch::placeholder {
color: #64748b;
}
.dark #kanbanView .kanban-filter-bar #boardSearch:focus {
background-color: rgba(15, 23, 42, 0.95);
border-color: rgba(59, 130, 246, 0.5);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
/* Selects — Dark */
.dark #kanbanView .kanban-filter-select {
background-color: rgba(30, 41, 59, 0.9);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
color: #cbd5e1;
border: 1px solid rgba(71, 85, 105, 0.6);
}
.dark #kanbanView .kanban-filter-select:focus {
background-color: rgba(15, 23, 42, 0.95);
border-color: rgba(59, 130, 246, 0.5);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
/* Option text — Dark */
.dark #kanbanView .kanban-filter-select option {
background-color: #1e293b;
color: #e2e8f0;
}
/* Search icon — Dark */
.dark #kanbanView .kanban-filter-bar .fa-magnifying-glass {
color: #64748b;
}
/* ---- Responsive breakpoints untuk Kanban Filter Bar ---- */
/* Mobile kecil (<480px): stack vertical penuh */
@media (max-width: 479px) {
#kanbanView .kanban-filter-bar {
padding: 14px 12px;
border-radius: 12px;
gap: 10px !important;
}
#kanbanView .kanban-filter-bar > * {
width: 100% !important;
flex: none !important;
min-width: unset !important;
}
#kanbanView .kanban-filter-select {
font-size: 15px; /* cegah iOS zoom */
padding-top: 12px !important;
padding-bottom: 12px !important;
}
#kanbanView .kanban-filter-bar #boardSearch {
font-size: 15px; /* cegah iOS zoom */
}
}
/* Mobile standar (480px–639px): 2 kolom grid-like via flex-wrap */
@media (min-width: 480px) and (max-width: 639px) {
#kanbanView .kanban-filter-bar {
padding: 14px 14px;
gap: 10px !important;
}
#kanbanView .kanban-filter-bar > * {
flex: 1 1 calc(50% - 5px) !important;
min-width: 0 !important;
}
/* Search lebih lebar: full row */
#kanbanView .kanban-filter-bar > div:first-child {
flex-basis: 100% !important;
}
#kanbanView .kanban-filter-select {
font-size: 15px;
}
#kanbanView .kanban-filter-bar #boardSearch {
font-size: 15px;
}
}
/* Tablet portrait (640px–767px): compact row */
@media (min-width: 640px) and (max-width: 767px) {
#kanbanView .kanban-filter-bar {
padding: 14px 16px;
gap: 8px !important;
}
#kanbanView .kanban-filter-bar #boardSearch {
flex: 2 1 200px !important;
min-width: 160px !important;
}
#kanbanView .kanban-filter-select {
flex: 1 1 120px !important;
min-width: 110px !important;
font-size: 13px;
padding-left: 12px !important;
padding-right: 28px !important;
}
}
/* Tablet landscape / laptop kecil (768px–1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
#kanbanView .kanban-filter-bar {
padding: 16px 18px;
gap: 10px !important;
}
#kanbanView .kanban-filter-bar #boardSearch {
flex: 2.5 1 220px !important;
}
#kanbanView .kanban-filter-select {
flex: 1 1 130px !important;
min-width: 120px !important;
}
}
/* Desktop besar (≥1024px): layout optimal */
@media (min-width: 1024px) {
#kanbanView .kanban-filter-bar {
padding: 18px 22px;
gap: 12px !important;
}
#kanbanView .kanban-filter-bar #boardSearch {
flex: 3 1 260px !important;
}
#kanbanView .kanban-filter-select {
flex: 1 1 150px !important;
max-width: 190px;
}
}
/* Ultra-wide (≥1440px) */
@media (min-width: 1440px) {
#kanbanView .kanban-filter-bar {
padding: 20px 26px;
gap: 14px !important;
}
#kanbanView .kanban-filter-bar #boardSearch {
flex: 4 1 320px !important;
}
#kanbanView .kanban-filter-select {
flex: 1 1 170px !important;
max-width: 210px;
}
}
/* 7. Image Dropzone & Preview Bar Mobile Spacing */
.image-dropzone {
touch-action: manipulation;
}
/* 8. Print view adjustment safeguard */
@media print {
.no-print {
display: none !important;
}
}
/* 9. Cancel-reason panel (detail view) — konsisten dengan template email
templates/email/user-ticket-cancelled.html (latar orange pucat, border-left oranye). */
.cancel-panel {
background: #fff7ed;
border-left: 4px solid #ea580c;
border-radius: 0 8px 8px 0;
padding: 14px 18px;
}
.cancel-panel-label {
margin: 0 0 4px;
font-size: 12px;
font-weight: 700;
color: #9a3412;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.cancel-panel-text {
margin: 0;
font-size: 14px;
font-style: italic;
color: #7c2d12;
white-space: pre-wrap;
word-break: break-word;
}
.cancel-panel-meta {
margin: 8px 0 0;
font-size: 12px;
color: #9a3412;
}
/* ============================================================
AUTO-ADAPTIVE LAYOUT — ALL DEVICES (2026-09)
Mobile kecil → HP → landscape → tablet → laptop → desktop → ultra-wide.
Murni CSS override: tidak mengubah struktur HTML/JS, aman untuk dark mode.
============================================================ */
/* ---- 0. Fondasi fluid: media, tipografi, viewport dinamis ---- */
img, video, canvas, svg, iframe {
max-width: 100%;
}
img, video {
height: auto;
}
#loginPage {
min-height: 100vh;
}
@supports (min-height: 100dvh) {
#loginPage {
min-height: 100dvh;
}
.main-area {
min-height: calc(100dvh - 64px);
}
}
/* Judul & angka statistik mengecil/membesar mulus mengikuti lebar layar */
#pageTitle {
font-size: clamp(0.95rem, 0.85rem + 0.6vw, 1.25rem);
}
.stat-card p.text-2xl,
#dashboardView .text-2xl {
font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
}
/* Cegah iOS auto-zoom saat fokus input (font <16px memicu zoom) */
@media (max-width: 767px) {
input, select, textarea {
font-size: 16px;
}
#globalSearchMobile, #listSearch, #boardSearch {
font-size: 16px;
}
}
/* ---- 1. Chart wrappers: tinggi adaptif per device ---- */
#trendChart, #miniStatusChart, #cumulativeChart, #categoryGrowthChart,
#statusChart, #priorityChart, #categoryChart, #workloadChart,
#topReportersChart, #topCategoriesChart, #growthChartAdminCanvas,
#growthChartUserCanvas, #resolutionTrendChart,
#analyticsComboChartCanvas, #analyticsSourceChartCanvas {
width: 100% !important;
height: 100% !important;
display: block;
}
/* Bungkus kanvas dashboard: tinggi mengikuti layar */
#dashboardView canvas#trendChart { height: clamp(180px, 28vw, 260px) !important; }
#dashboardView canvas#miniStatusChart { height: clamp(200px, 30vw, 280px) !important; }
#dashboardView canvas#cumulativeChart,
#dashboardView canvas#categoryGrowthChart { height: clamp(200px, 30vw, 300px) !important; }
/* Bungkus analytics: parent relatif sudah ada min-h, pastikan kanvas mengisi */
#analyticsView .relative.w-full:has(> canvas) { min-height: clamp(180px, 22vw, 250px); }
/* Guard: container progress bar SLA (w-full h-3 relative) TIDAK boleh kena
min-height container chart — itulah penyebab gauge SLA tampak jadi oval raksasa */
#analyticsView .w-full.h-3 { height: 0.75rem; min-height: 0.75rem; }
/* Persentase SLA lebih menonjol — KHUSUS mobile (desktop memakai ukuran asli) */
@media (max-width: 767px) {
#analyticsSlaPctText { font-size: 0.875rem; }
}
#analyticsPerformanceTab canvas { height: clamp(180px, 26vw, 250px) !important; }
/* HP: chart analytics proporsional & rapat — matikan ruang chart berlebih */
@media (max-width: 639px) {
#analyticsView .relative.w-full:has(> canvas) { min-height: 165px; }
#analyticsPerformanceTab canvas { height: 175px !important; }
}
/* ---- 2. HP sangat kecil (≤359px: lipat/fold, HP lama) ---- */
@media (max-width: 359px) {
.stat-grid { gap: 0.5rem; }
.stat-grid .stat-card { padding: 0.75rem; }
header .flex.items-center.gap-1 { gap: 0.25rem; }
header .w-9.h-9,
#menuToggle,
#sidebarClose { min-width: 44px; min-height: 44px; }
#btnCreateTicket {
width: 44px;
min-width: 44px;
height: 44px;
min-height: 44px;
flex: 0 0 44px;
justify-content: center;
padding: 0;
}
#btnCreateTicket span { display: none; }
/* Layar sangat kecil (<360px): refresh disembunyikan agar judul tetap terbaca —
semua tombol yang tersisa tetap 44×44 (touch target) */
#refreshBtn { display: none; }
/* Layar sangat kecil: riwayat status 1 kolom agar terbaca */
#statusHistoryGrid { grid-template-columns: 1fr; }
.kanban-scroll .kanban-column { min-width: 86vw; max-width: 86vw; }
.calendar-day-cell { min-height: 52px; }
}
/* ---- 3. HP portrait (360–639px) ---- */
@media (min-width: 360px) and (max-width: 639px) {
.stat-grid .stat-card p.text-2xl { font-size: 1.3rem; }
.stat-grid .stat-card .w-10.h-10 { width: 2.25rem; height: 2.25rem; }
.kanban-scroll .kanban-column { min-width: min(82vw, 300px); max-width: min(82vw, 320px); }
/* KPI analytics menumpuk rapi, tiap kartu full-width */
.analytics-kpi-stack > div { flex: 1 1 100%; }
/* Filter list/kanban 2 kolom agar tidak terlalu panjang */
#listView .flex.flex-wrap.gap-2 > select { flex: 1 1 calc(50% - 0.5rem); min-width: 0; }
}
/* ---- 4. HP landscape / lipat bentang (tinggi pendek) ---- */
@media (max-height: 500px) and (orientation: landscape) {
/* Desktop header actions move into the user menu on compact phones. */
#darkModeToggle,
#refreshBtn { display: none !important; }
#loginPage { align-items: center; padding: 0.75rem; }
#loginPage > div { padding: 1.25rem; }
.sidebar { width: min(78vw, 300px); }
.kanban-scroll .kanban-column { min-width: 280px; }
.chat-thread { max-height: 40vh; }
#ticketDetail > div > div.bg-white { max-height: 96vh; max-height: 96dvh; }
}
/* ---- 5. Tablet portrait (640–767px: HP besar / tablet kecil) ---- */
@media (min-width: 640px) and (max-width: 767px) {
.main-area { padding: 1rem; }
.kanban-scroll .kanban-column { min-width: 270px; max-width: 290px; }
#dashboardView .grid.lg\:grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#analyticsView .grid.md\:grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Widget ke-3 (Open Tickets) melebar penuh agar tidak jadi kartu yatim setengah kolom */
#analyticsView .grid.md\:grid-cols-3 > div:nth-child(3) { grid-column: 1 / -1; }
}
/* ---- 6. Tablet (768–1023px: iPad, Android tab) ---- */
@media (min-width: 768px) and (max-width: 1023px) {
.main-area { padding: 1.25rem; }
/* Stat 2 kolom lega di tablet */
.stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* KPI analytics jadi baris 3 kartu sejajar */
.analytics-kpi-stack > div { flex: 1 1 0; min-width: 0; }
.analytics-kpi-stack .text-3xl { font-size: 1.5rem; }
/* Dashboard chart 1 kolom → 2 kolom bersebelahan bila cukup */
#dashboardAdvancedCharts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#dashboardStatusHistory #statusHistoryGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Kanban: 2 kolom terlihat, geser halus */
.kanban-scroll .kanban-column { min-width: 272px; max-width: 292px; }
/* Kalender: sidebar pindah ke bawah (sudah) + sel lebih tinggi */
.calendar-day-cell { min-height: 92px; }
/* Modal tablet: tidak full-screen, kartu tengah lega */
#createTicket > div > div,
#ticketDetail > div > div.bg-white,
#assetView > div > div { max-width: min(720px, calc(100vw - 3rem)); margin-inline: auto; }
/* Profil 2 kolom tetap nyaman */
#profileView .grid.lg\:grid-cols-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
/* ---- 7. Laptop (1024–1279px) ---- */
@media (min-width: 1024px) and (max-width: 1279px) {
.main-content { margin-left: 16rem; }
.main-area { padding: 1.25rem; }
.analytics-top-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.kanban-column { min-width: 250px; max-width: 280px; }
/* Cegah header penuh sesak di laptop 1024 */
#globalSearch { max-width: 12rem; }
}
/* ---- 8. Desktop (1280–1535px) ---- */
@media (min-width: 1280px) and (max-width: 1535px) {
.main-content { margin-left: 16rem; }
.main-area { padding: 1.5rem; }
.kanban-column { min-width: 260px; max-width: 290px; }
}
/* ---- 9. Desktop besar (1536–1919px) ---- */
@media (min-width: 1536px) {
.main-area { padding: 1.75rem; }
.kanban-container { flex-wrap: nowrap; }
.kanban-column { min-width: 280px; max-width: 310px; }
#dashboardView canvas#trendChart { height: 260px !important; }
}
/* ---- 10. Ultra-wide (≥1920px: PC monitor lebar / TV) ---- */
@media (min-width: 1920px) {
/* Pusatkan konten agar tidak melebar berlebihan, sidebar tetap menempel */
.main-content { margin-left: 16rem; }
.main-area > * { max-width: 1760px; margin-inline: auto; }
.kanban-column { min-width: 300px; max-width: 330px; }
#helpView { max-width: 1400px; margin-inline: auto; }
}
@media (max-width: 767px) {
#kanbanView .kanban-container {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem;
overflow-x: visible;
scroll-snap-type: none;
touch-action: pan-y;
}
#kanbanView .kanban-container > * + * {
margin-left: 0;
margin-right: 0;
}
#kanbanView .kanban-scroll .kanban-column {
width: 100%;
min-width: 0;
max-width: none;
}
}
/* ---- 11. Layar pendek (laptop 768px height / landscape tablet) ---- */
@media (max-height: 700px) and (min-width: 1024px) {
.sidebar nav { padding-bottom: 0.5rem; }
#helpView { max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px); }
.chat-thread { max-height: 300px; }
}
/* ---- 12. Preferensi gerak & kontras (aksesibilitas semua device) ---- */
@media (prefers-reduced-motion: reduce) {
.kanban-scroll { scroll-snap-type: none; }
}
@media (prefers-contrast: more) {
.sidebar .nav-btn.active, .nav-btn.active { outline: 2px solid currentColor; outline-offset: -2px; }
}
/* Fokus keyboard selalu terlihat (WCAG 2.4.11) di semua ukuran */
:focus-visible {
outline: 2px solid #0747A6;
outline-offset: 2px;
border-radius: 6px;
}
/* Super User SLA dashboard — compact reference layout. */
.sla-dashboard { color: #0f172a; }
.sla-dashboard-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .9rem; border: 1px solid #dbeafe; border-radius: .8rem; background: linear-gradient(110deg, #eff6ff, #fff 68%); }
.sla-dashboard-toolbar h3 { margin: 0; font-size: 1rem; font-weight: 800; }.sla-dashboard-toolbar p { margin-top: .2rem; color: #64748b; font-size: .68rem; }.sla-dashboard-controls { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; flex-wrap: wrap; }.sla-dashboard-controls select, .sla-dashboard-controls button, .sla-date-field input { min-height: 34px; border: 1px solid #dbe4ef; border-radius: .45rem; background: #fff; padding: .35rem .6rem; color: #475569; font-size: .68rem; }.sla-date-field { display: block; }.sla-date-field input { width: 128px; }.sla-dashboard-controls button { cursor: pointer; }.sla-dashboard-controls button:last-child { border-color: #0747a6; background: #0747a6; color: #fff; font-weight: 700; }.sla-quarter-toggle { display: flex; gap: 0; padding: .2rem; border: 1px solid #dbe4ef; border-radius: .55rem; background: #f1f5f9; }.sla-quarter-toggle button { flex: 1 1 0; min-height: 30px; border: 0; border-radius: .4rem; background: transparent; transition: background .15s; }.sla-quarter-toggle button:hover:not(.active) { background: #e2e8f0; }.sla-quarter-toggle button.active { background: #0747a6; color: #fff; }.sla-quarter-toggle.is-custom { opacity: .55; }.sla-quarter-toggle.is-custom button.active { background: transparent; color: #475569; }
.sla-summary-grid { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); gap: .65rem; }.sla-compliance-card, .sla-kpi-grid, .sla-chart-grid > article, .sla-priority-card { border: 1px solid #e2e8f0; border-radius: .75rem; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.05); }.sla-compliance-card { padding: .8rem; text-align: center; }.sla-compliance-card h4, .sla-chart-grid h4, .sla-priority-card h4 { margin: 0; color: #334155; font-size: .75rem; font-weight: 700; }.sla-ring { --sla-progress: 0deg; display: grid; place-items: center; width: 86px; height: 86px; margin: .5rem auto; border: 9px solid transparent; border-radius: 50%; background: conic-gradient(#1557a6 var(--sla-progress), #e2e8f0 var(--sla-progress)) border-box; }.sla-ring span { display: block; font-size: 1.1rem; font-weight: 800; }.sla-ring small { display: block; color: #94a3b8; font-size: .55rem; }.sla-compliance-card > p { color: #94a3b8; font-size: .6rem; }.sla-status-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; margin-top: .6rem; padding-top: .55rem; border-top: 1px solid #f1f5f9; color: #64748b; font-size: .58rem; }.sla-status-counts span:first-child b { color: #059669; }.sla-status-counts span:nth-child(2) b { color: #d97706; }.sla-status-counts span:last-child b { color: #dc2626; }.sla-status-counts b { display: block; font-size: .7rem; }
.sla-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: .5rem; border: 0; background: transparent; box-shadow: none; }.sla-kpi-grid article { min-height: 76px; padding: .7rem; border: 1px solid #e2e8f0; border-left: 3px solid #1557a6; border-radius: .65rem; background: #fff; }.sla-kpi-grid article:nth-child(3) { border-left-color: #7c3aed; }.sla-kpi-grid article:nth-child(4) { border-left-color: #dc2626; }.sla-kpi-grid span, .sla-kpi-grid small { display: block; color: #94a3b8; font-size: .58rem; }.sla-kpi-grid strong { display: block; margin: .3rem 0; font-size: 1rem; }.sla-context { grid-column: 1 / -1; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; color: #7c3aed; font-size: .58rem; }.sla-context span { padding: .25rem .45rem; border-radius: 999px; background: #f3e8ff; }.sla-context em { margin-left: auto; color: #059669; font-style: normal; }
.sla-chart-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: .65rem; }.sla-chart-grid > article { min-width: 0; padding: .75rem; }.sla-chart-grid > article > div { position: relative; height: 190px; margin-top: .4rem; }.sla-chart-grid canvas { width: 100% !important; height: 100% !important; }.sla-chart-grid p { margin-top: .35rem; color: #64748b; font-size: .58rem; }
.sla-priority-card { padding: .75rem; }.sla-card-title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .45rem; }.sla-card-title button { border: 0; background: transparent; color: #dc2626; cursor: pointer; font-size: .6rem; font-weight: 700; }.sla-table-wrap { overflow-x: auto; }.sla-priority-card table { width: 100%; border-collapse: collapse; font-size: .62rem; }.sla-priority-card th { padding: .45rem; color: #64748b; font-size: .55rem; text-align: left; text-transform: uppercase; }.sla-priority-card td { padding: .45rem; border-top: 1px solid #f1f5f9; white-space: nowrap; }.sla-priority-badge, .sla-status { display: inline-block; padding: .22rem .4rem; border-radius: 999px; font-size: .55rem; font-weight: 700; }.sla-priority-badge.highest { background: #fee2e2; color: #b91c1c; }.sla-priority-badge.high { background: #ffedd5; color: #c2410c; }.sla-priority-badge.medium { background: #fef3c7; color: #a16207; }.sla-priority-badge.low { background: #e2e8f0; color: #475569; }.sla-status.on_track { background: #dcfce7; color: #15803d; }.sla-status.at_risk { background: #fef3c7; color: #a16207; }.sla-status.breached { background: #fee2e2; color: #b91c1c; }.sla-progress { display: inline-block; width: 70px; height: 4px; margin-right: .25rem; overflow: hidden; border-radius: 999px; background: #e2e8f0; vertical-align: middle; }.sla-progress i { display: block; height: 100%; background: #16a34a; }.sla-priority-card footer { display: flex; justify-content: space-between; gap: .5rem; margin-top: .45rem; color: #94a3b8; font-size: .55rem; }
.dark .sla-dashboard { color: #e2e8f0; }.dark .sla-dashboard-toolbar { border-color: #334155; background: linear-gradient(110deg, #172554, #1e293b 68%); }.dark .sla-compliance-card, .dark .sla-chart-grid > article, .dark .sla-priority-card, .dark .sla-kpi-grid article { border-color: #334155; background: #1e293b; box-shadow: 0 1px 2px rgba(0,0,0,.24); }.dark .sla-dashboard-toolbar p, .dark .sla-chart-grid p, .dark .sla-priority-card footer, .dark .sla-status-counts, .dark .sla-kpi-grid span, .dark .sla-kpi-grid small, .dark .sla-compliance-card > p, .dark .sla-ring small, .dark .sla-priority-card th { color: #94a3b8; }.dark .sla-dashboard-toolbar h3, .dark .sla-compliance-card h4, .dark .sla-chart-grid h4, .dark .sla-priority-card h4, .dark .sla-kpi-grid strong, .dark .sla-ring span, .dark .sla-priority-card td { color: #f1f5f9; }.dark .sla-ring { border-color: #334155; border-top-color: #60a5fa; }.dark .sla-status-counts { border-color: #334155; }.dark .sla-context { color: #c4b5fd; }.dark .sla-context span { background: #312e81; color: #ddd6fe; }.dark .sla-priority-card td { border-color: #334155; }.dark .sla-priority-card thead { background: #0f172a; }.dark .sla-progress { background: #475569; }.dark .sla-priority-badge.highest, .dark .sla-status.breached { background: #4c1d1d; color: #fecaca; }.dark .sla-priority-badge.high { background: #431407; color: #fed7aa; }.dark .sla-priority-badge.medium, .dark .sla-status.at_risk { background: #422006; color: #fde68a; }.dark .sla-priority-badge.low { background: #334155; color: #cbd5e1; }.dark .sla-status.on_track { background: #14532d; color: #bbf7d0; }.dark .sla-dashboard-controls select, .dark .sla-dashboard-controls button, .dark .sla-date-field input { border-color: #475569; background: #0f172a; color: #e2e8f0; color-scheme: dark; }.dark .sla-dashboard-controls button:hover { background: #334155; }.dark .sla-dashboard-controls button:last-child, .dark .sla-quarter-toggle button.active { background: #1557a6; color: #fff; }.dark .sla-quarter-toggle { background: #0f172a; }.dark .sla-quarter-toggle.is-custom button.active { background: transparent; color: #94a3b8; }
@media (max-width: 767px) { .sla-dashboard-toolbar, .sla-summary-grid, .sla-chart-grid { grid-template-columns: 1fr; flex-direction: column; align-items: stretch; }.sla-dashboard-controls { justify-content: stretch; }.sla-dashboard-controls > * { flex: 1 1 0; min-width: 0; }.sla-quarter-toggle { flex: 1 0 100%; }.sla-chart-grid > article > div { height: 210px; }.sla-priority-card footer { flex-direction: column; } }
/* Super User SLA — adaptive controls and information density without changing data or handlers. */
.sla-dashboard,
.sla-dashboard * { min-width: 0; }
.sla-dashboard-toolbar > :first-child { flex: 1 1 240px; }
.sla-dashboard-controls { flex: 0 1 auto; }
.sla-dashboard-controls select,
.sla-dashboard-controls button,
.sla-date-field input { min-height: 40px; }
.sla-dashboard-controls button:focus-visible,
.sla-dashboard-controls select:focus-visible,
.sla-date-field input:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.sla-table-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; }
@media (min-width: 768px) and (max-width: 1023px) {
.sla-dashboard-toolbar { align-items: flex-start; }
.sla-dashboard-controls { flex: 1 1 100%; justify-content: flex-start; }
.sla-dashboard-controls > * { flex: 0 1 auto; }
.sla-summary-grid { grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr); }
}
@media (max-width: 767px) {
.sla-dashboard { gap: .75rem; }
.sla-dashboard-toolbar { gap: .75rem; padding: .75rem; }
.sla-dashboard-toolbar h3 { font-size: .95rem; }
.sla-dashboard-toolbar p { line-height: 1.35; }
.sla-dashboard-controls {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas:
'quarter year'
'start end'
'apply reset'
'export export';
gap: .375rem;
}
.sla-dashboard-controls > * { width: 100%; min-width: 0; }
#slaYearSelect { grid-area: year; }
.sla-quarter-toggle { grid-area: quarter; }
.sla-quarter-toggle button { min-width: 0; padding-inline: .3rem; }
.sla-date-field:first-of-type { grid-area: start; }
.sla-date-field:last-of-type { grid-area: end; }
.sla-date-field input { width: 100%; }
#btnApplySlaRange { grid-area: apply; font-weight: 600; }
#btnResetSlaRange { grid-area: reset; font-weight: 600; }
#btnExportSlaReport { grid-area: export; }
.sla-summary-grid, .sla-chart-grid { gap: .75rem; }
.sla-compliance-card { padding: .75rem; }
.sla-kpi-grid { gap: .45rem; padding: 0; }
.sla-kpi-grid article { min-height: 72px; padding: .65rem; }
.sla-chart-grid > article { padding: .75rem; }
.sla-chart-grid > article > div { height: clamp(180px, 58vw, 220px); }
.sla-priority-card { padding: .75rem; }
.sla-card-title { align-items: flex-start; gap: .5rem; }
.sla-card-title button { min-height: 40px; text-align: right; }
.sla-priority-card footer { gap: .2rem; line-height: 1.35; }
}
@media (max-width: 767px) {
/* Keep period filters dense without shrinking touch targets. */
.sla-dashboard { gap: .625rem; }
.sla-dashboard-toolbar { padding: .625rem; border-radius: .7rem; }
.sla-dashboard-toolbar h3 { font-size: .9rem; line-height: 1.2; }
.sla-dashboard-toolbar p { margin-top: .15rem; font-size: .64rem; }
.sla-dashboard-controls { gap: .375rem; }
.sla-dashboard-controls select,
.sla-dashboard-controls button,
.sla-date-field input { min-height: 40px; padding: .35rem .5rem; font-size: .72rem; }
.sla-quarter-toggle { min-height: 40px; padding: .2rem; }
.sla-quarter-toggle button { min-height: 34px; padding-inline: .25rem; }
.sla-summary-grid, .sla-chart-grid { gap: .625rem; }
.sla-compliance-card, .sla-chart-grid > article, .sla-priority-card { padding: .625rem; border-radius: .7rem; }
.sla-kpi-grid { gap: .375rem; }
.sla-kpi-grid article { min-height: 66px; padding: .55rem; }
.sla-kpi-grid article span, .sla-kpi-grid article small { line-height: 1.2; }
.sla-kpi-grid article strong { font-size: 1rem; }
.sla-context { gap: .25rem; padding: .5rem; }
.sla-chart-grid > article > div { height: clamp(165px, 52vw, 205px); }
.sla-card-title { align-items: center; }
.sla-card-title h4 { font-size: .82rem; line-height: 1.25; }
.sla-card-title button { min-height: 40px; padding: .35rem .5rem; font-size: .68rem; }
.sla-priority-card footer { display: grid; grid-template-columns: minmax(0, 1fr); gap: .15rem; font-size: .65rem; }
}
@media (max-width: 359px) {
.sla-quarter-toggle button { padding-inline: .15rem; font-size: .66rem; }
.sla-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sla-context { grid-column: 1 / -1; }
.sla-context em { width: auto; margin-left: 0; }
.sla-card-title { flex-direction: column; align-items: stretch; }
.sla-card-title button { width: 100%; text-align: center; }
.sla-priority-card td { grid-template-columns: minmax(6.4rem, .9fr) minmax(0, 1.1fr); gap: .4rem; }
}
.dark .sla-ring { border-color: transparent; background: conic-gradient(#60a5fa var(--sla-progress), #334155 var(--sla-progress)) border-box; }
/* Kuartal hanya aktif berdasarkan class active; tombol terakhir adalah Export. */
.sla-dashboard-controls .sla-quarter-toggle button:last-child { border-color: transparent; background: transparent; color: #475569; font-weight: inherit; }
.sla-dashboard-controls .sla-quarter-toggle button.active { border-color: #0747a6; background: #0747a6; color: #fff; font-weight: 700; }
.sla-dashboard-controls .sla-quarter-toggle.is-custom button.active { border-color: transparent; background: transparent; color: #475569; }
.sla-dashboard-controls #btnExportSlaReport { border-color: #0747a6; background: #0747a6; color: #fff; font-weight: 700; }
.dark .sla-dashboard-controls .sla-quarter-toggle button:last-child { color: #cbd5e1; }
.dark .sla-dashboard-controls .sla-quarter-toggle button.active { background: #1557a6; color: #fff; }
.dark .sla-dashboard-controls .sla-quarter-toggle.is-custom button.active { background: transparent; color: #cbd5e1; }
.dark .sla-quarter-toggle { border-color: #334155; background: #0f172a; }
.dark .sla-quarter-toggle button:hover:not(.active) { background: #1e293b; }
.sla-ring {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .15rem;
box-shadow: 0 3px 10px rgba(15, 23, 42, .12);
}
.sla-ring::before { position: absolute; inset: 9px; border-radius: 50%; background: #fff; content: ''; }
.sla-ring span, .sla-ring small { position: relative; z-index: 1; margin: 0; text-align: center; }
.sla-ring span { line-height: 1.1; }
.sla-ring small { line-height: 1; }
.dark .sla-ring { box-shadow: 0 3px 10px rgba(0, 0, 0, .28); }
.dark .sla-ring::before { background: #1e293b; }
/* Analytics and Super User SLA: mobile-first containment and readable data density. */
#analyticsView .analytics-header > * { min-width: 0; }
@media (max-width: 1023px) {
.sla-dashboard-toolbar { flex-direction: column; align-items: stretch; }
.sla-dashboard-toolbar > :first-child,
.sla-dashboard-controls { flex-basis: auto; }
.sla-dashboard-controls { width: 100%; justify-content: flex-start; }
.sla-summary-grid,
.sla-chart-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
#analyticsView .analytics-header { align-items: stretch; }
#analyticsView .analytics-subtabs { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
#analyticsView .analytics-subtabs > button { width: 100%; min-width: 0; text-align: left; }
.sla-priority-card .sla-table-wrap { overflow: visible; }
.sla-priority-card table,
.sla-priority-card tbody,
.sla-priority-card tr,
.sla-priority-card td { display: block; width: 100%; }
.sla-priority-card thead { display: none; }
.sla-priority-card tbody { display: grid; gap: .65rem; }
.sla-priority-card tr { padding: .65rem; border: 1px solid #e2e8f0; border-radius: .6rem; }
.sla-priority-card td { display: grid; grid-template-columns: minmax(7.5rem, .9fr) minmax(0, 1.1fr); gap: .6rem; padding: .38rem 0; border: 0; text-align: right; }
.sla-priority-card td::before { color: #64748b; font-size: .65rem; font-weight: 700; text-align: left; }
.sla-priority-card td:nth-child(1)::before { content: 'Prioritas'; }
.sla-priority-card td:nth-child(2)::before { content: 'Total tiket'; }
.sla-priority-card td:nth-child(3)::before { content: 'Target respon'; }
.sla-priority-card td:nth-child(4)::before { content: 'Target resolusi'; }
.sla-priority-card td:nth-child(5)::before { content: 'Kepatuhan'; }
.sla-priority-card td:nth-child(6)::before { content: 'Status'; }
.sla-priority-card td > :only-child { justify-self: end; }
.sla-priority-card td .sla-progress { margin-right: .25rem; }
.dark .sla-priority-card tr { border-color: #334155; }
.dark .sla-priority-card td::before { color: #94a3b8; }
}
#slaReportPrintRoot { display: none; }
.sla-print-report { color: #0f172a; background: #fff; font-family: Arial, sans-serif; font-size: 10px; line-height: 1.35; }
.sla-print-header { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 14px; border-bottom: 3px solid #1557a6; }
.sla-print-eyebrow { margin: 0 0 4px; color: #1557a6; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.sla-print-header h1 { margin: 0; font-size: 22px; line-height: 1.1; }
.sla-print-header p:last-child { margin: 6px 0 0; color: #64748b; font-size: 11px; }
.sla-print-meta { display: grid; grid-template-columns: auto auto; gap: 3px 12px; align-content: start; color: #475569; font-size: 9px; text-align: right; }
.sla-print-meta b { color: #0f172a; }
.sla-print-period { display: flex; gap: 18px; margin: 12px 0; padding: 7px 10px; border-left: 3px solid #1557a6; background: #eff6ff; color: #334155; }
.sla-print-period span:last-child { margin-left: auto; font-weight: 700; }
.sla-print-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; margin-bottom: 13px; }
.sla-print-card { min-height: 54px; padding: 8px; border: 1px solid #dbe4ef; border-radius: 5px; background: #f8fafc; }
.sla-print-card span, .sla-print-card small { display: block; color: #64748b; font-size: 8px; }
.sla-print-card strong { display: block; margin: 4px 0 2px; color: #0f172a; font-size: 16px; }
.sla-print-section { margin-top: 12px; }
.sla-print-section h2 { margin: 0 0 6px; color: #1e3a5f; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.sla-print-context { display: flex; flex-wrap: wrap; gap: 7px; }
.sla-print-context span { padding: 5px 9px; border: 1px solid #dbe4ef; border-radius: 4px; background: #f8fafc; }
.sla-print-report table { width: 100%; border-collapse: collapse; }
.sla-print-report th, .sla-print-report td { padding: 5px 7px; border: 1px solid #dbe4ef; text-align: left; }
.sla-print-report th { background: #eaf2fb; color: #334155; font-size: 8px; text-transform: uppercase; }
.sla-print-report td { color: #334155; }
.sla-print-report tbody tr:nth-child(even) { background: #f8fafc; }
.sla-print-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sla-print-footer { margin-top: 16px; padding-top: 7px; border-top: 1px solid #cbd5e1; color: #64748b; font-size: 8px; }
@media print {
body * { visibility: hidden !important; }
#slaReportPrintRoot, #slaReportPrintRoot * { visibility: visible !important; }
#slaReportPrintRoot { display: block !important; position: absolute !important; inset: 0; width: 100%; background: #fff !important; }
#slaReportPrintRoot .sla-print-report { width: 100%; }
.sla-print-section, .sla-print-card, .sla-print-columns { break-inside: avoid; page-break-inside: avoid; }
.sla-print-report thead { display: table-header-group; }
}
/* Dialog highlight animations */
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
|