/* =========================================================
   GLOBAL RESET
========================================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

/* =========================================================
   BACKGROUND + BLUR OVERLAY
========================================================= */
body {
  background: url("bg.jpg") center/cover no-repeat fixed;
  min-height: 100vh;
  position: relative;
  overflow-y: scroll; /* scroll modern ada di body */
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(11px);
  z-index: 0;
  pointer-events: none;
}

/* =========================================================
   MODERN SCROLLBAR
========================================================= */
body::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.main-content::-webkit-scrollbar {
  width: 7px;
}

body::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.main-content::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
}

body::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track,
.main-content::-webkit-scrollbar-track {
  background: transparent;
}

/* =========================================================
   LOGIN PAGE (FULL FIX)
========================================================= */

.login-page {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1002; /* harus lebih tinggi dari overlay blur */
}

.login-box {
  width: 340px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
  padding: 35px 30px;
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.20);
  position: relative;
  z-index: 1003; /* aman tidak tertutup overlay */
}

/* Judul */
.login-box h2 {
  margin-bottom: 18px;
  color: #004aad;
  font-weight: 700;
  font-size: 22px;
}

/* Input & Select */
.login-box input,
.login-box select {
  width: 100%;
  padding: 12px;
  margin: 8px 0 12px 0;
  border-radius: 10px;
  border: 1px solid #cfcfcf;
  background: white;
  font-size: 14px;
}

/* Tombol Login */
.login-box button {
  width: 100%;
  padding: 12px;
  border: none;
  background: #004aad;
  color: white;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  font-size: 15px;
  transition: 0.2s;
}

.login-box button:hover {
  background: #00398a;
}

.login-box p {
  margin-top: 10px;
  font-size: 14px;
}

.login-box a {
  color: #004aad;
  font-weight: 600;
  text-decoration: none;
}

.login-box a:hover {
  text-decoration: underline;
}

/* Error text */
.error {
  color: red;
  font-size: 13px;
  margin-top: 5px;
}

/* Requirement container full width */
#requirementContainer {
  width: 100% !important;
  max-width: 100% !important;
  background: rgba(255,255,255,0.9);
  padding: 25px;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  backdrop-filter: blur(6px);
}

/* Profil container */
.profile-container {
  width: 100% !important;
  max-width: 100% !important;
  background: rgba(255,255,255,0.9);
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  backdrop-filter: blur(6px);
}

/* Panduan */
#panduanContent {
  width: 100% !important;
}

#panduanContent iframe {
  width: 100% !important;
  min-height: 750px !important;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(4px);
}

/* memastikan tab-content melebar dengan benar */
.tab-content {
  width: 100% !important;
  max-width: 100% !important;
}

/* card style umum biar match tampilan Kehadiran */
.tab-content table,
.tab-content .table-card,
.tab-content .upload-container {
  border-radius: 20px !important;
  background: rgba(255,255,255,0.9) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

/* --- MOBILE --- */
@media (max-width: 600px) {
  .login-box {
    width: 88%;
    padding: 28px 20px;
    border-radius: 16px;
  }

  .login-box h2 {
    font-size: 20px;
  }
}


/* =========================================================
   SIDEBAR
========================================================= */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100vh;
  background: linear-gradient(to bottom, #004aad, #0074f1);
  color: white;
  z-index: 1000;
  padding-top: 20px;
  overflow-y: auto;
  border-right: 1px solid rgba(255,255,255,0.15);
}

.sidebar .profile {
  display: flex;
  align-items: center;
  padding: 0 18px 25px 18px;
  gap: 12px;
}

.profile-pic {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
}

.username-display {
  margin-top: 2px;
  font-weight: 600;
  font-size: 14px;
  color: white;
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px;
  padding-bottom: 100px;
}

.sidebar button,
.sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s;
}

.sidebar button:hover {
  background: rgba(255,255,255,0.12);
}

.logout {
  margin-top: 20px;
  background: rgba(255,255,255,0.15);
  font-weight: 600;
}

/* =========================================================
   MAIN CONTENT
========================================================= */
.main-content {
  position: relative;
  z-index: 1;
  margin-left: 260px;
  padding: 35px 40px;
  min-height: 100vh;
}

/* Global Title Style */
.tab-content h1 {
  font-size: 28px;
  font-weight: 700;
  color: #004aad;
  margin-bottom: 22px;
}

/* =========================================================
   UNIVERSAL CARD CONTAINER (Rounded & Shadow)
========================================================= */
.table-card,
.upload-container,
#materiList,
#requirementContainer,
.announcement-list,
.profile-container,
.general-container,
.tab-content table {
  background: rgba(255,255,255,0.92);
  padding: 22px;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  margin-top: 15px;
  backdrop-filter: blur(6px);
}

/* Extra: biar semua container fullscreen sesuai lebar */
.tab-content > .table-card,
.tab-content > table,
.general-container {
  width: 100%;
}

/* =========================================================
   TABLE - FULL WIDTH + ROUNDED + SHADOW
========================================================= */

.tab-content table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 4px 18px rgba(0,0,0,0.12);
}

th {
  padding: 14px;
  background: #004aad;
  color: white;
  font-weight: 600;
  font-size: 15px;
  border-right: 1px solid rgba(255,255,255,0.15);
}

td {
  padding: 14px 10px;
  background: rgba(255,255,255,0.85);
  border-bottom: 1px solid #e5e5e5;
}

/* Memberi efek zebra halus */
tr:nth-child(even) td {
  background: rgba(255,255,255,0.75);
}

/* Biar tabel tidak mepet kiri */
.tab-content table {
  margin-top: 20px;
}

/* ===============================================
   INPUT & SELECT DI DALAM TABLE
================================================ */
td input,
td select {
  width: 95%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #cfcfcf;
  font-size: 14px;
  background: #ffffff;
  transition: border 0.2s;
}

td input:focus,
td select:focus {
  border: 1px solid #0074f1;
  outline: none;
}

td input[type="date"] {
  padding-right: 6px;
}

/* =========================================================
   BUTTONS (Global)
========================================================= */
button,
.btn-verif {
  background: #004aad;
  color: white;
  padding: 10px 18px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.2s;
}

button:hover,
.btn-verif:hover {
  background: #00398a;
}

/* Tombol ajukan */
td button {
  padding: 8px 14px;
}

/* Catat Kehadiran seragam */
#generateQR {
  margin-bottom: 18px;
  background: #004aad !important;
}

/* =========================================================
   JOURNAL READING — FIX BERANTAKAN
========================================================= */
.upload-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.upload-container label {
  font-weight: 600;
  margin-bottom: 4px;
}

.upload-container input[type="file"] {
  padding: 10px;
  border-radius: 10px;
  background: white;
  border: 1px solid #bfbfbf;
  width: 100%;
}

/* =========================================================
   MATERI KEPANITERAN
========================================================= */
#materiList {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
}

#materiList li {
  background: rgba(255,255,255,0.95);
  padding: 18px 20px;
  border-radius: 16px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#materiList li button {
  padding: 9px 16px;
  border-radius: 12px;
  background: #004aad;
  color: white;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
#materiList li button:hover {
  background: #00398a;
}

/* =========================================================
   REQUIREMENT FOLDER (FULL FIX)
========================================================= */
#requirementContainer {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.req-folder {
  background: rgba(255,255,255,0.95);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.12);
}

.folder-header {
  background: #004aad;
  color: white;
  padding: 18px 20px;
  font-weight: 700;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.folder-header:hover {
  background: #00398a;
}

.folder-content {
  padding: 22px;
  background: rgba(255,255,255,0.9);
}

.folder-section {
  margin-bottom: 22px;
  padding-top: 10px;
  border-top: 1px dashed #cccccc;
}

.folder-section h4 {
  margin-bottom: 10px;
  color: #004aad;
  font-weight: 700;
  font-size: 15px;
}

.folder-section label {
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
  font-size: 14px;
}

.folder-section input,
.folder-section select {
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid #cfcfcf;
  margin-bottom: 10px;
}

/* ---- Grid Data Pasien ---- */
.folder-section.data-pasien {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 26px;
  padding-top: 25px;
  border-top: none;
  background: rgba(255,255,255,0.92);
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

.folder-section.data-pasien h4 {
  grid-column: 1 / -1;
  padding-bottom: 4px;
  margin-bottom: 10px;
  border-bottom: 2px solid #004aad;
}

/* =========================================================
   PROFIL MAHASISWA
========================================================= */
.profile-container {
  background: rgba(255,255,255,0.92);
  padding: 26px;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  margin: 0 auto;
  max-width: 620px;
}

.profile-photo {
  text-align: center;
  margin-bottom: 12px;
}

.profile-photo img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 3px solid #dddddd;
  object-fit: cover;
}

#btnUploadPhoto {
  margin-top: 10px;
  background: #004aad;
  padding: 8px 16px;
  border-radius: 10px;
  color: white;
  font-weight: 600;
}
#btnUploadPhoto:hover {
  background: #00398a;
}

/* Profil's form fields */
.profile-info label {
  font-weight: 700;
  margin-top: 14px;
  display: block;
  margin-bottom: 5px;
}

.profile-info input,
.profile-info select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cfcfcf;
  border-radius: 10px;
  background: white;
  font-size: 14px;
}

.profile-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}

.profile-actions button {
  padding: 10px 18px;
  border-radius: 12px;
  font-weight: 600;
}

/* =========================================================
   PANDUAN DEPARTEMEN
========================================================= */
#panduanContent iframe {
  width: 100%;
  height: 800px;
  border: none;
  border-radius: 16px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.12);
  margin-top: 15px;
}

td:first-child {
  white-space: nowrap;       
  width: 120px;              
  max-width: 120px;
}

/* === Requirement full width === */
#requirementContent .req-folder {
  width: 100%;
  max-width: 100%;
  border-radius: 18px;
}

#requirementContent #requirementContainer {
  width: 100%;
  max-width: 100%;
}

/* === Panduan full width === */
#panduanContent {
  width: 100%;
}

#panduanContent iframe {
  width: 100% !important;
  max-width: 100%;
  height: 85vh;           
}

.main-content {
  width: calc(100% - 260px);
  max-width: 100%;
}

/* ============================================================
   FIX REQUIREMENT → FULL WIDTH + ROUNDED SESUAI PAGE LAIN
============================================================ */

#requirementContent {
    width: 100%;
}

#requirementContainer {
    width: 100% !important;
    max-width: 100% !important;
}

.req-folder {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px !important;
}


/* ============================================================
   FIX PROFIL → LEBAR 100% TAPI TETAP RAPI (TIDAK 600PX LAGI)
============================================================ */

#profileContent .profile-container {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px !important;
    padding: 25px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    background: rgba(255,255,255,0.9);
}


/* Foto profil tetap kecil */
#profileContent .profile-photo img {
    width: 140px;
    height: 140px;
}

/* Input tetap full */
#profileContent .profile-info input,
#profileContent .profile-info select {
    width: 100% !important;
}


/* ============================================================
   FIX AGAR SECTION DALAM MAIN-CONTENT FULL WIDTH
============================================================ */

.main-content .tab-content {
    width: 100% !important;
    max-width: 100% !important;
}

/* semua card agar full width */
.tab-content > div,
.tab-content > table,
.tab-content > form {
    width: 100% !important;
    max-width: 100% !important;
}

/* ===== TOGGLE BUTTON ===== */
.menu-toggle {
  position: fixed;
  top: 15px;
  left: 15px;
  width: 48px;
  height: 48px;
  background: #004aad;
  border-radius: 10px;
  border: none;
  color: white;
  display: none; /* hanya muncul di mobile */
  align-items: center;
  justify-content: center;
  z-index: 3000;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}


/* ============ SIDEBAR MOBILE FIX & OVERLAY ============ */
/* pastikan .sidebar default tetap visible di desktop */
.sidebar {
  transition: transform 0.35s ease;
  transform: translateX(0); /* normal desktop: terlihat */
}

/* toggle button (floating) */
.menu-toggle {
  position: fixed;
  top: 15px;
  left: 15px;
  width: 48px;
  height: 48px;
  display: none;
  align-items: center;
  justify-content: center;
  background: #004aad;
  color: #fff;
  border-radius: 10px;
  z-index: 3000;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

/* overlay untuk menutup sidebar saat aktif di mobile */
#sidebarOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(2px);
  z-index: 2400;
}

/* tampilkan overlay saat class show ditambahkan */
#sidebarOverlay.show {
  display: block;
}

/* MOBILE BEHAVIOR */
@media (max-width: 991px) {
  .menu-toggle { display: flex; }

  /* sembunyikan sidebar secara default di mobile */
  .sidebar {
    transform: translateX(-100%);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 2500;
  }

  /* ketika aktif -> slide masuk */
  .sidebar.active {
    transform: translateX(0);
  }

  /* main-content tetap scrollable tapi beri top padding supaya menu toggle tidak tumpuk */
  .main-content {
    margin-left: 0 !important;
    padding-top: 70px !important;
  }
}

/* MOBILE SIDEBAR */
@media (max-width: 991px) {
    .sidebar {
        transform: translateX(-100%);
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 2500;
    }

    .sidebar.active {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0 !important;
        padding-top: 70px !important;
    }

    .menu-toggle {
        display: flex !important;
    }
}

/* buat container requirement/panduan/profile lebih lebar pada desktop */
@media (min-width: 992px) {
  #requirementContent, #panduanContent, .profile-container {
    max-width: 1200px; 
    margin: 0 auto;
    width: calc(100% - 80px);
  }
}


/* Mobile typography tweaks */
@media (max-width: 600px) {
  .tab-content h1 { font-size: 20px; line-height: 1.2; margin-bottom: 12px; }
  .tab-content p { font-size: 14px; margin-bottom: 12px; }
  .main-content { padding: 14px !important; }
  /* welcome/profile di sidebar jadi rapi */
  .sidebar .profile .welcome { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  .sidebar .profile h2 { font-size: 14px; }
  .username-display { font-size: 13px; }
}

/* ============================ */
/*    PERBAIKAN LAYOUT DESKTOP  */
/* ============================ */

/* Agar semua tab-content memiliki layout penuh di desktop */
@media screen and (min-width: 992px) {
    .main-content {
        width: 100%;
        max-width: 100%;
        padding: 20px 30px;
    }

    .tab-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 30px !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    /* PERBAIKAN KHUSUS UNTUK 5 MENU YANG MENGECIL */
    #attendanceContent,
    #materiContent,
    #requirementContent,
    #panduanContent,
    #profileContent {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 30px !important;
    }
}

/* Jaga agar halaman mobile tetap normal */
@media screen and (max-width: 991px) {
    .main-content {
        padding: 15px;
    }
}

/* ==== PERBAIKAN GLOBAL UNTUK SEMUA HALAMAN ==== */

main.main-content,
.tab-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto !important;
    padding: 20px;
}

/* Buat semua section memenuhi layar desktop */
#journalReadingContent,
#materiContent,
#requirementContent,
#profileContent,
#panduanContent,
#attendanceContent {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto !important;
}

/* Perbaikan box putih yg terlalu sempit */
.upload-container,
.req-folder,
.profile-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

/* Hapus margin kiri besar yg membuat tampilan seperti mobile */
.tab-content {
    margin-left: 0 !important;
}

/* Label & input tetap rapi di mobile */
label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

/* Input file styling agar tidak loncat */
input[type="file"] {
    width: 100%;
}

/* ======== MOBILE FIX ========= */
@media (max-width: 768px) {

    .upload-container,
    .profile-container,
    .req-folder {
        padding: 15px !important;
        border-radius: 15px;
    }

    .tab-content h1 {
        font-size: 22px;
    }

    main.main-content {
        padding: 10px;
    }

    .upload-container label,
    .profile-container label {
        font-size: 16px;
    }
}

/* === FIX RESPONSIVE LAYOUT === */
@media (min-width: 992px) {
    .main-content {
        margin-left: 260px !important;  /* sesuai width sidebar Anda */
        width: calc(100% - 260px) !important;
    }

    .sidebar {
        transform: translateX(0) !important;
        position: fixed !important;
        left: 0;
    }
}

@media (min-width: 992px) {
    .sidebar {
        position: fixed;
        width: 300px;
        left: 0;
        top: 0;
        height: 100vh;
        transform: none !important; /* selalu tampil */
    }

    .main-content {
        margin-left: 300px;
        width: calc(100% - 300px);
    }

    #menuToggle {
        display: none !important; /* tombol menu hanya untuk HP */
    }
}

@media (max-width: 991px) {
    .sidebar {
        position: fixed;
        width: 260px;
        left: -260px;          /* posisi awal sidebar */
        top: 0;
        height: 100vh;
        transition: left 0.3s ease;
        z-index: 9999;
    }

    .sidebar.active {
        left: 0;              /* masuk ke layar */
    }

    .main-content {
        margin-left: 0 !important; 
        width: 100%;
    }
}

/* === FIX UNTUK DESKTOP AGAR KONTEN TIDAK DI BELAKANG SIDEBAR === */
@media (min-width: 992px) {
    .sidebar {
        transform: none !important;
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
    }

    .main-content {
        margin-left: 270px !important; /* lebar sidebar Anda */
    }

    #menuToggle {
        display: none !important;
    }
}

.materi-info {
  flex: 1;
}

.materi-actions {
  display: flex;
  gap: 14px;
  align-items: center;
}