/**
 * SIMFONI - simfoni.css
 * 
 * Main stylesheet untuk aplikasi SIMFONI ARSIP.
 * Berisi styling untuk layout, components, dan responsive design.
 * 
 * @filename    simfoni.css
 * @description Main stylesheet untuk SIMFONI dengan custom themes dan components
 * @author      Syams
 * @created     August 11, 2025
 * @license     SIMFONI Dual License (GPL v3 / Commercial)
 * @version     2.0
 * @project     SIMFONI - Sistem Informasi Monitoring dan Evaluasi Kearsipan
 */

/* Atur dasar layout agar halaman bisa di-scroll */
html, body {
  min-height: 100%;
  margin: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  background-color: var(--bg-page);
  background-image: linear-gradient(rgba(224, 242, 255, 0.3), rgba(224, 242, 255, 0.3)), url("../img/bg-simfoni.jpg");
  background-repeat: repeat;
  background-size: auto;
  background-position: top left;
}

/* === LOGIN PAGE STYLES === */
.form-floating {
    position: relative;
    margin-bottom: 1.5rem;
}

.form-floating input {
    border: 2px solid #e1e5e9;
    border-radius: 12px;
    padding: 1rem 1rem 1rem 3rem;
    transition: all 0.3s ease;
    background: rgba(248, 249, 250, 0.8);
    font-size: 1rem;
}

.form-floating input:focus {
    border-color: #4285f4;
    box-shadow: 0 0 0 0.2rem rgba(66, 133, 244, 0.25);
    background: white;
    transform: translateY(-2px);
}

.form-floating label {
    position: absolute;
    top: 50%;
    left: 3rem;
    transform: translateY(-50%);
    transition: all 0.3s ease;
    color: #6c757d;
    font-size: 1rem;
    pointer-events: none;
}

.form-floating input:focus + label,
.form-floating input:not(:placeholder-shown) + label {
    top: 0.5rem;
    left: 1rem;
    font-size: 0.8rem;
    color: #4285f4;
    background: white;
    padding: 0 0.5rem;
}

.input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    transition: color 0.3s ease;
    z-index: 1;
}

.form-floating input:focus ~ .input-icon {
    color: #4285f4;
}

.alert {
    border: none;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    animation: fadeInDown 0.5s ease-out;
}

.alert-success {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
    border-left: 4px solid #28a745;
}

.alert-danger {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    color: #721c24;
    border-left: 4px solid #dc3545;
}

.alert-warning {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    color: #856404;
    border-left: 4px solid #ffc107;
}

/* Login Animations */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Loading animation */
.btn-loading {
    position: relative;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    margin: auto;
    border: 2px solid transparent;
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* === END LOGIN PAGE STYLES === */

/* Wrapper fleksibel yang mengikuti tinggi konten */
.wrapper {
  margin: 40px auto 32px;   /* rongga bawah agar lapis bayangan terluar tak terpotong */
  max-width: 1600px;
  width: 100%;
  border-radius: var(--radius-wrapper);
  border: 1px solid var(--wrapper-border);
  /* Latar diserahkan ke kotak isi (lihat blok "Kotak isi" di bawah), yang
     memakai selubung tembus pandang. Kerangka atas sudah berlatar putih
     sendiri dan footer berlatar gelap, jadi tak ada bidang yang menganga. */
  background: transparent;
  overflow: hidden;
  box-shadow: var(--shadow-wrapper);
  display: flex;
  flex-direction: column; /* Mengatur arah flex menjadi kolom */
}

/* Selokan samping. Tanpa ini kerangka menempel ke tepi jendela pada layar di
   bawah 1600px — yaitu hampir semua layar — sehingga garis tepi dan bayangan
   sisinya terpotong dan sia-sia. Di bawah 768px selokan dilepas: di layar
   sempit setiap piksel lebar lebih berharga daripada bingkai. */
@media (min-width: 768px) {
  .wrapper { width: calc(100% - 3rem); }
}

/* ── Kotak isi: selubung tembus pandang + arus warna ──────────────────────
   Bidang isi tidak lagi putih legap. Ia memakai selubung gradien tembus
   pandang sehingga corak batik pada latar <body> ikut terbaca samar, dan di
   BALIK selubung itu dua bidang warna melayang perlahan sebagai aurora.

   Susunan lapisannya sengaja dipilih agar tidak ada konteks penumpukan baru:
   kedua pseudo-element memakai `z-index: -1` pada induk yang hanya
   `position: relative` (tanpa `isolation`/`transform`), jadi `.container-fluid`
   TIDAK menjadi stacking context. Ini penting — modal Bootstrap (z-index 1055)
   hidup di dalam kotak isi, sedangkan kerangka atas yang menempel memakai
   z-index 1030; begitu kotak isi menjadi konteks sendiri, modal akan terkurung
   dan tampil DI BAWAH navbar.

   Efek sampingnya: arus warna dilukis lebih dulu daripada latar blok induknya,
   jadi ia memang terlihat DARI BALIK selubung — bukan di atasnya. Karena itu
   alfanya dibuat relatif tinggi di tokens.css; yang sampai ke mata tinggal
   sisa yang lolos selubung. */
.wrapper > .container-fluid {
  position: relative;
  background: linear-gradient(180deg,
              var(--content-veil-top) 0%,
              var(--content-veil-bottom) 100%);
}

.wrapper > .container-fluid::before,
.wrapper > .container-fluid::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  /* Gradien radial sudah punya tepi yang lembut; `filter: blur()` di atasnya
     hanya menambah beban lukis tanpa menambah keindahan. */
  background-repeat: no-repeat;
}

.wrapper > .container-fluid::before {
  top: -18%;
  left: -12%;
  width: 68%;
  height: 92%;
  background-image: radial-gradient(closest-side circle,
                    var(--content-arus-biru) 0%, transparent 100%);
  animation: simfoni-arus-a 38s ease-in-out infinite alternate;
}

.wrapper > .container-fluid::after {
  right: -14%;
  bottom: -22%;
  width: 74%;
  height: 96%;
  background-image:
    radial-gradient(closest-side circle,
      var(--content-arus-toska) 0%, transparent 100%),
    radial-gradient(closest-side circle at 72% 28%,
      var(--content-arus-ungu) 0%, transparent 100%);
  animation: simfoni-arus-b 52s ease-in-out infinite alternate;
}

/* Hanya transform yang dianimasikan — tidak ada properti yang memicu tata
   letak ulang, dan peramban dapat memindahkan kedua bidang ke lapisan
   komposit sendiri. */
@keyframes simfoni-arus-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(14%, 10%, 0) scale(1.22); }
}

@keyframes simfoni-arus-b {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(-16%, -12%, 0) scale(0.92); }
}

/* Gerak lambat sekalipun tetap gerak. Yang meminta diam, diberi diam — arus
   warnanya tetap ada, hanya membeku di posisi awal. */
@media (prefers-reduced-motion: reduce) {
  .wrapper > .container-fluid::before,
  .wrapper > .container-fluid::after {
    animation: none;
  }
}

/* Di atas kertas selubung dan arus warna hanya memboroskan tinta. */
@media print {
  .wrapper > .container-fluid {
    background: #fff;
  }
  .wrapper > .container-fluid::before,
  .wrapper > .container-fluid::after {
    display: none;
  }
}

/* Header Image */
.header-image {
  max-height: 150px;
  object-fit: cover;
  border-top-left-radius: var(--radius-wrapper);
  border-top-right-radius: var(--radius-wrapper);
}

/* ── Kerangka atas yang menempel ──────────────────────────────────────────
   Banner, navbar, dan pita pengumuman tinggal di puncak layar; hanya isi
   halaman dan footer yang bergulir di baliknya.

   `.wrapper` memasang `overflow: hidden` agar sudut membulatnya terpotong
   rapi. Efek sampingnya: ia MEMBUAT KONTEKS GULIR, dan `position: sticky` di
   dalamnya berhenti bekerja. `clip` memberi pemotongan yang persis sama TANPA
   membuat konteks gulir. Peramban yang belum mengenal `clip` mengabaikan blok
   ini dan kembali ke perilaku menggulir seperti sebelumnya — halaman tetap
   utuh, hanya kerangka atasnya ikut tergulir. */
@supports (overflow: clip) {
  .wrapper { overflow: clip; }
}

.wrapper > header {
  position: sticky;
  top: 0;
  z-index: 1030;            /* setara .sticky-top Bootstrap: di atas isi */
  background-color: #fff;   /* penutup, agar isi tak membayang di baliknya */
}

/* Tinggi kerangka atas diukur app.js ke --simfoni-header-h. Dipakai di sini
   agar tautan jangkar (#id) dan scrollIntoView() berhenti DI BAWAH header,
   bukan di baliknya. Nilai cadangan 0px berlaku sebelum skrip berjalan. */
html {
  scroll-padding-top: var(--simfoni-header-h, 0px);
}

/* Di layar kecil menu dinamis bisa lebih tinggi daripada layar. Karena
   kerangka atas kini tidak ikut tergulir, menu yang terbuka harus menggulir
   sendiri — kalau tidak, butir terbawahnya mustahil dijangkau. */
@media (max-width: 991.98px) {
  .wrapper > header .navbar-collapse {
    max-height: calc(100vh - var(--simfoni-header-h, 0px) - 1rem);
    overflow-y: auto;
  }
}

/* Di atas kertas tidak ada yang menggulir; header yang menempel justru
   menumpuk di setiap halaman cetak. */
@media print {
  .wrapper > header { position: static; }
}

/* Navbar */
.navbar {
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
}

.navbar .nav-link {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
  font-size: 0.95rem;
  color: #fff !important;
}

.navbar-dark {
  background-color: var(--navbar-bg);
}

.dropdown-menu {
  background-color: var(--dropdown-bg);
}

/* Hanya submenu dropdown, warna teks biru navy */
.dropdown-menu .dropdown-item {
  color: var(--dropdown-fg) !important; /* navy */
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: var(--dropdown-hv) !important;
  color: #0a2857 !important; /* lebih gelap waktu hover (opsional) */
}


/* Main Content Area */
main {
  flex: 1; /* Memastikan main mengambil ruang yang tersedia */
  position: relative;
  z-index: 2;
}

main > * {
  margin: 0; /* Menghapus margin pada semua elemen langsung di dalam main */
}

/* Footer Background Container */
.footer-banner-container {
  position: relative;
  width: 100%;
  height: 85px; /* Tinggi tetap untuk latar belakang footer */
  z-index: 0;
}

.footer-banner-container::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 85px;
  background: url("../img/bg-footer.jpg") no-repeat center bottom;
  background-size: contain;
  z-index: 0;
  opacity: 0.6;
}

/* Footer */
footer {
  flex-shrink: 0; /* Mencegah footer menyusut */
  position: relative;
  z-index: 1;
  margin: 0; /* Menghapus margin untuk memastikan tidak ada jarak */
  padding: 0.5rem 0; /* Menambahkan padding untuk footer */
}

.form-control-sm, 
select.form-control-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
  height: calc(1.5em + 0.5rem + 2px);
}

/* Make specific selects smaller */
#tahunSelect {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
  height: calc(1.5em + 0.5rem + 2px);
}

.simfoni-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/* ===========================
   RHAS (Risalah Hasil Audit Kearsipan Internal Sementara) Styling
   =========================== */

/* RHAS Container */
.rhas-container {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.rhas-header {
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 20px;
}

.rhas-title {
    font-size: 18px;
    font-weight: bold;
    color: #1f2937;
    margin-bottom: 5px;
}

.rhas-subtitle {
    color: #6b7280;
    margin: 2px 0;
}

/* RHAS Statistik Box - UK (Biru) */
.statistik-box.uk {
    background: var(--grad-uk);
    color: white;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 25px;
}

/* RHAS Statistik Box - UP (Hijau) */
.statistik-box.up {
    background: var(--grad-up);
    color: white;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 25px;
}

/* Default statistik box (fallback) */
.statistik-box {
    background: var(--grad-uk);
    color: white;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 25px;
}

.aspek-section {
    margin-bottom: 35px;
}

/* RHAS Aspek Header - UK (Biru) */
.aspek-header.uk {
    background: #f8fafc;
    border-left: 4px solid #3b82f6;
    padding: 15px 20px;
    margin-bottom: 15px;
    font-weight: 600;
    color: #1e40af;
}

/* RHAS Aspek Header - UP (Hijau) */
.aspek-header.up {
    background: #f0fdf4;
    border-left: 4px solid #16a34a;
    padding: 15px 20px;
    margin-bottom: 15px;
    font-weight: 600;
    color: #15803d;
}

/* Default aspek header (fallback) */
.aspek-header {
    background: #f8fafc;
    border-left: 4px solid #3b82f6;
    padding: 15px 20px;
    margin-bottom: 15px;
    font-weight: 600;
    color: #1e40af;
}

/* RHAS Sub Aspek Header - UK */
.sub-aspek-header.uk {
    background: #f1f5f9;
    padding: 12px 18px;
    margin: 15px 0 10px 0;
    font-weight: 500;
    color: #475569;
    border-radius: 6px;
}

/* RHAS Sub Aspek Header - UP */
.sub-aspek-header.up {
    background: #f7fee7;
    padding: 12px 18px;
    margin: 15px 0 10px 0;
    font-weight: 500;
    color: #365314;
    border-radius: 6px;
}

/* Default sub aspek header (fallback) */
.sub-aspek-header {
    background: #f1f5f9;
    padding: 12px 18px;
    margin: 15px 0 10px 0;
    font-weight: 500;
    color: #475569;
    border-radius: 6px;
}

.instrumen-row {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 10px;
    overflow: hidden;
}

.instrumen-header {
    background: #fafbfc;
    padding: 12px 15px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.instrumen-content {
    padding: 15px;
}

/* RHAS Level Badges */
.level-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.level-0 { background: var(--level-0-bg); color: var(--level-0-fg); }
.level-1 { background: var(--level-1-bg); color: var(--level-1-fg); }
.level-2 { background: var(--level-2-bg); color: var(--level-2-fg); }
.level-3 { background: var(--level-3-bg); color: var(--level-3-fg); }
.level-4 { background: var(--level-4-bg); color: var(--level-4-fg); }
.level-5 { background: var(--level-5-bg); color: var(--level-5-fg); }

/* RHAS Status Colors */
.status-draft { color: #d97706; }
.status-submitted { color: #2563eb; }
.status-reviewed { color: #16a34a; }

/* RHAS Form Focus - UK */
.form-control.uk:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* RHAS Form Focus - UP */
.form-control.up:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Default form focus untuk RHAS */
.rhas-container .form-control:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* RHAS Print Styles */
@media print {
    .no-print { 
        display: none !important; 
    }
    .rhas-container { 
        box-shadow: none; 
        padding: 20px;
    }
    .rhas-header {
        border-bottom: 2px solid #000;
    }
    .statistik-box {
        background: #f8f9fa !important;
        color: #000 !important;
        border: 1px solid #000;
    }
    .level-badge {
        border: 1px solid #000;
    }
}

/* === USER AVATAR SYSTEM === */
.user-avatar {
    border: 2px solid rgba(255,255,255,0.8);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.user-avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.user-avatar-placeholder {
    background: var(--grad-placeholder) !important;
    color: white !important;
    font-weight: bold;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Size variants */
.user-avatar-tiny { 
    width: 24px; 
    height: 24px; 
    font-size: 10px;
}

.user-avatar-small { 
    width: 32px; 
    height: 32px; 
    font-size: 12px;
}

.user-avatar-medium { 
    width: 48px; 
    height: 48px; 
    font-size: 18px;
}

.user-avatar-large { 
    width: 64px; 
    height: 64px; 
    font-size: 24px;
}

.user-avatar-xlarge { 
    width: 80px; 
    height: 80px; 
    font-size: 30px;
}

/* Context-specific styling */
.user-table-avatar { 
    margin-right: 12px; 
    vertical-align: middle; 
    border: 2px solid #e9ecef;
}

.message-sender-avatar { 
    margin-right: 10px; 
    flex-shrink: 0;
    border: 2px solid #dee2e6;
}

.assignment-avatar { 
    margin-right: 12px; 
    vertical-align: middle;
    border: 2px solid #28a745;
    border-width: 1px;
}

.activity-user-avatar { 
    margin-right: 8px; 
    vertical-align: middle; 
    border-width: 1px;
}

.context-switcher-avatar {
    margin-right: 8px;
    vertical-align: middle;
    border-width: 1px;
}

/* Group avatars */
.user-group-avatars {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.user-group-avatars .user-avatar {
    position: relative;
    margin-left: -8px;
}

.user-group-avatars .user-avatar:first-child {
    margin-left: 0;
}

.user-avatar-more {
    background: #6c757d !important;
    color: white !important;
    font-weight: bold;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Message avatar specific */
.message-item {
    display: flex;
    align-items: flex-start;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
}

.message-item:hover {
    background-color: rgba(0,123,255,0.05);
}

.message-content {
    flex: 1;
    min-width: 0;
}

.message-meta {
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 4px;
}

/* User table enhancements */
.user-table-row {
    display: flex;
    align-items: center;
    padding: 8px 0;
}

.user-info {
    display: flex;
    align-items: center;
    flex: 1;
}

.user-details {
    flex: 1;
    min-width: 0;
}

.user-name {
    font-weight: 500;
    margin-bottom: 2px;
}

.user-role {
    font-size: 0.85rem;
    color: #6c757d;
}

/* Activity log enhancements */
.activity-log-item {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    border-left: 3px solid transparent;
    margin-bottom: 4px;
    border-radius: 0 4px 4px 0;
}

.activity-log-item.login {
    border-left-color: #28a745;
    background-color: rgba(40, 167, 69, 0.05);
}

.activity-log-item.logout {
    border-left-color: #dc3545;
    background-color: rgba(220, 53, 69, 0.05);
}

.activity-log-item.update {
    border-left-color: #17a2b8;
    background-color: rgba(23, 162, 184, 0.05);
}

.activity-content {
    flex: 1;
    margin-left: 8px;
}

.activity-time {
    font-size: 0.75rem;
    color: #6c757d;
    margin-left: auto;
    white-space: nowrap;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .user-avatar-medium {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .user-avatar-large {
        width: 56px;
        height: 56px;
        font-size: 22px;
    }
    
    .user-table-avatar {
        margin-right: 8px;
    }
    
    .user-group-avatars .user-avatar {
        margin-left: -4px;
    }
    
    .message-sender-avatar {
        margin-right: 8px;
    }
}

/* Animation for avatar loading */
@keyframes avatarFadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.user-avatar {
    animation: avatarFadeIn 0.3s ease-out;
}

/* Profile photo tooltip */
.avatar-tooltip {
    position: relative;
}

.avatar-tooltip:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 4px;
}

.avatar-tooltip:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: rgba(0,0,0,0.8);
    z-index: 1000;
}