/* Shared form finish for the admin workspace and public account flows. */
.main-area form label {
  color: #303942;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.main-area form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="reset"]):not([type="button"]):not([type="file"]):not([type="range"]),
.main-area form select,
.main-area form textarea {
  min-height: 44px;
  border: 1px solid #d9dde0;
  border-radius: 10px;
  background-color: #fff;
  color: #20262d;
  font: inherit;
  line-height: 1.45;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.main-area form textarea {
  min-height: 108px;
  padding: 11px 12px;
  resize: vertical;
}

.main-area form input::placeholder,
.main-area form textarea::placeholder {
  color: #929aa2;
  opacity: 1;
}

.main-area form input:focus,
.main-area form select:focus,
.main-area form textarea:focus {
  outline: 0;
  border-color: #d3ad18;
  box-shadow: 0 0 0 3px rgba(246, 213, 72, .22);
}

.main-area form input:disabled,
.main-area form select:disabled,
.main-area form textarea:disabled {
  background-color: #f3f4f2;
  color: #7a8188;
  cursor: not-allowed;
}

/* Search bars and compound password controls keep their compact layouts. */
.main-area form .search-box input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="reset"]):not([type="button"]):not([type="file"]):not([type="range"]) {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.main-area form .search-box input:focus {
  box-shadow: none;
}

.main-area form :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: #e3bd24;
}

.main-area .form-actions,
.main-area .wizard-actions,
.main-area .profile-actions,
.main-area .self-password-actions,
.main-area .settings-actions {
  gap: 10px;
}

.main-area .page-card form,
.main-area .card form {
  min-width: 0;
}

.main-area .page-card .form-grid,
.main-area .settings-form,
.main-area .profile-fields {
  row-gap: 18px;
}

.main-area .form-grid label small,
.main-area form .field-hint,
.main-area form .form-hint {
  color: #737d86;
  font-size: 11px;
  line-height: 1.5;
}

.main-area form :focus-visible,
.auth-panel form :focus-visible {
  outline: 3px solid rgba(246, 213, 72, .42);
  outline-offset: 2px;
}

.auth-panel .login-card .auth-field {
  margin-bottom: 20px;
}

.auth-panel .login-card .auth-field label {
  line-height: 1.4;
}

.auth-panel .login-card .auth-field input,
.auth-panel .login-card .auth-field select {
  min-height: 50px;
  border-color: #d6d9d7;
  box-shadow: 0 1px 2px rgba(20, 25, 30, .03);
}

.auth-panel .login-card .auth-field input:focus,
.auth-panel .login-card .auth-field select:focus {
  border-color: #d3ad18;
  box-shadow: 0 0 0 3px rgba(246, 213, 72, .24);
}

.auth-panel .login-card .auth-field input:disabled,
.auth-panel .login-card .auth-field select:disabled {
  background: #f4f5f2;
  color: #7a8188;
}

@media (max-width: 700px) {
  .main-area .form-actions,
  .main-area .wizard-actions,
  .main-area .profile-actions,
  .main-area .self-password-actions {
    align-items: stretch;
  }
}

/* Audit log filter form */
.main-area .audit-page-intro { align-items: flex-start; }
.main-area .audit-page-intro > div { min-width: 0; max-width: 100%; }
.main-area .audit-page-intro h2 { max-width: 760px; line-height: 1.32; overflow-wrap: anywhere; }
.main-area .audit-page-intro p { line-height: 1.55; overflow-wrap: anywhere; }
.top-actions .notification-menu { position: relative; flex: none; }
.top-actions .notification-menu > summary { position: relative; display: grid; place-items: center; width: 44px; height: 44px; list-style: none; cursor: pointer; border: 1px solid #e6dcc2; border-radius: 13px; background: #fffdf7; color: #584510; box-shadow: 0 2px 7px rgba(67,54,18,.07); transition: background .15s, color .15s, box-shadow .15s, transform .15s; }
.top-actions .notification-menu > summary::-webkit-details-marker { display: none; }
.top-actions .notification-menu > summary:hover, .top-actions .notification-menu[open] > summary { transform: translateY(-1px); background: #fff; color: #181818; box-shadow: 0 5px 15px rgba(38,32,14,.13); }
.top-actions .notification-menu > summary:focus-visible { outline: 3px solid rgba(203,157,31,.42); outline-offset: 2px; }
.top-actions .notification-menu > summary > .icon { width: 22px; height: 22px; stroke-width: 2.1; }
.notification-badge { position: absolute; top: -7px; right: -7px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border: 2px solid #fff; border-radius: 999px; background: #c51f32; color: #fff; font-size: 10px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: 0 2px 7px rgba(100,12,25,.4); }
.notification-badge[hidden] { display: none; }
.notification-popover { position: absolute; top: calc(100% + 12px); right: -54px; z-index: 50; width: min(350px, calc(100vw - 28px)); overflow: hidden; border: 1px solid #e7e3d7; border-radius: 14px; background: #fff; box-shadow: 0 16px 42px rgba(24,25,26,.18); }
.notification-popover > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #eeeae0; background: #fffdf6; }
.notification-popover > header strong, .notification-popover > header small { display: block; }
.notification-popover > header strong { color: #242a30; font-size: 12px; }
.notification-popover > header small { margin-top: 3px; color: #858b90; font-size: 9px; }
.notification-popover > header a { color: #806700; font-size: 10px; font-weight: 750; white-space: nowrap; }
.notification-header-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.notification-header-actions button { padding: 5px 9px; border: 1px solid #e5e0d3; border-radius: 7px; background: #fff; color: #535b61; font: inherit; font-size: 10px; font-weight: 750; cursor: pointer; }
.notification-header-actions button:hover:not(:disabled) { border-color: #c9ac55; background: #fff8e3; color: #684d00; }
.notification-header-actions button:disabled { opacity: .45; cursor: not-allowed; }
.notification-header-actions button:focus-visible, .notification-header-actions a:focus-visible { outline: 2px solid #c59a22; outline-offset: 2px; border-radius: 5px; }
.notification-list { max-height: min(420px, calc(100vh - 170px)); overflow: auto; }
.notification-item { display: grid; gap: 5px; padding: 11px 15px; border-bottom: 1px solid #f0eee8; transition: background .15s; }
.notification-item:last-child { border-bottom: 0; }
.notification-item:hover { background: #fffaf0; }
.notification-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.notification-item-top strong { overflow: hidden; color: #30363b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.notification-result { flex: none; padding: 3px 6px; border-radius: 6px; background: #f0f2f2; color: #69727a; font-size: 8px; font-weight: 750; }
.notification-result.success { background: #e4f7e9; color: #197440; }
.notification-item-detail { overflow: hidden; color: #747d84; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.notification-item time { color: #9a9da0; font-size: 8px; }
.notification-empty { margin: 0; padding: 20px 16px; color: #7e858b; font-size: 10px; text-align: center; }
.main-area .audit-filter-form {
  display: grid;
  gap: 18px;
  margin: 0 0 18px;
  padding: 22px 24px;
  border: 1px solid #e9e4d6;
  border-radius: 16px;
  background: linear-gradient(118deg, #fffdf6 0%, #fff 62%, #fff 100%);
  box-shadow: 0 8px 24px rgba(33, 31, 24, .05);
}

.main-area .audit-filter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.main-area .audit-filter-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #a47d00;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}

.main-area .audit-filter-heading h2 {
  margin: 0;
  color: #252b30;
  font-size: 16px;
  letter-spacing: -.02em;
}

.main-area .audit-filter-heading p {
  margin: 4px 0 0;
  color: #838990;
  font-size: 11px;
}

.main-area .audit-filter-count {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #eee4bd;
  border-radius: 999px;
  background: #fff9e3;
  color: #78631d;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.main-area .audit-filter-controls {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(170px, 220px) auto;
  align-items: end;
  gap: 14px;
}

.main-area .audit-search-filter {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #51585e;
  font-size: 10px;
  font-weight: 750;
}

.main-area .audit-filter-controls .search-box {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #dfe1dc;
  border-radius: 10px;
  background: #fff;
  color: #858b90;
  transition: border-color .16s, box-shadow .16s;
}

.main-area .audit-filter-controls .search-box:focus-within {
  border-color: #d3b52e;
  box-shadow: 0 0 0 3px rgba(246, 213, 72, .17);
}

.main-area .audit-filter-controls .search-box input {
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-shadow: none;
  color: #29313b;
  font-size: 12px;
}

.main-area .audit-result-filter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #51585e;
  font-size: 10px;
  font-weight: 750;
}

.main-area .audit-result-filter select:focus {
  outline: 0;
  border-color: #d3b52e;
  box-shadow: 0 0 0 3px rgba(246, 213, 72, .17);
}

.main-area .audit-result-filter select {
  width: 100%;
  min-height: 44px;
  padding: 0 32px 0 11px;
  border: 1px solid #dfe1dc;
  border-radius: 10px;
  background: #fff;
  color: #29313b;
  font-size: 12px;
}

.main-area .audit-filter-actions {
  display: flex;
  gap: 8px;
}

.main-area .audit-filter-actions .btn {
  min-height: 44px;
  padding: 10px 14px;
  font-size: 11px;
}

.audit-table .table-wrap table {
  width: 100%;
  max-width: 1300px;
  min-width: 0;
  margin-inline: auto;
  table-layout: fixed;
}

.audit-table .table-wrap th,
.audit-table .table-wrap td {
  padding: 9px 6px;
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
  font-size: 10px;
  line-height: 1.45;
}

.audit-table .table-wrap th:nth-child(1), .audit-table .table-wrap td:nth-child(1) { width: 12%; }
.audit-table .table-wrap th:nth-child(2), .audit-table .table-wrap td:nth-child(2) { width: 8%; }
.audit-table .table-wrap th:nth-child(3), .audit-table .table-wrap td:nth-child(3) { width: 14%; }
.audit-table .table-wrap th:nth-child(4), .audit-table .table-wrap td:nth-child(4) { width: 12%; }
.audit-table .table-wrap th:nth-child(5), .audit-table .table-wrap td:nth-child(5) { width: 18%; }
.audit-table .table-wrap th:nth-child(6), .audit-table .table-wrap td:nth-child(6) { width: 9%; }
.audit-table .table-wrap th:nth-child(7), .audit-table .table-wrap td:nth-child(7) { width: 10%; }
.audit-table .table-wrap th:nth-child(8), .audit-table .table-wrap td:nth-child(8) { width: 9%; }
.audit-table .table-wrap th:nth-child(9), .audit-table .table-wrap td:nth-child(9) { width: 8%; }
.audit-table .table-wrap .truncate-cell {
  display: -webkit-box;
  max-width: none;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 860px) {
  .audit-table .table-wrap th:nth-child(2), .audit-table .table-wrap td:nth-child(2),
  .audit-table .table-wrap th:nth-child(6), .audit-table .table-wrap td:nth-child(6),
  .audit-table .table-wrap th:nth-child(8), .audit-table .table-wrap td:nth-child(8) { display: none; }
  .audit-table .table-wrap th:nth-child(1), .audit-table .table-wrap td:nth-child(1) { width: 15%; }
  .audit-table .table-wrap th:nth-child(3), .audit-table .table-wrap td:nth-child(3) { width: 20%; }
  .audit-table .table-wrap th:nth-child(4), .audit-table .table-wrap td:nth-child(4) { width: 14%; }
  .audit-table .table-wrap th:nth-child(5), .audit-table .table-wrap td:nth-child(5) { width: 23%; }
  .audit-table .table-wrap th:nth-child(7), .audit-table .table-wrap td:nth-child(7) { width: 15%; }
  .audit-table .table-wrap th:nth-child(9), .audit-table .table-wrap td:nth-child(9) { width: 13%; }
  .audit-detail-long { display: none; }
  .audit-detail-short { display: inline; }
  .audit-detail-trigger { padding: 4px 6px; }
}

@media (max-width: 620px) {
  .audit-table .table-wrap { padding: 0 7px 8px; }
  .audit-table .table-wrap th, .audit-table .table-wrap td { padding: 7px 4px; font-size: 9px; }
  .audit-table .table-wrap .status-chip { min-height: 20px; padding: 3px 5px; font-size: 8px; }
}

@media (max-width: 1024px) {
  .main-area .audit-filter-controls {
    grid-template-columns: minmax(0, 1fr) minmax(145px, .7fr);
  }

  .main-area .audit-filter-controls .search-box {
    grid-column: 1 / -1;
  }

  .main-area .audit-search-filter {
    grid-column: 1 / -1;
  }

  .main-area .audit-filter-actions {
    align-self: end;
  }
}

@media (max-width: 480px) {
  .main-area .audit-filter-form {
    padding: 15px;
  }

  .main-area .audit-filter-controls {
    grid-template-columns: 1fr;
  }

  .main-area .audit-filter-controls .search-box {
    grid-column: auto;
  }

  .main-area .audit-search-filter {
    grid-column: auto;
  }

  .main-area .audit-filter-heading {
    align-items: flex-start;
  }

  .main-area .audit-filter-count {
    min-height: 28px;
    padding: 0 9px;
    font-size: 9px;
  }

  .main-area .audit-filter-actions .btn {
    flex: 1;
  }
}

.audit-detail-cell { white-space: nowrap!important; }
.audit-detail-trigger { border: 1px solid #eadfae; border-radius: 7px; padding: 5px 8px; background: #fff9df; color: #6c5810; font-size: 9px; font-weight: 750; white-space: nowrap; }
.audit-detail-short { display: none; }
.audit-detail-trigger:hover:not(:disabled) { border-color: #d9c56e; background: #fff3c1; }
.audit-detail-trigger:disabled { border-color: #ecebe7; background: #f6f6f4; color: #969a9d; cursor: default; }
.audit-detail-dialog { width: min(620px, calc(100vw - 28px)); max-height: min(78vh, 720px); padding: 0; overflow: hidden; border: 1px solid #e4dfd0; border-radius: 16px; background: #fff; color: #252b30; box-shadow: 0 24px 70px rgba(20,21,22,.25); }
.audit-detail-dialog::backdrop { background: rgba(17,20,22,.48); backdrop-filter: blur(2px); }
.audit-detail-dialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 17px 19px; border-bottom: 1px solid #eeeae0; background: linear-gradient(115deg,#fffdf5,#fff); }
.audit-detail-dialog > header span { color: #9b7900; font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.audit-detail-dialog > header h2 { margin: 4px 0 0; font-size: 15px; overflow-wrap: anywhere; }
.audit-detail-dialog > header button { width: 31px; height: 31px; flex: none; border: 1px solid #e8e5dc; border-radius: 9px; background: #fff; color: #596168; font-size: 20px; line-height: 1; }
.audit-detail-target { margin: 15px 18px 0; padding: 10px 12px; border: 1px solid #ece8da; border-radius: 9px; background: #fafaf7; color: #596168; font: 10px/1.5 ui-monospace,SFMono-Regular,monospace; overflow-wrap: anywhere; }
.audit-detail-dialog pre { max-height: 48vh; margin: 12px 18px; overflow: auto; padding: 13px; border-radius: 9px; background: #f5f6f5; color: #374149; font: 11px/1.65 ui-monospace,SFMono-Regular,monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.audit-detail-dialog > footer { display: flex; justify-content: flex-end; padding: 0 18px 17px; }
@media (max-width: 860px) { .audit-detail-long { display: none; } .audit-detail-short { display: inline; } .audit-detail-trigger { padding: 4px 6px; } }

/* VPN request review and edit forms */
.main-area .vpn-admin-request .vpn-review-form {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #e9e3cb;
  border-radius: 14px;
  background: linear-gradient(135deg, #fffdf5, #fff);
}

.main-area .vpn-admin-request .vpn-review-form label,
.main-area .vpn-admin-request .vpn-edit-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #42484d;
  font-size: 11px;
  font-weight: 700;
}

.main-area .vpn-admin-request .vpn-review-form input,
.main-area .vpn-admin-request .vpn-edit-form input,
.main-area .vpn-admin-request .vpn-edit-form select,
.main-area .vpn-admin-request .vpn-edit-form textarea {
  width: 100%;
  min-height: 42px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #dfe1dc;
  border-radius: 10px;
  background: #fff;
  color: #29313b;
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 1px 2px rgba(20, 25, 30, .03);
}

.main-area .vpn-admin-request .vpn-edit-form textarea {
  min-height: 108px;
  padding: 11px 12px;
  resize: vertical;
}

.main-area .vpn-admin-request .vpn-review-form input:focus,
.main-area .vpn-admin-request .vpn-edit-form input:focus,
.main-area .vpn-admin-request .vpn-edit-form select:focus,
.main-area .vpn-admin-request .vpn-edit-form textarea:focus {
  outline: 0;
  border-color: #d3ad18;
  box-shadow: 0 0 0 3px rgba(246, 213, 72, .2);
}

.main-area .vpn-admin-request .vpn-review-form > label input {
  max-width: none;
}

.main-area .vpn-admin-request .vpn-edit-form {
  align-items: start;
  gap: 16px;
  padding: 18px;
}

.main-area .vpn-admin-request .vpn-edit-form .vpn-edit-wide,
.main-area .vpn-admin-request .vpn-edit-form .vpn-edit-actions {
  grid-column: 1 / -1;
}

.main-area .vpn-admin-request .vpn-edit-actions {
  padding-top: 13px;
  border-top: 1px solid #ece9de;
}

.main-area .vpn-admin-request .vpn-btn-approve,
.main-area .vpn-admin-request .vpn-btn-save {
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid #20221f;
  border-radius: 10px;
  background: #20221f;
  color: #fff;
}

.main-area .vpn-admin-request .vpn-btn-reject,
.main-area .vpn-admin-request .vpn-btn-delete {
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid #efcccc;
  border-radius: 10px;
  background: #fff;
  color: #a33333;
}

.main-area .vpn-admin-request .vpn-btn-reject:hover,
.main-area .vpn-admin-request .vpn-btn-delete:hover {
  background: #fff1f1;
}

.main-area .vpn-admin-request .vpn-provision-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin: 14px 0 20px;
  padding: 10px 18px;
  border: 1px solid #d7bb35;
  border-radius: 11px;
  background: #fff7d5;
  color: #3c351d;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.4;
  box-shadow: 0 3px 8px rgba(111, 91, 0, .08);
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.main-area .vpn-admin-request .vpn-provision-button:hover {
  transform: translateY(-1px);
  border-color: #c8a800;
  background: #ffefad;
  box-shadow: 0 6px 14px rgba(111, 91, 0, .12);
}

.main-area .vpn-provision-result {
  display: grid;
  gap: 4px;
  margin: 2px 0 14px;
  padding: 12px 14px;
  border: 1px solid #d7eadb;
  border-radius: 11px;
  background: #f3fbf4;
  color: #26623a;
  font-size: 11px;
}

.main-area .vpn-provision-result.warning {
  border-color: #f1ddae;
  background: #fff9e9;
  color: #765d1a;
}

.main-area .vpn-provision-result span {
  font-size: 10px;
  line-height: 1.5;
}

.main-area .vpn-email-preview {
  margin: 18px 0;
  overflow: hidden;
  border: 1px solid #e5dfc9;
  border-radius: 13px;
  background: #fff;
}

.main-area .vpn-email-preview-head {
  display: grid;
  gap: 6px;
  padding: 13px 16px;
  border-bottom: 1px solid #eee9d7;
  background: #fffdf5;
}

.main-area .vpn-email-preview-head strong {
  color: #333a40;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.main-area .vpn-email-preview-body {
  padding: 8px 16px 12px;
  color: #545c63;
  font-size: 11px;
  line-height: 1.65;
}

.main-area .vpn-email-preview-body p {
  margin: 7px 0;
}

.main-area .vpn-email-preview-body code {
  padding: 3px 7px;
  border-radius: 6px;
  background: #f5f3eb;
  color: #665a27;
  font-family: inherit;
}

.main-area .vpn-email-delivery-alert {
  margin: 10px 0;
  padding: 11px 13px;
  border: 1px solid #cfe5d3;
  border-radius: 10px;
  background: #f0faf2;
  color: #21653a;
  font-size: 11px;
  line-height: 1.5;
}

.main-area .vpn-email-delivery-alert.warning {
  border-color: #f1d5b3;
  background: #fff7ec;
  color: #855522;
}

.main-area .vpn-source-summary {
  display: grid;
  gap: 9px;
  padding: 15px 16px;
  border: 1px solid #e9e5d7;
  border-radius: 12px;
  background: #fbfbf8;
  color: #555d63;
  font-size: 11px;
}

.main-area .vpn-source-summary strong {
  color: #222a30;
  font-size: 13px;
}

.main-area .vpn-source-summary > span:not(.eyebrow) {
  color: #6f777d;
}

.main-area .vpn-source-summary small {
  color: #858d94;
  font-size: 10px;
}

.main-area .vpn-source-summary > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-top: 8px;
  border-top: 1px solid #ecebe4;
}

.main-area .vpn-source-summary > div span {
  color: #81878c;
}

.main-area .vpn-source-summary > div strong {
  font-size: 11px;
  text-align: right;
}

.main-area .vpn-generated-identity {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid #eee5bf;
  border-radius: 11px;
  background: #fffbed;
}

.main-area .vpn-generated-identity span {
  color: #7a6b35;
  font-size: 10px;
  font-weight: 700;
}

.main-area .vpn-generated-identity strong {
  color: #393722;
  font-size: 12px;
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  .main-area .vpn-admin-request .vpn-review-form,
  .main-area .vpn-admin-request .vpn-edit-form {
    padding: 14px;
  }

  .main-area .vpn-admin-request .vpn-edit-form .vpn-edit-wide,
  .main-area .vpn-admin-request .vpn-edit-form .vpn-edit-actions {
    grid-column: auto;
  }
}

/* Compact, expandable lists for VPN requests grouped by applicant type. */
.main-area .vpn-request-groups { display: grid; gap: 22px; }
.main-area .vpn-request-group { min-width: 0; }
.main-area .vpn-request-group-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.main-area .vpn-request-group-header h3 { margin: 0; color: #252a2e; font-size: 15px; }
.main-area .vpn-request-group-header p { margin: 3px 0 0; color: #858b91; font-size: 11px; }
.main-area .vpn-request-list { overflow: hidden; border: 1px solid #e7e4d9; border-radius: 12px; background: #fff; }
.main-area .vpn-request-item,
.main-area .vpn-request-item:hover { display: block; margin: 0; padding: 0; overflow: visible; border: 0; border-bottom: 1px solid #eeece5; border-radius: 0; background: #fff; box-shadow: none; transform: none; transition: none; }
.main-area .vpn-request-item:last-child { border-bottom: 0; }
.main-area .vpn-request-summary { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto 150px 16px; align-items: center; gap: 10px; min-height: 64px; padding: 10px 15px; cursor: pointer; list-style: none; }
.main-area .vpn-request-summary::-webkit-details-marker { display: none; }
.main-area .vpn-request-summary:hover { background: #fbfaf5; }
.main-area .vpn-request-summary-id { color: #8b8c8c; font-size: 11px; font-weight: 700; }
.main-area .vpn-request-summary-person { display: grid; gap: 3px; min-width: 0; }
.main-area .vpn-request-summary-person strong { overflow: hidden; color: #252a2e; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.main-area .vpn-request-summary-person small { overflow: hidden; color: #7d8389; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.main-area .vpn-request-summary > .vpn-status { justify-self: start; }
.main-area .vpn-request-summary > .vpn-work-status { justify-self: start; }
.main-area .vpn-request-summary > .vpn-request-date { padding: 0; color: #85878a; font-size: 10px; white-space: nowrap; }
.vpn-work-status { display: inline-flex; align-items: center; min-height: 23px; max-width: 100%; padding: 4px 8px; border: 1px solid #e7e8e5; border-radius: 999px; background: #f5f6f4; color: #687179; font-size: 9px; font-weight: 750; line-height: 1.25; }
.vpn-work-status-in_progress { border-color: #f0dca0; background: #fff5d7; color: #866500; }
.vpn-work-status-complete { border-color: #bce2c7; background: #e9f8ed; color: #207441; }
.main-area .vpn-request-chevron { width: 9px; height: 9px; border-right: 1.5px solid #777b7d; border-bottom: 1.5px solid #777b7d; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.main-area .vpn-request-item[open] > .vpn-request-summary { background: #fffdf5; }
.main-area .vpn-request-item[open] > .vpn-request-summary .vpn-request-chevron { transform: rotate(225deg) translate(-2px, -1px); }
.main-area .vpn-admin-request.vpn-request-item > .vpn-request-header { display: flex; margin: 0; padding: 15px; border-top: 1px solid #eeece5; border-bottom: 0; background: #fbfbf8; }
.main-area .vpn-admin-request.vpn-request-item > dl { margin: 14px 15px; }
.main-area .vpn-admin-request.vpn-request-item > .vpn-review-form,
.main-area .vpn-admin-request.vpn-request-item > .vpn-review-meta,
.main-area .vpn-admin-request.vpn-request-item > .vpn-work-status-form,
.main-area .vpn-admin-request.vpn-request-item > .vpn-provision-result,
.main-area .vpn-admin-request.vpn-request-item > .vpn-provision-button,
.main-area .vpn-admin-request.vpn-request-item > .vpn-edit-details,
.main-area .vpn-admin-request.vpn-request-item > .vpn-delete-form { margin-right: 15px; margin-left: 15px; }
.main-area .vpn-admin-request.vpn-request-item > .vpn-delete-form { margin-bottom: 14px; }
.main-area .vpn-work-status-form { display: flex; align-items: end; gap: 9px; margin-top: 13px; padding: 12px; border: 1px solid #ece8db; border-radius: 11px; background: #fffefa; }
.main-area .vpn-work-status-form label { display: grid; gap: 5px; flex: 1; min-width: 0; color: #4e555b; font-size: 10px; font-weight: 750; }
.main-area .vpn-work-status-form select { width: 100%; min-height: 37px; padding: 0 10px; border: 1px solid #dedfdc; border-radius: 8px; background: #fff; color: #30363a; font-size: 11px; }
.main-area .vpn-btn-work-status { min-height: 37px; padding: 8px 12px; border: 1px solid #e2d28b; background: #fff5cc; color: #544410; font-size: 10px; }
.main-area .vpn-btn-work-status:hover { background: #ffedaa; }
.main-area .vpn-request-empty { margin: 0; padding: 16px; color: #858b91; font-size: 12px; }
@media (max-width: 760px) {
  .main-area .vpn-request-summary { grid-template-columns: 28px minmax(0, 1fr) 16px; gap: 6px 10px; padding: 11px 12px; }
  .main-area .vpn-request-summary-id { grid-column: 1; grid-row: 1; }
  .main-area .vpn-request-summary-person { grid-column: 2; grid-row: 1; }
  .main-area .vpn-request-summary > .vpn-status { grid-column: 2; grid-row: 2; }
  .main-area .vpn-request-summary > .vpn-work-status { grid-column: 2; grid-row: 3; }
  .main-area .vpn-request-summary > .vpn-request-date { grid-column: 2; grid-row: 4; white-space: normal; }
  .main-area .vpn-request-chevron { grid-column: 3; grid-row: 1; }
  .main-area .vpn-admin-request.vpn-request-item > .vpn-request-header { display: block; }
  .main-area .vpn-work-status-form { align-items: stretch; flex-direction: column; }
  .main-area .vpn-btn-work-status { width: 100%; }
}