/* DuKKia Phase 3C — additive design system. Load LAST inside _LayoutMISModern.
   All selectors are scoped to .mis-modern-shell to protect legacy MIS and ePass. */
.mis-modern-shell {
  --dk-navy:#102e51; --dk-ink:#193552; --dk-muted:#526980;
  --dk-teal:#118eaa; --dk-teal-dark:#08738d;
  --dk-border:#dbe5ef; --dk-surface:#ffffff; --dk-soft:#f3f7fb;
  --dk-radius-sm:9px; --dk-radius:12px; --dk-radius-lg:18px;
  --dk-shadow:0 8px 26px rgba(17,45,80,.075);
  --dk-focus:0 0 0 3px rgba(12,138,174,.26);
  --dk-space-1:4px; --dk-space-2:8px; --dk-space-3:12px;
  --dk-space-4:16px; --dk-space-5:24px; --dk-space-6:32px;
  accent-color:var(--dk-teal); color:var(--dk-ink);
  -webkit-font-smoothing:antialiased;
}
/* Prevent wide children from forcing the sidebar layout wider. */
.mis-modern-shell .mis-main,
.mis-modern-shell .mis-modern-content {min-width:0;}
.mis-modern-shell .mis-modern-content img {max-width:100%;height:auto;}
/* Respect users who navigate by keyboard. No blanket outline:none. */
.mis-modern-shell :where(a,button,input,textarea,select,[tabindex]):focus-visible {
  outline:2px solid var(--dk-teal);outline-offset:3px;
  box-shadow:var(--dk-focus);
}
.mis-modern-shell :where(button,input,select,textarea):disabled,
.mis-modern-shell :where(button,[role="button"])[aria-disabled="true"] {cursor:not-allowed;opacity:.62;}
.mis-modern-shell :where(input,select,textarea)[aria-invalid="true"] {border-color:#c24048;}
.mis-modern-shell .dk-field-error {font-size:.875rem;color:#a62834;margin-top:5px;}
.mis-modern-shell .dk-help {font-size:.875rem;color:var(--dk-muted);line-height:1.55;}
/* Opt-in shared components: safe to apply in new pages without changing existing IDs. */
.mis-modern-shell .dk-card {background:var(--dk-surface);border:1px solid var(--dk-border);border-radius:var(--dk-radius-lg);box-shadow:var(--dk-shadow);padding:clamp(16px,2.4vw,28px);min-width:0;}
.mis-modern-shell .dk-card__title {color:var(--dk-navy);font-weight:800;font-size:clamp(19px,2vw,23px);line-height:1.3;margin:0 0 12px;}
.mis-modern-shell .dk-eyebrow {color:var(--dk-teal-dark);font-size:12px;letter-spacing:.11em;font-weight:800;text-transform:uppercase;}
.mis-modern-shell .dk-btn {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;max-width:100%;padding:10px 16px;border-radius:var(--dk-radius-sm);border:1px solid transparent;font:inherit;font-size:14px;font-weight:750;line-height:1.3;text-decoration:none;cursor:pointer;white-space:normal;text-align:center;transition:background-color .15s,border-color .15s,color .15s;}
.mis-modern-shell .dk-btn--primary {background:var(--dk-navy);color:#fff;}
.mis-modern-shell .dk-btn--primary:hover {background:#194d75;color:#fff;text-decoration:none;}
.mis-modern-shell .dk-btn--secondary {background:#fff;color:var(--dk-navy);border-color:var(--dk-border);}
.mis-modern-shell .dk-btn--secondary:hover {background:var(--dk-soft);color:var(--dk-navy);text-decoration:none;}
.mis-modern-shell .dk-btn--danger {background:#fff;border-color:#e1acaf;color:#a62834;}
.mis-modern-shell .dk-btn--danger:hover {background:#fff1f2;color:#8a1721;}
.mis-modern-shell .dk-field {display:flex;flex-direction:column;gap:6px;min-width:0;}
.mis-modern-shell .dk-field>label {font-size:14px;font-weight:750;color:var(--dk-ink);margin:0;}
.mis-modern-shell .dk-input {width:100%;min-height:42px;padding:9px 12px;background:#fff;color:var(--dk-ink);border:1px solid #cbd9e7;border-radius:var(--dk-radius-sm);font:inherit;font-size:15px;line-height:1.4;}
.mis-modern-shell textarea.dk-input {min-height:106px;resize:vertical;}
.mis-modern-shell .dk-input:focus {border-color:var(--dk-teal);}
.mis-modern-shell .dk-table-wrap {width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--dk-border);border-radius:var(--dk-radius);}
.mis-modern-shell .dk-table {width:100%;border-collapse:collapse;margin:0;font-size:14px;}
.mis-modern-shell .dk-table :where(th,td) {padding:13px 16px;vertical-align:middle;border-bottom:1px solid #e7edf4;text-align:left;}
.mis-modern-shell .dk-table th {background:var(--dk-soft);font-weight:800;color:var(--dk-navy);white-space:nowrap;}
.mis-modern-shell .dk-table tbody tr:last-child td {border-bottom:0;}
.mis-modern-shell .dk-table tbody tr:hover {background:#f8fbfd;}
.mis-modern-shell .dk-pill {display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:#eaf3fa;color:#1b5779;font-size:12px;font-weight:750;line-height:1.4;}
.mis-modern-shell .dk-pill--success {background:#e5f4ec;color:#226743;}
.mis-modern-shell .dk-pill--warning {background:#fff3dc;color:#845300;}
.mis-modern-shell .dk-pill--danger {background:#fdebed;color:#992934;}
.mis-modern-shell .dk-empty {padding:32px 18px;text-align:center;color:var(--dk-muted);background:var(--dk-soft);border:1px dashed var(--dk-border);border-radius:var(--dk-radius);}
.mis-modern-shell .dk-actions {display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.mis-modern-shell .dk-sr-only {position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* Light-touch consistency across previously migrated pages. Existing component styling remains authoritative. */
.mis-modern-shell :where(.mis-bp-back,.mis-team-back,.mis-support-back,.mis-billing-back,.mis-switch__trigger) {transition:background-color .15s,border-color .15s,color .15s;}
.mis-modern-shell :where(.mis-side__link,.mis-profile-button,.mis-account) {text-underline-offset:3px;}
/* Make horizontal tables usable on phones only where opting into dk-table-wrap. */
@media(max-width:767px) {
  .mis-modern-shell .dk-card {padding:16px;}
  .mis-modern-shell .dk-actions>.dk-btn {flex:1 1 auto;}
  .mis-modern-shell .dk-table :where(th,td) {padding:10px 12px;}
}
@media(prefers-reduced-motion:reduce) {
  .mis-modern-shell .dk-btn,
  .mis-modern-shell :where(.mis-bp-back,.mis-team-back,.mis-support-back,.mis-billing-back,.mis-switch__trigger) {transition:none;}
}
@media(forced-colors:active) {
  .mis-modern-shell .dk-btn {border-color:ButtonText;}
  .mis-modern-shell :where(a,button,input,textarea,select,[tabindex]):focus-visible {outline:2px solid Highlight;}
}