/* Sistem Monitoring CASN - Custom Styles */
/* PT. Automata Info Nusantara */

:root {
    --primary: #2563EB;
    --primary-dark: #1D4ED8;
    --primary-light: #DBEAFE;
    --bg-main: #F9FAFB;
    --text-main: #1F2937;
    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;
    --sidebar-w: 260px;
    --header-h: 64px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: var(--bg-main); color: var(--text-main); position: relative; min-height: 100vh; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes pulse-slow { 0%,100% { opacity: 0.4; } 50% { opacity: 0.7; } }
@keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.animate-fadeIn { animation: fadeIn 0.4s ease-out; }
.animate-slideIn { animation: slideIn 0.3s ease-out; }
.animate-scaleIn { animation: scaleIn 0.3s ease-out; }
.animate-shake { animation: shake 0.3s ease-in-out; }
.animate-pulse-slow { animation: pulse-slow 4s ease-in-out infinite; }

.stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.3s; }

.sidebar { width: var(--sidebar-w); transition: transform 0.3s ease; }
.sidebar.collapsed { transform: translateX(-100%); }
.sidebar .nav-item { transition: all 0.2s ease; position: relative; }
.sidebar .nav-item:hover { background: rgba(37, 99, 235, 0.08); }
.sidebar .nav-item.active { background: rgba(37, 99, 235, 0.1); color: var(--primary); border-left: 3px solid var(--primary); }

.submenu-container { overflow: hidden; max-height: 0; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.submenu-container.open { max-height: 500px; }
.submenu-toggle .submenu-arrow { transition: transform 0.3s ease; }
.submenu-toggle.expanded .submenu-arrow { transform: rotate(180deg); }
.submenu-item { padding-left: 2.75rem; position: relative; }
.submenu-item:hover { background: rgba(37, 99, 235, 0.06); }
.submenu-item.active { background: rgba(37, 99, 235, 0.1); color: var(--primary); border-left: 3px solid var(--primary); }

.main-content { margin-left: var(--sidebar-w); padding-top: var(--header-h); transition: margin-left 0.3s ease; min-height: 100vh; }
.main-content.expanded { margin-left: 0; }
.app-header { height: var(--header-h); left: var(--sidebar-w); transition: left 0.3s ease; }
.app-header.expanded { left: 0; }
.stat-card { transition: all 0.3s ease; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1); }

.data-table { border-collapse: separate; border-spacing: 0; }
.data-table thead th { position: sticky; top: 0; z-index: 10; }
.data-table tbody tr { transition: background 0.15s ease; }
.data-table tbody tr:hover { background: #F1F5F9; }

.modal-overlay { transition: opacity 0.2s ease; }
.modal-content { transition: transform 0.2s ease, opacity 0.2s ease; }
.modal-overlay.active { opacity: 1; pointer-events: all; }
.modal-overlay.active .modal-content { transform: scale(1); opacity: 1; }
.upload-area { border: 2px dashed #CBD5E1; transition: all 0.3s ease; }
.upload-area:hover, .upload-area.dragover { border-color: var(--primary); background: var(--primary-light); }
.notif-badge { animation: pulse-slow 2s ease-in-out infinite; }

/* Login Success Animation */
@keyframes checkCircle { 0%{stroke-dashoffset:300}100%{stroke-dashoffset:0} }
@keyframes checkMark { 0%{stroke-dashoffset:50}100%{stroke-dashoffset:0} }
@keyframes successPop { 0%{transform:scale(.5);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1} }
@keyframes successTxt { 0%{opacity:0;transform:translateY(15px)}100%{opacity:1;transform:translateY(0)} }
@keyframes rippleOut { 0%{transform:scale(0);opacity:.5}100%{transform:scale(4);opacity:0} }

.login-success-overlay { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.95); backdrop-filter:blur(20px); }
.login-success-content { text-align:center; animation:successPop .6s cubic-bezier(.34,1.56,.64,1) forwards; }
.checkmark-svg { width:100px; height:100px; margin:0 auto 1.5rem; }
.checkmark-circle { stroke:#10B981; stroke-width:3; fill:none; stroke-dasharray:300; stroke-dashoffset:300; animation:checkCircle .8s ease-in-out .2s forwards; }
.checkmark-check { stroke:#10B981; stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:50; stroke-dashoffset:50; animation:checkMark .4s ease-in-out .8s forwards; }
.login-success-text { font-size:1.5rem; font-weight:700; background:linear-gradient(135deg,#10B981,#059669); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:successTxt .5s ease-out 1s both; }
.login-success-sub { font-size:.875rem; color:#6B7280; margin-top:.5rem; animation:successTxt .5s ease-out 1.2s both; }
.login-ripple { position:absolute; width:100px; height:100px; border-radius:50%; background:rgba(16,185,129,.2); animation:rippleOut 1s ease-out forwards; }

/* Documentation Folder */
.folder-card { transition: all 0.3s ease; }
.folder-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px -5px rgba(0,0,0,0.1); }
.folder-accordion { overflow:hidden; max-height:0; transition:max-height .4s cubic-bezier(.4,0,.2,1); }
.folder-accordion.open { max-height:none; overflow:visible; }
.folder-toggle .folder-arrow { transition:transform .3s ease; }
.folder-toggle.expanded .folder-arrow { transform:rotate(180deg); }
.doc-category-tab { transition:all .2s ease; cursor:pointer; }
.doc-category-tab.active { border-color:var(--primary); color:var(--primary); background:var(--primary-light); }
.doc-category-tab:hover:not(.active) { border-color:#94A3B8; }

/* =============================== */
/* BA Detail - Clean & Neat        */
/* =============================== */

.ba-detail-modal { border-radius:1.25rem; overflow:hidden; box-shadow:0 25px 50px -12px rgba(0,0,0,.15); }

/* Simple Header */
.ba-detail-header {
    display:flex; align-items:center; justify-content:space-between; padding:1.25rem 1.5rem;
    border-bottom:1px solid #F3F4F6; background:#FAFBFF;
}
.ba-detail-header .ba-header-content { flex:1; min-width:0; }
.ba-detail-header .ba-header-badge {
    display:inline-block; padding:.2rem .6rem; background:#EEF2FF; color:#4F46E5;
    border-radius:.375rem; font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.375rem;
}
.ba-detail-header h3 { font-size:1.05rem; font-weight:700; color:#1F2937; line-height:1.35; margin:0; }
.ba-detail-header .ba-header-sub { font-size:.75rem; color:#9CA3AF; margin-top:.125rem; }
.ba-detail-header .ba-close-btn {
    width:2rem; height:2rem; display:flex; align-items:center; justify-content:center;
    background:#F3F4F6; border-radius:.5rem; color:#6B7280; cursor:pointer; transition:all .2s ease; flex-shrink:0; border:none;
}
.ba-detail-header .ba-close-btn:hover { background:#E5E7EB; color:#374151; }
.ba-header-pengawas { text-align:right; flex-shrink:0; margin-right:.75rem; }
.ba-header-pengawas .pengawas-label { font-size:.55rem; color:#94A3B8; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.ba-header-pengawas .pengawas-name { font-size:.8rem; font-weight:700; color:#1E293B; margin-top:.125rem; }
.ba-header-pengawas .pengawas-phone { font-size:.7rem; color:#6B7280; margin-top:.125rem; }

/* Body */
.ba-detail-body { padding:1.5rem; background:#FAFBFC; }

/* Info Grid */
.ba-detail-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:.625rem; margin-bottom:1.25rem;
}
.ba-detail-item {
    padding:.875rem 1rem; background:white; border-radius:.875rem; border:1px solid #EEF2F7;
    transition:all .2s ease; position:relative; overflow:hidden;
}
.ba-detail-item::before {
    content:''; position:absolute; top:0; left:0; width:3px; height:100%;
    background:var(--primary); border-radius:0 2px 2px 0; opacity:0; transition:opacity .2s ease;
}
.ba-detail-item:hover { border-color:#DBEAFE; box-shadow:0 2px 8px rgba(37,99,235,.06); }
.ba-detail-item:hover::before { opacity:1; }
.ba-detail-label { font-size:.6rem; color:#94A3B8; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.375rem; }
.ba-detail-value { font-size:.85rem; font-weight:700; color:#1E293B; line-height:1.4; }
.ba-detail-sub { font-size:.7rem; color:#94A3B8; margin-top:.25rem; line-height:1.3; }

/* Section Headers */
.ba-detail-section { margin-bottom:1.5rem; }
.ba-detail-section-title {
    font-size:.7rem; font-weight:800; color:#475569; text-transform:uppercase; letter-spacing:.08em;
    margin-bottom:.75rem; padding-bottom:.625rem; border-bottom:2px solid #EEF2F7;
    display:flex; align-items:center; gap:.5rem;
}
.ba-detail-section-title::before {
    content:''; width:3px; height:16px; background:var(--primary);
    border-radius:2px; flex-shrink:0;
}

/* Photo Grid */
.ba-foto-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:.625rem; }
.ba-foto-item {
    border-radius:.875rem; overflow:hidden; aspect-ratio:4/3; border:2px solid #EEF2F7;
    transition:all .3s ease; position:relative; cursor:pointer;
}
.ba-foto-item:hover { border-color:#93C5FD; box-shadow:0 6px 20px rgba(37,99,235,.1); transform:translateY(-2px); }
.ba-foto-item img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.ba-foto-item:hover img { transform:scale(1.08); }

/* Personnel List */
.ba-personnel-list { display:flex; flex-direction:column; gap:.5rem; }
.ba-personnel-card {
    background:white; border:1px solid #EEF2F7; border-radius:.75rem; padding:.625rem .875rem;
    display:flex; align-items:center; gap:.75rem; transition:all .2s ease;
}
.ba-personnel-card:hover { border-color:#DBEAFE; box-shadow:0 2px 8px rgba(37,99,235,.06); }
.ba-personnel-avatar {
    width:2rem; height:2rem; border-radius:.5rem; display:flex; align-items:center; justify-content:center;
    color:white; font-size:.6rem; font-weight:800; flex-shrink:0;
}
.ba-personnel-info { flex:1; min-width:0; }
.ba-personnel-name { font-size:.8rem; font-weight:600; color:#1E293B; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ba-personnel-role { font-size:.6rem; color:#94A3B8; font-weight:500; }
.ba-personnel-phone {
    display:inline-flex; align-items:center; padding:.25rem .5rem;
    background:#F1F5F9; color:#475569; border-radius:.375rem; font-size:.65rem; font-weight:500;
    text-decoration:none; flex-shrink:0; transition:all .2s ease;
}
.ba-personnel-phone:hover { background:#E2E8F0; color:#1E293B; }

/* Action Footer */
.ba-detail-actions {
    display:flex; gap:.75rem; justify-content:flex-end; padding-top:1.25rem; margin-top:1.25rem;
    border-top:1px solid #EEF2F7;
}
.ba-btn { padding:.625rem 1.25rem; font-size:.8rem; font-weight:600; border-radius:.75rem; border:none; cursor:pointer; transition:all .2s ease; }
.ba-btn:active { transform:scale(.97); }
.ba-btn-reject { background:#FEF2F2; color:#DC2626; border:1px solid #FECACA; }
.ba-btn-reject:hover { background:#FEE2E2; }
.ba-btn-approve { background:#059669; color:white; }
.ba-btn-approve:hover { background:#047857; }

/* Download Button */
.ba-download-btn {
    width:100%; padding:.625rem; border:none; cursor:pointer; font-size:.8rem; font-weight:600; color:white;
    background:var(--primary); border-radius:.75rem; display:flex; align-items:center;
    justify-content:center; gap:.5rem; transition:all .2s ease; margin-top:.75rem;
}
.ba-download-btn:hover { background:var(--primary-dark); }


@media (max-width:640px) { .ba-detail-grid { grid-template-columns:1fr 1fr; } .ba-detail-body { padding:1rem; } }

@media (max-width: 1024px) {
    .sidebar { position: fixed; z-index: 50; transform: translateX(-100%); }
    .sidebar.mobile-open { transform: translateX(0); }
    .main-content, .main-content.expanded { margin-left: 0; }
    .app-header, .app-header.expanded { left: 0; }
}

@media print {
    .sidebar, .app-header, .no-print { display: none !important; }
    .main-content { margin-left: 0 !important; padding-top: 0 !important; }
}