@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ============================================================
   CSS VARIABLES
   ============================================================ */

:root {
  --gold:           #c7a763;
  --gold-dark:      #b08d4a;
  --gold-light:     #f5edd9;
  --gold-muted:     #c7a76320;
  --text-primary:   #111827;
  --text-secondary: #6b7280;
  --text-muted:     #9ca3af;
  --border:         #e5e7eb;
  --border-light:   #f3f4f6;
  --bg-page:        #f3f4f6;
  --bg-white:       #ffffff;
  --bg-hover:       #f9fafb;
  --radius-sm:      4px;
  --radius:         8px;
  --radius-lg:      12px;
  --shadow-sm:      0 1px 2px 0 rgba(0,0,0,.05);
  --shadow:         0 1px 3px 0 rgba(0,0,0,.10), 0 1px 2px -1px rgba(0,0,0,.10);
  --shadow-md:      0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.10);
  --transition:     150ms cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   BASE / RESET
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

html {
  background-color: var(--bg-page);
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  height: 100%;
  width: 100%;
  min-height: 100%;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-primary);
  background-color: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-y: auto;
}

form     { margin: 0; }
textarea { resize: none; }
select, button { outline: none; }
input:focus, textarea:focus, select:focus { outline: none; }
hr { border: none; border-top: 1px solid var(--border); }

/* Placeholder */
::placeholder           { color: #9ca3af; opacity: 1; }
:-ms-input-placeholder  { color: #9ca3af; }
::-ms-input-placeholder { color: #9ca3af; }
::-webkit-input-placeholder { color: #9ca3af; transition: opacity 250ms ease-in-out; }
:focus::-webkit-input-placeholder { opacity: .5; }

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

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

.main-wrapper {
  position: relative;
  min-height: 100%;
  background-color: var(--bg-page);
  margin: 0;
  min-width: 0;
  height: 100vh;
  overflow: hidden;
  padding-top: 64px;
}

/* ============================================================
   TOP NAVBAR
   ============================================================ */

.top-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 64px;
  background-color: var(--bg-white);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  z-index: 1000;
}

.navbar-left {
  display: flex;
  align-items: center;
  width: 220px;       /* Changed from min-width to fixed width to align with sidebar */
  gap: 2px;          /* Adds clean, consistent space between hamburger and logo */
  padding-left: 4px;  /* Slight tweak to align hamburger nicely */
}

.navbar-logo {
  display: flex;
  align-items: center;
  overflow: hidden; 
}

/* Fix the crushed look by relying on height and auto-width */
.navbar-logo img {
  height: 32px;       /* Standard height for modern nav logos (Flowbite uses ~32px) */
  width: auto;        /* Let the aspect ratio calculate naturally! No more crushing. */
  max-width: 100%;    /* Ensures it never breaks out of the 220px left bar area */
  object-fit: contain;
  display: block;
}

.collapse-btn-nav {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--text-secondary);
  padding: 5px;
  transition: color var(--transition);
}

.collapse-btn-nav:hover { color: var(--gold); }

.navbar-center {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  padding-left: 20px;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.navbar-datetime {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 6px 12px;
  border-right: 1px solid var(--border-light);
}

.nav-profile-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Profile dropdown */
.profile-dropdown-wrap { position: relative; }

.profile-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-profile-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 2px solid var(--border-light);
}

.nav-profile-icon {
  font-size: 12px;
  color: var(--text-secondary);
}

.profile-dropdown-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 15px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  list-style: none;
  padding: 8px 0;
  min-width: 160px;
  display: none;
  z-index: 1010;
}

.profile-dropdown-menu.show { display: block; }

.profile-dropdown-menu .dropdown-header {
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 4px;
}

.profile-dropdown-menu .dropdown-header p {
  margin: 0;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
}

.profile-dropdown-menu li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.profile-dropdown-menu li a:hover {
  background: var(--bg-hover);
  color: var(--gold);
}

.profile-dropdown-menu .link-danger { color: #ef4444 !important; }

/* ============================================================
   LEFT SIDEBAR
   ============================================================ */

.main-sidebar,
.left-sidebar {
  background-color: var(--bg-white) !important;
  border-right: 1px solid var(--border);
  height: calc(100vh - 64px) !important;
  width: 220px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: fixed !important;
  top: 64px !important;
  left: 0;
  z-index: 100;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sidebar-menu {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 0px 0px 0px 3px !important;
  margin: 0 !important;
  list-style: none !important;
  min-height: 0 !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sidebar-menu::-webkit-scrollbar { display: none; }

.sidebar-menu .nav-title {
  display: block;
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 24px 0 8px 14px;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-menu li {
  border-radius: var(--radius-sm);
  margin: 2px 0;
  width: 100%;
  list-style-type: none;
  background-color: transparent !important;
}

.sidebar-menu li a {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  color: var(--text-primary) !important;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.sidebar-menu li a:hover {
  background-color: #eeeeee !important;
  color: #111827 !important;
}

.sidebar-menu li a span[class^="fa"],
.sidebar-menu li a span[class*=" fa"] {
  width: 24px;
  font-size: 16px;
  color: var(--text-secondary);
  margin-right: 10px;
  text-align: center;
  transition: color 0.2s ease;
}

.sidebar-menu li.active a {
  background-color: #f3f4f6 !important;
  color: var(--gold) !important;
  font-weight: 600;
}

.sidebar-menu li a:hover span[class^="fa"],
.sidebar-menu li a:hover span[class*=" fa"],
.sidebar-menu li.active a span[class^="fa"],
.sidebar-menu li.active a span[class*=" fa"] {
  color: var(--gold) !important;
}

.left-sidebar .fab,
.left-sidebar .far,
.left-sidebar .fas {
  font-size: 15px;
  color: #374151;
  text-align: center;
  line-height: 17px;
  vertical-align: baseline;
}

.left-sidebar .fa-toggle-off { font-size: 14px; }

/* Collapsed sidebar */
body.sidebar-collapsed .main-sidebar,
body.sidebar-collapsed .left-sidebar      { width: 80px !important; }
body.sidebar-collapsed .content-wrapper   { margin-left: 80px !important; }
body.sidebar-collapsed .info,
body.sidebar-collapsed .city-selector-wrap,
body.sidebar-collapsed .nav-title,
body.sidebar-collapsed .menu-text         { display: none !important; }
body.sidebar-collapsed .sidebar-menu a    { justify-content: center; padding: 12px 0; }
body.sidebar-collapsed .sidebar-menu a span[class*="fa-"] { margin-right: 0; font-size: 18px; }
body.sidebar-collapsed .navbar-logo       { display: none; }

/* Sidebar mobile overlay */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 99;
}
.sidebar-overlay.active { display: block; }

/* ============================================================
   CONTENT WRAPPER
   ============================================================ */

.content-wrapper {
  overflow: auto;
  min-height: 100%;
  height: 100vh;
  margin-left: 220px;
  overflow-y: auto;
  padding-bottom: 40px;
  background-color: #FFFFF9;
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ============================================================
   REUSABLE PAGE CONTENT WRAPPER
   Use on every listing and edit page inside .content-wrapper
   ============================================================ */

.page-content {
  padding: 16px 16px 28px; /* Changed from 16px 28px 28px */
  display: flex;
  flex-direction: column;
}

.page-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.page-content-title {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin: 0;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Back arrow inside title */
.page-content-back {
  display: flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity var(--transition);
}

.page-content-back:hover { opacity: 1; }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  background-color: var(--gold);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition), box-shadow var(--transition);
  line-height: 1.4;
}

.btn-primary:hover {
  background-color: var(--gold-dark);
  box-shadow: var(--shadow-sm);
}

.btn-primary.btn-danger { background-color: #ef4444; }
.btn-primary.btn-danger:hover { background-color: #dc2626; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background-color: #fff;
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition), border-color var(--transition);
  line-height: 1.4;
}

.btn-secondary:hover {
  background-color: var(--bg-hover);
  border-color: #d1d5db;
}

/* Row action button (Edit / View / Delete etc.) */
.btn-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  background-color: transparent;
  color: var(--gold);
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition);
  line-height: 1.4;
  white-space: nowrap;
}

.btn-row:hover {
  background-color: var(--border-light);
}

.btn-row svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn-row.btn-delete {
  color: var(--gold) !important;
}
.btn-row.btn-delete:hover {
  background-color: #fef2f2;
}

/* Base styling for all masked icons */
.icon-edit, 
.icon-delete, 
.icon-view {
    display: inline-block;
    width: 20px; 
    height: 20px;
    background-color: currentColor; 
}

.icon-edit {
    -webkit-mask: url('/images/icons/edit.svg') no-repeat center / contain;
    mask: url('/images/icons/edit.svg') no-repeat center / contain;
}

.icon-delete {
    -webkit-mask: url('/images/icons/delete.svg') no-repeat center / contain;
    mask: url('/images/icons/delete.svg') no-repeat center / contain;
}

.icon-view {
    -webkit-mask: url('/images/icons/view.svg') no-repeat center / contain;
    mask: url('/images/icons/view.svg') no-repeat center / contain;
}
/* ============================================================
   FORMS & INPUTS
   ============================================================ */

.form-control {
  border: 1px solid var(--border);
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
  border-radius: var(--radius);
  line-height: 22px;
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
  background-color: var(--bg-hover);
  box-shadow: var(--shadow-sm);
}

.form-control:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-muted);
  background-color: var(--bg-white);
}

.field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.field-input,
.field-select {
  width: 100%;
  padding: 9px 12px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--text-primary);
  background-color: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
  line-height: 1.5;
  appearance: none;
}

.field-input:focus,
.field-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  background-color: var(--bg-white);
}

.field-input::placeholder { color: #9ca3af; }
.field-input:disabled { background-color: #f3f4f6; cursor: not-allowed; }

.form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}

.form-field:last-child { margin-bottom: 0; }

.invalid-feedback {
  color: #dc3545;
  font-size: 13px;
  margin-top: 4px;
  display: block;
  font-weight: 500;
}

/* ============================================================
   ALERTS
   ============================================================ */

.alert {
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 500;
  font-size: 13px;
}

.alert h4 { margin: 0 0 3px; font-weight: 700; font-size: 13px; }
.alert p, .alert li { margin: 0; line-height: 1.6; }

.alert-success { color: #065f46; background-color: #ecfdf5; border-color: #6ee7b7; }
.alert-danger  { color: #991b1b; background-color: #fef2f2; border-color: #fca5a5; }

/* ============================================================
   CARDS / SETTINGS LAYOUT (edit pages)
   ============================================================ */

.card-container {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.settings-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 16px;
  align-items: start;
}

.settings-col-left,
.settings-col-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}

.card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}

.card-footer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: flex-end;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ============================================================
   DATA TABLE  (replaces mail-tbl / mail-tbl-wrap)
   ============================================================ */

.data-tbl-wrap {
  background-color: var(--bg-white);
  border: 1px solid var(--border-light); /* Soften the border */
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: none; /* Remove shadow for a flatter, modern look */
}

.data-tbl {
  width: 100% !important;
  border-collapse: collapse;
  font-size: 13px;
}

.data-tbl thead {
  background-color: #f3f4f6 !important;
}

.data-tbl thead th {
  padding: 12px 16px; /* Slightly taller padding for Flowbite look */
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #4b5563; /* Tailwind text-gray-600 */
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-tbl tbody tr {
  border-bottom: 1px solid var(--border);
  background-color: var(--bg-white);
  transition: background-color var(--transition);
}

.data-tbl tbody tr:last-child { border-bottom: none; }

.data-tbl tbody tr:hover { background-color: var(--bg-hover); }

.data-tbl td {
  padding: 7px 14px;
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 400;
  vertical-align: middle;
}

.data-tbl-empty {
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  padding: 28px 16px !important;
}

/* ── DataTables overrides ───────────────────────────────── */

/* Wrapper DataTables injects — keep it clean */
.dataTables_wrapper {
  padding: 0;
}

/* Search + length controls sit above the table */
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-secondary);
}

.dataTables_wrapper .dataTables_filter { 
  display: none !important; 
  float: right; 
}
.dataTables_wrapper .dataTables_length { float: left; }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  padding: 5px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-hover);
  color: var(--text-primary);
  outline: none;
  margin-left: 6px;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-muted);
}

/* Info text + pagination sit below */
.dataTables_wrapper .dataTables_info {
  padding: 10px 14px;
  font-size: 12px;
  color: var(--text-muted);
  float: left;
  clear: both;
}

.dataTables_wrapper .dataTables_paginate {
  padding: 8px 14px;
  float: right;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  margin: 0 2px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary) !important;
  cursor: pointer;
  border: 1px solid transparent !important;
  transition: background-color var(--transition), border-color var(--transition);
  background: transparent !important;
  box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: var(--border-light) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background-color: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #fff !important;
  font-weight: 700;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Clear floats after DataTables footer */
.dataTables_wrapper::after {
  content: '';
  display: table;
  clear: both;
}

/* Sorting icons */
.data-tbl thead th.sorting,
.data-tbl thead th.sorting_asc,
.data-tbl thead th.sorting_desc {
  cursor: pointer;
  user-select: none;
}

.data-tbl thead th.sorting::after        { content: ' ↕'; opacity: 0.4; font-size: 10px; }
.data-tbl thead th.sorting_asc::after    { content: ' ↑'; opacity: 0.8; font-size: 10px; }
.data-tbl thead th.sorting_desc::after   { content: ' ↓'; opacity: 0.8; font-size: 10px; }

/* Table Row Actions */
.row-actions {
    display: flex;
    align-items: center;
    gap: 12px; /* Adjust this value to increase/decrease space between icons */
}

.row-actions .btn-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.row-actions .btn-row svg {
    width: 20px;
    height: 20px;
}

/* ============================================================
   MAIL TEXTAREA (CKEditor wrapper)
   ============================================================ */

.mail-textarea { display: inline-block; width: 100%; margin-bottom: 8px; }
.mail-textarea .ck-editor__editable { min-height: 250px; }

/* ============================================================
   MODALS
   ============================================================ */

.custom-modal {
  display: none;
  position: fixed;
  z-index: 1050;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  background-color: rgba(0,0,0,0.5);
}

.custom-modal.is-open { display: block; }

.custom-modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 24px;
  border-radius: 8px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.custom-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.custom-modal-header h4 { margin: 0; font-size: 17px; font-weight: 600; }

.close-modal { font-size: 24px; cursor: pointer; color: #9ca3af; line-height: 1; }
.close-modal:hover { color: #374151; }

.custom-modal-footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */

.page-no-navbar .main-wrapper { padding-top: 0 !important; }

.main-content {
  width: 100%;
  text-align: center;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  padding-bottom: 3rem;
  color: var(--text-primary);
}

.login-box {
  text-align: center;
  display: inline-block;
  margin: 50px 0 80px;
  width: 480px;
  background-color: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.login-field { padding: 0 56px 64px; margin: 0; }
.login-field .form-group { text-align: left; font-weight: 500; }
.login-header { padding: 72px 0 0; }
.site-logo { max-width: 420px; padding-bottom: 10px; }

/* ============================================================
   CITY SELECTOR
   ============================================================ */

.city-selector-wrap { width: 250px; }

.custom-select-wrapper { position: relative; user-select: none; width: 100%; }

.custom-select-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.custom-select-trigger:hover { border-color: #cbd5e1; }

.custom-select-wrapper.open .custom-select-trigger {
  border-color: #c7a763;
  box-shadow: 0 0 0 3px rgba(199,167,99,0.2);
}

.custom-select-trigger i { color: #64748b; font-size: 12px; transition: transform 0.2s; }
.custom-select-wrapper.open .custom-select-trigger i { transform: rotate(180deg); }

.custom-options {
  position: absolute;
  display: none;
  top: 100%; left: 0; right: 0;
  margin-top: 4px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
  z-index: 50;
  padding: 4px 0;
  list-style: none;
  max-height: 250px;
  overflow-y: auto;
}

.custom-select-wrapper.open .custom-options { display: block; }

.custom-option {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.custom-option:hover,
.custom-option.selected {
  background-color: rgba(199,167,99,0.1);
  color: #c7a763;
  font-weight: 600;
}

/* ============================================================
   PROFILE PAGE
   ============================================================ */

.profile-page-header { margin-bottom: 14px; }

.profile-page-title {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin: 0;
  letter-spacing: -0.01em;
}

/* Top card */
.profile-top-card {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  overflow: hidden;
}

.profile-top-divider {
  width: 1px;
  background: #f3f4f6;
  flex-shrink: 0;
  align-self: stretch;
  margin: 16px 0;
}

.profile-top-left {
  flex-shrink: 0;
  width: 180px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.profile-avatar-wrap { position: relative; }

.profile-avatar-img {
  width: 78px;
  height: 78px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background-color: #f9fafb;
  background-size: cover;
  background-position: center;
}

.profile-identity { text-align: center; }
.profile-name { font-size: 14px; font-weight: 700; color: #111827; margin: 0 0 2px; line-height: 1.3; }
.profile-role { font-size: 12px; color: #6b7280; margin: 0; font-weight: 500; }

.profile-avatar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn-avatar-upload {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: #c7a763;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
  line-height: 1.4;
}
.btn-avatar-upload:hover { background: #b08d4a; }

.btn-avatar-delete {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1.4;
}
.btn-avatar-delete:hover { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }

.profile-top-middle { flex: 1; min-width: 0; padding: 18px 22px; }

.profile-section-label {
  font-size: 12px;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
}

.profile-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}

.profile-detail-item { display: flex; flex-direction: column; gap: 2px; }
.profile-detail-item--full { grid-column: span 2; }
.profile-detail-key { font-size: 10px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.06em; }
.profile-detail-val { font-size: 13.5px; font-weight: 500; color: #374151; line-height: 1.4; }

.profile-top-right { flex-shrink: 0; width: 210px; padding: 18px; }

.profile-id-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.profile-id-slot { display: flex; flex-direction: column; gap: 6px; }
.profile-id-label { font-size: 10px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.06em; }

.profile-id-img-wrap {
  display: block;
  width: 100%;
  height: 76px;
  border-radius: 7px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.profile-id-img-wrap--empty { cursor: default; }
.profile-id-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s; }
.profile-id-img--empty { opacity: 0.5; }
.profile-id-img-wrap:not(.profile-id-img-wrap--empty):hover .profile-id-img { transform: scale(1.04); }

.profile-id-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}

.profile-id-img-wrap:not(.profile-id-img-wrap--empty):hover .profile-id-overlay { opacity: 1; }
.profile-id-overlay--add { opacity: 0; cursor: pointer; }
.profile-id-img-wrap--empty:hover .profile-id-overlay--add { opacity: 1; }

.profile-id-actions { display: flex; gap: 5px; }

.btn-id-edit {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  color: #374151;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-id-edit:hover { background: #f3f4f6; }

.btn-id-delete {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  color: #ef4444;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn-id-delete:hover { background: #fef2f2; border-color: #fca5a5; }

.btn-id-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 5px;
  background: #c7a763;
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-id-add:hover { background: #b08d4a; }

/* Bottom row */
.profile-bottom-row {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 14px;
  align-items: start;
}

.profile-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  padding: 18px 22px;
}

.profile-card-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f3f4f6;
}

.profile-pw-stack { display: flex; flex-direction: column; gap: 10px; }
.profile-pw-field { display: flex; flex-direction: column; gap: 4px; }
.profile-pw-label { font-size: 10px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.06em; }

.profile-pw-input {
  width: 100%;
  padding: 8px 12px;
  font-size: 13.5px;
  color: #111827;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  line-height: 1.5;
}
.profile-pw-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.12); background: #fff; }
.profile-pw-input::placeholder { color: #9ca3af; }

.profile-pw-footer { margin-top: 14px; display: flex; justify-content: flex-end; }

.btn-profile-save {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  background: #c7a763;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-profile-save:hover { background: #b08d4a; }

.profile-card--master { height: fit-content; }

.profile-master-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.profile-master-dots { font-size: 14px; font-weight: 600; color: #374151; margin: 4px 0 0; letter-spacing: 0.08em; }
.profile-master-none { font-size: 13px; color: #6b7280; margin: 4px 0 0; }

.btn-profile-master {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  background: #c7a763;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-profile-master:hover { background: #b08d4a; }

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  font-size: 13px;
  color: var(--text-secondary);
  position: absolute;
  bottom: 0;
  text-align: center;
  left: 0; right: 0;
  margin: 12px 0;
}
.footer p { margin: 0 !important; }

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

@media (max-width: 1024px) {
  .main-wrapper { height: auto; min-height: 100vh; overflow: visible; }

  .main-sidebar,
  .left-sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), width 0.3s cubic-bezier(0.4,0,0.2,1) !important;
    width: 260px !important;
    z-index: 200;
  }

  .left-sidebar.mobile-open { transform: translateX(0); }

  .content-wrapper {
    margin-left: 0 !important;
    height: auto;
    min-height: calc(100vh - 64px);
    overflow-y: visible;
    padding-bottom: 60px;
  }

  body.sidebar-collapsed .main-sidebar,
  body.sidebar-collapsed .left-sidebar { width: 260px !important; transform: translateX(-100%); }
  body.sidebar-collapsed .left-sidebar.mobile-open { transform: translateX(0); }
  body.sidebar-collapsed .content-wrapper { margin-left: 0 !important; }

  .settings-grid { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }

  .login-box { width: 95%; margin: 30px auto 60px; }
  .login-field { padding: 0 24px 48px; }

  .navbar-center  { display: none; }
  .navbar-left    { min-width: auto; gap: 10px; }
  .navbar-datetime { display: none; }
  .nav-profile-name { display: none; }

  .data-tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .profile-top-card { flex-direction: column; }
  .profile-top-divider { width: auto; height: 1px; margin: 0 16px; align-self: stretch; }
  .profile-top-left { width: 100%; flex-direction: row; align-items: center; padding: 16px 18px; gap: 16px; }
  .profile-identity { text-align: left; }
  .profile-avatar-actions { justify-content: flex-start; }
  .profile-top-middle { padding: 16px 18px; }
  .profile-top-right { width: 100%; padding: 16px 18px; }
  .profile-id-grid { grid-template-columns: repeat(2, 1fr); max-width: 260px; }
  .profile-bottom-row { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
  .profile-top-right { width: 190px; }
  .profile-top-left  { width: 160px; }
}

@media (max-width: 560px) {
  .page-content { padding: 12px 16px 24px; }

  .profile-details-grid { grid-template-columns: 1fr; }
  .profile-detail-item--full { grid-column: span 1; }
  .profile-top-left { flex-direction: column; align-items: center; }
  .profile-identity { text-align: center; }
  .profile-avatar-actions { justify-content: center; }
  .profile-id-grid { max-width: 100%; }

  .page-content-header { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   PROFILE PAGE — card blocks
   ============================================================ */

/* Top 3-column row */
.profile-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}

/* Each card block */
.profile-card-block {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
}

/* Section label (uppercase small caps header inside card) */
.profile-card-label {
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f3f4f6;
}

.profile-card-sublabel {
  font-size: 11px;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 2px;
}

/* Profile picture card inner layout */
.profile-pic-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.profile-avatar-box {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.profile-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.profile-avatar-wrap:hover .profile-avatar-overlay { opacity: 1; }
.profile-avatar-wrap:hover .profile-avatar-delete-btn { opacity: 1; }

.profile-avatar-overlay {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}

.profile-avatar-delete-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
  cursor: pointer;
  z-index: 10;
  pointer-events: auto;
}

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

.profile-avatar-click {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  cursor: pointer;
}

.profile-user-name {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
  margin-bottom: 3px;
}

.profile-user-role {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
}

/* ID grid inside card 2 */
.profile-id-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex: 1;
}

.profile-id-slot {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-id-slot-label {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-id-slot--empty {
  border: 2px dashed #e5e7eb;
  border-radius: 10px;
  min-height: 130px;
  position: relative;
  transition: border-color 0.15s;
}

.profile-id-slot--empty:hover { border-color: #d1d5db; }

.profile-id-add-btn {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
}

.profile-id-add-icon {
  font-size: 22px;
  font-weight: 300;
  color: #9ca3af;
  line-height: 1;
}

.profile-id-add-btn:hover .profile-id-add-icon,
.profile-id-add-btn:hover .profile-id-add-text { color: #6b7280; }

.profile-id-add-text {
  font-size: 12px;
  font-weight: 500;
  color: #9ca3af;
  transition: color 0.15s;
}

/* Personal details list inside card 3 */
.profile-details-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  justify-content: center;
}

.profile-detail-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.profile-detail-key {
  font-size: 10px;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.profile-detail-val {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bottom row: 3-col grid, master takes 1, change password takes 2 */
.profile-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  align-items: start;
}

/* Shared card for bottom row */
.profile-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  padding: 16px 18px;
}

.profile-pw-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Profile modals */
.profile-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-modal-box {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  width: 90%;
  max-width: 360px;
  padding: 20px;
}

.profile-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f3f4f6;
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.profile-modal-title {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.profile-modal-close {
  font-size: 20px;
  color: #9ca3af;
  cursor: pointer;
  line-height: 1;
}

.profile-modal-close:hover { color: #374151; }

.profile-modal-body {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 16px;
}

.profile-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Responsive */
@media (max-width: 1024px) {
  .profile-cards-row { grid-template-columns: 1fr; }
  .profile-bottom-row { grid-template-columns: 1fr; }
  .profile-bottom-row .profile-card[style*="span 2"] { grid-column: span 1 !important; }
}

.data-tbl-fullbleed {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100%;
    border-radius: 0 !important;
}

.data-tbl-fullbleed .data-tbl {
    width: 100%;
    border-left: none !important;
    border-right: none !important;
}

/* 2. Add button height fix — compact, matches header height */
.btn-add-compact {
    height: 36px !important;
    line-height: 1 !important;
    font-size: 14px;
    white-space: nowrap;
}

/* 3. Edit icon — grey instead of golden */
.btn-row-grey {
    color: #6b7280 !important;        /* gray-500 */
}
.btn-row-grey:hover {
    color: #374151 !important;        /* gray-700 on hover */
}

/* 4. Row hover — gray-50 background */
.data-tbl tbody tr:hover td {
    background-color: #f9fafb !important;  /* gray-50 */
}