/* =========================================================================
   ENOREPORT ACCOUNT — Redesign theme (staticv2)
   Visual layer only. Loaded LAST in index_v2.html so it overrides
   pixel-admin-lite + bootstrap. No JS selectors/IDs are changed.
   ========================================================================= */

/* System font stack — renders Vietnamese diacritics correctly (Plus Jakarta
   Sans mangled combined marks like ệ ữ ợ, so it was removed). */

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --bg: #eef1f7;
  --surface: #ffffff;
  --surface-2: #f7f9fc;

  /* topbar / sidebar — match workspace (#0e3f75 flat, same on both) */
  --navy-1: #0e3f75;
  --navy-2: #0e3f75;
  --navy-3: #1a4d86;

  --primary: #2f6bed;
  --primary-600: #1f57d6;
  --primary-700: #1846b4;
  --primary-soft: #e8f0fe;

  --text: #1d2840;
  --text-2: #46546f;
  --muted: #8a97ad;
  --border: #e6eaf2;
  --border-strong: #d4dbe8;

  --success: #18a558;
  --success-soft: #e6f6ed;
  --warning: #ef9415;
  --warning-soft: #fdf0db;
  --danger: #e4453a;
  --danger-soft: #fce8e6;
  --info: #2f6bed;
  --info-soft: #e8f0fe;

  --radius: 14px;
  --radius-sm: 9px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20, 33, 61, .06), 0 1px 3px rgba(20, 33, 61, .05);
  --shadow: 0 6px 24px -8px rgba(20, 33, 61, .18), 0 2px 6px rgba(20, 33, 61, .06);
  --shadow-lg: 0 24px 60px -20px rgba(20, 33, 61, .35);

  --sidebar-w: 220px;   /* must match pixel-admin sidebar width */
  --topbar-h: 60px;     /* must match pixel-admin topbar height  */
}

/* ---------- base ---------- */
body {
  font-family: var(--font-sans) !important;
  background: var(--bg) !important;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  letter-spacing: .1px;
}

a { color: var(--primary); }
a:hover, a:focus { color: var(--primary-700); text-decoration: none; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #c3ccdb; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #aab6cb; }

/* =========================================================================
   TOP NAVBAR
   ========================================================================= */
.navbar-default.navbar-static-top,
nav.navbar-static-top,
.navbar-static-top .navbar-header {
  background: var(--navy-2) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04);
  min-height: var(--topbar-h);
  position: relative;
}

.navbar-static-top .top-left-part,
.navbar-static-top .logo {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
}
.navbar-static-top .top-left-part {
  width: var(--sidebar-w);
  /* darker overlay over the logo area to distinguish it (like workspace) */
  background: rgba(0, 0, 0, .1) !important;
  padding-left: 22px;
}
.navbar-static-top .header-title {
  color: #fff;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: .2px;
  display: flex !important;
  align-items: center;
  gap: 10px;
}
.navbar-static-top .header-title img { border-radius: 8px; }

/* right-side topbar items: one flex row, all vertically centered.
   Replaces the old per-item hard-coded margin-top alignment. */
.navbar-top-links.navbar-right {
  display: flex !important;
  align-items: center;
  height: var(--topbar-h);
  margin: 0 8px 0 0 !important;
  float: right;
}
.navbar-top-links.navbar-right > li {
  display: flex;
  align-items: center;
  height: 100%;
  float: none;
}
/* neutralize the inline hard-coded margins that pushed items down */
.navbar-top-links.navbar-right > li > div[style] {
  margin: 0 !important;
  float: none !important;
  display: flex !important;
  align-items: center;
}

.navbar-top-links #language_text b { color: #dde6f7; font-weight: 600; }
.navbar-top-links #language_modal { box-shadow: var(--shadow) !important; border: 1px solid var(--border); border-radius: 10px !important; }
.navbar-top-links #language_modal > div { border-radius: 7px; transition: background .15s; }
.navbar-top-links #language_modal > div:hover { background: var(--surface-2); }

/* tenant selector — selector must be `select#...` to match (and outrank,
   via later source order) the old custom.css `select#tenant-selection` rule. */
select#tenant-selection {
  /* no border/background — just text + chevron */
  background-color: transparent !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  /* override the old custom.css longhands (background-position-x:100%; -y:17px) */
  background-position-x: calc(100% - 6px) !important;
  background-position-y: 50% !important;
  background-size: 16px 16px !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--radius-pill) !important;
  height: 40px !important;
  padding: 0 26px 0 4px !important;   /* room for the chevron on the right */
  font-weight: 600;
  font-size: 12.5px;                   /* smaller, closer to the old static size */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
#tenant-selection option { color: #1d2840; }

/* profile pill */
.profile-pic {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 6px;
  margin: 0 10px 0 0;
  border-radius: var(--radius-pill);
  background: transparent;
  transition: background .18s;
}
.profile-pic:hover { background: rgba(255, 255, 255, .10); }
.profile-pic img { border-radius: 50% !important; border: 2px solid rgba(255,255,255,.5); }
.profile-pic b { color: #fff; font-weight: 600; font-size: 13.5px; }
.profile-pic > i.fa-caret-down { color: rgba(255,255,255,.75); font-size: 12px; transition: transform .18s; }

/* profile dropdown (opens when the name is clicked; JS toggles .active) */
#avar_menu_popup {
  position: absolute;
  top: var(--topbar-h);
  right: 12px;
  width: 240px;
  z-index: 1050;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
#avar_menu_popup.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#avar_menu_popup .avar-menu-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text, #1d2840);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background .15s;
}
#avar_menu_popup .avar-menu-item:hover { background: var(--primary-soft, #e4ecfb); color: var(--primary, #2f6bed); }
#avar_menu_popup .avar-menu-item:hover > i { color: var(--primary, #2f6bed); }
#avar_menu_popup .avar-menu-item > i { color: #7e8db0; }
#avar_menu_popup .avar-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 4px;
}
#avar_menu_popup #btn_logout {
  margin: 0;
  background: rgba(228, 69, 58, .10) !important;
  color: var(--danger, #e4453a) !important;
  border: 1px solid rgba(228, 69, 58, .25) !important;
  border-radius: var(--radius-sm, 9px) !important;
  font-weight: 600;
  box-shadow: none !important;
}
#avar_menu_popup #btn_logout:hover { background: var(--danger, #e4453a) !important; color: #fff !important; }

.app-search .form-control {
  background: rgba(255,255,255,.10);
  border: 0; color: #fff; border-radius: var(--radius-pill);
}
.app-search .form-control::placeholder { color: rgba(255,255,255,.6); }

/* =========================================================================
   SIDEBAR
   ========================================================================= */
.navbar-default.sidebar,
.fix-header .navbar-default.sidebar {
  /* same color source as the topbar (--navy-2) */
  background: var(--navy-2) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* keep pixel-admin's 220px / collapsed-60px widths intact (don't override width) */
.sidebar .sidebar-nav { background: transparent !important; padding: 14px 12px 60px; }

#side-menu { padding-top: 4px; }
#side-menu > li { margin: 3px 0; }
#side-menu > li > a {
  color: #b8c3da !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 11px 14px !important;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background .16s, color .16s, transform .16s;
}
#side-menu > li > a > i {
  width: 24px;
  font-size: 16px;
  text-align: center;
  color: #7e8db0;
  transition: color .16s;
}
#side-menu > li > a:hover {
  background: rgba(255, 255, 255, .06) !important;
  color: #fff !important;
}
#side-menu > li > a:hover > i { color: #cdd8ef; }

/* active state (JS adds .active) — original blue gradient pill */
#side-menu > li > a.active,
#side-menu > li.active > a {
  background: linear-gradient(90deg, var(--primary), var(--primary-600)) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px -8px rgba(47, 107, 237, .8);
}
#side-menu > li > a.active > i,
#side-menu > li.active > a > i { color: #fff; }

.sidebar .hide-menu { letter-spacing: .2px; }

/* ---- sidebar collapse toggle (pinned to bottom of sidebar) ---- */
#sidebar-collapse-toggle {
  position: fixed;
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  z-index: 1001;          /* above content, below mobile backdrop */
  display: flex;
  align-items: center;
  justify-content: center;   /* icon-only, always centered */
  padding: 13px 0 !important;
  background: var(--navy-2);
  color: #b8c3da !important;
  font-weight: 600;
  font-size: 13px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-radius: 0;
  transition: background .16s, color .16s, width .2s ease;
}
#sidebar-collapse-toggle:hover { background: rgba(255, 255, 255, .06) !important; color: #fff !important; }
#sidebar-collapse-toggle > i,
#sidebar-collapse-toggle > svg { font-size: 16px; color: #7e8db0; transition: transform .2s; }
#sidebar-collapse-toggle:hover > i,
#sidebar-collapse-toggle:hover > svg { color: #cdd8ef; }

/* sidebar labels: keep on one line and fade (never reflow → no jump) */
#side-menu > li > a,
#sidebar-collapse-toggle { white-space: nowrap; overflow: hidden; }
#side-menu > li > a .hide-menu,
#sidebar-collapse-toggle .hide-menu {
  opacity: 1;
  max-width: 180px;
  overflow: hidden;
  transition: opacity .18s ease, max-width .2s ease;
}

/* collapsed state: only icons, narrow rail (logo + app name stay intact) */
body.sidebar-collapsed .navbar-default.sidebar { width: 64px !important; }
body.sidebar-collapsed #page-wrapper { margin-left: 64px !important; }
/* collapse the label to 0 width so it no longer pushes the icon off-center;
   max-width animates → smooth, and no vertical reflow (nowrap + overflow hidden) */
body.sidebar-collapsed .sidebar .hide-menu { max-width: 0 !important; opacity: 0 !important; }
body.sidebar-collapsed #side-menu > li > a { justify-content: center; gap: 0 !important; padding: 11px 0 !important; }
body.sidebar-collapsed #side-menu > li > a > i,
body.sidebar-collapsed #side-menu > li > a > svg { width: auto; margin: 0; }
body.sidebar-collapsed #sidebar-collapse-toggle { width: 64px; justify-content: center; gap: 0 !important; padding: 13px 0 !important; }
body.sidebar-collapsed #sidebar-collapse-toggle > i,
body.sidebar-collapsed #sidebar-collapse-toggle > svg { transform: rotate(180deg); }
.navbar-default.sidebar, #page-wrapper { transition: width .2s ease, margin-left .2s ease; }

/* logout button at sidebar bottom */
.sidebar #btn_logout {
  background: rgba(228, 69, 58, .14) !important;
  color: #ff9a90 !important;
  border: 1px solid rgba(228, 69, 58, .28) !important;
  border-radius: 11px !important;
  font-weight: 600;
  box-shadow: none !important;
}
.sidebar #btn_logout:hover { background: var(--danger) !important; color: #fff !important; }

/* =========================================================================
   PAGE WRAPPER / CONTENT
   ========================================================================= */
#page-wrapper { background: var(--bg) !important; min-height: calc(100vh - 64px); }
#page-wrapper > .container-fluid { padding: 26px 28px 8px !important; }

/* page header band */
.bg-title, .row.bg-title {
  background: transparent !important;
  border: 0 !important;
  padding: 0 0 18px !important;
  margin: 0 0 4px !important;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
/* right-aligned action buttons living on the same row as the page title */
.bg-title .rd-page-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-title, h4.page-title {
  color: var(--text) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  line-height: 1.4 !important;   /* roomy enough for Vietnamese diacritics */
  margin: 0 !important;
  letter-spacing: -.2px;
}
.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 6px 0 0 !important;
  font-size: 13px;
}
.breadcrumb > li, .breadcrumb li { color: var(--muted); }
.breadcrumb > .active, .breadcrumb li.active { color: var(--text-2); font-weight: 600; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--primary); }

footer.footer, .main-footer {
  background: transparent !important;
  color: var(--muted) !important;
  padding: 18px 0 22px;
  font-size: 12.5px;
}

/* =========================================================================
   CARDS / WHITE BOX
   ========================================================================= */
.white-box, .card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 22px !important;
  margin-bottom: 24px;
}
.card { padding: 0 !important; overflow: hidden; }
.card-header { background: transparent !important; border-bottom: 1px solid var(--border) !important; }

.box-title {
  color: var(--text) !important;
  font-weight: 700 !important;
  font-size: 16px;
  line-height: 1.4;
}
label.title, .form-material label.title { color: var(--text-2); font-weight: 600; font-size: 13px; margin-bottom: 6px; }
label.text-gray, label.text-uppercase { color: var(--muted) !important; font-weight: 600; letter-spacing: .4px; }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn {
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  font-size: 13.5px;
  padding: 9px 18px;
  border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .16s ease, background .16s ease, filter .16s;
  box-shadow: none;
}
.btn:active { transform: translateY(1px); }
.btn-rounded { border-radius: var(--radius-pill) !important; }
.btn-sm { padding: 7px 14px; font-size: 13px; }

.btn-primary {
  background: linear-gradient(90deg, var(--primary), var(--primary-600)) !important;
  border-color: var(--primary-600) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px -10px rgba(47, 107, 237, .9) !important;
}
.btn-primary:hover, .btn-primary:focus { filter: brightness(1.05); color: #fff !important; }

.btn-success { background: var(--success) !important; border-color: var(--success) !important; color: #fff !important; }
.btn-success:hover { filter: brightness(1.05); }
.btn-danger { background: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important; }
.btn-danger:hover { filter: brightness(1.05); }

/* Pixel theme styles .btn-label as a dark divided segment; neutralize it so
   the in-button text label blends with the button instead of showing a dark gap. */
.btn .btn-label { background: transparent; margin: 0; padding: 0; }
.btn-warning { background: var(--warning) !important; border-color: var(--warning) !important; color: #fff !important; }
.btn-info { background: var(--info) !important; border-color: var(--info) !important; color: #fff !important; }

.btn-outline, .btn-default {
  background: var(--surface) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-2) !important;
}
.btn-default:hover { background: var(--surface-2) !important; border-color: var(--muted) !important; }

/* =========================================================================
   FORMS
   ========================================================================= */
.form-control {
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  height: auto;
  min-height: 42px;
  padding: 9px 13px !important;
  font-size: 14px;
  box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(47, 107, 237, .15) !important;
}
.form-control::placeholder { color: var(--muted); }

/* underline-style inputs used in detail/login forms */
.form-control-line {
  border: 0 !important;
  border-bottom: 1.5px solid var(--border-strong) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding-left: 2px !important;
}
.form-control-line:focus {
  border-bottom-color: var(--primary) !important;
  box-shadow: 0 1px 0 var(--primary) !important;
}
.form-control-alert { color: var(--danger); }
.required > label:first-child::after,
.required label.title::after { content: ' *'; color: var(--danger); }

/* selectize */
/* Selectize copies the original input's `form-control` class onto its
   .selectize-control wrapper, so the wrapper picks up the .form-control box
   (border/radius/height) and nests a second box around .selectize-input.
   Strip the box off the wrapper — only .selectize-input is the real control. */
.selectize-control.form-control {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  box-shadow: none !important;
}
.selectize-input {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border-strong) !important;
  min-height: 42px;
  box-shadow: none !important;
}
.selectize-input.focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(47,107,237,.15) !important; }

/* toggle switch (.switch.large) — recolor only, keep markup */
.switch .slider { background-color: #cdd5e3 !important; }
.switch input:checked + .slider { background-color: var(--success) !important; }

/* =========================================================================
   TABLES / GONRIN GRID
   ========================================================================= */
#grid table, .table, table.table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0;
  font-size: 13.5px;
}
#grid thead th, .table thead th, table thead th {
  background: var(--surface-2) !important;
  color: var(--muted) !important;
  font-weight: 700 !important;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .5px;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 13px 14px !important;
  white-space: nowrap;
}
#grid tbody td, .table tbody td, table tbody td {
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 13px 14px !important;
  color: var(--text-2);
  vertical-align: middle;
}
#grid tbody tr, .table tbody tr { transition: background .12s; }
#grid tbody tr:hover, .table tbody tr:hover { background: var(--surface-2) !important; cursor: pointer; }
#grid tbody tr:last-child td { border-bottom: 0 !important; }

/* status pills — when JS renders status text/badges */
.label, .badge {
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
  font-size: 11.5px;
  padding: 4px 11px !important;
  letter-spacing: .2px;
}
.label-success, .badge-success { background: var(--success-soft) !important; color: var(--success) !important; }
.label-danger, .badge-danger { background: var(--danger-soft) !important; color: var(--danger) !important; }
.label-warning, .badge-warning { background: var(--warning-soft) !important; color: var(--warning) !important; }
.label-info, .badge-info, .label-primary, .badge-primary { background: var(--info-soft) !important; color: var(--info) !important; }
.label-default, .badge-default { background: #eef1f6 !important; color: var(--muted) !important; }

/* pagination (gonrin) */
.pagination > li > a, .pagination > li > span {
  color: var(--text-2);
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  margin: 0 3px;
  min-width: 36px;
  text-align: center;
}
.pagination > .active > a, .pagination > .active > span {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

/* =========================================================================
   LOGIN / AUTH  (split-screen)
   ========================================================================= */
.rd-auth {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--surface);
  font-family: var(--font-sans);
  z-index: 1;
}

/* ----- language switcher ----- */
.rd-auth__lang { position: fixed; top: 22px; right: 26px; z-index: 30; }
.rd-lang-toggle {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: rgba(255, 255, 255, .14); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .25);
  padding: 7px 13px; border-radius: var(--radius-pill);
  color: #fff; font-size: 13px; font-weight: 600;
}
.rd-lang-toggle img { width: 20px; border-radius: 3px; }
.rd-lang-toggle .rd-lang-text b { font-weight: 600; }
.rd-lang-menu {
  display: none; position: absolute; right: 0; top: 46px;
  background: #fff; border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow); padding: 6px; min-width: 160px;
}
.rd-lang-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px; cursor: pointer; color: var(--text); font-size: 14px; }
.rd-lang-item:hover { background: var(--surface-2); }
.rd-lang-item img { width: 24px; border-radius: 3px; }

/* ----- brand panel ----- */
.rd-auth__brand {
  position: relative; overflow: hidden;
  background-color: #18254a;
  background: linear-gradient(160deg, #14203c 0%, #1b2c54 55%, #243a72 100%);
  color: #fff;
  display: flex; flex-direction: column; justify-content: center;
  padding: 64px 70px;
}
.rd-auth__brand-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(560px 420px at 18% 12%, rgba(47, 107, 237, .55), transparent 60%),
    radial-gradient(520px 420px at 92% 88%, rgba(24, 165, 88, .30), transparent 60%);
  pointer-events: none;
}
.rd-auth__brand-grid {
  position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle at 30% 40%, #000, transparent 80%);
          mask-image: radial-gradient(circle at 30% 40%, #000, transparent 80%);
}
.rd-auth__brand-inner { position: relative; z-index: 2; max-width: 460px; }
.rd-auth__logo { display: flex; align-items: center; gap: 14px; margin-bottom: 46px; }
.rd-auth__logo img { height: 46px; width: auto; border-radius: 10px; background: rgba(255,255,255,.06); padding: 4px; }
.rd-auth__logo span { font-size: 20px; font-weight: 800; letter-spacing: .3px; }
.rd-auth__headline { font-size: 40px; line-height: 1.12; font-weight: 800; letter-spacing: -.6px; margin: 0 0 18px; color: #fff; }
.rd-auth__sub { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .72); margin: 0 0 36px; }
.rd-auth__features { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.rd-auth__features li { display: flex; align-items: center; gap: 13px; font-size: 14.5px; color: rgba(255,255,255,.9); }
.rd-auth__features i {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px;
  display: grid; place-items: center; font-size: 15px; color: #bcd0ff;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12);
}
.rd-auth__brand-foot { position: relative; z-index: 2; margin-top: 40px; font-size: 12.5px; color: rgba(255,255,255,.45); }

/* ----- form panel ----- */
.rd-auth__panel {
  display: flex; align-items: center; justify-content: center; padding: 40px 28px;
  background:
    radial-gradient(900px 500px at 110% -10%, rgba(47,107,237,.06), transparent 60%),
    var(--surface);
}
.rd-auth__card { width: 100%; max-width: 396px; animation: rd-fade-up .5s ease both; }
.rd-auth__brandmark--mobile { display: none; text-align: center; margin-bottom: 18px; }
.rd-auth__brandmark--mobile img { height: 54px; }
.rd-auth__title { font-size: 28px; font-weight: 800; color: var(--text); letter-spacing: -.5px; margin: 0 0 6px; }
.rd-auth__title #app_name { color: var(--primary); }
.rd-auth__hint { color: var(--muted); font-size: 14.5px; margin: 0 0 30px; }

.rd-form { display: block; }
.rd-field { margin-bottom: 18px; }
.rd-field > label { display: block; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-2); margin-bottom: 8px; }
.rd-input { position: relative; display: flex; align-items: center; }
.rd-input__icon { position: absolute; left: 15px; color: var(--muted); font-size: 15px; pointer-events: none; }
.rd-input .form-control {
  width: 100%; height: 50px; min-height: 50px;
  padding: 0 44px 0 42px !important;
  border: 1.5px solid var(--border-strong) !important;
  border-radius: 12px !important; background: var(--surface-2) !important;
  font-size: 14.5px; transition: border-color .15s, box-shadow .15s, background .15s;
}
.rd-input .form-control:focus { border-color: var(--primary) !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(47,107,237,.13) !important; }
.rd-input__toggle { position: absolute; right: 14px; color: var(--muted); cursor: pointer; font-size: 15px; }
.rd-input__toggle:hover { color: var(--primary); }

.rd-field .form-control-alert { display: none; font-size: 12px; color: var(--danger); margin-top: 7px; }
.rd-field.invalid .form-control-alert { display: block; }
.rd-field.invalid .rd-input .form-control { border-color: var(--danger) !important; box-shadow: 0 0 0 4px rgba(228,69,58,.12) !important; }

.rd-auth__row { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 24px; }
.rd-check { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--text-2); cursor: pointer; font-weight: 500; }
.rd-check input { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; }
.rd-link { color: var(--primary); font-size: 13.5px; font-weight: 600; }
.rd-link:hover { color: var(--primary-700); }
.rd-link--strong { font-weight: 700; }

.rd-auth__submit {
  width: 100%; height: 50px; font-size: 15px !important; border-radius: 12px !important;
  margin-top: 2px;
}
.rd-auth__foot { text-align: center; margin: 22px 0 0; color: var(--muted); font-size: 14px; }

@media (max-width: 991px) {
  .rd-auth { grid-template-columns: 1fr; }
  .rd-auth__brand { display: none; }
  .rd-auth__brandmark--mobile { display: block; }
  .rd-lang-toggle { background: var(--surface-2); border-color: var(--border); color: var(--text); }
  .rd-lang-toggle .rd-lang-text b { color: var(--text); }

  /* -------- mobile: off-canvas sidebar overlay -------- */
  /* show the hamburger (theme hides it with hidden-* on >sm) */
  .navbar-static-top .navbar-toggle {
    display: inline-flex !important; align-items: center; justify-content: center;
    float: left; width: 42px; height: 42px; margin: 9px 6px 9px 10px;
    border: 0; border-radius: 10px; background: rgba(255,255,255,.10);
    color: #fff; font-size: 18px;
  }
  .navbar-static-top .top-left-part { width: auto; }

  /* sidebar slides in from the left, above content */
  .navbar-default.sidebar {
    position: fixed !important; top: 60px; left: 0; bottom: 0;
    width: 260px !important; max-width: 84vw;
    transform: translateX(-100%); transition: transform .26s ease;
    z-index: 1050; box-shadow: 0 18px 50px rgba(0,0,0,.45);
  }
  body.sidebar-open .navbar-default.sidebar { transform: translateX(0); }

  /* content takes the full width on mobile */
  #page-wrapper { margin-left: 0 !important; }
  #page-wrapper > .container-fluid { padding: 18px 16px 8px !important; }

  /* dim backdrop behind the open sidebar */
  .rd-sidebar-backdrop {
    position: fixed; inset: 60px 0 0 0; background: rgba(13,20,38,.5);
    opacity: 0; visibility: hidden; transition: opacity .26s, visibility .26s; z-index: 1040;
  }
  body.sidebar-open .rd-sidebar-backdrop { opacity: 1; visibility: visible; }

  /* topbar tidy: keep it on one row */
  .navbar-top-links.navbar-right { gap: 2px; }
  .navbar-top-links.navbar-right #change_language #language_text { display: none; }  /* keep just the flag */
  .profile-pic b { display: none !important; }                      /* avatar only on mobile */
  select#tenant-selection { max-width: 120px; }

  /* mobile uses the off-canvas hamburger sidebar, NOT the collapse rail.
     Neutralize the collapsed state here so the two mechanisms don't clash. */
  #sidebar-collapse-toggle { display: none !important; }
  body.sidebar-collapsed .navbar-default.sidebar { width: 260px !important; }
  body.sidebar-collapsed #page-wrapper { margin-left: 0 !important; }
  body.sidebar-collapsed .navbar-static-top .top-left-part { width: auto !important; padding-left: 0 !important; }
  body.sidebar-collapsed .header-title { font-size: 14px !important; }
  body.sidebar-collapsed .sidebar .hide-menu { opacity: 1 !important; }
  body.sidebar-collapsed #side-menu > li > a { justify-content: flex-start; padding: 11px 14px !important; }
}

/* =========================================================================
   NOTIFY DIALOG (thông báo ở giữa màn hình)
   ========================================================================= */
.rd-notify-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 33, 61, .42);
  opacity: 0;
  transition: opacity .2s ease;
  font-family: var(--font-sans);
}
.rd-notify-overlay.rd-show { opacity: 1; }

.rd-notify-dialog {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 28px 26px 24px;
  text-align: center;
  transform: translateY(8px) scale(.96);
  transition: transform .2s ease;
}
.rd-notify-overlay.rd-show .rd-notify-dialog { transform: translateY(0) scale(1); }

.rd-notify-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
}
.rd-notify-title {
  font-weight: 700;
  font-size: 17px;
  color: var(--text);
  margin-bottom: 6px;
}
.rd-notify-message {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.5;
  word-break: break-word;
}
.rd-notify-message:empty { display: none; }

.rd-notify-btn {
  margin-top: 22px;
  min-width: 120px;
  padding: 10px 22px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
.rd-notify-btn:hover { background: var(--primary-600); }

/* Màu theo loại thông báo */
.rd-notify-success .rd-notify-icon { background: var(--success-soft); color: var(--success); }
.rd-notify-success .rd-notify-btn  { background: var(--success); }
.rd-notify-error   .rd-notify-icon { background: var(--danger-soft);  color: var(--danger); }
.rd-notify-error   .rd-notify-btn  { background: var(--danger); }
.rd-notify-warning .rd-notify-icon { background: var(--warning-soft); color: var(--warning); }
.rd-notify-warning .rd-notify-btn  { background: var(--warning); }
.rd-notify-info    .rd-notify-icon { background: var(--info-soft);    color: var(--info); }
.rd-notify-info    .rd-notify-btn  { background: var(--info); }

/* =========================================================================
   DIALOGS (jquery-confirm / gonrin)
   ========================================================================= */
.jconfirm .jconfirm-box {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
}
.jconfirm .jconfirm-title { font-weight: 700; color: var(--text); }
.modal-content { border: 0 !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-lg) !important; }
.modal-header { border-bottom: 1px solid var(--border) !important; }
.modal-footer { border-top: 1px solid var(--border) !important; }

/* =========================================================================
   PRELOADER
   ========================================================================= */
/* Transparent backdrop + delayed fade-in so fast route changes (~10ms) don't
   flash a full-screen panel. The spinner only becomes visible if loading
   actually takes longer than the delay. */
.preloader {
  background: transparent !important;
  pointer-events: none;            /* never block clicks for the brief flashes */
  animation: rd-preloader-in .2s ease .22s both;
}
.preloader .cssload-speeding-wheel,
.preloader [class*="cssload"],
.preloader .pl,
.preloader svg { animation-delay: .22s; }
@keyframes rd-preloader-in { from { opacity: 0; } to { opacity: 1; } }

/* =========================================================================
   ECO / APP GRID (cards of apps)
   ========================================================================= */
.app-card, .eco-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .16s, box-shadow .16s;
}
.app-card:hover, .eco-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* page-load fade for content */
@keyframes rd-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* note: removed the per-row fade-up animation — it re-ran on every route
   change and caused a visible flash when switching tabs. */

/* =========================================================================
   LIST-PAGE COMPONENTS (tabs, toolbar, search, user cell, chips, actions)
   ========================================================================= */
.rd-tabs { display: flex; gap: 6px; margin: 2px 0 18px; border-bottom: 1px solid var(--border); }
.rd-tab {
  background: transparent; border: 0; outline: 0;
  padding: 11px 18px; font-size: 14px; font-weight: 600; color: var(--muted);
  border-bottom: 2.5px solid transparent; margin-bottom: -1px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.rd-tab:hover { color: var(--text-2); }
.rd-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* -------- brand settings (mockup-style: tabs + 2-col panels + save footer) -------- */
.rd-settings { padding: 26px 28px 0; }
.rd-settings__panel { display: none; }
.rd-settings__panel.active { display: block; }
.rd-settings__section { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }

/* Every form line is a row of two top-aligned cells (left + right) so the two
   columns always line up regardless of each cell's content (input vs. toggle). */
.rd-settings__row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; align-items: start;
}
@media (max-width: 880px) { .rd-settings__row { grid-template-columns: 1fr; gap: 0; } }
.rd-settings__heading {
  font-size: 17px; font-weight: 700; color: var(--text); margin: 0 0 20px;
}
.rd-field { margin-bottom: 18px; }
.rd-field__label {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--muted);
  margin: 0 0 6px;
}
.rd-field .form-control {
  width: 100%; background: var(--surface-2, #f6f8fc);
  border: 1px solid var(--border); border-radius: var(--radius-sm, 9px);
  padding: 10px 13px; font-size: 14px; color: var(--text); box-shadow: none;
}
.rd-field .form-control:focus {
  background: var(--surface, #fff); border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft, #e8f0fe); outline: 0;
}
.rd-field .form-control[disabled],
.rd-field .form-control[readonly] { opacity: .7; cursor: not-allowed; }
.rd-field textarea.form-control { resize: vertical; }
.rd-field--inline {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.rd-field--inline .rd-field__label { margin: 0; }

/* logo block */
.rd-settings__logo-row { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.rd-settings__logo {
  position: relative; width: 76px; height: 76px; min-width: 76px;
  border-radius: 16px; overflow: hidden; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2, #f6f8fc);
}
.rd-settings__logo img { width: 100%; height: 100%; object-fit: cover; }
.rd-settings__logo-edit {
  position: absolute; right: 5px; bottom: 5px; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; border-radius: 999px; font-size: 11px;
}
.rd-settings__logo-name { font-weight: 700; font-size: 15px; color: var(--text); }
.rd-settings__logo-hint { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* zalo OA preview */
.rd-settings__zalo { display: flex; gap: 12px; margin-top: 14px; }
.rd-settings__zalo-img {
  width: 64px; height: 64px; min-width: 64px; border-radius: 12px;
  background-size: cover; background-position: center; background-color: var(--surface-2, #f6f8fc);
  border: 1px solid var(--border);
}
.rd-settings__zalo-meta h5 { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--text); }

.rd-settings__note { font-size: 13px; color: var(--muted); margin: 8px 0 0; }

/* footer with Save button pinned bottom-right */
.rd-settings__footer {
  display: flex; justify-content: flex-end; gap: 10px;
  margin: 8px -28px 0; padding: 18px 28px; border-top: 1px solid var(--border);
}
.rd-settings__footer .toolbar,
.rd-settings__footer .toolbar-group { display: flex; gap: 10px; }
.rd-settings__footer .btn { margin: 0; }

.rd-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.rd-toolbar__left, .rd-toolbar__right { display: flex; align-items: center; gap: 10px; }
.rd-search { position: relative; }
/* Font Awesome JS rewrites <i> into <svg>, so target both element types. */
.rd-search > i,
.rd-search > svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 13px; width: 13px; height: 13px; pointer-events: none;
}
.rd-search .form-control { width: 280px; max-width: 60vw; padding-left: 36px !important; height: 40px; min-height: 40px; border-radius: var(--radius-pill) !important; background: var(--surface-2) !important; }
.rd-toolbar__right .form-control { height: 40px; min-height: 40px; border-radius: var(--radius-pill) !important; }

/* user cell with avatar */
.rd-user { display: flex; align-items: center; gap: 11px; }
.rd-avatar {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px;
  background: var(--a, var(--primary));
  box-shadow: 0 4px 10px -4px var(--a, var(--primary));
}
.rd-user__meta { display: flex; flex-direction: column; line-height: 1.25; color: var(--text); font-size: 13.5px; }
.rd-user__meta b { font-weight: 700; }
.rd-user__meta span { color: var(--muted); font-size: 12px; }

/* role chip */
.rd-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border);
}
.rd-chip--role { background: var(--primary-soft); color: var(--primary-700); border-color: transparent; }

/* status label tweaks (the .label rules above provide colors) */
.label .fa-circle, .badge .fa-circle { font-size: 7px; vertical-align: middle; margin-right: 4px; }

/* command buttons rendered inside the Gonrin grid */
#grid td .rd-iconbtn, .rd-grid td .rd-iconbtn { display: inline-grid; place-items: center; padding: 0; line-height: 1; }
#grid td.text-right, .rd-grid td:last-child { text-align: right; }
#grid .caret { display: none; }

/* audit-trail grid cell min-widths (keep columns from collapsing) */
.rd-cell-datetime { min-width: 150px; }
.rd-cell-user { min-width: 120px; }
.rd-cell-detail { min-width: 200px; }
.rd-cell-changed { min-width: 200px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--text-2); }

/* audit grid: rows open a detail dialog on click */
.rd-grid tbody tr { cursor: pointer; }

/* audit-trail detail dialog */
.rd-audit-detail { font-size: 13.5px; }
.rd-ad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin-bottom: 18px; }
.rd-ad-row { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.rd-ad-row--full { grid-column: 1 / -1; }
.rd-ad-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.rd-ad-val { color: var(--text); word-break: break-word; }
.rd-ad-blocktitle { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-bottom: 8px; }
.rd-ad-difftable { width: 100%; border-collapse: collapse; font-size: 13px; }
.rd-ad-difftable th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--border); }
.rd-ad-difftable td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: top; word-break: break-word; }
.rd-df-key { font-weight: 600; color: var(--text); white-space: nowrap; }
.rd-df-before { color: var(--danger); text-decoration: line-through; opacity: .8; }
.rd-df-after { color: var(--success); }
.rd-ad-empty { color: var(--muted); font-style: italic; padding: 8px 0; }
@media (max-width: 720px) {
  .rd-ad-grid { grid-template-columns: 1fr; }
}

/* icon action buttons */
.rd-iconbtn {
  width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2); font-size: 12.5px; cursor: pointer;
  transition: all .14s; margin-left: 4px;
}
.rd-iconbtn:hover { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.rd-iconbtn--danger:hover { background: var(--danger-soft); color: var(--danger); }

/* paging footer */
.rd-paging { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; flex-wrap: wrap; gap: 10px; }
.rd-paging__info { color: var(--muted); font-size: 13px; }
.rd-paging .pagination { margin: 0; }

/* =========================================================================
   USER DETAIL  (identity card + info)
   ========================================================================= */
.rd-idcard { padding: 0 !important; overflow: hidden; }
.rd-idcard__head {
  position: relative; text-align: center; padding: 34px 22px 22px;
  background: linear-gradient(160deg, #1b2c54, #25386a);
  color: #fff;
}
.rd-idcard__avatar {
  display: inline-block; position: relative; width: 96px; height: 96px; border-radius: 50%;
  overflow: hidden; border: 3px solid rgba(255,255,255,.85); background: rgba(255,255,255,.12);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); cursor: pointer;
}
.rd-idcard__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-idcard__avatar--empty::before {
  content: '\f007'; font-family: 'Font Awesome 5 Free'; font-weight: 900;
  position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; color: rgba(255,255,255,.6);
}
.rd-idcard__cam {
  position: absolute; right: 4px; bottom: 4px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--primary); color: #fff; display: grid; place-items: center; font-size: 11px;
  border: 2px solid #fff;
}
.rd-idcard__name { color: #fff; font-weight: 700; font-size: 18px; margin: 14px 0 2px; }
.rd-idcard__email { color: rgba(255,255,255,.7); font-size: 13px; margin: 0; }
.rd-idcard__body { padding: 22px; }
.rd-form-row { margin-bottom: 18px; }
.rd-form-row > label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 7px; }
.rd-form-row--inline { display: flex; align-items: center; justify-content: space-between; }
.rd-form-row--inline > label { margin: 0; }
.rd-idcard__actions { display: grid; gap: 10px; margin-top: 22px; }
.rd-idcard__actions .btn { width: 100%; }

/* back arrow in the page title */
.rd-back { color: var(--muted); margin-right: 4px; }
.rd-back:hover { color: var(--primary); }

/* user-detail right panel (tabbed) */
.rd-userdetail__panel { display: none; }
.rd-userdetail__panel.active { display: block; }
/* read-only profile fields: show the value crisply, not greyed-out */
.rd-userdetail .form-control[disabled] {
  color: var(--text); -webkit-text-fill-color: var(--text); opacity: 1; cursor: default;
}

/* =========================================================================
   ECO — application cards
   ========================================================================= */
/* Bootstrap-3 grid uses floats, so columns don't equalize height.
   Make the app grid a flex row so every card in a row matches the tallest. */
#apps-container, #partners-container { margin-top: 4px; display: flex; flex-wrap: wrap; }
/* !important guards against jQuery .fadeIn() writing inline `display:block`
   onto the column, which would break the flex item and collapse card height. */
#apps-container > [class*="col-"],
#partners-container > [class*="col-"] { display: flex !important; float: none; }
.rd-appcard {
  display: flex; align-items: flex-start; gap: 16px; position: relative;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 18px; height: 100%; width: 100%;
  transition: transform .16s, box-shadow .16s, border-color .16s; overflow: hidden;
}
.rd-appcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; color: inherit; }
.rd-appcard.app-status:not(.active) { opacity: .55; filter: grayscale(.4); }
.rd-appcard__logo {
  width: 64px; height: 64px; min-width: 64px; max-width: 64px;
  min-height: 64px; max-height: 64px; flex: 0 0 64px; border-radius: 15px;
  background-color: #fff; background-size: contain; background-repeat: no-repeat;
  background-position: center; background-origin: content-box; padding: 8px;
  border: 1px solid var(--border);
}
.rd-appcard__body { flex: 1; min-width: 0; }
.rd-appcard__name { color: var(--text) !important; font-weight: 700; font-size: 15px; line-height: 1.4; margin: 0 0 4px; float: none !important; }
.rd-appcard__desc {
  color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* status badge (text) — bottom-right */
.rd-appcard__status {
  position: absolute; right: 16px; bottom: 14px;
  font-size: 11.5px; font-weight: 600; line-height: 1; padding: 5px 10px;
  border-radius: 999px; color: var(--success); background: var(--success-soft);
}
.rd-appcard.app-status:not(.active) .rd-appcard__status { color: var(--muted); background: var(--surface-2); }

/* -------- vertical variant (logo on top, taller card, status bottom-right) -------- */
.rd-appcard--v {
  flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 22px 22px 46px; min-height: 220px;
}
.rd-appcard--v .rd-appcard__body { flex: 1 1 auto; width: 100%; }
.rd-appcard--v .rd-appcard__name { font-size: 15.5px; margin: 0 0 6px; }
.rd-appcard--v .rd-appcard__desc { -webkit-line-clamp: 3; }

/* -------- grid variant: logo + main name on row 1, sub-name on row 2,
   description on row 3, status badge pinned top-right -------- */
.rd-appcard--grid {
  display: grid;
  grid-template-columns: auto 1fr;            /* logo | text */
  grid-template-rows: auto auto 1fr;           /* main name | sub name | description */
  column-gap: 14px; row-gap: 4px;
  align-items: start;
  align-content: start;
  padding: 18px;
}
/* logo spans all text rows so its 64px height is absorbed by the description
   row, not split between the name and sub-name rows (which would open a gap) */
.rd-appcard--grid .rd-appcard__logo { grid-row: 1 / 4; grid-column: 1; align-self: start; }
.rd-appcard--grid .rd-appcard__name {
  grid-row: 1; grid-column: 2;
  align-self: start;
  /* leave room for the top-right badge so long names don't collide */
  padding-right: 86px;
  margin: 0; font-size: 15.5px; line-height: 1.4;
}
.rd-appcard--grid .rd-appcard__sub {
  grid-row: 2; grid-column: 2;
  color: var(--text-2); font-weight: 600; font-size: 13px; line-height: 1.4;
  text-transform: uppercase; letter-spacing: .2px;
}
.rd-appcard--grid .rd-appcard__sub:empty { display: none; }
.rd-appcard--grid .rd-appcard__desc {
  grid-row: 3; grid-column: 2;                /* indented under the name */
  -webkit-line-clamp: 2; margin: 6px 0 0;
}
.rd-appcard--grid .rd-appcard__status {
  position: absolute; top: 16px; right: 16px; bottom: auto;
}

/* partner cards reuse app-status card look */
#partner-container .card.app-status { border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }

/* white-box that wraps a grid: let the table breathe edge-to-edge */
.white-box > #grid { margin: 16px -22px 0; }
.white-box > #grid table { width: 100%; }
.white-box > #grid thead th:first-child,
.white-box > #grid tbody td:first-child { padding-left: 22px !important; }
.white-box > #grid thead th:last-child,
.white-box > #grid tbody td:last-child { padding-right: 22px !important; }

/* Audit Trail filter toolbar */
.page-subtitle { margin: 2px 0 0; font-size: 13px; }
.rd-toolbar .selectize-control { min-width: 150px; margin: 0; }
.rd-toolbar .selectize-control.single .selectize-input { height: 40px; min-height: 40px; border-radius: var(--radius-pill) !important; background: var(--surface-2) !important; display: flex; align-items: center; padding-top: 0; padding-bottom: 0; box-shadow: none; }
.rd-toolbar .selectize-control.single .selectize-input:after { top: 18px; }
.rd-filter-date { width: 200px; max-width: 50vw; height: 40px; min-height: 40px; border-radius: var(--radius-pill) !important; background: var(--surface-2) !important; }

/* locked fields (system roles): show the "no entry" cursor on hover */
.is-locked,
.is-locked .slider { cursor: not-allowed !important; }