/* =========================================================
   PORTAL GURU - MODERN UI
   Versi lengkap
   ========================================================= */


/* =========================================================
   1. RESET
   ========================================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --primary: #4f46e5;
  --primary-dark: #4338ca;
  --primary-light: #e0e7ff;
  --success: #10b981;
  --success-dark: #059669;
  --danger: #ef4444;
  --danger-dark: #dc2626;
  --warning: #f59e0b;
  --dark: #111827;
  --text: #374151;
  --muted: #6b7280;
  --background: #f3f4f6;
  --white: #ffffff;
  --border: #e5e7eb;
  --radius: 16px;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   2. BODY
   ========================================================= */

html {
  scroll-behavior: smooth;
}

body {
  font-family:
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

  background:
    linear-gradient(
      135deg,
      #f8fafc 0%,
      #eef4ff 100%
    );

  color: var(--text);

  min-height: 100vh;

  line-height: 1.6;
}


/* =========================================================
   3. NAVBAR
   ========================================================= */

.navbar {
  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  height: 70px;

  z-index: 9999;

  padding:
    10px
    24px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  background:
    linear-gradient(
      135deg,
      #1e3a8a,
      #2563eb
    );

  color: white;

  box-shadow:
    0 4px 20px
    rgba(15, 23, 42, 0.18);
}


/* =========================================================
   4. BAGIAN KIRI NAVBAR
   ========================================================= */

.navbar-left {
  display: flex;

  align-items: center;

  gap: 18px;

  min-width: 0;
}


/* =========================================================
   5. JUDUL PORTAL GURU
   ========================================================= */

.navbar h2 {
  font-size: 20px;

  font-weight: 700;

  letter-spacing: -0.3px;

  display: flex;

  align-items: center;

  gap: 10px;

  white-space: nowrap;
}

.navbar h2::before {
  content: "📚";

  width: 38px;
  height: 38px;

  display: flex;

  align-items: center;
  justify-content: center;

  background:
    rgba(255, 255, 255, 0.15);

  border:
    1px solid
    rgba(255, 255, 255, 0.10);

  border-radius: 10px;

  font-size: 19px;
}


/* =========================================================
   6. NAMA GURU
   ========================================================= */

.guru-name {
  display: flex;

  align-items: center;

  gap: 7px;

  padding:
    7px
    13px;

  border-radius: 10px;

  background:
    rgba(255, 255, 255, 0.12);

  border:
    1px solid
    rgba(255, 255, 255, 0.16);

  color: white;

  font-size: 13px;

  font-weight: 600;

  white-space: nowrap;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.08);
}

.guru-icon {
  font-size: 17px;

  line-height: 1;
}


/* =========================================================
   7. BAGIAN KANAN NAVBAR
   ========================================================= */

.nav-buttons {
  display: flex;

  align-items: center;

  gap: 8px;

  flex-shrink: 0;
}


/* =========================================================
   8. SEMUA TOMBOL NAVBAR
   ========================================================= */

.navbar button {
  width: auto;

  min-width: 0;

  padding:
    9px
    14px;

  margin: 0;

  border-radius: 9px;

  border:
    1px solid
    rgba(255, 255, 255, 0.20);

  background:
    rgba(255, 255, 255, 0.12);

  color: white;

  font-size: 13px;

  font-weight: 600;

  cursor: pointer;

  box-shadow: none;

  transition:
    all 0.2s ease;
}

.navbar button:hover {
  background:
    rgba(255, 255, 255, 0.22);

  transform:
    translateY(-1px);
}


/* =========================================================
   9. TOMBOL LOGOUT
   ========================================================= */

#btnLogout {
  background:
    rgba(220, 38, 38, 0.90);

  border-color:
    rgba(255, 255, 255, 0.10);
}

#btnLogout:hover {
  background:
    var(--danger-dark);
}


/* =========================================================
   10. TOMBOL MENU
   ========================================================= */

.menu-toggle {
  background:
    rgba(255, 255, 255, 0.12) !important;

  color: white !important;
}

.menu-toggle:hover {
  background:
    rgba(255, 255, 255, 0.22) !important;
}


/* =========================================================
   11. MENU TABS
   ========================================================= */

.tabs {
  position: fixed;

  top: 70px;

  left: 0;

  width: 100%;

  z-index: 9998;

  display: none;

  flex-direction: column;

  padding: 9px;

  background:
    rgba(255, 255, 255, 0.97);

  backdrop-filter:
    blur(12px);

  border-bottom:
    1px solid
    var(--border);

  box-shadow:
    0 8px 25px
    rgba(15, 23, 42, 0.10);

  max-height:
    calc(100vh - 70px);

  overflow-y: auto;
}

.tabs.show {
  display: flex;
}


/* =========================================================
   12. TOMBOL MENU TAB
   ========================================================= */

.tab-btn {
  width: 100%;

  padding:
    12px
    16px;

  margin: 2px 0;

  border: none;

  border-radius: 10px;

  background:
    transparent;

  color:
    var(--text);

  text-align: left;

  font-size: 14px;

  font-weight: 600;

  cursor: pointer;

  box-shadow: none;

  transition:
    all 0.2s ease;
}

.tab-btn:hover {
  background:
    var(--primary-light);

  color:
    var(--primary);

  transform:
    translateX(3px);
}

.tab-btn.active {
  background:
    linear-gradient(
      135deg,
      var(--primary),
      #3b82f6
    );

  color: white;

  box-shadow:
    0 4px 12px
    rgba(37, 99, 235, 0.22);
}


/* =========================================================
   13. CONTAINER
   ========================================================= */

.container {
  width: 100%;

  max-width: 1200px;

  margin: 0 auto;

  padding:
    95px
    22px
    50px;
}


/* =========================================================
   14. TAB CONTENT
   ========================================================= */

.tab-content {
  display: none;

  background:
    transparent;

  padding: 0;

  border-radius: 0;
}

.tab-content.active {
  display: block;

  animation:
    fadeIn
    0.25s
    ease;
}

@keyframes fadeIn {

  from {
    opacity: 0;

    transform:
      translateY(5px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


/* =========================================================
   15. CARD
   ========================================================= */

.card {
  background: rgba(255, 255, 255, 1);
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 24px;
  box-shadow: var(--shadow);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
  border-color: rgba(79, 70, 229, 0.2);
}


/* =========================================================
   16. JUDUL CARD
   ========================================================= */

.card h3 {
  color:
    var(--dark);

  font-size:
    18px;

  font-weight:
    700;

  margin-bottom:
    18px;

  letter-spacing:
    -0.2px;

  position:
    relative;

  padding-left:
    13px;
}

.card h3::before {
  content: "";

  position:
    absolute;

  left: 0;
  top: 3px;

  width: 4px;
  height: 20px;

  border-radius:
    4px;

  background:
    linear-gradient(
      to bottom,
      var(--primary),
      #60a5fa
    );
}

.card h4 {
  color:
    var(--dark);

  font-size:
    15px;

  margin-top:
    20px;

  margin-bottom:
    10px;
}


/* =========================================================
   17. FORM
   ========================================================= */

form {
  width: 100%;
}

form input,
form select,
form textarea {
  width: 100%;
  padding: 12px 16px;
  margin: 8px 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f9fafb;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

form input:hover,
form select:hover,
form textarea:hover {
  border-color: #d1d5db;
  background: #ffffff;
}

form input:focus,
form select:focus,
form textarea:focus {
  border-color: var(--primary);
  background: #ffffff;
  box-shadow: 0 0 0 4px var(--primary-light);
}

form textarea {
  min-height:
    100px;

  resize:
    vertical;
}

form input::placeholder,
form textarea::placeholder {
  color:
    #94a3b8;
}


/* =========================================================
   18. TOMBOL UMUM
   ========================================================= */

button {
  width: 100%;

  padding:
    11px
    16px;

  margin:
    7px
    0;

  border:
    none;

  border-radius:
    10px;

  background:
    linear-gradient(
      135deg,
      var(--primary),
      #3b82f6
    );

  color:
    white;

  font-family:
    inherit;

  font-size:
    14px;

  font-weight:
    700;

  cursor:
    pointer;

  box-shadow:
    0 3px 8px
    rgba(37, 99, 235, 0.18);

  transition:
    all
    0.2s ease;
}

button:hover {
  background:
    linear-gradient(
      135deg,
      var(--primary-dark),
      var(--primary)
    );

  transform:
    translateY(-1px);

  box-shadow:
    0 5px 14px
    rgba(37, 99, 235, 0.24);
}

button:active {
  transform:
    translateY(0);

  box-shadow:
    0 2px 5px
    rgba(37, 99, 235, 0.15);
}


/* =========================================================
   19. FILE UPLOAD
   ========================================================= */

input[type="file"] {
  width: 100%;

  padding:
    14px;

  margin:
    8px
    0;

  border:
    2px dashed
    #cbd5e1;

  border-radius:
    12px;

  background:
    #f8fafc;

  cursor:
    pointer;

  color:
    var(--muted);

  transition:
    border-color
    0.2s ease,

    background
    0.2s ease;
}

input[type="file"]:hover {
  border-color:
    var(--primary);

  background:
    var(--primary-light);
}


/* =========================================================
   20. CHECKBOX
   ========================================================= */

input[type="checkbox"] {
  width:
    18px !important;

  height:
    18px;

  margin:
    0 !important;

  accent-color:
    var(--primary);

  cursor:
    pointer;
}


/* =========================================================
   21. TABLE
   ========================================================= */

.card table {
  display:
    block;

  width:
    100%;

  overflow-x:
    auto;

  white-space:
    nowrap;

  border:
    1px solid
    var(--border);

  border-radius:
    10px;

  background:
    white;

  margin-top:
    15px;

  font-size:
    13px;
}

table {
  border-collapse:
    separate;

  border-spacing:
    0;
}

th,
td {
  padding:
    11px
    12px;

  text-align:
    left;

  border-right:
    1px solid
    var(--border);

  border-bottom:
    1px solid
    var(--border);
}

th {
  background:
    linear-gradient(
      135deg,
      #f8fafc,
      #f1f5f9
    );

  color:
    var(--dark);

  font-weight:
    700;

  white-space:
    nowrap;
}

th:last-child,
td:last-child {
  border-right:
    none;
}

tbody tr:last-child td {
  border-bottom:
    none;
}

tbody tr {
  transition:
    background
    0.15s ease;
}

tbody tr:hover {
  background:
    #f8fafc;
}


/* =========================================================
   22. SELECT DALAM TABEL
   ========================================================= */

td select {
  width:
    auto;

  min-width:
    100px;

  margin:
    0;

  padding:
    7px
    9px;

  border-radius:
    8px;
}


/* =========================================================
   23. EXPORT AREA
   ========================================================= */

#exportArea {
  background:
    white !important;

  border:
    1px solid
    var(--border);

  border-radius:
    12px !important;

  padding:
    20px !important;
}

#exportArea h4 {
  color:
    var(--dark);

  font-size:
    16px;

  padding-bottom:
    8px;

  margin-bottom:
    12px;

  border-bottom:
    1px solid
    var(--border);
}


/* =========================================================
   24. EXPORT BUTTON
   ========================================================= */

.export-buttons {
  margin-top:
    20px;

  display:
    flex;

  gap:
    10px;

  flex-wrap:
    wrap;
}

.export-buttons button {
  width:
    auto;

  flex:
    1;

  min-width:
    180px;
}


/* =========================================================
   25. HR
   ========================================================= */

hr {
  border:
    none;

  border-top:
    1px solid
    var(--border);

  margin:
    20px 0 !important;
}


/* =========================================================
   26. TEXT
   ========================================================= */

p {
  color:
    var(--muted);
}

em {
  color:
    var(--muted);
}


/* =========================================================
   27. LINK
   ========================================================= */

a {
  color:
    var(--primary);

  font-weight:
    600;

  text-decoration:
    none;
}

a:hover {
  text-decoration:
    underline;
}


/* =========================================================
   28. LOGIN
   ========================================================= */

body:has(#formLogin) {

  min-height:
    100vh;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    20px;

  background:
    radial-gradient(
      circle at top left,
      #dbeafe,
      transparent 35%
    ),

    radial-gradient(
      circle at bottom right,
      #e0e7ff,
      transparent 35%
    ),

    #f8fafc;
}

body:has(#formLogin) .card {

  width:
    100%;

  max-width:
    420px;

  padding:
    34px;

  border-radius:
    20px;

  box-shadow:
    0 20px 50px
    rgba(15, 23, 42, 0.12);
}

body:has(#formLogin) .card h2 {

  color:
    var(--dark);

  font-size:
    24px;

  margin-bottom:
    25px !important;

  text-align:
    center;
}




/* =========================================================
   29. MOBILE - 768PX
   ========================================================= */

@media screen and (max-width: 768px) {

  .navbar {

    height:
      62px;

    padding:
      9px
      12px;
  }


  .navbar-left {

    gap:
      8px;
  }


  .navbar h2 {

    font-size:
      15px;
  }


  .navbar h2::before {

    width:
      32px;

    height:
      32px;

    font-size:
      15px;
  }


  .guru-name {

    padding:
      6px
      9px;

    font-size:
      11px;

    gap:
      4px;
  }


  .guru-icon {

    font-size:
      14px;
  }


  .nav-buttons {

    gap:
      4px;
  }


  .navbar button {

    padding:
      7px
      9px;

    font-size:
      11px;
  }


  .tabs {

    top:
      62px;

    max-height:
      calc(100vh - 62px);
  }


  .container {

    padding:
      82px
      12px
      35px;
  }


  .card {

    padding:
      18px;

    border-radius:
      12px;

    margin-bottom:
      15px;
  }


  .card h3 {

    font-size:
      16px;

    margin-bottom:
      14px;
  }


  form input,
  form select,
  form textarea {

    font-size:
      14px;

    padding:
      11px
      12px;
  }


  button {

    font-size:
      13px;

    padding:
      11px
      13px;
  }


  th,
  td {

    padding:
      9px
      10px;

    font-size:
      12px;
  }


  .export-buttons {

    flex-direction:
      column;
  }


  .export-buttons button {

    width:
      100%;

    min-width:
      0;
  }
}


/* =========================================================
   30. HP KECIL - 480PX
   ========================================================= */

@media screen and (max-width: 480px) {

  .navbar {

    padding:
      8px
      9px;
  }


  .navbar-left {

    gap:
      6px;
  }


  .navbar h2 {

    font-size:
      0;
  }


  .navbar h2::before {

    width:
      31px;

    height:
      31px;

    font-size:
      16px;
  }


  .guru-name {

    max-width:
      110px;

    overflow:
      hidden;

    text-overflow:
      ellipsis;
  }


  .guru-name span:last-child {

    max-width:
      75px;

    overflow:
      hidden;

    text-overflow:
      ellipsis;
  }


  .navbar button {

    padding:
      7px
      8px;

    font-size:
      10px;
  }


  .container {

    padding:
      82px
      9px
      30px;
  }


  .card {

    padding:
      15px;
  }
}


/* =========================================================
   31. HP SANGAT KECIL - 360PX
   ========================================================= */

@media screen and (max-width: 360px) {

  .guru-name {

    max-width:
      90px;
  }


  .guru-name span:last-child {

    max-width:
      55px;
  }


  .navbar button {

    padding:
      6px
      7px;

    font-size:
      9px;
  }
}


/* =========================================================
   32. PRINT
   ========================================================= */

@media print {

  .navbar,
  .tabs,
  .export-buttons,
  button {

    display:
      none !important;
  }


  body {

    background:
      white;
  }


  .container {

    max-width:
      none;

    padding:
      0;
  }


  .card {

    box-shadow:
      none;

    border:
      none;
  }


  #exportArea {

    border:
      none !important;

    box-shadow:
      none;
  }
}

/* =========================================================
   DASHBOARD GURU
   ========================================================= */

.dashboard-welcome {
  background:
    linear-gradient(
      135deg,
      #1e3a8a,
      #2563eb
    );

  color: white;

  border-radius: 18px;

  padding: 30px;

  margin-bottom: 20px;

  box-shadow:
    0 8px 25px
    rgba(37, 99, 235, 0.18);

  position: relative;

  overflow: hidden;
}


.dashboard-welcome::after {
  content: "📚";

  position: absolute;

  right: 35px;

  bottom: -15px;

  font-size: 90px;

  opacity: 0.10;
}


.dashboard-small-title {
  color:
    rgba(255, 255, 255, 0.75);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 1.5px;

  margin-bottom: 5px;
}


.dashboard-welcome h1 {
  font-size: 28px;

  line-height: 1.3;

  margin-bottom: 8px;

  color: white;

  font-weight: 700;
}


.dashboard-welcome h1 span {
  color: white;
}


.dashboard-welcome p:last-child {
  color:
    rgba(255, 255, 255, 0.85);

  font-size: 14px;
}


/* =========================================================
   GRID DASHBOARD
   ========================================================= */

.dashboard-grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 20px;
}


/* =========================================================
   CARD DASHBOARD
   ========================================================= */

.dashboard-card {
  display: flex;

  align-items: flex-start;

  gap: 16px;

  background:
    rgba(255, 255, 255, 0.97);

  border:
    1px solid
    var(--border);

  border-radius:
    16px;

  padding:
    22px;

  box-shadow:
    var(--shadow);

  transition:
    all 0.2s ease;
}


.dashboard-card:hover {
  transform:
    translateY(-2px);

  box-shadow:
    var(--shadow-hover);
}


/* =========================================================
   ICON DASHBOARD
   ========================================================= */

.dashboard-card-icon {
  width: 48px;

  height: 48px;

  min-width: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 12px;

  background:
    var(--primary-light);

  font-size: 23px;
}


/* =========================================================
   ISI CARD
   ========================================================= */

.dashboard-card-content {
  flex: 1;

  min-width: 0;
}


.dashboard-card-content h3 {
  color:
    var(--dark);

  font-size:
    16px;

  margin-bottom:
    10px;
}


.dashboard-card-content h3::before {
  display:
    none;
}


.dashboard-card-content ul {
  list-style:
    none;

  padding:
    0;

  margin:
    0;
}


.dashboard-card-content li {
  position:
    relative;

  padding:
    6px
    0
    6px
    18px;

  color:
    var(--text);

  font-size:
    14px;

  border-bottom:
    1px solid
    #f1f5f9;
}


.dashboard-card-content li:last-child {
  border-bottom:
    none;
}


.dashboard-card-content li::before {
  content:
    "•";

  position:
    absolute;

  left:
    3px;

  color:
    var(--primary);

  font-size:
    18px;

  font-weight:
    bold;
}


.dashboard-card-content p {
  color:
    var(--muted);

  font-size:
    13px;
}


/* =========================================================
   DASHBOARD MOBILE
   ========================================================= */

@media screen and (max-width: 768px) {

  .dashboard-welcome {
    padding:
      23px;

    border-radius:
      15px;
  }


  .dashboard-welcome h1 {
    font-size:
      22px;
  }


  .dashboard-welcome::after {
    right:
      15px;

    font-size:
      70px;
  }


  .dashboard-grid {
    grid-template-columns:
      1fr;

    gap:
      14px;
  }


  .dashboard-card {
    padding:
      18px;
  }


  .dashboard-card-icon {
    width:
      42px;

    height:
      42px;

    min-width:
      42px;

    font-size:
      20px;
  }

}

/* =========================================================
   PASSWORD WRAPPER & TOGGLE EYE BUTTON
   ========================================================= */
.password-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  margin: 8px 0; /* Memindahkan margin dari input ke sini agar vertikal sejajar */
}

.password-wrapper input {
  padding-right: 42px !important;
  margin: 0 !important; /* Menghapus margin bawaan input agar perhitungan tengah presisi */
}

.toggle-password-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #64748b;
  cursor: pointer;
  padding: 4px 6px !important;
  margin: 0 !important;
  width: 32px !important; /* Mengunci ruang lebar agar ikon tidak terjepit */
  height: 32px !important; /* Menambah ruang tinggi agar klik lebih proporsional */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
  border-radius: 6px !important;
}

.toggle-password-btn:hover {
  color: var(--primary);
  background: rgba(37, 99, 235, 0.08) !important;
  transform: translateY(-50%) !important;
}

.toggle-password-btn svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

/* Menghilangkan ikon mata bawaan browser agar tidak bertumpuk */
input::-ms-reveal,
input::-ms-clear {
  display: none !important;
}