@charset "UTF-8";/* src/index.css */

/* --- RESET & FONT BASE (Pertahankan sebagian besar dari Vite) --- */
:root {
  /* Hapus background-color: #242424 jika Anda ingin background global diatur di body */
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  
  color: #213547; /* Set warna teks default menjadi gelap (untuk theme terang) */
  background-color: #f8f9fa; /* Background default */

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- PENYESUAIAN BODY (KRUSIAL!) --- */
body {
  margin: 0;
  /* Hapus: display: flex; place-items: center; */
  /* Atur min-height penuh untuk mendukung sticky footer/sidebar */
  min-height: 100vh; 
  background-color: #f0f2f5; /* Ganti background agar sesuai dengan LayoutWithSidebar.css */
}

/* --- PENYESUAIAN ROOT DIV (#root) --- */
/* Pastikan #root mengambil seluruh ruang vertikal */
#root {
  display: flex; 
  flex-direction: column; /* Penting untuk agar children mengisi tinggi penuh */
  min-height: 100vh;
  width: 100%; /* Pastikan mengambil lebar penuh */
}

/* --- STYLING LAINNYA (Opsional, berdasarkan preferensi Anda) --- */
a {
  font-weight: 500;
  color: #007bff; /* Ganti warna link agar sesuai tema sidebar */
  text-decoration: none;
}
a:hover {
  color: #0056b3;
}

h1 {
  font-size: 2.5em; /* Sedikit dikecilkan agar lebih ramah layout */
  line-height: 1.1;
}

/* Pertahankan styling button jika Anda suka, atau hapus jika ingin custom di komponen */
button {
  border-radius: 4px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #007bff; /* Tema warna utama */
  color: white;
  cursor: pointer;
  transition: background-color 0.25s;
}
button:hover {
  background-color: #0056b3;
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

/* Hapus @media (prefers-color-scheme: light) jika Anda tidak ingin mendukung mode gelap */
@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
}/* ===== GLOBAL FIX ===== */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

/* ===== PAGE ===== */
.login-page {
  position: fixed;
  inset: 0;

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

  background: linear-gradient(135deg, #1e3c72, #2a5298);
  font-family: "Segoe UI", sans-serif;
}

/* ===== CARD ===== */
.login-card {
  background: white;
  padding: 45px 40px;
  width: 380px;
  max-width: 90vw;

  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.25);

  text-align: center;
  overflow: hidden;
}

/* ===== LOGO ===== */
.login-logo {
  font-size: 48px;
  color: #2c7be5;
  margin-bottom: 10px;
}

/* ===== TITLE ===== */
.login-title {
  margin: 0;
  color: #2c3e50;
}

.login-subtitle {
  margin: 8px 0 28px;
  color: #7f8c8d;
  font-size: 14px;
}

/* ===== ERROR ===== */
.login-error {
  background: #e74c3c;
  color: white;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 15px;
}

/* ===== INPUT GROUP ===== */
.login-input-group {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}

/* ===== INPUT ===== */
.login-input-group input {
  width: 100%;
  height: 46px;
  padding: 0 44px;

  border-radius: 10px;
  border: 1.5px solid #dcdfe6;
  background: #f7f9fc;

  font-size: 15px;
  color: #2c3e50;
  transition: all 0.2s;
}

.login-input-group input:focus {
  border-color: #2c7be5;
  background: white;
  outline: none;
  box-shadow: 0 0 0 3px rgba(44,123,229,0.15);
}

/* ICON KIRI */
.login-input-icon {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: #8a97a6;
  font-size: 16px;
}

/* ICON MATA */
.login-toggle-pass {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  cursor: pointer;
  color: #8a97a6;
  font-size: 16px;
}

/* ===== BUTTON ===== */
.login-btn {
  width: 100%;
  height: 48px;

  border-radius: 12px;
  border: none;

  background: linear-gradient(135deg,#2c7be5,#1a68d1);

  color: white;
  font-weight: 600;
  font-size: 16px;

  cursor: pointer;
  transition: 0.25s;
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(44,123,229,0.35);
}

/* ===== FOOTER ===== */
.login-footer {
  margin-top: 24px;
  font-size: 12px;
  color: #95a5a6;
}body {
	background: white;
}

.home-container {
  height: 94vh;
}

.table-modern {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.table-modern tr {
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border-radius: 8px;
}

.table-modern td {
  padding: 12px 16px;
  vertical-align: middle;
  border-top: 1px solid #e2e6ea;
  border-bottom: 1px solid #e2e6ea;
  border-left: none;
  border-right: none;
}

.table-modern tr td:first-child {
  border-left: 1px solid #e2e6ea;
  border-radius: 10px 0 0 10px;
}

.table-modern tr td:last-child {
  border-right: 1px solid #e2e6ea;
  border-radius: 0 10px 10px 0;
}

/* =========================
   BOOTSTRAP-LIKE TABLE
========================= */

.table-bs {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 12px;
}

.table-bs thead th {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  color: black;
}

.table-bs tbody td {
  border: 1px solid #dee2e6;
  padding: 10px 12px;
  vertical-align: middle;
}

.table-bs tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}

.table-bs tbody tr:hover {
  background-color: #e9ecef;
}

.text-center { text-align: center; }

.badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 10px;
}

.badge-success { background-color: #d1e7dd; color: #0f5132; }
.badge-danger { background-color: #f8d7da; color: #842029; }

.table-danger { background-color: #f8d7da !important; }

/* =============================
   CARD LAYOUT
============================= */

.card-wrapper {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  height: 100%;
  padding: 10px;
}

.card {
  flex: 1 1 45%;
  height: 98%;
  overflow-y: auto;
  background: #f6f6f6;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.card p { margin: 0; color: #555; font-size: 14px; }

@media (max-width: 768px) {
  .card { flex: 1 1 100%; }
}

/* =============================
   INPUT
============================= */

.table-input {
  width: 85%;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1.5px solid #e5e7eb;
  background: linear-gradient(180deg, #ffffff, #fafafa);
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.25s ease;
}

.table-input:hover { border-color: #c7d2fe; }

.table-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow:
    0 0 0 3px rgba(99, 102, 241, 0.2),
    inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.table-input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

/* =========================================================
 RISK MATRIX
========================================================= */

.rbiheat-risk-matrix-wrapper{
  display:flex;
  align-items:flex-start;     /* sejajar atas */
  justify-content:center;
  gap:10px;                   /* jarak matrix & legend */
  flex-wrap:nowrap;
  width:100%;
  margin-top:20px;
}

/* ===== MATRIX KIRI ===== */

.rbiheat-risk-left{
  flex:0 0 auto;
}

/* ===== MATRIX TABLE ===== */

.rbiheat-risk-matrix{
  border-collapse: collapse;
  background:white;
}

/* header & cell */

.rbiheat-risk-matrix th,
.rbiheat-risk-matrix td{
  border:none;
  text-align:center;
  font-weight:bold;
  
}

/* 🔥 ukuran matrix diatur DI SINI */

.rbiheat-risk-matrix td{
  width:42px;
  height:42px;
  font-size:14px;
}

/* ===== IMPACT LABEL (atas) ===== */

.impact-label{
  width:42px;
  height:85px;
  padding:0;
}

.impact-text{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  font-size:11px;
  font-weight:600;
  transform: rotate(-90deg);
  white-space:nowrap;
}

/* ===== LIKELIHOOD LABEL (kiri) ===== */

.likelihood-label{
  font-size:12px;
  font-weight:600;
  text-align:right;
  padding-right:8px;
  white-space:nowrap;
  background:#f7f7f7;
}

/* ===== LEGEND KANAN ===== */

.rbiheat-risk-right{
  flex:0 0 auto;
  min-width:220px;
  align-self:flex-start;
}

.risk-legend-title{
  font-weight:600;
  margin-bottom:10px;
  font-size:18px;
}

/* legend table */

.rbiheat-risk-legend{
  width:220px;
  border-collapse:collapse;
  font-size:15px;
}

.rbiheat-risk-legend td{
  padding:10px 14px;
  border:1px solid #ddd;
}

/* ===== WARNA ===== */

.risk-high { background:#d7191c; color:white; }
.risk-moderate-high { background:#fdae61; }
.risk-moderate { background:#ffff00; }
.risk-low-moderate { background:#91cf60; }
.risk-low { background:#1a9641; color:white; }

/* ===== BLINK ACTIVE ===== */

@keyframes blink-hard {
  0% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.08); filter: brightness(1.6); }
  100% { transform: scale(1); filter: brightness(1); }
}

.blink{
  animation: blink-hard 0.9s infinite;
  outline:3px solid black;
}

/* ===== SUMMARY ===== */

.risk-summary{
  margin-top:14px;
  font-weight:600;
  font-size:16px;
}

/* =========================================================
   SIDEBAR & FLOATING BUTTON — TIDAK DIUBAH
========================================================= */

.right-sidebar{
position: fixed;
top: 0;
right: 0;
width: 320px;
height: 100vh;
background: white;
box-shadow: -3px 0 10px rgba(0,0,0,0.15);
z-index: 1000;
display: flex;
flex-direction: column;
}

.sidebar-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:16px;
font-weight:600;
border-bottom:1px solid #e5e7eb;
}

.sidebar-close{
background:transparent;
border:none;
font-size:18px;
cursor:pointer;
}

.sidebar-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,0.25);
z-index:1250;
}

.floating-folder{
position:fixed;
bottom:24px;
right:24px;
z-index:1400;
}

.floating-folder-btn{
background:transparent;
border:none;
font-size:30px;
cursor:pointer;
}

.floating-actions{
position:fixed;
bottom:70px;
right:24px;
display:flex;
flex-direction:column;
gap:12px;
z-index:1350;
}

.btn-finish-edit{
position:fixed;
top:20px;
right:20px;
background:#28a745;
color:white;
border:none;
padding:10px 16px;
border-radius:8px;
font-weight:600;
cursor:pointer;
box-shadow:0 4px 10px rgba(0,0,0,0.2);
z-index:999;
}/* =============================
      LOGO HEADER
   ============================= */
.logo-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-left {
  width: 150px;
  height: 130px;
}

.logo-right {
  width: 200px;
  margin-right: 20px;
}

@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }
}

@media (max-width: 550px) {
  
	.logo-left {
	  width: 100px;
	  height: 80px;
	}

	.logo-right {
	  width: 150px;
	  margin-right: 20px;
	}
  
}
/* =============================
      FOOTER
   ============================= */
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 6px;
  background: #fff;
  text-align: center;
  font-size: 12px;
  border-top: 1px solid #ddd;
}.itp-container {
  background: #fff;
  padding: 20px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  width: 90%;
  margin: 0 auto;
}

.itp-title {
  text-align: center;
  font-weight: bold;
  margin-bottom: 18px;
}

.itp-step {
  margin-bottom: 18px;
  border: 1px solid #bbb;
}

.itp-step-header {
  background: #e5e5e5;
  padding: 6px 10px;
  font-weight: bold;
}

.result-header {
  background: #cfe2ff;
}

.itp-table {
  width: 100%;
  border-collapse: collapse;
}

.itp-table td {
  border: 1px solid #999;
  padding: 6px;
  vertical-align: middle;
}

.itp-no {
  text-align: center;
  background: #f2f2f2;
  font-weight: bold;
}

.itp-table input,
.itp-table select {
  width: 100%;
  height: 28px;
  box-sizing: border-box;
  font-size: 13px;
  padding: 4px 6px;
}

.table-input {
  border-radius: 8px;
  border: 1.5px solid #d1d5db;
}

.manual {
  color: red;
  font-size: 12px;
  text-align: center;
}

.auto {
  color: green;
  font-size: 12px;
  text-align: center;
}

.auto-row {
  background: #f9f9f9;
}

.final-result {
  background: #fff3cd;
  font-size: 14px;
}

.btn-finish-edit{
position: fixed;
top: 20px;
right: 20px;
background: #28a745;
color: white;
border: none;
padding: 10px 16px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
z-index: 999;
}

.btn-finish-edit:hover{
background: #218838;
}

.btn-finish-edit:hover{
background: #218838;
}

.itp-container .itp-table td{
text-align:left;
}

.itp-container .itp-table td{
text-align:left;
}

.itp-container .itp-table input{
text-align:left;
}

.itp-container .itp-table select{
text-align:left;
}

.itp-container .itp-table td.itp-no{
text-align:center !important;
vertical-align:middle;
}

.sidebar-menu{
flex: 1;
overflow-y: auto;
padding-bottom: 20px;
}

.sidebar-menu::-webkit-scrollbar{
width:6px;
}

.sidebar-menu::-webkit-scrollbar-thumb{
background:#c9c9c9;
border-radius:6px;
}

.sidebar-section{
font-size:11px;
text-transform:uppercase;
color:#7a8896;
padding:12px 20px 6px;
letter-spacing:0.5px;
}

.sidebar-menu li{
display:flex;
align-items:center;
gap:10px;
padding:10px 20px;
cursor:pointer;
color:#2c3e50;
transition:all 0.2s ease;
}

.sidebar-menu li:hover{
background:#f4f7fb;
color:#1a73e8;
}

.sidebar-menu li .icon{
font-size:14px;
width:18px;
text-align:center;
}

.sidebar-menu li.active{
background:#e8f0fe;
color:#1a73e8;
font-weight:600;
border-left:3px solid #1a73e8;
}.itp-container {
  background: #fff;
  padding: 20px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  width: 90%;
  margin: 0 auto;
}

.itp-title {
  text-align: center;
  font-weight: bold;
  margin-bottom: 18px;
}

.itp-step {
  margin-bottom: 18px;
  border: 1px solid #bbb;
}

.itp-step-header {
  background: #e5e5e5;
  padding: 6px 10px;
  font-weight: bold;
}

.result-header {
  background: #cfe2ff;
}

.itp-table {
  width: 100%;
  border-collapse: collapse;
}

.itp-table td {
  border: 1px solid #999;
  padding: 6px;
  vertical-align: middle;
}

.itp-no {
  text-align: center;
  background: #f2f2f2;
  font-weight: bold;
}

.itp-table input,
.itp-table select {
  width: 100%;
  height: 28px;
  box-sizing: border-box;
  font-size: 13px;
  padding: 4px 6px;
}

.table-input {
  border-radius: 8px;
  border: 1.5px solid #d1d5db;
}

.manual {
  color: red;
  font-size: 12px;
  text-align: center;
}

.auto {
  color: green;
  font-size: 12px;
  text-align: center;
}

.auto-row {
  background: #f9f9f9;
}

.final-result {
  background: #fff3cd;
  font-size: 14px;
}

.btn-finish-edit{
position: fixed;
top: 20px;
right: 20px;
background: #28a745;
color: white;
border: none;
padding: 10px 16px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
z-index: 999;
}

.btn-finish-edit:hover{
background: #218838;
}

.sidebar-menu{
flex: 1;
overflow-y: auto;
padding-bottom: 20px;
}

.sidebar-menu::-webkit-scrollbar{
width:6px;
}

.sidebar-menu::-webkit-scrollbar-thumb{
background:#c9c9c9;
border-radius:6px;
}

.sidebar-section{
font-size:11px;
text-transform:uppercase;
color:#7a8896;
padding:12px 20px 6px;
letter-spacing:0.5px;
}

.sidebar-menu li{
display:flex;
align-items:center;
gap:10px;
padding:10px 20px;
cursor:pointer;
color:#2c3e50;
transition:all 0.2s ease;
}

.sidebar-menu li:hover{
background:#f4f7fb;
color:#1a73e8;
}

.sidebar-menu li .icon{
font-size:14px;
width:18px;
text-align:center;
}

.sidebar-menu li.active{
background:#e8f0fe;
color:#1a73e8;
font-weight:600;
border-left:3px solid #1a73e8;
}.itp-container {
  background: #fff;
  padding: 20px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  width: 90%;
  margin: 0 auto;
}

.itp-title {
  text-align: center;
  font-weight: bold;
  margin-bottom: 18px;
}

.itp-step {
  margin-bottom: 18px;
  border: 1px solid #bbb;
}

.itp-step-header {
  background: #e5e5e5;
  padding: 6px 10px;
  font-weight: bold;
}

.result-header {
  background: #cfe2ff;
}

.itp-table {
  width: 100%;
  border-collapse: collapse;
}

.itp-table td {
  border: 1px solid #999;
  padding: 6px;
  vertical-align: middle;
}

.itp-no {
  text-align: center;
  background: #f2f2f2;
  font-weight: bold;
}

.itp-table input,
.itp-table select {
  width: 100%;
  height: 28px;
  box-sizing: border-box;
  font-size: 13px;
  padding: 4px 6px;
}

.table-input {
  border-radius: 8px;
  border: 1.5px solid #d1d5db;
}

.manual {
  color: red;
  font-size: 12px;
  text-align: center;
}

.auto {
  color: green;
  font-size: 12px;
  text-align: center;
}

.auto-row {
  background: #f9f9f9;
}

.final-result {
  background: #fff3cd;
  font-size: 14px;
}

.btn-finish-edit{
position: fixed;
top: 20px;
right: 20px;
background: #28a745;
color: white;
border: none;
padding: 10px 16px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
z-index: 999;
}

.btn-finish-edit:hover{
background: #218838;
}

.sidebar-menu{
flex: 1;
overflow-y: auto;
padding-bottom: 20px;
}

.sidebar-menu::-webkit-scrollbar{
width:6px;
}

.sidebar-menu::-webkit-scrollbar-thumb{
background:#c9c9c9;
border-radius:6px;
}

.sidebar-section{
font-size:11px;
text-transform:uppercase;
color:#7a8896;
padding:12px 20px 6px;
letter-spacing:0.5px;
}

.sidebar-menu li{
display:flex;
align-items:center;
gap:10px;
padding:10px 20px;
cursor:pointer;
color:#2c3e50;
transition:all 0.2s ease;
}

.sidebar-menu li:hover{
background:#f4f7fb;
color:#1a73e8;
}

.sidebar-menu li .icon{
font-size:14px;
width:18px;
text-align:center;
}

.sidebar-menu li.active{
background:#e8f0fe;
color:#1a73e8;
font-weight:600;
border-left:3px solid #1a73e8;
}body {
	background: white;
}

.home-container {
  height: 94vh;
}

.table-modern {
  width: 100%;
  border-collapse: separate;  
  border-spacing: 0 10px;    
}

.table-modern tr {
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border-radius: 8px;
}

.table-modern td {
  padding: 12px 16px;
  vertical-align: middle;
  text-align: left;

  /* HILANGKAN garis antar kolom */
  border-top: 1px solid #e2e6ea;
  border-bottom: 1px solid #e2e6ea;
  border-left: none;
  border-right: none;
}

/* sisi kiri row */
.table-modern tr td:first-child {
  border-left: 1px solid #e2e6ea;
  border-radius: 10px 0 0 10px;
}

/* sisi kanan row */
.table-modern tr td:last-child {
  border-right: 1px solid #e2e6ea;
  border-radius: 0 10px 10px 0;
}


/* row hasil (PoF) */
.result-row {
  background-color: #f1f7ff !important;
}

.result-row td {
  border-color: #cfe2ff !important;
}

/* =========================
   BOOTSTRAP-LIKE TABLE
========================= */
.table-bs {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 12px;
}

/* ===== HEADER ===== */
.table-bs thead th {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
}

/* ===== BODY ===== */
.table-bs tbody td {
  border: 1px solid #dee2e6;
  padding: 10px 12px;
  vertical-align: middle;
}

/* STRIPED */
.table-bs tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}

/* HOVER */
.table-bs tbody tr:hover {
  background-color: #e9ecef;
}

/* ALIGNMENT */
.text-center {
  text-align: center;
}

/* ===== BADGE ===== */
.badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 10px;
}

.badge-success {
  background-color: #d1e7dd;
  color: #0f5132;
}

.badge-danger {
  background-color: #f8d7da;
  color: #842029;
}

/* ===== ROW STATE ===== */
.table-danger {
  background-color: #f8d7da !important;
}


/* =============================
      DROPDOWN DESKTOP
   ============================= */
/* container untuk card */
.card-wrapper {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  height: 100%;
  padding: 10px;
}

/* card style */
.card {
  flex: 1 1 45%;
  height: 98%;
  overflow-y: auto;
  background: #f6f6f6;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
  text-align: center; /* 👈 rata tengah */
}

/* hover effect */
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
}

.card p {
  margin: 0;
  color: #555;
  font-size: 14px;
}

/* 📱 Mobile */
@media (max-width: 768px) {
  .card {
    flex: 1 1 100%;
  }
}

/**form input*/
.input-wrapper {
  position: relative;
  width: 100%;
}

.table-input {
  width: 85%;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1.5px solid #e5e7eb;
  background: linear-gradient(180deg, #ffffff, #fafafa);
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.25s ease;
}

/* hover */
.table-input:hover {
  border-color: #c7d2fe;
}

/* focus */
.table-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 
    0 0 0 3px rgba(99, 102, 241, 0.2),
    inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* placeholder */
.table-input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

/* =========================================================
 RISK MATRIX
========================================================= */

.rbiheat-risk-matrix-wrapper{
  display:flex;
  align-items:flex-start;     
  justify-content:center;
  gap:10px;                   
  flex-wrap:nowrap;
  width:100%;
  margin-top:20px;
}

/* ===== MATRIX KIRI ===== */

.rbiheat-risk-left{
  flex:0 0 auto;
}

/* ===== MATRIX TABLE ===== */

.rbiheat-risk-matrix{
  border-collapse: collapse;
  background:white;
}

/* header & cell */

.rbiheat-risk-matrix th,
.rbiheat-risk-matrix td{
  border:none;
  text-align:center;
  font-weight:bold;
  
}

/* 🔥 ukuran matrix diatur DI SINI */

.rbiheat-risk-matrix td{
  width:42px;
  height:42px;
  font-size:14px;
}

/* ===== IMPACT LABEL (atas) ===== */

.impact-label{
  width:42px;
  height:85px;
  padding:0;
}

.impact-text{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  font-size:11px;
  font-weight:600;
  transform: rotate(-90deg);
  white-space:nowrap;
}

/* ===== LIKELIHOOD LABEL (kiri) ===== */

.likelihood-label{
  font-size:12px;
  font-weight:600;
  text-align:right;
  padding-right:8px;
  white-space:nowrap;
  background:#f7f7f7;
}

/* ===== LEGEND KANAN ===== */

.rbiheat-risk-right{
  flex:0 0 auto;
  min-width:220px;
  align-self:flex-start;
}

.risk-legend-title{
  font-weight:600;
  margin-bottom:10px;
  font-size:18px;
}

/* legend table */

.rbiheat-risk-legend{
  width:220px;
  border-collapse:collapse;
  font-size:15px;
}

.rbiheat-risk-legend td{
  padding:10px 14px;
  border:1px solid #ddd;
}

/* ===== WARNA ===== */

.risk-high { background:#d7191c; color:white; }
.risk-moderate-high { background:#fdae61; }
.risk-moderate { background:#ffff00; }
.risk-low-moderate { background:#91cf60; }
.risk-low { background:#1a9641; color:white; }

/* ===== BLINK ACTIVE ===== */

@keyframes blink-hard {
  0% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.08); filter: brightness(1.6); }
  100% { transform: scale(1); filter: brightness(1); }
}

.blink{
  animation: blink-hard 0.9s infinite;
  outline:3px solid black;
}

/* ===== SUMMARY ===== */

.risk-summary{
  margin-top:14px;
  font-weight:600;
  font-size:16px;
}
/* =========================
   KEDIP (CELL & LEGEND)
========================= */
@keyframes blink-hard {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.08);
    filter: brightness(1.6);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

.blink {
  animation: blink-hard 0.9s infinite;
  outline: 3px solid black;
}

/* =========================
   SUMMARY
========================= */
.risk-summary {
  margin-top: 12px;
  font-weight: 600;
}

/** sidebar setting */

/* =========================
   RIGHT SIDEBAR
========================= */
.right-sidebar {
  position: fixed;
  top: 0;
  right: -320px;          /* hidden */
  width: 320px;
  height: 100vh;

  background: #ffffff;
  border-left: 1px solid #e5e7eb;
  box-shadow: -6px 0 20px rgba(0,0,0,0.15);

  z-index: 1300;
  transition: right 0.3s ease;
}

.right-sidebar.open {
  right: 0;
}

/* =========================
   SIDEBAR HEADER
========================= */
.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 16px;
  font-weight: 600;
  border-bottom: 1px solid #e5e7eb;
}

.sidebar-close {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

/* =========================
   SIDEBAR CONTENT
========================= */
.sidebar-content {
  padding: 16px;
}

.sidebar-content h4 {
  margin: 12px 0 8px;
  font-size: 14px;
}

/* =========================
   SIDEBAR BUTTON
========================= */
.sidebar-btn {
  width: 100%;
  padding: 10px;
  margin-bottom: 8px;

  background: transparent;
  border: 1px solid #d1d5db;
  border-radius: 8px;

  cursor: pointer;
  font-size: 14px;
}

.sidebar-btn:hover {
  background: #f9fafb;
}

/* =========================
   OVERLAY
========================= */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 1250;
}

/* =========================
   FLOATING ACTION GROUP
========================= */
/* =========================
   FLOATING FOLDER BUTTON
========================= */
/* =========================
   FLOATING FOLDER ICON ONLY
========================= */
.floating-folder {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1400;
}

.floating-folder-btn {
  background: transparent;
  border: none;
  padding: 0;

  font-size: 30px;   /* ukuran icon */
  cursor: pointer;

  color: #1f2937;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.floating-folder-btn:hover {
  transform: scale(1.15);
  opacity: 0.85;
}


/* =========================
   FLOATING ACTION GROUP
========================= */
/* =========================
   FLOATING ACTION GROUP
========================= */
.floating-actions {
  position: fixed;
  bottom: 70px; /* naik di atas folder */
  right: 24px;

  display: flex;
  flex-direction: column;
  gap: 12px;

  z-index: 1350;
}

/* ICON BUTTON ONLY */
.floating-save,
.floating-gear {
  background: transparent;
  border: none;
  padding: 0;

  font-size: 26px;
  cursor: pointer;
  color: #1f2937;

  transition: transform 0.15s ease, opacity 0.15s ease;
}

.floating-save:hover,
.floating-gear:hover {
  transform: scale(1.15);
  opacity: 0.85;
}

.sidebar-menu{
flex: 1;
overflow-y: auto;
padding-bottom: 20px;
}

.sidebar-menu::-webkit-scrollbar{
width:6px;
}

.sidebar-menu::-webkit-scrollbar-thumb{
background:#c9c9c9;
border-radius:6px;
}

.sidebar-section{
font-size:11px;
text-transform:uppercase;
color:#7a8896;
padding:12px 20px 6px;
letter-spacing:0.5px;
}

.sidebar-menu li{
display:flex;
align-items:center;
gap:10px;
padding:10px 20px;
cursor:pointer;
color:#2c3e50;
transition:all 0.2s ease;
}

.sidebar-menu li:hover{
background:#f4f7fb;
color:#1a73e8;
}

.sidebar-menu li .icon{
font-size:14px;
width:18px;
text-align:center;
}

.sidebar-menu li.active{
background:#e8f0fe;
color:#1a73e8;
font-weight:600;
border-left:3px solid #1a73e8;
}/* ========================= */
/* GLOBAL PAGE STYLE         */
/* ========================= */

.page {
  background: #dcdcdc;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.title {
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 20px;
}

/* ========================= */
/* BLOCK / SECTION           */
/* ========================= */

.block {
  border: 2px solid black;
  margin-bottom: 20px;
  background: #b8c7d1;
}

.block-header {
  background: #3a3a3a;
  color: white;
  font-weight: bold;
  padding: 6px 10px;
  font-size: 14px;
  letter-spacing: 0.5px;
}

/* ========================= */
/* PSV DATA SECTION          */
/* ========================= */

.psv-table {
  padding: 15px;
}

.psv-row {
  display: grid;
  grid-template-columns: 40px 220px 20px 1fr;
  align-items: center;
  margin-bottom: 8px;
}

.psv-no {
  font-weight: bold;
}

.psv-label {
  font-size: 13px;
}

.psv-colon {
  text-align: center;
}

.psv-input {
  border: 2px solid black;
  padding: 5px;
  background: white;
  font-size: 13px;
  width: 97%;
}

/* ========================= */
/* INPUT GRID SECTION        */
/* ========================= */

.input-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  padding: 20px;
}

.col {
  display: flex;
  flex-direction: column;
}

label {
  font-weight: bold;
  margin-top: 12px;
  font-size: 13px;
}

.select {
  border: 2px solid black;
  padding: 4px;
  font-size: 13px;
  background: white;
}

.input-gray {
  background: #cfcfcf;
  border: 2px solid black;
  padding: 4px;
  font-size: 13px;
}

.input-yellow {
  background: #fff200;
  border: 2px solid black;
  padding: 4px;
  font-size: 13px;
  font-weight: bold;
}

.small {
  width: 100px;
}

.medium {
  width: 180px;
}

.row-inline {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ========================= */
/* CALCULATION SECTION       */
/* ========================= */

.calc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 20px;
  gap: 10px;
}

.calc-box {
  border: 2px solid black;
  padding: 8px;
  background: white;
  font-size: 13px;
}

.red {
  background: red;
  color: white;
  font-weight: bold;
  text-align: center;
}

.result-yellow {
  background: #fff200;
  padding: 10px;
  border-top: 2px solid black;
  font-weight: bold;
  font-size: 13px;
}

/* CONTROL WIDTH SYSTEM */
.form-control-small {
  width: 100px;
}

.form-control-medium {
  width: 180px;
}

/* LEFT COLUMN WIDTH */
.col-left {
  min-width: 250px;
}

/* Pastikan select & input tinggi sama */
.select,
.input-gray,
.input-yellow {
  height: 28px;
  box-sizing: border-box;
}

/* ========================= */
/* RESPONSIVE TABLET         */
/* ========================= */

@media (max-width: 1024px) {

  .input-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .calc-grid {
    grid-template-columns: 1fr 1fr;
  }

}

/* ========================= */
/* RESPONSIVE MOBILE         */
/* ========================= */

@media (max-width: 768px) {

  .page {
    padding: 10px;
  }

  .title {
    font-size: 14px;
    text-align: center;
  }

  .block {
    margin-bottom: 15px;
  }

  .block-header {
    font-size: 13px;
    padding: 6px;
  }

  /* INPUT GRID JADI 1 KOLOM */
  .input-grid {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 15px;
  }

  .calc-grid {
    grid-template-columns: 1fr;
  }

  /* PSV ROW MOBILE */
  .psv-row {
    grid-template-columns: 30px 1fr;
    gap: 6px;
  }

  .psv-colon {
    display: none;
  }

  .psv-input {
    grid-column: span 2;
    width: 100%;
  }

  /* Input full width */
  .small,
  .medium {
    width: 100%;
  }

  .select,
  .input-gray,
  .input-yellow {
    width: 100%;
    box-sizing: border-box;
  }

  .row-inline {
    flex-wrap: wrap;
  }

  label {
    font-size: 12px;
  }

  .calc-box {
    font-size: 12px;
  }

  .result-yellow {
    font-size: 12px;
  }

}

/* ========================= */
/* EXTRA SMOOTH MOBILE       */
/* ========================= */

@media (max-width: 480px) {

  .title {
    font-size: 13px;
  }

  label {
    font-size: 11px;
  }

  .block-header {
    font-size: 12px;
  }

}

.calc-wrapper {
  display: flex;
  justify-content: space-between;
  padding: 20px 40px;
}

.calc-column {
  width: 48%;
}

.calc-row {
  display: grid;
  grid-template-columns: 40px 200px 120px auto;
  align-items: center;
  margin-bottom: 10px;
  font-size: 18px;
}

.no {
  font-weight: bold;
}

.symbol {
  /*font-style: italic;*/
}

.value {
  text-align: left;
}

.unit {
  margin-left: 10px;
}

.red {
  background: #ff1a1a;
  color: black;
  padding: 4px 8px;
  font-weight: bold;
}

.bold {
  font-weight: bold;
}

.final-result {
  margin: 30px 40px;
  background: #fff200;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: bold;

  display: inline-flex;  
  align-items: center;
  gap: 40px;

  width: fit-content; 
}

.final-number {
  font-weight: bold;
}

.final-unit {
  font-weight: bold;
}

.final-value {
  margin-left: auto;
}

/* ================= RESPONSIVE ================= */

/* Tablet */
@media (max-width: 1024px) {
  .calc-wrapper {
    padding: 20px;
    gap: 20px;
  }

  .calc-row {
    grid-template-columns: 35px 160px 100px auto;
    font-size: 16px;
  }

  .final-result {
    font-size: 13px;
    margin: 20px;
  }
}


/* Mobile */
@media (max-width: 768px) {

  /* 2 kolom jadi 1 kolom */
  .calc-wrapper {
    flex-direction: column;
    gap: 10px;
    padding: 15px;
  }

  .calc-column {
    width: 100%;
  }

  /* Layout row lebih fleksibel */
  .calc-row {
    grid-template-columns: 30px 1fr;
    grid-row-gap: 4px;
    font-size: 13px;
  }

  .calc-row .value {
    grid-column: 2;
    font-weight: bold;
  }

  .calc-row .unit {
    grid-column: 2;
    font-size: 13px;
    color: #555;
  }

  /* Final result stack */
  .final-result {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    margin: 20px 15px;
  }

  .final-value {
    margin-left: 0;
    font-size: 13px;
  }
}


/* Extra small phone */
@media (max-width: 480px) {

  .calc-row {
    font-size: 14px;
  }

  .final-result {
    font-size: 13px;
  }

}

.btn-finish-edit{
position: fixed;
top: 20px;
right: 20px;
background: #28a745;
color: white;
border: none;
padding: 10px 16px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
z-index: 999;
}

.btn-finish-edit:hover{
background: #218838;
}

.sidebar-menu{
flex: 1;
overflow-y: auto;
padding-bottom: 20px;
}

.sidebar-menu::-webkit-scrollbar{
width:6px;
}

.sidebar-menu::-webkit-scrollbar-thumb{
background:#c9c9c9;
border-radius:6px;
}

.sidebar-section{
font-size:11px;
text-transform:uppercase;
color:#7a8896;
padding:12px 20px 6px;
letter-spacing:0.5px;
}

.sidebar-menu li{
display:flex;
align-items:center;
gap:10px;
padding:10px 20px;
cursor:pointer;
color:#2c3e50;
transition:all 0.2s ease;
}

.sidebar-menu li:hover{
background:#f4f7fb;
color:#1a73e8;
}

.sidebar-menu li .icon{
font-size:14px;
width:18px;
text-align:center;
}

.sidebar-menu li.active{
background:#e8f0fe;
color:#1a73e8;
font-weight:600;
border-left:3px solid #1a73e8;
}body {
	background: white;
}

.home-container {
  height: 94vh;
}

.table-modern {
  width: 100%;
  border-collapse: separate;   /* penting */
  border-spacing: 0 10px;      /* jarak antar row */
}

.table-modern tr {
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border-radius: 8px;
}

.table-modern td {
  padding: 12px 16px;
  vertical-align: middle;

  /* HILANGKAN garis antar kolom */
  border-top: 1px solid #e2e6ea;
  border-bottom: 1px solid #e2e6ea;
  border-left: none;
  border-right: none;
}

/* sisi kiri row */
.table-modern tr td:first-child {
  border-left: 1px solid #e2e6ea;
  border-radius: 10px 0 0 10px;
}

/* sisi kanan row */
.table-modern tr td:last-child {
  border-right: 1px solid #e2e6ea;
  border-radius: 0 10px 10px 0;
}


/* row hasil (PoF) */
.result-row {
  background-color: #f1f7ff !important;
}

.result-row td {
  border-color: #cfe2ff !important;
}

/* =========================
   BOOTSTRAP-LIKE TABLE
========================= */
.table-bs {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 12px;
}

/* ===== HEADER ===== */
.table-bs thead th {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
}

/* ===== BODY ===== */
.table-bs tbody td {
  border: 1px solid #dee2e6;
  padding: 10px 12px;
  vertical-align: middle;
}

/* STRIPED */
.table-bs tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}

/* HOVER */
.table-bs tbody tr:hover {
  background-color: #e9ecef;
}

/* ALIGNMENT */
.text-center {
  text-align: center;
}

/* ===== BADGE ===== */
.badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 10px;
}

.badge-success {
  background-color: #d1e7dd;
  color: #0f5132;
}

.badge-danger {
  background-color: #f8d7da;
  color: #842029;
}

/* ===== ROW STATE ===== */
.table-danger {
  background-color: #f8d7da !important;
}


/* =============================
      DROPDOWN DESKTOP
   ============================= */
/* container untuk card */
.card-wrapper {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  height: 100%;
  padding: 10px;
}

/* card style */
.card {
  flex: 1 1 45%;
  height: 98%;
  overflow-y: auto;
  background: #f6f6f6;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
  text-align: center; /* 👈 rata tengah */
}

/* hover effect */
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
}

.card p {
  margin: 0;
  color: #555;
  font-size: 14px;
}

/* 📱 Mobile */
@media (max-width: 768px) {
  .card {
    flex: 1 1 100%;
  }
}

/**form input*/
.input-wrapper {
  position: relative;
  width: 100%;
}

.table-input {
  width: 85%;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1.5px solid #e5e7eb;
  background: linear-gradient(180deg, #ffffff, #fafafa);
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.25s ease;
}

/* hover */
.table-input:hover {
  border-color: #c7d2fe;
}

/* focus */
.table-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 
    0 0 0 3px rgba(99, 102, 241, 0.2),
    inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* placeholder */
.table-input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

.risk-matrix {
  border-collapse: collapse;
}

.risk-cell {
  width: 55px;
  height: 45px;
  text-align: center;
  font-weight: bold;
  border: 1px solid #333;
}

.impact-label {
  width: 60px;
  height: 80px;
  padding: 0;
  vertical-align: middle;
}



.impact-text {
  display: flex;
  justify-content: left;
  align-items: center;

  height: 100%;
  width: 100%;

  font-size: 11px;
  font-weight: bold;
  white-space: nowrap;

  /* ROTASI + OFFSET HALUS */
  transform: rotate(-90deg) translateY(8px);
}

.likelihood-label{
  font-size: 11px;
  font-weight: bold;
  white-space: nowrap;
  text-align: right;
}

/* =========================
   WRAPPER SEBELAHAN
========================= */
.risk-matrix-wrapper {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-top: 20px;
  flex-wrap: wrap; /* responsive */
}

.risk-left {
  flex: 0 0 auto;
}

.risk-right {
  flex: 1;
  min-width: 220px;
}

/* =========================
   LEGEND KANAN
========================= */
.risk-legend-title {
  font-weight: 600;
  margin-bottom: 8px;
}

.risk-legend {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.risk-legend td {
  padding: 8px 12px;
  border: 1px solid #ddd;
}

/* =========================================================
 RISK MATRIX
========================================================= */

.rbiheat-risk-matrix-wrapper{
  display:flex;
  align-items:flex-start;     
  justify-content:center;
  gap:10px;                   
  flex-wrap:nowrap;
  width:100%;
  margin-top:20px;
}

/* ===== MATRIX KIRI ===== */

.rbiheat-risk-left{
  flex:0 0 auto;
}

/* ===== MATRIX TABLE ===== */

.rbiheat-risk-matrix{
  border-collapse: collapse;
  background:white;
}

/* header & cell */

.rbiheat-risk-matrix th,
.rbiheat-risk-matrix td{
  border:none;
  text-align:center;
  font-weight:bold;
  
}

/* 🔥 ukuran matrix diatur DI SINI */

.rbiheat-risk-matrix td{
  width:42px;
  height:42px;
  font-size:14px;
}

/* ===== IMPACT LABEL (atas) ===== */

.impact-label{
  width:42px;
  height:85px;
  padding:0;
}

.impact-text{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  font-size:11px;
  font-weight:600;
  transform: rotate(-90deg);
  white-space:nowrap;
}

/* ===== LIKELIHOOD LABEL (kiri) ===== */

.likelihood-label{
  font-size:12px;
  font-weight:600;
  text-align:right;
  padding-right:8px;
  white-space:nowrap;
  background:#f7f7f7;
}

/* ===== LEGEND KANAN ===== */

.rbiheat-risk-right{
  flex:0 0 auto;
  min-width:220px;
  align-self:flex-start;
}

.risk-legend-title{
  font-weight:600;
  margin-bottom:10px;
  font-size:18px;
}

/* legend table */

.rbiheat-risk-legend{
  width:220px;
  border-collapse:collapse;
  font-size:15px;
}

.rbiheat-risk-legend td{
  padding:10px 14px;
  border:1px solid #ddd;
}

/* ===== WARNA ===== */

.risk-high { background:#d7191c; color:white; }
.risk-moderate-high { background:#fdae61; }
.risk-moderate { background:#ffff00; }
.risk-low-moderate { background:#91cf60; }
.risk-low { background:#1a9641; color:white; }

/* ===== BLINK ACTIVE ===== */

@keyframes blink-hard {
  0% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.08); filter: brightness(1.6); }
  100% { transform: scale(1); filter: brightness(1); }
}

.blink{
  animation: blink-hard 0.9s infinite;
  outline:3px solid black;
}

/* ===== SUMMARY ===== */

.risk-summary{
  margin-top:14px;
  font-weight:600;
  font-size:16px;
}
/* =========================
   KEDIP (CELL & LEGEND)
========================= */
@keyframes blink-hard {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.08);
    filter: brightness(1.6);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

.blink {
  animation: blink-hard 0.9s infinite;
  outline: 3px solid black;
}
/* =========================
   RIGHT SIDEBAR
========================= */
.right-sidebar {
  position: fixed;
  top: 0;
  right: -320px;          /* hidden */
  width: 320px;
  height: 100vh;

  background: #ffffff;
  border-left: 1px solid #e5e7eb;
  box-shadow: -6px 0 20px rgba(0,0,0,0.15);

  z-index: 1300;
  transition: right 0.3s ease;
}

.right-sidebar.open {
  right: 0;
}

/* =========================
   SIDEBAR HEADER
========================= */
.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 16px;
  font-weight: 600;
  border-bottom: 1px solid #e5e7eb;
}

.sidebar-close {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

/* =========================
   SIDEBAR CONTENT
========================= */
.sidebar-content {
  padding: 16px;
}

.sidebar-content h4 {
  margin: 12px 0 8px;
  font-size: 14px;
}

/* =========================
   SIDEBAR BUTTON
========================= */
.sidebar-btn {
  width: 100%;
  padding: 10px;
  margin-bottom: 8px;

  background: transparent;
  border: 1px solid #d1d5db;
  border-radius: 8px;

  cursor: pointer;
  font-size: 14px;
}

.sidebar-btn:hover {
  background: #f9fafb;
}

/* =========================
   OVERLAY
========================= */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 1250;
}

/* =========================
   FLOATING ACTION GROUP
========================= */
/* =========================
   FLOATING FOLDER BUTTON
========================= */
/* =========================
   FLOATING FOLDER ICON ONLY
========================= */
.floating-folder {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1400;
}

.floating-folder-btn {
  background: transparent;
  border: none;
  padding: 0;

  font-size: 30px;   /* ukuran icon */
  cursor: pointer;

  color: #1f2937;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.floating-folder-btn:hover {
  transform: scale(1.15);
  opacity: 0.85;
}


/* =========================
   FLOATING ACTION GROUP
========================= */
/* =========================
   FLOATING ACTION GROUP
========================= */
.floating-actions {
  position: fixed;
  bottom: 70px; /* naik di atas folder */
  right: 24px;

  display: flex;
  flex-direction: column;
  gap: 12px;

  z-index: 1350;
}

/* ICON BUTTON ONLY */
.floating-save,
.floating-gear {
  background: transparent;
  border: none;
  padding: 0;

  font-size: 26px;
  cursor: pointer;
  color: #1f2937;

  transition: transform 0.15s ease, opacity 0.15s ease;
}

.floating-save:hover,
.floating-gear:hover {
  transform: scale(1.15);
  opacity: 0.85;
}

.sidebar-menu{
flex: 1;
overflow-y: auto;
padding-bottom: 20px;
}

.sidebar-menu::-webkit-scrollbar{
width:6px;
}

.sidebar-menu::-webkit-scrollbar-thumb{
background:#c9c9c9;
border-radius:6px;
}

.sidebar-section{
font-size:11px;
text-transform:uppercase;
color:#7a8896;
padding:12px 20px 6px;
letter-spacing:0.5px;
}

.sidebar-menu li{
display:flex;
align-items:center;
gap:10px;
padding:10px 20px;
cursor:pointer;
color:#2c3e50;
transition:all 0.2s ease;
}

.sidebar-menu li:hover{
background:#f4f7fb;
color:#1a73e8;
}

.sidebar-menu li .icon{
font-size:14px;
width:18px;
text-align:center;
}

.sidebar-menu li.active{
background:#e8f0fe;
color:#1a73e8;
font-weight:600;
border-left:3px solid #1a73e8;
}.df-container {
  width: 100%;
  max-width: 1100px;
  margin: auto;
  background: #f8f9fb;
  padding: 30px;
  border-radius: 8px;
}

.df-title {
  text-align: center;
  font-weight: 600;
  margin-bottom: 30px;
  color: #2c3e50;
}

.df-section {
  background: white;
  margin-bottom: 25px;
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  overflow: hidden;
}

.df-section-title {
  background: #e9edf2;
  padding: 12px 15px;
  font-weight: 600;
  color: #34495e;
  border-bottom: 1px solid #dcdcdc;
}

.df-row {
  display: grid;
  grid-template-columns: 2fr 1fr 100px;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid #f1f1f1;
}

.df-row:last-child {
  border-bottom: none;
}

.df-row label {
  font-size: 14px;
  color: #555;
}

.df-row input {
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.df-row select {
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  max-width: 180px;
}

.unit {
  font-size: 13px;
  color: #888;
  padding-left: 10px;
}

.inspection-table-wrapper {
  margin: 10px;
  overflow-x: auto;
}

.inspection-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.inspection-table th,
.inspection-table td {
  border: 1px solid #999;
  padding: 8px;
  text-align: center;
}

.inspection-table thead {
  background-color: #d9d9d9;
  font-weight: 600;
}

.inspection-table tbody td {
  background-color: #dfe8d8; /* hijau muda seperti gambar */
}

.active-col {
  background-color: #b7d7a8 !important;
  font-weight: 600;
}

.final-result {
  font-weight: 700;
  color: blue;
  background: #eef3ff;
}

.btn-finish-edit{
position: fixed;
top: 20px;
right: 20px;
background: #28a745;
color: white;
border: none;
padding: 10px 16px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
z-index: 999;
}

.btn-finish-edit:hover{
background: #218838;
}

.sidebar-menu{
flex: 1;
overflow-y: auto;
padding-bottom: 20px;
}

.sidebar-menu::-webkit-scrollbar{
width:6px;
}

.sidebar-menu::-webkit-scrollbar-thumb{
background:#c9c9c9;
border-radius:6px;
}

.sidebar-section{
font-size:11px;
text-transform:uppercase;
color:#7a8896;
padding:12px 20px 6px;
letter-spacing:0.5px;
}

.sidebar-menu li{
display:flex;
align-items:center;
gap:10px;
padding:10px 20px;
cursor:pointer;
color:#2c3e50;
transition:all 0.2s ease;
}

.sidebar-menu li:hover{
background:#f4f7fb;
color:#1a73e8;
}

.sidebar-menu li .icon{
font-size:14px;
width:18px;
text-align:center;
}

.sidebar-menu li.active{
background:#e8f0fe;
color:#1a73e8;
font-weight:600;
border-left:3px solid #1a73e8;
}.mf-container {
  width: 100%;
  background: #f2f2f2;
  font-family: Arial, sans-serif;
  padding-bottom: 40px;
}

.mf-header {
  background: black;
  color: white;
  padding: 12px;
  font-weight: bold;
  text-align: center;
  font-size: 16px;
}

.mf-section {
  background: #d9d9d9;
  padding: 15px;
  margin: 10px;
  border: 1px solid #999;
}

.mf-section-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.mf-section-title.red {
  color: red;
}

.mf-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.mf-row label {
  width: 70%;
  font-size: 14px;
}

.mf-input {
  width: 25%;
  padding: 6px 8px;
  background: #f4e3b1;
  border: 1px solid #777;
  box-sizing: border-box;
  height: 34px;
  font-size: 14px;
}

.mf-input.highlight {
  background: #fff3cd;
  font-weight: bold;
}

.mf-input.final {
  background: #cfe2ff;
  font-weight: bold;
  font-size: 15px;
}

.btn-finish-edit{
position: fixed;
top: 20px;
right: 20px;
background: #28a745;
color: white;
border: none;
padding: 10px 16px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
z-index: 999;
}

.btn-finish-edit:hover{
background: #218838;
}

.sidebar-menu{
flex: 1;
overflow-y: auto;
padding-bottom: 20px;
}

.sidebar-menu::-webkit-scrollbar{
width:6px;
}

.sidebar-menu::-webkit-scrollbar-thumb{
background:#c9c9c9;
border-radius:6px;
}

.sidebar-section{
font-size:11px;
text-transform:uppercase;
color:#7a8896;
padding:12px 20px 6px;
letter-spacing:0.5px;
}

.sidebar-menu li{
display:flex;
align-items:center;
gap:10px;
padding:10px 20px;
cursor:pointer;
color:#2c3e50;
transition:all 0.2s ease;
}

.sidebar-menu li:hover{
background:#f4f7fb;
color:#1a73e8;
}

.sidebar-menu li .icon{
font-size:14px;
width:18px;
text-align:center;
}

.sidebar-menu li.active{
background:#e8f0fe;
color:#1a73e8;
font-weight:600;
border-left:3px solid #1a73e8;
}.itp-container {
  background: #fff;
  padding: 20px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  width: 90%;
  margin: 0 auto;
}

.itp-title {
  text-align: center;
  font-weight: bold;
  margin-bottom: 18px;
}

.itp-step {
  margin-bottom: 18px;
  border: 1px solid #bbb;
}

.itp-step-header {
  background: #e5e5e5;
  padding: 6px 10px;
  font-weight: bold;
}

.result-header {
  background: #cfe2ff;
}

.itp-table {
  width: 100%;
  border-collapse: collapse;
}

.itp-table td {
  border: 1px solid #999;
  padding: 6px;
  vertical-align: middle;
}

.itp-no {
  text-align: center;
  background: #f2f2f2;
  font-weight: bold;
}

.itp-table input,
.itp-table select {
  width: 100%;
  height: 28px;
  box-sizing: border-box;
  font-size: 13px;
  padding: 4px 6px;
}

.table-input {
  border-radius: 8px;
  border: 1.5px solid #d1d5db;
}

.manual {
  color: red;
  font-size: 12px;
  text-align: center;
}

.auto {
  color: green;
  font-size: 12px;
  text-align: center;
}

.auto-row {
  background: #f9f9f9;
}

.final-result {
  background: #fff3cd;
  font-size: 14px;
}

.btn-finish-edit{
position: fixed;
top: 20px;
right: 20px;
background: #28a745;
color: white;
border: none;
padding: 10px 16px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
z-index: 999;
}

.btn-finish-edit:hover{
background: #218838;
}

.sidebar-menu{
flex: 1;
overflow-y: auto;
padding-bottom: 20px;
}

.sidebar-menu::-webkit-scrollbar{
width:6px;
}

.sidebar-menu::-webkit-scrollbar-thumb{
background:#c9c9c9;
border-radius:6px;
}

.sidebar-section{
font-size:11px;
text-transform:uppercase;
color:#7a8896;
padding:12px 20px 6px;
letter-spacing:0.5px;
}

.sidebar-menu li{
display:flex;
align-items:center;
gap:10px;
padding:10px 20px;
cursor:pointer;
color:#2c3e50;
transition:all 0.2s ease;
}

.sidebar-menu li:hover{
background:#f4f7fb;
color:#1a73e8;
}

.sidebar-menu li .icon{
font-size:14px;
width:18px;
text-align:center;
}

.sidebar-menu li.active{
background:#e8f0fe;
color:#1a73e8;
font-weight:600;
border-left:3px solid #1a73e8;
}body {
	background: white;
}

.home-container {
  height: 94vh;
}

.table-modern {
  width: 100%;
  border-collapse: separate;   /* penting */
  border-spacing: 0 10px;      /* jarak antar row */
}

.table-modern tr {
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border-radius: 8px;
}

.table-modern td {
  padding: 12px 16px;
  vertical-align: middle;

  /* HILANGKAN garis antar kolom */
  border-top: 1px solid #e2e6ea;
  border-bottom: 1px solid #e2e6ea;
  border-left: none;
  border-right: none;
}

/* sisi kiri row */
.table-modern tr td:first-child {
  border-left: 1px solid #e2e6ea;
  border-radius: 10px 0 0 10px;
}

/* sisi kanan row */
.table-modern tr td:last-child {
  border-right: 1px solid #e2e6ea;
  border-radius: 0 10px 10px 0;
}


/* row hasil (PoF) */
.result-row {
  background-color: #f1f7ff !important;
}

.result-row td {
  border-color: #cfe2ff !important;
}

/* =========================
   BOOTSTRAP-LIKE TABLE
========================= */
.table-bs {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 12px;
}

/* ===== HEADER ===== */
.table-bs thead th {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
}

/* ===== BODY ===== */
.table-bs tbody td {
  border: 1px solid #dee2e6;
  padding: 10px 12px;
  vertical-align: middle;
}

/* STRIPED */
.table-bs tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}

/* HOVER */
.table-bs tbody tr:hover {
  background-color: #e9ecef;
}

/* ALIGNMENT */
.text-center {
  text-align: center;
}

/* ===== BADGE ===== */
.badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 10px;
}

.badge-success {
  background-color: #d1e7dd;
  color: #0f5132;
}

.badge-danger {
  background-color: #f8d7da;
  color: #842029;
}

/* ===== ROW STATE ===== */
.table-danger {
  background-color: #f8d7da !important;
}


/* =============================
      DROPDOWN DESKTOP
   ============================= */
/* container untuk card */
.card-wrapper {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  height: 100%;
  padding: 10px;
}

/* card style */
.card {
  flex: 1 1 45%;
  height: 98%;
  overflow-y: auto;
  background: #f6f6f6;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
  text-align: center; /* 👈 rata tengah */
}

/* hover effect */
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
}

.card p {
  margin: 0;
  color: #555;
  font-size: 14px;
}

/* 📱 Mobile */
@media (max-width: 768px) {
  .card {
    flex: 1 1 100%;
  }
}

/**form input*/
.input-wrapper {
  position: relative;
  width: 100%;
}

.table-input {
  width: 85%;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1.5px solid #e5e7eb;
  background: linear-gradient(180deg, #ffffff, #fafafa);
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.25s ease;
}

/* hover */
.table-input:hover {
  border-color: #c7d2fe;
}

/* focus */
.table-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 
    0 0 0 3px rgba(99, 102, 241, 0.2),
    inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* placeholder */
.table-input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

/* =========================================================
 RISK MATRIX
========================================================= */

.rbiheat-risk-matrix-wrapper{
  display:flex;
  align-items:flex-start;     
  justify-content:center;
  gap:10px;                   
  flex-wrap:nowrap;
  width:100%;
  margin-top:20px;
}

/* ===== MATRIX KIRI ===== */

.rbiheat-risk-left{
  flex:0 0 auto;
}

/* ===== MATRIX TABLE ===== */

.rbiheat-risk-matrix{
  border-collapse: collapse;
  background:white;
}

/* header & cell */

.rbiheat-risk-matrix th,
.rbiheat-risk-matrix td{
  border:none;
  text-align:center;
  font-weight:bold;
  
}

/* 🔥 ukuran matrix diatur DI SINI */

.rbiheat-risk-matrix td{
  width:42px;
  height:42px;
  font-size:14px;
}

/* ===== IMPACT LABEL (atas) ===== */

.impact-label{
  width:42px;
  height:85px;
  padding:0;
}

.impact-text{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  font-size:11px;
  font-weight:600;
  transform: rotate(-90deg);
  white-space:nowrap;
}

/* ===== LIKELIHOOD LABEL (kiri) ===== */

.likelihood-label{
  font-size:12px;
  font-weight:600;
  text-align:right;
  padding-right:8px;
  white-space:nowrap;
  background:#f7f7f7;
}

/* ===== LEGEND KANAN ===== */

.rbiheat-risk-right{
  flex:0 0 auto;
  min-width:220px;
  align-self:flex-start;
}

.risk-legend-title{
  font-weight:600;
  margin-bottom:10px;
  font-size:18px;
}

/* legend table */

.rbiheat-risk-legend{
  width:220px;
  border-collapse:collapse;
  font-size:15px;
}

.rbiheat-risk-legend td{
  padding:10px 14px;
  border:1px solid #ddd;
}

/* ===== WARNA ===== */

.risk-high { background:#d7191c; color:white; }
.risk-moderate-high { background:#fdae61; }
.risk-moderate { background:#ffff00; }
.risk-low-moderate { background:#91cf60; }
.risk-low { background:#1a9641; color:white; }

/* ===== BLINK ACTIVE ===== */

@keyframes blink-hard {
  0% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.08); filter: brightness(1.6); }
  100% { transform: scale(1); filter: brightness(1); }
}

.blink{
  animation: blink-hard 0.9s infinite;
  outline:3px solid black;
}

/* ===== SUMMARY ===== */

.risk-summary{
  margin-top:14px;
  font-weight:600;
  font-size:16px;
}
/* =========================
   KEDIP (CELL & LEGEND)
========================= */
@keyframes blink-hard {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.08);
    filter: brightness(1.6);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

.blink {
  animation: blink-hard 0.9s infinite;
  outline: 3px solid black;
}

/* =========================
   SUMMARY
========================= */
.risk-summary {
  margin-top: 12px;
  font-weight: 600;
}

/** sidebar setting */

/* =========================
   RIGHT SIDEBAR
========================= */
.right-sidebar {
  position: fixed;
  top: 0;
  right: -320px;          /* hidden */
  width: 320px;
  height: 100vh;

  background: #ffffff;
  border-left: 1px solid #e5e7eb;
  box-shadow: -6px 0 20px rgba(0,0,0,0.15);

  z-index: 1300;
  transition: right 0.3s ease;
}

.right-sidebar.open {
  right: 0;
}

/* =========================
   SIDEBAR HEADER
========================= */
.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 16px;
  font-weight: 600;
  border-bottom: 1px solid #e5e7eb;
}

.sidebar-close {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

/* =========================
   SIDEBAR CONTENT
========================= */
.sidebar-content {
  padding: 16px;
}

.sidebar-content h4 {
  margin: 12px 0 8px;
  font-size: 14px;
}

/* =========================
   SIDEBAR BUTTON
========================= */
.sidebar-btn {
  width: 100%;
  padding: 10px;
  margin-bottom: 8px;

  background: transparent;
  border: 1px solid #d1d5db;
  border-radius: 8px;

  cursor: pointer;
  font-size: 14px;
}

.sidebar-btn:hover {
  background: #f9fafb;
}

/* =========================
   OVERLAY
========================= */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 1250;
}

/* =========================
   FLOATING ACTION GROUP
========================= */
/* =========================
   FLOATING FOLDER BUTTON
========================= */
/* =========================
   FLOATING FOLDER ICON ONLY
========================= */
.floating-folder {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1400;
}

.floating-folder-btn {
  background: transparent;
  border: none;
  padding: 0;

  font-size: 30px;   /* ukuran icon */
  cursor: pointer;

  color: #1f2937;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.floating-folder-btn:hover {
  transform: scale(1.15);
  opacity: 0.85;
}

/* =========================
   FLOATING ACTION GROUP
========================= */
/* =========================
   FLOATING ACTION GROUP
========================= */
.floating-actions {
  position: fixed;
  bottom: 70px; /* naik di atas folder */
  right: 24px;

  display: flex;
  flex-direction: column;
  gap: 12px;

  z-index: 1350;
}

/* ICON BUTTON ONLY */
.floating-save,
.floating-gear {
  background: transparent;
  border: none;
  padding: 0;

  font-size: 26px;
  cursor: pointer;
  color: #1f2937;

  transition: transform 0.15s ease, opacity 0.15s ease;
}

.floating-save:hover,
.floating-gear:hover {
  transform: scale(1.15);
  opacity: 0.85;
}

.sidebar-menu{
flex: 1;
overflow-y: auto;
padding-bottom: 20px;
}

.sidebar-menu::-webkit-scrollbar{
width:6px;
}

.sidebar-menu::-webkit-scrollbar-thumb{
background:#c9c9c9;
border-radius:6px;
}

.sidebar-section{
font-size:11px;
text-transform:uppercase;
color:#7a8896;
padding:12px 20px 6px;
letter-spacing:0.5px;
}

.sidebar-menu li{
display:flex;
align-items:center;
gap:10px;
padding:10px 20px;
cursor:pointer;
color:#2c3e50;
transition:all 0.2s ease;
}

.sidebar-menu li:hover{
background:#f4f7fb;
color:#1a73e8;
}

.sidebar-menu li .icon{
font-size:14px;
width:18px;
text-align:center;
}

.sidebar-menu li.active{
background:#e8f0fe;
color:#1a73e8;
font-weight:600;
border-left:3px solid #1a73e8;
}
.excel-box {
  width: 1200px;
  margin: auto;
  border: 2px solid black;
  font-family: Arial;
}

.title {
  background: black;
  color: white;
  padding: 10px;
  text-align: center;
  font-weight: bold;
}

.grid {
  display: grid;
  grid-template-columns: 650px 40px 200px 310px;
}

.grid > div,
.grid input,
.grid select {
  border: 1px solid #aaa;
  padding: 6px;
}

.yellow-head {
  grid-column: span 4;
  background: yellow;
  font-weight: bold;
}

.gray {
  background: #d9d9d9;
}

.big {
  font-weight: bold;
}

.colon {
  text-align: center;
}

.beige {
  background: #efe2bf;
  font-weight: bold;
}

.blue-cell {
  background: #dce6f1;
}

.step {
  grid-column: span 4;
  color: red;
  font-weight: bold;
}

.note-red {
  color: red;
  font-style: italic;
}

.yellow-note {
  background: yellow;
}

.blue-note {
  color: blue;
  font-style: italic;
}

.final-blue {
  color: blue;
  font-size: 18px;
  font-weight: bold;
}

.btn-finish-edit{
position: fixed;
top: 20px;
right: 20px;
background: #28a745;
color: white;
border: none;
padding: 10px 16px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
z-index: 999;
}

.btn-finish-edit:hover{
background: #218838;
}

.sidebar-menu{
flex: 1;
overflow-y: auto;
padding-bottom: 20px;
}

.sidebar-menu::-webkit-scrollbar{
width:6px;
}

.sidebar-menu::-webkit-scrollbar-thumb{
background:#c9c9c9;
border-radius:6px;
}

.sidebar-section{
font-size:11px;
text-transform:uppercase;
color:#7a8896;
padding:12px 20px 6px;
letter-spacing:0.5px;
}

.sidebar-menu li{
display:flex;
align-items:center;
gap:10px;
padding:10px 20px;
cursor:pointer;
color:#2c3e50;
transition:all 0.2s ease;
}

.sidebar-menu li:hover{
background:#f4f7fb;
color:#1a73e8;
}

.sidebar-menu li .icon{
font-size:14px;
width:18px;
text-align:center;
}

.sidebar-menu li.active{
background:#e8f0fe;
color:#1a73e8;
font-weight:600;
border-left:3px solid #1a73e8;
}body {
	background: white;
}

.home-container {
  height: 94vh;
}

.table-modern {
  width: 100%;
  border-collapse: separate;   /* penting */
  border-spacing: 0 10px;      /* jarak antar row */
}

.table-modern tr {
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border-radius: 8px;
}

.table-modern td {
  padding: 12px 16px;
  vertical-align: middle;

  /* HILANGKAN garis antar kolom */
  border-top: 1px solid #e2e6ea;
  border-bottom: 1px solid #e2e6ea;
  border-left: none;
  border-right: none;
}

/* sisi kiri row */
.table-modern tr td:first-child {
  border-left: 1px solid #e2e6ea;
  border-radius: 10px 0 0 10px;
}

/* sisi kanan row */
.table-modern tr td:last-child {
  border-right: 1px solid #e2e6ea;
  border-radius: 0 10px 10px 0;
}


/* row hasil (PoF) */
.result-row {
  background-color: #f1f7ff !important;
}

.result-row td {
  border-color: #cfe2ff !important;
}

/* =========================
   BOOTSTRAP-LIKE TABLE
========================= */
.table-bs {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 12px;
}

/* ===== HEADER ===== */
.table-bs thead th {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
}

/* ===== BODY ===== */
.table-bs tbody td {
  border: 1px solid #dee2e6;
  padding: 10px 12px;
  vertical-align: middle;
}

/* STRIPED */
.table-bs tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}

/* HOVER */
.table-bs tbody tr:hover {
  background-color: #e9ecef;
}

/* ALIGNMENT */
.text-center {
  text-align: center;
}

/* ===== BADGE ===== */
.badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 10px;
}

.badge-success {
  background-color: #d1e7dd;
  color: #0f5132;
}

.badge-danger {
  background-color: #f8d7da;
  color: #842029;
}

/* ===== ROW STATE ===== */
.table-danger {
  background-color: #f8d7da !important;
}


/* =============================
      DROPDOWN DESKTOP
   ============================= */
/* container untuk card */
.card-wrapper {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  height: 100%;
  padding: 10px;
}

/* card style */
.card {
  flex: 1 1 45%;
  height: 98%;
  overflow-y: auto;
  background: #f6f6f6;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
  text-align: center; /* 👈 rata tengah */
}

/* hover effect */
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
}

.card p {
  margin: 0;
  color: #555;
  font-size: 14px;
}

/* 📱 Mobile */
@media (max-width: 768px) {
  .card {
    flex: 1 1 100%;
  }
}

/**form input*/
.input-wrapper {
  position: relative;
  width: 100%;
}

.table-input {
  width: 85%;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1.5px solid #e5e7eb;
  background: linear-gradient(180deg, #ffffff, #fafafa);
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.25s ease;
}

/* hover */
.table-input:hover {
  border-color: #c7d2fe;
}

/* focus */
.table-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 
    0 0 0 3px rgba(99, 102, 241, 0.2),
    inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* placeholder */
.table-input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

/* =========================================================
 RISK MATRIX
========================================================= */

.rbiheat-risk-matrix-wrapper{
  display:flex;
  align-items:flex-start;     
  justify-content:center;
  gap:10px;                   
  flex-wrap:nowrap;
  width:100%;
  margin-top:20px;
}

/* ===== MATRIX KIRI ===== */

.rbiheat-risk-left{
  flex:0 0 auto;
}

/* ===== MATRIX TABLE ===== */

.rbiheat-risk-matrix{
  border-collapse: collapse;
  background:white;
}

/* header & cell */

.rbiheat-risk-matrix th,
.rbiheat-risk-matrix td{
  border:none;
  text-align:center;
  font-weight:bold;
  
}

/* 🔥 ukuran matrix diatur DI SINI */

.rbiheat-risk-matrix td{
  width:42px;
  height:42px;
  font-size:14px;
}

/* ===== IMPACT LABEL (atas) ===== */

.impact-label{
  width:42px;
  height:85px;
  padding:0;
}

.impact-text{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  font-size:11px;
  font-weight:600;
  transform: rotate(-90deg);
  white-space:nowrap;
}

/* ===== LIKELIHOOD LABEL (kiri) ===== */

.likelihood-label{
  font-size:12px;
  font-weight:600;
  text-align:right;
  padding-right:8px;
  white-space:nowrap;
  background:#f7f7f7;
}

/* ===== LEGEND KANAN ===== */

.rbiheat-risk-right{
  flex:0 0 auto;
  min-width:220px;
  align-self:flex-start;
}

.risk-legend-title{
  font-weight:600;
  margin-bottom:10px;
  font-size:18px;
}

/* legend table */

.rbiheat-risk-legend{
  width:220px;
  border-collapse:collapse;
  font-size:15px;
}

.rbiheat-risk-legend td{
  padding:10px 14px;
  border:1px solid #ddd;
}

/* ===== WARNA ===== */

.risk-high { background:#d7191c; color:white; }
.risk-moderate-high { background:#fdae61; }
.risk-moderate { background:#ffff00; }
.risk-low-moderate { background:#91cf60; }
.risk-low { background:#1a9641; color:white; }

/* ===== BLINK ACTIVE ===== */

@keyframes blink-hard {
  0% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.08); filter: brightness(1.6); }
  100% { transform: scale(1); filter: brightness(1); }
}

.blink{
  animation: blink-hard 0.9s infinite;
  outline:3px solid black;
}

/* ===== SUMMARY ===== */

.risk-summary{
  margin-top:14px;
  font-weight:600;
  font-size:16px;
}
/* =========================
   KEDIP (CELL & LEGEND)
========================= */
@keyframes blink-hard {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.08);
    filter: brightness(1.6);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

.blink {
  animation: blink-hard 0.9s infinite;
  outline: 3px solid black;
}

/* =========================
   SUMMARY
========================= */
.risk-summary {
  margin-top: 12px;
  font-weight: 600;
}

/** sidebar setting */

/* =========================
   RIGHT SIDEBAR
========================= */
.right-sidebar {
  position: fixed;
  top: 0;
  right: -320px;          /* hidden */
  width: 320px;
  height: 100vh;

  background: #ffffff;
  border-left: 1px solid #e5e7eb;
  box-shadow: -6px 0 20px rgba(0,0,0,0.15);

  z-index: 1300;
  transition: right 0.3s ease;
}

.right-sidebar.open {
  right: 0;
}

/* =========================
   SIDEBAR HEADER
========================= */
.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 16px;
  font-weight: 600;
  border-bottom: 1px solid #e5e7eb;
}

.sidebar-close {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

/* =========================
   SIDEBAR CONTENT
========================= */
.sidebar-content {
  padding: 16px;
}

.sidebar-content h4 {
  margin: 12px 0 8px;
  font-size: 14px;
}

/* =========================
   SIDEBAR BUTTON
========================= */
.sidebar-btn {
  width: 100%;
  padding: 10px;
  margin-bottom: 8px;

  background: transparent;
  border: 1px solid #d1d5db;
  border-radius: 8px;

  cursor: pointer;
  font-size: 14px;
}

.sidebar-btn:hover {
  background: #f9fafb;
}

/* =========================
   OVERLAY
========================= */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 1250;
}

/* =========================
   FLOATING ACTION GROUP
========================= */
/* =========================
   FLOATING FOLDER BUTTON
========================= */
/* =========================
   FLOATING FOLDER ICON ONLY
========================= */
.floating-folder {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1400;
}

.floating-folder-btn {
  background: transparent;
  border: none;
  padding: 0;

  font-size: 30px;   /* ukuran icon */
  cursor: pointer;

  color: #1f2937;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.floating-folder-btn:hover {
  transform: scale(1.15);
  opacity: 0.85;
}

/* =========================
   FLOATING ACTION GROUP
========================= */
/* =========================
   FLOATING ACTION GROUP
========================= */
.floating-actions {
  position: fixed;
  bottom: 70px; /* naik di atas folder */
  right: 24px;

  display: flex;
  flex-direction: column;
  gap: 12px;

  z-index: 1350;
}

/* ICON BUTTON ONLY */
.floating-save,
.floating-gear {
  background: transparent;
  border: none;
  padding: 0;

  font-size: 26px;
  cursor: pointer;
  color: #1f2937;

  transition: transform 0.15s ease, opacity 0.15s ease;
}

.floating-save:hover,
.floating-gear:hover {
  transform: scale(1.15);
  opacity: 0.85;
}

.sidebar-menu{
flex: 1;
overflow-y: auto;
padding-bottom: 20px;
}

.sidebar-menu::-webkit-scrollbar{
width:6px;
}

.sidebar-menu::-webkit-scrollbar-thumb{
background:#c9c9c9;
border-radius:6px;
}

.sidebar-section{
font-size:11px;
text-transform:uppercase;
color:#7a8896;
padding:12px 20px 6px;
letter-spacing:0.5px;
}

.sidebar-menu li{
display:flex;
align-items:center;
gap:10px;
padding:10px 20px;
cursor:pointer;
color:#2c3e50;
transition:all 0.2s ease;
}

.sidebar-menu li:hover{
background:#f4f7fb;
color:#1a73e8;
}

.sidebar-menu li .icon{
font-size:14px;
width:18px;
text-align:center;
}

.sidebar-menu li.active{
background:#e8f0fe;
color:#1a73e8;
font-weight:600;
border-left:3px solid #1a73e8;
}
.react-datepicker__navigation-icon::before, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  border-color: #ccc;
  border-style: solid;
  border-width: 3px 3px 0 0;
  content: "";
  display: block;
  height: 9px;
  position: absolute;
  top: 6px;
  width: 9px;
}
.react-datepicker__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.react-datepicker-wrapper {
  display: inline-block;
  padding: 0;
  border: 0;
}

.react-datepicker {
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
  line-height: initial;
}

.react-datepicker--time-only .react-datepicker__time-container {
  border-left: 0;
}
.react-datepicker--time-only .react-datepicker__time,
.react-datepicker--time-only .react-datepicker__time-box {
  border-bottom-left-radius: 0.375em;
  border-bottom-right-radius: 0.375em;
}

.react-datepicker-popper {
  z-index: 1;
  line-height: 0;
}
.react-datepicker-popper .react-datepicker__triangle {
  stroke: #aeaeae;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
  fill: #f0f0f0;
  color: #f0f0f0;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
  fill: #fff;
  color: #fff;
}
.react-datepicker-popper--header-middle[data-placement^=bottom] .react-datepicker__triangle, .react-datepicker-popper--header-bottom[data-placement^=bottom] .react-datepicker__triangle {
  fill: #fff;
  color: #fff;
}
.react-datepicker-popper--header-bottom[data-placement^=top] .react-datepicker__triangle {
  fill: #f0f0f0;
  color: #f0f0f0;
}

.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  padding: 8px 0;
  position: relative;
}
.react-datepicker__header--time {
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}
.react-datepicker__header--time:not(.react-datepicker__header--time--only) {
  border-top-left-radius: 0;
}
.react-datepicker__header:not(.react-datepicker__header--has-time-select, .react-datepicker__header--middle, .react-datepicker__header--bottom) {
  border-top-right-radius: 0.3rem;
}
.react-datepicker__header--middle {
  border-top: 1px solid #aeaeae;
  border-radius: 0;
  margin-top: 4px;
}
.react-datepicker__header--bottom {
  border-bottom: none;
  border-top: 1px solid #aeaeae;
  border-radius: 0 0 0.3rem 0.3rem;
}

.react-datepicker__header-wrapper {
  position: relative;
}
.react-datepicker__header-wrapper .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 2px;
}

.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
  display: inline-block;
  margin: 0 15px;
}

.react-datepicker__month-select,
.react-datepicker__year-select,
.react-datepicker__month-year-select {
  background-color: transparent;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  margin-top: 5px;
  padding: 2px 5px;
}
.react-datepicker__month-select:focus-visible,
.react-datepicker__year-select:focus-visible,
.react-datepicker__month-year-select:focus-visible {
  outline: auto 1px;
}

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 0.944rem;
}

h2.react-datepicker__current-month {
  padding: 0;
  margin: 0;
}

.react-datepicker-time__header {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.react-datepicker__navigation {
  align-items: center;
  background: none;
  display: flex;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 2px;
  padding: 0;
  border: none;
  z-index: 1;
  height: 32px;
  width: 32px;
  text-indent: -999em;
  overflow: hidden;
}
.react-datepicker__navigation--previous {
  left: 2px;
}
.react-datepicker__navigation--next {
  right: 2px;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 85px;
}
.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__navigation--years-previous {
  top: 4px;
}
.react-datepicker__navigation--years-upcoming {
  top: -4px;
}
.react-datepicker__navigation:hover *::before {
  border-color: rgb(165.75, 165.75, 165.75);
}

.react-datepicker__navigation-icon {
  position: relative;
  top: -1px;
  font-size: 20px;
  width: 0;
}
.react-datepicker__navigation-icon--next {
  left: -2px;
}
.react-datepicker__navigation-icon--next::before {
  transform: rotate(45deg);
  left: -7px;
}
.react-datepicker__navigation-icon--previous {
  right: -2px;
}
.react-datepicker__navigation-icon--previous::before {
  transform: rotate(225deg);
  right: -7px;
}

.react-datepicker__month-container {
  float: left;
}

.react-datepicker__year {
  margin: 0.5em;
  text-align: center;
}
.react-datepicker__year-wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: 180px;
}
.react-datepicker__year .react-datepicker__year-text {
  display: inline-block;
  width: 5em;
  margin: 2px;
}

.react-datepicker__month {
  margin: 0.5em;
  text-align: center;
}
.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
  display: inline-block;
  width: 5em;
  margin: 2px;
}

.react-datepicker__input-time-container {
  clear: both;
  width: 100%;
  float: left;
  margin: 5px 0 10px 15px;
  text-align: left;
}
.react-datepicker__input-time-container .react-datepicker-time__caption {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
  display: inline-block;
  margin-left: 10px;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
  width: auto;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
  -moz-appearance: textfield;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
  margin-left: 5px;
  display: inline-block;
}

.react-datepicker__time-container {
  float: right;
  border-left: 1px solid #aeaeae;
  width: 85px;
}
.react-datepicker__time-container--with-today-button {
  display: inline;
  border: 1px solid #aeaeae;
  border-radius: 0.375em;
  position: absolute;
  right: -87px;
  top: 0;
}
.react-datepicker__time-container .react-datepicker__time {
  position: relative;
  background: white;
  border-bottom-right-radius: 0.375em;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  width: 85px;
  overflow-x: hidden;
  margin: 0 auto;
  text-align: center;
  border-bottom-right-radius: 0.375em;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
  list-style: none;
  margin: 0;
  height: calc(195px + 2.125em / 2);
  overflow-y: scroll;
  padding-right: 0;
  padding-left: 0;
  width: 100%;
  box-sizing: content-box;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  height: 30px;
  padding: 5px 10px;
  white-space: nowrap;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background-color: #216ba5;
  color: white;
  font-weight: bold;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
  background-color: #216ba5;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
  color: #ccc;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
  cursor: default;
  background-color: transparent;
}

.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 2.125em;
  line-height: 2.125em;
  text-align: center;
  margin: 0.208em;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__week-number--selected {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__week-number--selected:hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}

.react-datepicker__day-names {
  text-align: center;
  white-space: nowrap;
  margin-bottom: -8px;
}

.react-datepicker__week {
  white-space: nowrap;
}

.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
  color: #000;
  display: inline-block;
  width: 2.125em;
  line-height: 2.125em;
  text-align: center;
  margin: 0.208em;
}
.react-datepicker__day-name--disabled,
.react-datepicker__day--disabled,
.react-datepicker__time-name--disabled {
  cursor: default;
  color: #ccc;
}

.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text,
.react-datepicker__year-text {
  cursor: pointer;
}
.react-datepicker__day:not([aria-disabled=true]):hover,
.react-datepicker__month-text:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text:not([aria-disabled=true]):hover,
.react-datepicker__year-text:not([aria-disabled=true]):hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today,
.react-datepicker__year-text--today {
  font-weight: bold;
}
.react-datepicker__day--highlighted,
.react-datepicker__month-text--highlighted,
.react-datepicker__quarter-text--highlighted,
.react-datepicker__year-text--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}
.react-datepicker__day--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
  background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);
}
.react-datepicker__day--highlighted-custom-1,
.react-datepicker__month-text--highlighted-custom-1,
.react-datepicker__quarter-text--highlighted-custom-1,
.react-datepicker__year-text--highlighted-custom-1 {
  color: magenta;
}
.react-datepicker__day--highlighted-custom-2,
.react-datepicker__month-text--highlighted-custom-2,
.react-datepicker__quarter-text--highlighted-custom-2,
.react-datepicker__year-text--highlighted-custom-2 {
  color: green;
}
.react-datepicker__day--holidays,
.react-datepicker__month-text--holidays,
.react-datepicker__quarter-text--holidays,
.react-datepicker__year-text--holidays {
  position: relative;
  border-radius: 0.3rem;
  background-color: #ff6803;
  color: #fff;
}
.react-datepicker__day--holidays .overlay,
.react-datepicker__month-text--holidays .overlay,
.react-datepicker__quarter-text--holidays .overlay,
.react-datepicker__year-text--holidays .overlay {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}
.react-datepicker__day--holidays:not([aria-disabled=true]):hover,
.react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,
.react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
  background-color: rgb(207, 82.9642857143, 0);
}
.react-datepicker__day--holidays:hover .overlay,
.react-datepicker__month-text--holidays:hover .overlay,
.react-datepicker__quarter-text--holidays:hover .overlay,
.react-datepicker__year-text--holidays:hover .overlay {
  visibility: visible;
  opacity: 1;
}
.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__day--selected:not([aria-disabled=true]):hover, .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover, .react-datepicker__day--in-range:not([aria-disabled=true]):hover,
.react-datepicker__month-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__year-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
  border-radius: 0.3rem;
  background-color: rgb(186.25, 217.0833333333, 241.25);
  color: rgb(0, 0, 0);
}
.react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
  color: #fff;
}
.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range) {
  background-color: rgba(33, 107, 165, 0.5);
}
.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range) {
  background-color: #f0f0f0;
  color: #000;
}
.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled,
.react-datepicker__year-text--disabled {
  cursor: default;
  color: #ccc;
}
.react-datepicker__day--disabled .overlay,
.react-datepicker__month-text--disabled .overlay,
.react-datepicker__quarter-text--disabled .overlay,
.react-datepicker__year-text--disabled .overlay {
  position: absolute;
  bottom: 70%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}

.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  width: 100%;
}
.react-datepicker__input-container .react-datepicker__calendar-icon {
  position: absolute;
  padding: 0.625em;
  box-sizing: content-box;
}

.react-datepicker__view-calendar-icon input {
  padding: 6px 10px 5px 25px;
}

.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
  position: relative;
}
.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover {
  cursor: pointer;
}
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  transform: rotate(135deg);
  right: -16px;
  top: 0;
}

.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}
.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover {
  cursor: pointer;
}
.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}

.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}
.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover {
  background-color: #ccc;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected {
  position: absolute;
  left: 15px;
}

.react-datepicker__close-icon {
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: 0;
  padding: 0 6px 0 0;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
.react-datepicker__close-icon::after {
  cursor: pointer;
  background-color: #216ba5;
  color: #fff;
  border-radius: 50%;
  height: 16px;
  width: 16px;
  padding: 2px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  content: "×";
}
.react-datepicker__close-icon--disabled {
  cursor: default;
}
.react-datepicker__close-icon--disabled::after {
  cursor: default;
  background-color: #ccc;
}

.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}

.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}

.react-datepicker__children-container {
  width: 17.25em;
  margin: 0.5em;
  padding-right: 0.25em;
  padding-left: 0.25em;
  height: auto;
}

.react-datepicker__aria-live {
  position: absolute;
  clip-path: circle(0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
  white-space: nowrap;
}

.react-datepicker__calendar-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

.react-datepicker-popper-offset {
  margin-top: -0.7em;
}
body{
background:#f4f6f9;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.risk-page{
padding:0px;
}

.risk-container{
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

.table-title{
font-size:20px;
font-weight:600;
margin-bottom:15px;
color:#1f2937;
}

.risk-table{
width:100%;
border-collapse:collapse;
overflow:hidden;
border-radius:8px;
}

.risk-table th{
background:linear-gradient(90deg,#1f2937,#2c3e50);
color:white;
padding:12px;
text-align:center;
font-weight:600;
}

.risk-table td{
padding:6px 8px;
text-align:center;
border-bottom:1px solid #e5e7eb;
color:#374151;
}

.risk-table tbody tr:nth-child(even){
background:#f9fafb;
}

.risk-table tbody tr:hover{
background:#eef2ff;
transition:0.2s;
}

.option-cell{
display:flex;
justify-content:center;
gap:8px;
}

.btn-view{
background:#3b82f6;
border:none;
color:white;
padding:7px 10px;
border-radius:6px;
cursor:pointer;
}

.btn-view:hover{
background:#2563eb;
}

.btn-delete{
background:#ef4444;
border:none;
color:white;
padding:7px 10px;
border-radius:6px;
cursor:pointer;
}

.btn-delete:hover{
background:#dc2626;
}

.pagination-wrapper{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:15px;
}

.pagination{
display:flex;
gap:6px;
}

.pagination button{
border:1px solid #d1d5db;
background:white;
padding:6px 10px;
border-radius:5px;
cursor:pointer;
color:#111;
font-weight:500;
}

.pagination button:hover{
background:#f3f4f6;
}

.pagination button.active{
background:#2563eb;
color:white;
border-color:#2563eb;
}

.pagination button:disabled{
opacity:0.4;
cursor:not-allowed;
}

.pagination-info{
font-size:13px;
color:#6b7280;
}

.risk-low{
background:#22c55e;
color:white;
}

.risk-medium{
background:#f59e0b;
color:white;
}

.risk-high{
background:#ef4444;
color:white;
}

.matrix{
border-collapse:collapse;
}

.matrix td{
width:18px;
height:18px;
text-align:center;
border:1px solid #e5e7eb;
font-size:8px;
padding:0;
line-height:14px;
}

.risk-high{
background:#ef4444;
color:white;
}

.risk-mh{
background:#f59e0b;
color:white;
}

.risk-moderate{
background:#facc15;
}

.risk-lm{
background:#84cc16;
}

.risk-low{
background:#22c55e;
color:white;
}

.search-bar{
margin-bottom:15px;
display:flex;
align-items:center;
gap:10px;
}

.matrix td.active{
outline:2px solid #3b82f6;
font-weight:bold;
animation:pulse 1.2s infinite;
}

@keyframes pulse{

0%{
transform:scale(1);
box-shadow:0 0 0 0 rgba(0,0,0,0.4);
}

50%{
transform:scale(1.15);
box-shadow:0 0 6px 2px rgba(0,0,0,0.3);
}

100%{
transform:scale(1);
box-shadow:0 0 0 0 rgba(0,0,0,0.4);
}

}

.matrix-group{
display:flex;
flex-direction:column;
align-items:center;
gap:3px;
}

.matrix-label{
font-size:10px;
font-weight:600;
color:#374151;
margin-top:3px;
}

.matrix-row{
display:flex;
justify-content:center;
gap:10px;
}

.matrix-item{
display:flex;
flex-direction:column;
align-items:center;
}

.matrix-label{
font-size:11px;
font-weight:600;
color:#374151;
margin-bottom:3px;
}

.matrix td{
width:16px;
height:16px;
font-size:9px;
border:1px solid #e5e7eb;
}

.matrix td.active{
outline:2px solid #3b82f6;
font-weight:bold;
animation:pulse 1.2s infinite;
}

.search-wrapper{
display:flex;
align-items:center;
margin-bottom:15px;
}

.search-bar{
display:flex;
align-items:center;
gap:10px;
}

.btn-add{
margin-left:auto;
background: linear-gradient(90deg,#1f2937,#2c3e50);
color:white;
padding:8px;
border-radius:6px;
font-size:18px;
cursor:pointer;
}

.btn-add:hover{
background:#626262;
}

.table-scroll {
  width: 100%;
  overflow-x: auto;
}body{
font-family:"Segoe UI",Arial;
background:#f2f3f5;
padding:30px;
}

.sheet{
width:850px;
margin:auto;
background:white;
border:1px solid #ccc;
padding:20px;
}

.title{
background:#9fb0c7;
color:white;
text-align:center;
padding:12px;
font-weight:600;
margin-bottom:15px;
}

.toolbar{
text-align:right;
margin-bottom:10px;
}

button{
background:#2f6ed6;
color:white;
border:none;
padding:6px 14px;
border-radius:4px;
cursor:pointer;
}

button:hover{
background:#1e54a6;
}

table{
width:100%;
border-collapse:collapse;
margin-bottom:20px;
}

td{
border:1px solid #ccc;
padding:8px;
font-size:14px;
}

.pipeline td:first-child{
width:70%;
}

.pipeline td:last-child{
width:30%;
text-align:right;
}

input{
background:#fff45c;
border:1px solid #888;
padding:4px;
width:120px;
text-align:right;
}

.calc td:nth-child(1){width:40%;}
.calc td:nth-child(2){width:15%;text-align:center;}
.calc td:nth-child(3){width:15%;text-align:right;}
.calc td:nth-child(4){width:15%;text-align:right;}
.calc td:nth-child(5){width:15%;text-align:center;}

.header{
background:#d7e0ec;
font-weight:bold;
}

.step{
background:#9ed39e;
text-align:center;
font-weight:bold;
}

.result{
background:#d8caa0;
font-weight:bold;
text-align:center;
}

/* PRINT */

@media print{

.toolbar{
display:none;
}

.sheet{
border:none;
}

input{
border:none;
background:transparent;
}

*{
-webkit-print-color-adjust:exact;
print-color-adjust:exact;
}

}body{
font-family:"Segoe UI",Arial;
background:#f5f6f8;
margin:0;
padding:30px;
}

.sheet{
max-width:950px;
margin:auto;
background:white;
padding:20px;
border:1px solid #444;
box-shadow:0 3px 12px rgba(0,0,0,0.15);
}

.title{
text-align:center;
margin-bottom:20px;
}

.print-btn{
margin-bottom:15px;
padding:6px 14px;
background:#2f6ed6;
color:white;
border:none;
cursor:pointer;
border-radius:3px;
}

/* pipeline form */

.pipeline-box{
background:#eef2f7;
padding:15px;
border:1px solid #bbb;
margin-bottom:20px;
}

.pipeline-box h3{
margin-top:0;
}

.form-grid{
display:grid;
grid-template-columns:1fr 180px;
row-gap:10px;
column-gap:20px;
align-items:center;
}

.form-grid label{
font-weight:500;
}

.form-grid input{
padding:5px 6px;
border:1px solid #999;
border-radius:3px;
text-align:right;
}

.form-grid input:focus{
outline:none;
border:1px solid #2f6ed6;
background:white;
}

/* table */

.calc-table{
width:100%;
border-collapse:collapse;
}

.calc-table td{
border:1px solid #555;
padding:6px;
}

.step{
background:#9ddc9d;
font-weight:600;
text-align:center;
}

.yellow{
background:#ffe16b;
font-weight:600;
text-align:center;
}

.result{
background:#e5d6a9;
text-align:center;
font-weight:600;
font-size:16px;
}

/* print */

@media print{

.print-btn{
display:none;
}

body{
background:white;
padding:0;
}

.sheet{
box-shadow:none;
border:1px solid #333;
}

}

@page{
size:A4;
margin:20mm;
}body{
font-family:Calibri, Arial;
background:#efefef;
padding:30px;
}

.ram-sheet{
width:900px;
margin:auto;
background:white;
padding:30px;
border:1px solid #ccc;
}

.ram-title{
text-align:center;
font-weight:bold;
margin-bottom:30px;
}

.ram-example{
margin-top:40px;
}

.example-bar{
background:black;
color:white;
padding:6px 10px;
font-weight:bold;
margin-bottom:10px;
}

.answer{
margin-top:10px;
margin-bottom:10px;
text-decoration:underline;
}

.formula{
display:flex;
align-items:center;
gap:20px;
margin-bottom:20px;
}

.mtbf{
font-weight:bold;
font-size:18px;
}

.equal{
font-size:18px;
}

.fraction{
display:flex;
flex-direction:column;
align-items:center;
width:220px;
}

.fraction .line{
width:100%;
height:1px;
background:black;
margin:4px 0;
}

.ram-table{
border-collapse:collapse;
}

.ram-table td{
padding:8px 10px;
font-size:16px;
}

.input input{
background:#c8d3df;
border:none;
padding:6px;
width:120px;
text-align:right;
}

.unit{
font-style:italic;
}

.note{
font-style:italic;
color:#555;
}

.result{
background:yellow;
font-weight:bold;
padding:6px;
text-align:right;
width:120px;
}

.note-text{
margin-top:25px;
font-style:italic;
}

.ram-table-sub{
border-collapse:collapse;
margin-top:15px;
}

.ram-table-sub th{
background:#2f5597;
color:white;
padding:8px 12px;
}

.ram-table-sub td{
padding:8px 12px;
border-bottom:1px solid #ccc;
}

.ram-table-sub input{
width:120px;
background:#cfd8e3;
border:none;
padding:5px;
text-align:right;
}

.lambda-total .result{
background:yellow;
font-weight:bold;
text-align:right;
}

.formula-box{
margin-top:20px;
padding:15px;
border:2px solid #4a86e8;
width:420px;
font-style:italic;
}

.mttrs-result{
margin-top:20px;
font-size:18px;
}

.result-box{
background:yellow;
padding:5px 15px;
font-weight:bold;
margin-left:10px;
}

.unit{
margin-left:10px;
font-style:italic;
}

/*excample 4*/
.ram-section{
margin-top:60px;
}

.ram-example-bar{
background:black;
color:white;
font-weight:bold;
padding:6px 12px;
width:90%;
}

.ram-desc{
margin:10px 0 20px 0;
}

.ram-image{
text-align:center;
margin:20px 0;
}

.ram-image img{
width:350px;
box-shadow:0 3px 10px rgba(0,0,0,0.3);
}

.ram-table{
border-collapse:collapse;
margin:auto;
margin-top:10px;
}

.ram-table th{
background:#3d5a98;
color:white;
padding:10px;
border:1px solid #555;
font-weight:bold;
}

.ram-table td{
border:1px solid #aaa;
padding:6px 10px;
}

.ram-input input{
background:#cfd8e3;
border:none;
width:90px;
text-align:right;
padding:4px;
}

.ram-question{
margin-top:20px;
}

.ram-answer{
margin-top:20px;
}

.ram-highlight{
font-weight:bold;
}

.ram-formula{
border:2px solid #4a86e8;
display:inline-block;
padding:10px 20px;
margin:10px 0;
font-style:italic;
}

.ram-result{
margin-top:10px;
font-size:16px;
}

.ram-yellow{
background:yellow;
padding:4px 12px;
font-weight:bold;
}

/*example 5*/
.ram-input-row{
margin:20px 0;
}

.ram-input-row input{
background:#cfd8e3;
border:none;
width:80px;
margin:0 10px;
padding:4px;
text-align:center;
}

.ram-formula{
border:2px solid #4a86e8;
display:inline-block;
padding:10px 20px;
margin:10px 0;
font-style:italic;
}

.ram-yellow{
background:yellow;
display:inline-block;
padding:4px 10px;
font-weight:bold;
margin-top:5px;
}

.ram-highlight{
font-weight:bold;
}

/*example 6 */
.ram-formula-box{
background:#4f86c6;
color:white;
padding:15px 20px;
margin:15px 0;
font-size:18px;
box-shadow:0 4px 10px rgba(0,0,0,0.3);
}

.ram-input-row{
margin-top:20px;
}

.ram-input-row input{
background:#cfd8e3;
border:none;
width:80px;
padding:4px;
margin:0 10px;
text-align:center;
}

.ram-result-row{
margin-top:20px;
}

.ram-yellow{
background:yellow;
padding:6px 12px;
font-weight:bold;
}

/*example 8*/
.ram-table-simple{
margin-top:20px;
width:450px;
}

.ram-table-simple .row{
display:flex;
align-items:center;
margin-bottom:12px;
}

.ram-table-simple label{
width:120px;
font-weight:600;
}

.ram-table-simple input{
background:#cfd8e3;
border:none;
width:120px;
padding:6px;
text-align:center;
margin-right:10px;
}

.ram-table-simple .result{
font-weight:bold;
margin-right:10px;
}

.ram-yellow{
background:yellow;
padding:6px 20px;
font-weight:bold;
}

/*example 10*/
.ram-result-box{
margin-top:20px;
width:350px;
}

.ram-yellow-row{
display:flex;
justify-content:space-between;
background:yellow;
padding:8px 12px;
font-weight:bold;
border-bottom:1px solid #000;
}

.ram-yellow-row span:first-child{
width:70%;
}

/*example 12*/
.ram-input-grid{
margin-top:20px;
width:400px;
}

.ram-input-grid .row{
display:flex;
align-items:center;
margin-bottom:10px;
}

.ram-input-grid label{
width:40px;
font-weight:bold;
font-size:18px;
}

.ram-input-grid input{
background:#cfd8e3;
border:none;
width:120px;
padding:6px;
text-align:center;
margin-right:10px;
}

.ram-formula-list{
margin-top:20px;
margin-bottom:20px;
}

.formula-row{
display:flex;
gap:20px;
margin-bottom:10px;
font-size:16px;
}

.ram-result-table{
background:yellow;
width:350px;
border:1px solid #333;
}

.result-row{
display:grid;
grid-template-columns:1fr 1fr 1fr;
padding:10px;
border-bottom:1px solid #333;
font-weight:bold;
text-align:center;
}

/*example 13*/
.ram-example-card{
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,0.15);
margin-bottom:40px;
}

.ram-title{
background:black;
color:white;
padding:6px 12px;
font-weight:bold;
width:160px;
margin-bottom:20px;
}

.ram-layout{
display:grid;
grid-template-columns:1fr 420px;
gap:40px;
}

.ram-desc{
font-size:15px;
margin-bottom:20px;
}

.ram-diagram-placeholder{
height:200px;
background:#eef3f8;
border:2px dashed #9fb3c8;
display:flex;
align-items:center;
justify-content:center;
color:#6b7f95;
font-weight:600;
}

.ram-table-modern{
border-collapse:collapse;
width:100%;
font-size:14px;
}

.ram-table-modern th{
background:#bcc8d8;
padding:10px;
border:1px solid #333;
}

.ram-table-modern td{
border:1px solid #333;
padding:8px;
}

.ram-table-modern input{
width:80px;
text-align:right;
background:#fff58c;
border:1px solid #888;
padding:4px;
}

.ram-result{
background:#dbe7f6;
font-size:16px;
color:#003399;
font-weight:bold;
}

.ram-diagram{
background:#f4f7fb;
padding:20px;
border-radius:8px;
display:flex;
justify-content:center;
align-items:center;
}

.ram-diagram img{
max-width:100%;
height:auto;
}body{
background:#f3f6fb;
font-family:Segoe UI,Arial;
}

.dakContainer{
max-width:1100px;
margin:auto;
padding:30px;
}

.pageTitle{
text-align:center;
margin-bottom:30px;
font-size:28px;
font-weight:600;
}

.card{
background:white;
padding:22px;
margin-bottom:25px;
border-radius:10px;
box-shadow:0 4px 14px rgba(0,0,0,0.08);
}

.card h3{
margin-bottom:15px;
color:#1f2937;
}

.formGrid{
display:grid;
grid-template-columns:250px 1fr;
gap:12px;
align-items:center;
}

.formGrid input{
padding:8px;
border:1px solid #d1d5db;
border-radius:6px;
}

.tableWrapper{
overflow:auto;
}

table{
width:100%;
border-collapse:collapse;
}

th{
background:#1f2937;
color:white;
padding:10px;
}

td{
padding:8px;
border-bottom:1px solid #eee;
text-align:center;
}

td input{
width:100%;
padding:8px;
border:1px solid #ccc;
border-radius:6px;
box-sizing:border-box;
}

.statGrid{
display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;
}

.statBox{
background:#f8fafc;
padding:20px;
border-radius:8px;
text-align:center;
min-width:200px;
}

.statBox span{
display:block;
color:#555;
margin-bottom:4px;
}

.statBox b{
font-size:20px;
}

.resultGrid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;
align-items:center;
}

.statusPass{
background:#16a34a;
color:white;
font-weight:bold;
display:flex;
align-items:center;
justify-content:center;
border-radius:8px;
}

.statusFail{
background:#dc2626;
color:white;
font-weight:bold;
display:flex;
align-items:center;
justify-content:center;
border-radius:8px;
}

.resultValue{
font-weight:bold;
}body{
background:#f3f6fb;
font-family:Segoe UI,Arial;
}

.dakContainer{
max-width:1100px;
margin:auto;
padding:30px;
}

.pageTitle{
text-align:center;
margin-bottom:30px;
font-size:28px;
font-weight:600;
}

.card{
background:white;
padding:22px;
margin-bottom:25px;
border-radius:10px;
box-shadow:0 4px 14px rgba(0,0,0,0.08);
}

.card h3{
margin-bottom:15px;
color:#1f2937;
}

.formGrid{
display:grid;
grid-template-columns:250px 1fr;
gap:12px;
align-items:center;
}

.formGrid input{
padding:8px;
border:1px solid #d1d5db;
border-radius:6px;
}

.tableWrapper{
overflow:auto;
}

table{
width:100%;
border-collapse:collapse;
}

th{
background:#1f2937;
color:white;
padding:10px;
}

td{
padding:8px;
border-bottom:1px solid #eee;
text-align:center;
}

td input{
width:100%;
padding:8px;
border:1px solid #ccc;
border-radius:6px;
box-sizing:border-box;
}

.statGrid{
display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;
}

.statBox{
background:#f8fafc;
padding:20px;
border-radius:8px;
text-align:center;
min-width:200px;
}

.statBox span{
display:block;
color:#555;
margin-bottom:4px;
}

.statBox b{
font-size:20px;
}

.resultGrid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;
align-items:center;
}

.statusPass{
background:#16a34a;
color:white;
font-weight:bold;
display:flex;
align-items:center;
justify-content:center;
border-radius:8px;
}

.statusFail{
background:#dc2626;
color:white;
font-weight:bold;
display:flex;
align-items:center;
justify-content:center;
border-radius:8px;
}

.resultValue{
font-weight:bold;
}.thickness-container{
max-width:1000px;
margin:auto;
font-family:Segoe UI;
}

h2{
text-align:center;
margin-bottom:25px;
}

.card{
background:white;
padding:20px;
border-radius:8px;
box-shadow:0 4px 12px rgba(0,0,0,0.1);
margin-bottom:25px;
}

table{
width:100%;
border-collapse:collapse;
}

th{
background:#2c3e50;
color:white;
padding:10px;
}

td{
border:1px solid #ddd;
padding:8px;
text-align:center;
}

input{
width:80px;
padding:4px;
text-align:center;
border:1px solid #ccc;
border-radius:4px;
}.calc-container{
max-width:900px;
margin:auto;
font-family:Segoe UI;
}

.title{
text-align:center;
margin-bottom:25px;
color:#1e3a8a;
}

.card{
background:white;
padding:20px;
border-radius:6px;
box-shadow:0 2px 8px rgba(0,0,0,0.1);
margin-bottom:25px;
}

.calc-table{
width:100%;
border-collapse:collapse;
}

.calc-table th{
background:#f1f5f9;
padding:10px;
border:1px solid #ccc;
}

.calc-table td{
border:1px solid #ccc;
padding:8px;
text-align:center;
}

.calc-table input{
width:80px;
padding:4px;
text-align:center;
}

.result{
background:#ead8c9;
font-weight:600;
}

.highlight{
color:#1d4ed8;
font-weight:bold;
}.calc-container{
max-width:900px;
margin:auto;
font-family:Segoe UI;
}

.title{
text-align:center;
margin-bottom:25px;
color:#1e3a8a;
}

.card{
background:white;
padding:20px;
border-radius:6px;
box-shadow:0 2px 8px rgba(0,0,0,0.1);
margin-bottom:25px;
}

.calc-table{
width:100%;
border-collapse:collapse;
}

.calc-table th{
background:#f1f5f9;
padding:10px;
border:1px solid #ccc;
}

.calc-table td{
border:1px solid #ccc;
padding:8px;
text-align:center;
}

.calc-table input{
width:80px;
padding:4px;
text-align:center;
}

.result{
background:#ead8c9;
font-weight:600;
}

.highlight{
color:#1d4ed8;
font-weight:bold;
}/* ================= TABLE ================= */

.fmea-table{
width:100%;
border-collapse:collapse;
font-size:13px;
background:white;
box-shadow:0 3px 12px rgba(0,0,0,0.08);
border-radius:10px;
overflow:hidden;
}

.fmea-table th{
background:#2c3e50;
color:white;
padding:10px;
font-weight:600;
text-align:center;
}

.fmea-table td{
padding:8px 10px;
border-bottom:1px solid #eee;
vertical-align:middle;
}

.fmea-table tr:nth-child(even){
background:#fafafa;
}

.fmea-table tr:hover{
background:#f1f7ff;
}


/* ================= MATRIX ================= */

.fmea-risk-matrix{
border-collapse:separate;
border-spacing:1px;
margin:auto;
}

.fmea-risk-matrix td{
width:10px;
height:10px;
text-align:center;
font-size:8px;
font-weight:400;
color:#222;
border-radius:6px;
cursor:pointer;
box-shadow:0 1px 2px rgba(0,0,0,0.15);
transition:transform .15s ease;
}

.fmea-risk-matrix td:hover{
transform:scale(1.1);
}


/* ACTIVE (BERKEDIP) */

.fmea-risk-active{
outline:2px solid #2c3e50;
}

/* High risk = cepat */
.fmea-risk-active.high{
animation:pulseRisk 0.8s infinite;
}

/* Medium risk = sedang */
.fmea-risk-active.medium{
animation:pulseRisk 1.4s infinite;
}

/* Low risk = tidak kedip */
.fmea-risk-active.low{
  animation:pulseRisk 2.2s infinite;
}

@keyframes pulseRisk{
0%{
transform:scale(1);
box-shadow:0 0 0 0 rgba(0,0,0,0.5);
}
50%{
transform:scale(1.25);
box-shadow:0 0 10px rgba(0,0,0,0.5);
}
100%{
transform:scale(1);
box-shadow:0 0 0 0 rgba(0,0,0,0.5);
}
}


/* ================= BUTTON ================= */

.fmea-btn-add{
background:#007bff;
color:white;
border:none;
padding:10px 16px;
border-radius:6px;
cursor:pointer;
margin-bottom:12px;
display:flex;
gap:6px;
align-items:center;
}

.fmea-btn-add:hover{ background:#0056b3; }


/* ================= MODAL ================= */

.fmea-modal-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,0.5);
display:flex;
align-items:center;
justify-content:center;
z-index:1000;
}

.fmea-modal{
background:white;
border-radius:10px;
width:520px;
max-height:90vh;
overflow-y:auto;
padding:20px;
box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

.fmea-modal-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:15px;
border-bottom:1px solid #eee;
padding-bottom:8px;
}

.fmea-close{
cursor:pointer;
font-size:18px;
color:#888;
}

.fmea-close:hover{ color:red; }

.fmea-form{
display:flex;
flex-direction:column;
gap:10px;
}

.fmea-form input{
padding:8px 10px;
border:1px solid #ccc;
border-radius:5px;
font-size:14px;
}

.fmea-modal-footer{
margin-top:10px;
display:flex;
justify-content:flex-end;
}

.fmea-btn-save{
background:#28a745;
color:white;
border:none;
padding:10px 16px;
border-radius:6px;
cursor:pointer;
display:flex;
gap:6px;
align-items:center;
}

.fmea-btn-save:hover{ background:#1e7e34; }

.fmea-delete{
color:#dc3545;
margin-left:10px;
cursor:pointer;
}

.fmea-delete:hover{
color:#a71d2a;
transform:scale(1.15);
}

/* Paginate */
.fmea-pagination{
display:flex;
justify-content:flex-end;
align-items:center;
gap:6px;
margin-top:15px;
}

.fmea-pagination button{
border:1px solid #ddd;
background:#fff;
padding:6px 10px;
border-radius:6px;
cursor:pointer;
font-size:14px;
min-width:34px;
transition:all .15s;
}

.fmea-pagination button:hover{
background:#f0f6ff;
border-color:#3b82f6;
}

.fmea-pagination button.active{
background:#3b82f6;
color:white;
border-color:#3b82f6;
font-weight:600;
}

.fmea-pagination button:disabled{
opacity:.5;
cursor:not-allowed;
}

/* ================= FORM GRID ================= */

.fmea-form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.fmea-field{
display:flex;
flex-direction:column;
gap:4px;
}

.fmea-field.full{
grid-column:1 / span 2;
}

.fmea-field label{
font-size:12px;
font-weight:600;
color:#555;
}

.fmea-field input,
.fmea-field textarea,
.fmea-field select{
padding:8px 10px;
border:1px solid #ccc;
border-radius:6px;
font-size:13px;
background:#fff;
transition:.15s;
}

.fmea-field input:focus,
.fmea-field textarea:focus,
.fmea-field select:focus{
outline:none;
border-color:#3b82f6;
box-shadow:0 0 0 2px rgba(59,130,246,.15);
}

.fmea-date{
padding:6px 10px;
border-radius:6px;
border:1px solid #ccc;
font-size:14px;
width:120px;
}

.table-scroll {
  width: 100%;
  overflow-x: auto;   /* ← scroll horizontal */
}.home-container {
  padding: 40px;
  text-align: center;
  min-height: 100vh;
  background: #f4f6f9;
}

.home-title {
  margin-bottom: 35px;
  color: #2c3e50;
}

/* GRID */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 25px;
}

/* CARD */
.menu-card {
  background: white;
  border-radius: 16px;
  padding: 35px 20px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.menu-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.15);
}

/* ICON */
.menu-icon {
  font-size: 60px;
  color: #2c7be5;
  margin-bottom: 18px;
}

/* TEXT */
.menu-card p {
  font-weight: 600;
  font-size: 16px;
  color: #34495e;
}

.logout-btn {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 999;

  background: #e74c3c;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;

  display: flex;
  align-items: center;
  gap: 8px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: 0.2s;
}

.logout-btn:hover {
  background: #c0392b;
  transform: translateY(-2px);
}/* =========================================
   ADMIN USER MANAGEMENT — ENTERPRISE STYLE
   ========================================= */

/* ===== RESET KHUSUS ADMIN ===== */

.admin-page,
.admin-profile-page {
  position: fixed;
  inset: 0;

  background: linear-gradient(135deg,#1e3c72,#2a5298);

  font-family: "Segoe UI", sans-serif;

  overflow-y: auto;
  padding: 50px 60px;
  box-sizing: border-box;
}

/* ===== CONTAINER ===== */

.admin-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* ===== HEADER ===== */

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 35px;
}

.admin-header h1 {
  color: white;
  font-size: 34px;
  font-weight: 700;
  margin: 0;
}

/* ===== TOOLBAR ===== */

.admin-toolbar {
  display: flex;
  gap: 12px;
}

.admin-toolbar input {
  padding: 12px 14px;
  border-radius: 10px;
  border: none;
  width: 260px;
  outline: none;
  font-size: 14px;
}

/* ===== BUTTONS ===== */

.admin-primary-btn {
  background: linear-gradient(135deg,#4e8cff,#2c6ae8);
  border: none;
  padding: 12px 18px;
  border-radius: 10px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}

.admin-primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.2);
}

.admin-secondary-btn {
  background: #ddd;
  border: none;
  padding: 12px 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.2s;
}

.admin-secondary-btn:hover {
  background: #cfcfcf;
}

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

.admin-user-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap: 22px;
  margin-top: 20px;
}

/* ===== USER CARD ===== */

.admin-user-card {
  background: white;
  color: #333;
  padding: 24px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 18px 45px rgba(0,0,0,0.25);
  transition: 0.25s;
}

.admin-user-card:hover {
  transform: translateY(-5px);
}

/* ===== AVATAR ===== */

.admin-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #2c7be5;
  color: white;
  font-size: 28px;
  font-weight: bold;

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

  margin: 0 auto 12px;
}

.admin-user-card h3 {
  margin: 8px 0 4px;
}

.admin-email {
  color: #777;
  font-size: 14px;
}

/* ===== ROLE BADGE ===== */

.admin-role {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 8px;
  background: #2ecc71;
  color: white;
  margin-top: 10px;
  font-size: 13px;
}

.admin-role.admin {
  background: #e74c3c;
}

/* ===== ACTION BUTTONS ===== */

.admin-actions {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.admin-actions button {
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: #2c7be5;
  color: white;
  transition: 0.2s;
}

.admin-actions button:hover {
  opacity: 0.9;
}

.admin-actions .danger {
  background: #e74c3c;
}

/* ===== PAGINATION ===== */

.admin-pagination {
  margin-top: 35px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.admin-pagination button {
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  background: #2c7be5;
  color: white;
  cursor: pointer;
}

.admin-pagination button:disabled {
  background: #aaa;
  cursor: not-allowed;
}

/* ===== PROFILE CARD (USER VIEW) ===== */

.admin-profile-page {
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-profile-card {
  background: white;
  color: #333;
  width: 340px;
  padding: 36px;
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 25px 60px rgba(0,0,0,0.3);
}

.admin-profile-card h2 {
  margin-top: 10px;
  margin-bottom: 6px;
}

/* ===== MODAL ===== */

.admin-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.admin-modal-card {
  background: white;
  padding: 28px;
  border-radius: 16px;
  width: 360px;
  color: #333;
  box-shadow: 0 25px 60px rgba(0,0,0,0.35);
}

.admin-modal-card h3 {
  margin-bottom: 15px;
}

.admin-modal-card input,
.admin-modal-card select {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 14px;
}

.admin-modal-card input:focus {
  border-color: #2c7be5;
  outline: none;
}

/* ===== MODAL BUTTONS ===== */

.admin-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

/* ===== ERROR MESSAGE ===== */

.admin-error {
  background: #ffe6e6;
  color: #d63031;
  padding: 8px;
  border-radius: 8px;
  margin-bottom: 10px;
  font-size: 14px;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {

  .admin-page,
  .admin-profile-page {
    padding: 30px 20px;
  }

  .admin-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .admin-toolbar {
    width: 100%;
  }

  .admin-toolbar input {
    flex: 1;
  }
}

.admin-field-error {
  color: #e74c3c;
  font-size: 13px;
  margin-top: 4px;
}

.admin-error {
  background: #ffe6e6;
  color: #c0392b;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 10px;
}

/* ===== PAGINATION BAR ===== */

.admin-pagination-bar {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}

/* BUTTON GROUP */

.admin-page-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-page-buttons button {
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  background: white;
  color: #333;
  cursor: pointer;
  font-weight: 600;
  min-width: 40px;
}

.admin-page-buttons button:hover {
  background: #e6e6e6;
}

.admin-page-buttons button.active {
  background: #2c7be5;
  color: white;
}

/* DISABLED */

.admin-page-buttons button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* INFO */

.admin-page-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* SELECT */

.admin-page-info select {
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  background: white;
  font-weight: 600;
}