/* Global Cabin Font Implementation */
* {
  font-family: "Cabin", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif !important;
}

/* Preserve Font Awesome icons */
.fa,
.fas,
.far,
.fab,
.fal,
.fad,
.fat,
.fa-solid,
.fa-regular,
.fa-brands,
.fa-light,
.fa-duotone,
.fa-thin {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands",
    "Font Awesome 6 Pro" !important;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(188, 31, 39, 0.25);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Make SweetAlert2 action buttons equal width */
.swal2-actions.equal-width {
    display: flex !important;
    gap: 10px;
    padding: 0 1rem !important;
}

.swal2-actions.equal-width .swal2-confirm,
.swal2-actions.equal-width .swal2-cancel {
    flex: 1 1 0;
    min-width: 0; /* prevent overflow */
    text-align: center;
}

/* Optional: make heights consistent and nice rounded corners */
.swal2-actions.equal-width .swal2-styled {
    padding: 8px 10px;
    border-radius: 6px;
}

/* ===== Override ukuran font sidebar (diperkecil 1 tingkat) ===== */
#sidebar {
  font-size: 0.7em; /* kecilkan keseluruhan di area sidebar */
}
#sidebar .menu-text {
  font-size: 13px !important;
}
#sidebar .menu-submenu .menu-text {
  font-size: 13px !important;
}
#sidebar .menu-header {
  font-size: 13px !important;
}
#sidebar .menu-icon i {
  font-size: 18px !important;
}
#sidebar .menu-link {
  padding: 5px 12px !important; /* perkecil jarak vertical */
}
#sidebar .menu-submenu .menu-link {
  padding: 5px 14px !important; /* submenu lebih rapat sedikit */
}
/* Kurangi gap antar item bertetangga (jika template memberi margin) */
#sidebar .menu .menu-item + .menu-item {
  margin-top: 2px !important;
}
#sidebar .card,
#sidebar .card .small,
#sidebar .card .text-muted,
#sidebar .card .fw-semibold,
#sidebar .card .fw-bold {
  font-size: 0.7em;
}

/* === Responsive tweaks for sidebar org card & modal === */
@media (max-width: 576px) {
  #sidebar .card {
    background: rgba(255, 255, 255, 0.12) !important;
}
  #sidebar .card .small {
    font-size: 0.8rem !important;
  }
  #sidebar #currentOrgName {
    font-size: 0.9rem !important;
  }
  /* make modal body comfy on small screens */
  #orgSelectModal .modal-body {
    padding: 0.75rem 0.75rem;
  }
  #orgSelectModal .input-group-text,
  #orgSelectModal .form-control {
    font-size: 0.9rem;
  }
	/* widen header search autocomplete for mobile */
	#menuAutocomplete {
		left: -40px !important;   /* align with icon space */
		right: -12px !important;  /* stretch to screen edge padding */
		width: auto !important;
		max-width: none !important;
	}
	#menuAutocomplete .small {
		font-size: .9rem;
	}
}

/* === Brand Color Palette Implementation === */
/* Primary: #BC1F27 (Brand Red) */
:root {
  /* Primary Colors */
  --bs-primary: #BC1F27;
  --bs-primary-rgb: 188, 31, 39;
  --bs-primary-bg-subtle: #FDF2F2;
  --bs-primary-border-subtle: #F2A8AC;
  --bs-primary-text-emphasis: #85151A;

  /* Secondary Colors */
  --bs-secondary: #6B7280;
  --bs-secondary-rgb: 107, 114, 128;

  /* Success Colors */
  --bs-success: #059669;
  --bs-success-rgb: 5, 150, 105;

  /* Warning Colors */
  --bs-warning: #D97706;
  --bs-warning-rgb: 217, 119, 6;

  /* Danger Colors */
  --bs-danger: #85151A;
  --bs-danger-rgb: 133, 21, 26;

  /* Info Colors */
  --bs-info: #0284C7;
  --bs-info-rgb: 2, 132, 199;

  /* Link Colors */
  --bs-link-color: #BC1F27;
  --bs-link-hover-color: #9E1A20;
}

/* Primary Button */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #BC1F27;
  --bs-btn-border-color: #BC1F27;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #9E1A20;
  --bs-btn-hover-border-color: #85151A;
  --bs-btn-focus-shadow-rgb: 188, 31, 39;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #85151A;
  --bs-btn-active-border-color: #6B1014;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #BC1F27;
  --bs-btn-disabled-border-color: #BC1F27;
  --bs-btn-disabled-opacity: 0.5;
}

/* Outline Primary Button */
.btn-outline-primary {
  --bs-btn-color: #BC1F27;
  --bs-btn-border-color: #BC1F27;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #BC1F27;
  --bs-btn-hover-border-color: #BC1F27;
  --bs-btn-focus-shadow-rgb: 188, 31, 39;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #BC1F27;
  --bs-btn-active-border-color: #BC1F27;
  --bs-btn-disabled-color: #BC1F27;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #BC1F27;
  --bs-gradient: none;
}

/* Secondary Button */
.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #6B7280;
  --bs-btn-border-color: #6B7280;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #4B5563;
  --bs-btn-hover-border-color: #374151;
  --bs-btn-focus-shadow-rgb: 107, 114, 128;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #374151;
  --bs-btn-active-border-color: #1F2937;
}

/* Success Button */
.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: #059669;
  --bs-btn-border-color: #059669;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #047857;
  --bs-btn-hover-border-color: #065F46;
  --bs-btn-focus-shadow-rgb: 5, 150, 105;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #065F46;
  --bs-btn-active-border-color: #064E3B;
}

/* Warning Button */
.btn-warning {
  --bs-btn-color: #fff;
  --bs-btn-bg: #D97706;
  --bs-btn-border-color: #D97706;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #B45309;
  --bs-btn-hover-border-color: #92400E;
  --bs-btn-focus-shadow-rgb: 217, 119, 6;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #92400E;
  --bs-btn-active-border-color: #78350F;
}

/* Danger Button */
.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #85151A;
  --bs-btn-border-color: #85151A;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #6B1014;
  --bs-btn-hover-border-color: #520B0E;
  --bs-btn-focus-shadow-rgb: 133, 21, 26;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #520B0E;
  --bs-btn-active-border-color: #3A080A;
}

/* Info Button */
.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0284C7;
  --bs-btn-border-color: #0284C7;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0369A1;
  --bs-btn-hover-border-color: #075985;
  --bs-btn-focus-shadow-rgb: 2, 132, 199;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #075985;
  --bs-btn-active-border-color: #0C4A6E;
}

/* Link Styling */
a {
  color: var(--bs-link-color);
  text-decoration: underline;
}

a:hover {
  color: var(--bs-link-hover-color);
}

/* Theme Button (if using .btn-theme class) */
.btn-theme {
  --bs-btn-color: #fff;
  --bs-btn-bg: #BC1F27;
  --bs-btn-border-color: #BC1F27;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #9E1A20;
  --bs-btn-hover-border-color: #85151A;
  --bs-btn-focus-shadow-rgb: 188, 31, 39;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #85151A;
  --bs-btn-active-border-color: #6B1014;
}

.btn-outline-theme {
  --bs-btn-color: #BC1F27;
  --bs-btn-border-color: #BC1F27;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #BC1F27;
  --bs-btn-hover-border-color: #BC1F27;
  --bs-btn-focus-shadow-rgb: 188, 31, 39;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #BC1F27;
  --bs-btn-active-border-color: #BC1F27;
}

/* === Global content font size to match notification page === */
/* Ukuran font konten mengikuti halaman notifikasi */
.app-content,
.content,
.page-content,
.container,
.container-fluid {
	font-size: 0.85rem;
}

/* Global horizontal padding tightening so content sits closer to sidebar and right edge */
.app-content,
.content,
.page-content,
.container-fluid {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
@media (min-width: 1200px) {
  .app-content,
  .content,
  .page-content,
  .container-fluid {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* Align header search area padding with page content */
.app-header,
.app-header .menu {
  padding-left: 0.25rem !important;
  padding-right: 0.5rem !important;
}
@media (min-width: 1200px) {
  .app-header,
  .app-header .menu {
    padding-left: 0.5rem !important;
    padding-right: 0.75rem !important;
  }
}

/* Header dropdown styling: outline and comfortable item spacing */
.app-header .dropdown-menu {
  border: 1px solid #BC1F27 !important; /* brand red outline */
  border-radius: .5rem !important;
  padding: .5rem !important; /* inner spacing */
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}
.app-header .dropdown-menu .dropdown-item {
  margin: .15rem 0; /* vertical gap between items */
  border-radius: .35rem;
  padding: .4rem .75rem;
}
.app-header .dropdown-menu .dropdown-item:hover {
  background: rgba(188, 31, 39, 0.08); /* brand red with opacity */
}

/* Pull search box further left */
.app-header .menu .menu-search {
  margin-left: 0 !important;
}

/* Sedikit perataan untuk tabel & form agar tetap terbaca */
.container-fluid table thead th,
.container-fluid table tbody td {
	font-size: 1em; /* ikut 0.8rem base dari container */
}

.container-fluid .form-control,
.container-fluid .form-select,
.container-fluid .form-label {
	font-size: 0.85rem; /* konsisten dengan base container */
}

.container-fluid .btn {
	font-size: 0.85rem; /* konsisten dengan base container */
}

.container-fluid .btn-sm {
	font-size: 0.75rem; /* button kecil mengikuti notifikasi page */
}

/* Headings & section titles scaled to match notification page */
.app-content h1, .content h1, .page-content h1, .container-fluid h1 { font-size: 1.6rem; }
.app-content h2, .content h2, .page-content h2, .container-fluid h2 { font-size: 1.35rem; }
.app-content h3, .content h3, .page-content h3, .container-fluid h3 { font-size: 1.1rem; }
.app-content h4, .content h4, .page-content h4, .container-fluid h4 { font-size: 1rem; }
.app-content h5, .content h5, .page-content h5, .container-fluid h5 { font-size: 0.9rem; }
.app-content h6, .content h6, .page-content h6, .container-fluid h6 { font-size: 0.9rem; }

/* Page header component */
.page-header { font-size: 1.35rem; }
.page-header small { font-size: .9em; }

/* Card / Panel titles */
.card .card-header, .panel .panel-heading { padding-top: .5rem; padding-bottom: .5rem; }
.card .card-header, .card .card-header .fw-bold, .panel .panel-title { font-size: 1rem; }

/* Table header cells slightly reduced */
.table thead th { font-size: 1em; }

/* Form labels to match notification page (exclude sidebar) */
.app-content .form-label,
.content .form-label,
.page-content .form-label,
.container .form-label,
.container-fluid .form-label,
:not(#sidebar) .form-label,
:not(#sidebar) label {
	font-size: 0.85rem;
}

/* Text muted small to match notification page (exclude sidebar) */
.app-content .text-muted.small,
.content .text-muted.small,
.page-content .text-muted.small,
.container-fluid .text-muted.small,
:not(#sidebar) .text-muted.small,
:not(#sidebar) .small.text-muted {
	font-size: 0.75rem !important;
}

/* List items to match notification page (exclude sidebar) */
.app-content .list-group-item,
.content .list-group-item,
.page-content .list-group-item,
.container-fluid .list-group-item,
:not(#sidebar) .list-group-item {
	font-size: 0.85rem;
}

/* Body text and paragraphs (exclude sidebar) */
.app-content p,
.content p,
.page-content p,
.container-fluid p,
:not(#sidebar) p {
	font-size: 0.85rem;
}

/* Text muted to match notification page (exclude sidebar) */
.app-content .text-muted,
.content .text-muted,
.page-content .text-muted,
.container-fluid .text-muted,
:not(#sidebar) .text-muted {
	font-size: 0.8rem;
}