/*
 * Remedy admin theme
 * Loaded after admin.css so the legacy selectors and package markup remain intact.
 * Keep structural/layout rules in admin.css; keep visual tokens and overrides here.
 */
:root {
    --admin-bg: #f5f6f7;
    --admin-surface: #ffffff;
    --admin-gray-900: #20252b;
    --admin-gray-800: #2b3138;
    --admin-gray-700: #3d444d;
    --admin-gray-600: #5c6570;
    --admin-gray-500: #747e89;
    --admin-gray-300: #cdd2d7;
    --admin-gray-200: #e2e5e8;
    --admin-gray-100: #f0f2f4;
    --admin-accent: #356f8a;
    --admin-accent-hover: #2c5d74;
    --admin-success: #4f7d62;
    --admin-success-hover: #416b53;
    --admin-warning: #a47a36;
    --admin-danger: #a64b4b;
    --admin-danger-hover: #8d3f3f;
    --admin-radius: 3px;
}

body { background: var(--admin-gray-900); color: var(--admin-gray-800); }
a { color: var(--admin-accent); }
a:hover, a:focus { color: var(--admin-accent-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid rgba(53, 111, 138, .28); outline-offset: 1px;
}
h1, h3 { color: var(--admin-gray-700); }
h2.subheader { background: var(--admin-gray-800); color: #fff; border-radius: var(--admin-radius) var(--admin-radius) 0 0; }
/* Legacy color utility classes are pervasive in package views.  Preserve their names,
   but use the same slate treatment for non-semantic section headings. */
.bg-black, .bg-grey, .bg-red, .bg-green, .bg-blue, .bg-orange, .bg-purple,
.bg-red-sec, .bg-green-sec, .bg-blue-sec, .bg-orange-sec, .bg-purple-sec { background: var(--admin-gray-800) !important; }
.bg-white { background: var(--admin-surface) !important; }

/* Buttons retain their existing semantic class names; purple is intentionally a neutral secondary action. */
.btn, .btn-primary, .btn-secondary, .btn-outline-secondary, .btn-light {
    background: var(--admin-gray-700); background-image: none; border: 1px solid var(--admin-gray-700);
    border-radius: var(--admin-radius); box-shadow: none; color: #fff; text-shadow: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease;
}
.btn:hover, .btn:focus, .btn-primary:hover, .btn-secondary:hover, .btn-outline-secondary:hover, .btn-light:hover {
    background: var(--admin-gray-800); background-image: none; border-color: var(--admin-gray-800); color: #fff; text-decoration: none;
}
.btn-blue, .btn-primary { background: var(--admin-accent); border-color: var(--admin-accent); }
.btn-blue:hover, .btn-blue:focus, .btn-primary:hover, .btn-primary:focus { background: var(--admin-accent-hover); border-color: var(--admin-accent-hover); }
.btn-green, .btn-success { background: var(--admin-success); border-color: var(--admin-success); }
.btn-green:hover, .btn-green:focus, .btn-success:hover, .btn-success:focus { background: var(--admin-success-hover); border-color: var(--admin-success-hover); }
.btn-red, .btn-danger { background: var(--admin-danger); border-color: var(--admin-danger); }
.btn-red:hover, .btn-red:focus, .btn-danger:hover, .btn-danger:focus { background: var(--admin-danger-hover); border-color: var(--admin-danger-hover); }
.btn-yellow, .btn-warning { background: var(--admin-warning); border-color: var(--admin-warning); color: #fff; }
.btn-yellow:hover, .btn-yellow:focus, .btn-warning:hover, .btn-warning:focus { background: #89652d; border-color: #89652d; color: #fff; }
.btn-purple { background: var(--admin-gray-600); border-color: var(--admin-gray-600); }
.btn-purple:hover, .btn-purple:focus { background: var(--admin-gray-700); border-color: var(--admin-gray-700); }
.btn-outline-secondary, .btn-light { background: var(--admin-surface); border-color: var(--admin-gray-300); color: var(--admin-gray-700); }
.btn-outline-secondary:hover, .btn-light:hover { background: var(--admin-gray-100); border-color: var(--admin-gray-500); color: var(--admin-gray-800); }
.btn.disabled, .btn:disabled, .btn[disabled], button:disabled { cursor: not-allowed; opacity: .55; pointer-events: none; }

/* Shell and navigation */
#header { background: var(--admin-gray-800); border-bottom: 1px solid var(--admin-gray-700); }
.menu-pin { border-color: var(--admin-gray-500); color: #fff; }
#main-nav { background: var(--admin-gray-900); box-shadow: 1px 0 0 rgba(255,255,255,.05); }
#main-nav ul li.drop-cont { background: var(--admin-gray-800); }
#main-nav ul li.drop-head a.open, #main-nav ul li a:hover { background: var(--admin-gray-700); }
#main-nav ul li a.selected { background: var(--admin-gray-100) !important; color: var(--admin-accent) !important; box-shadow: inset 3px 0 0 var(--admin-accent); }
#main-nav ul li.drop-cont a.selected { background: var(--admin-gray-700) !important; color: #fff !important; box-shadow: inset 3px 0 0 var(--admin-accent); }
#main { background: var(--admin-bg); border-radius: var(--admin-radius); }
#page-header, #footer { border-color: var(--admin-gray-300); }
#footer { color: var(--admin-gray-600); }
#wrapper-login #login-hold { background: var(--admin-surface); border: 1px solid var(--admin-gray-200); border-radius: var(--admin-radius); }

/* Login uses the same theme tokens as the admin while remaining isolated from authenticated screens. */
.admin-login { min-height: 100vh; background: var(--admin-bg); }
.admin-login #header { display: flex; align-items: center; justify-content: space-between; min-height: 78px; padding: 0 32px; box-sizing: border-box; }
.admin-login #header #logo, .admin-login #header #echo-logo { float: none; margin: 0 !important; }
.admin-login #header .clear { display: none; }
.admin-login #header #logo img, .admin-login #header #echo-logo img { height: 42px; width: auto; }
.admin-login #wrapper-login { width: min(100% - 32px, 460px); max-width: none; margin: 64px auto; padding: 0; }
.admin-login #wrapper-login #login-hold { padding: 32px; box-shadow: 0 3px 12px rgba(32,37,43,.10); }
.admin-login #page-header { border-bottom: 0; margin-bottom: 24px; }
.admin-login .login-card-heading h1 { color: var(--admin-gray-800); font: 600 24px/1.25 Arial, Helvetica, sans-serif; letter-spacing: 0; text-transform: none; padding: 0; }
.admin-login .login-card-heading p { color: var(--admin-gray-600); font-size: 14px; line-height: 1.5; padding: 5px 0 0; margin: 0; }
.admin-login .admin-form { margin: 0; }
.admin-login .admin-form fieldset { border: 0; padding: 0; margin: 0; }
.admin-login .admin-form .row { margin-bottom: 18px; }
.admin-login .admin-form label { display: block; color: var(--admin-gray-700); font-size: 14px; line-height: 1.35; padding-bottom: 7px; }
.admin-login input[type=email], .admin-login input[type=password] { height: 44px; padding: 0 12px; font-size: 16px; }
.admin-login input.user, .admin-login input.secure { background-image: none; padding-right: 12px; }
.admin-login .admin-form form > .row:last-child { margin: 6px 0 0; }
.admin-login .admin-form .btn { display: block; float: none; width: 100%; min-height: 44px; padding: 12px 16px; box-sizing: border-box; background: var(--admin-accent); border-color: var(--admin-accent); font-size: 14px; line-height: 18px; }
.admin-login .admin-form .btn.float-right { margin-left: 0; }
.admin-login .admin-form .btn:hover, .admin-login .admin-form .btn:focus { background: var(--admin-accent-hover); border-color: var(--admin-accent-hover); }
.admin-login .admin-form .btn:active { background: #244d60; border-color: #244d60; }
.admin-login input:-webkit-autofill, .admin-login input:-webkit-autofill:hover, .admin-login input:-webkit-autofill:focus { -webkit-text-fill-color: var(--admin-gray-800); -webkit-box-shadow: 0 0 0 1000px #fff inset; }
.admin-login .msg { margin-bottom: 20px; }
.admin-login .msg p { padding: 14px 16px; margin: 0; }
.admin-login .msg ul { margin: 0; padding: 14px 16px 14px 34px; line-height: 1.4; }
.admin-login .msg ul li { margin: 0; }
.admin-login .login-help { margin: 20px 0 0; padding: 0; font-size: 14px; text-align: center; }
.admin-login .login-help a { color: var(--admin-accent); }
.admin-login .login-help a:hover, .admin-login .login-help a:focus { color: var(--admin-accent-hover); }

@media screen and (max-width: 540px) {
    .admin-login #header { min-height: 64px; padding: 0 16px; }
    .admin-login #header #logo { display: block; }
    .admin-login #header #logo img, .admin-login #header #echo-logo img { height: auto; max-width: 140px; max-height: 30px; }
    .admin-login #wrapper-login { width: min(100% - 24px, 460px); margin: 32px auto; }
    .admin-login #wrapper-login #login-hold { padding: 24px; }
}

/* Dashboard: all category classes now share one neutral panel treatment. */
.dash-quick-links .ql-section .ql-block { background: var(--admin-surface); }
.dash-quick-links .ql-section .ql-block .ql-info { border-color: var(--admin-gray-200); }
.dash-quick-links .ql-section .ql-block:hover .ql-info { border-color: var(--admin-gray-300); }
.dash-quick-links .ql-section .ql-block .ql-title,
.dash-quick-links .ql-section.ql-green .ql-block .ql-title,
.dash-quick-links .ql-section.ql-red .ql-block .ql-title,
.dash-quick-links .ql-section.ql-orange .ql-block .ql-title { background: var(--admin-gray-800); color: #fff; }
.ql-orange a, .ql-red a, .ql-green a { color: var(--admin-accent); }
.dash-alerts .dash-notify, .dash-alerts .dash-software { border-color: var(--admin-gray-200); }
.dash-alerts .dash-notify h3, .dash-alerts .dash-software h3 { background: var(--admin-gray-800); }
.dash-alerts .dash-notify .da .da-title, .dash-alerts .dash-software .da .da-title { color: var(--admin-gray-700); }
.dash-alerts .da { background: var(--admin-surface); border-color: var(--admin-gray-200); }
.dash-alerts .da .da-title { background: var(--admin-gray-100); }
.dash-alerts .da a { color: var(--admin-accent); }

/* Cards, tables, lists, and tabs */
.brick .brick-hold { background: var(--admin-surface); border: 1px solid var(--admin-gray-200); border-radius: var(--admin-radius); box-shadow: 0 1px 2px rgba(32,37,43,.08); }
.brick .brick-title,
.brick .brick-hold.bh-green .brick-title, .brick .brick-hold.bh-orange .brick-title,
.brick .brick-hold.bh-blue .brick-title, .brick .brick-hold.bh-red .brick-title,
.brick .brick-hold.bh-purple .brick-title, .brick .brick-hold.bh-pink .brick-title,
.brick .brick-hold.bh-teal .brick-title, .brick .brick-hold.bh-yellow .brick-title { background: var(--admin-gray-800); }
.brick .brick-links a { color: var(--admin-gray-700); border-color: var(--admin-gray-100); }
.brick .brick-links a:hover { background: var(--admin-gray-100); }
.brick .brick-links a i,
.brick .brick-hold.bh-green .brick-links a i, .brick .brick-hold.bh-orange .brick-links a i,
.brick .brick-hold.bh-blue .brick-links a i, .brick .brick-hold.bh-red .brick-links a i,
.brick .brick-hold.bh-purple .brick-links a i, .brick .brick-hold.bh-pink .brick-links a i,
.brick .brick-hold.bh-teal .brick-links a i, .brick .brick-hold.bh-yellow .brick-links a i { color: var(--admin-accent); }
.listing table thead { background: var(--admin-gray-800); border-color: var(--admin-gray-800); }
.listing table tbody { background: var(--admin-surface); border-color: var(--admin-gray-200); }
.listing table tbody tr:hover, .ui-sortable tr:hover { background: #eef4f6; }
.listing table tbody td { border-color: var(--admin-gray-200); }
tbody#relatedCurrent { border-color: var(--admin-bg); }
.ui-sortable tr.ui-sortable-helper { background-color: #eef4f6; border-color: var(--admin-accent); }
#tabs a, .droptab .dt-trigger .dt-title { background: var(--admin-surface); border-color: var(--admin-gray-300); color: var(--admin-gray-600); border-radius: var(--admin-radius); }
#tabs a:hover, .droptab .dt-trigger .dt-title:hover { background: var(--admin-gray-100); color: var(--admin-gray-800); }
#tabs a.active { background: var(--admin-gray-800); border-color: var(--admin-gray-800); }
#tabs a.active:hover { background: var(--admin-gray-800); border-color: var(--admin-gray-800); color: #fff; }
.droptab .dt-options { border-color: var(--admin-gray-300); box-shadow: 0 2px 6px rgba(32,37,43,.12); }
.droptab .dt-options a { border-color: var(--admin-gray-200); color: var(--admin-gray-700); }
.droptab .dt-options a:hover { background: var(--admin-gray-100); }
.pagination li a, .pagination li.active span, .pagination li.disabled span { background: var(--admin-surface); border-color: var(--admin-gray-300); color: var(--admin-gray-700); border-radius: var(--admin-radius); }
.pagination li a:hover, .pagination li.active span { background: var(--admin-gray-800); border-color: var(--admin-gray-800); color: #fff; }
.pagination li.disabled span { color: var(--admin-gray-500); background: var(--admin-gray-100); }

/* Forms and validation surfaces */
.admin-form fieldset, .row .col .block { background: var(--admin-surface); border-color: var(--admin-gray-200); }
.admin-form label { color: var(--admin-gray-700); }
.admin-form .rel-list { border-color: var(--admin-gray-300); background: var(--admin-surface); }
.admin-form .rel-list .highlight { background: #dcecf2; color: var(--admin-gray-900); }
input[type=text], input[type=email], input[type=password], input[type=file], input[type=number], input[type=url], select, textarea {
    background-color: #fff; border-color: var(--admin-gray-300); border-radius: var(--admin-radius); color: var(--admin-gray-800); box-shadow: inset 0 1px 1px rgba(32,37,43,.03);
}
input[type=text]:hover, input[type=email]:hover, input[type=password]:hover, input[type=file]:hover, input[type=number]:hover, input[type=url]:hover, select:hover, textarea:hover { border-color: var(--admin-gray-500); }
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=file]:focus, input[type=number]:focus, input[type=url]:focus, select:focus, textarea:focus {
    border-color: var(--admin-accent); box-shadow: 0 0 0 2px rgba(53,111,138,.16); outline: none;
}
input[disabled], select[disabled], textarea[disabled] { background: var(--admin-gray-100); color: var(--admin-gray-500); cursor: not-allowed; }
.helper { color: var(--admin-gray-500); }
.error, .errors, .has-error input, .has-error select, .has-error textarea { border-color: var(--admin-danger); }
.success, .alert-success { background: #edf5ef; border-color: #bcd1c2; color: #31503e; }
.warning, .alert-warning { background: #fbf6ea; border-color: #dec993; color: #6f5224; }
.alert-danger, .alert-error, .danger { background: #fbefef; border-color: #dfb6b6; color: #743636; }
.alert-info, .info { background: #edf5f8; border-color: #bbd4df; color: #28566b; }
.msg { border-radius: var(--admin-radius); }
.msg.error { background: #fbefef; border-color: #dfb6b6; color: #743636; }
.msg.error .msg-head { background-color: var(--admin-danger); }
.msg.success { background: #edf5ef; border-color: #bcd1c2; color: #31503e; }
.msg.success .msg-head { background-color: var(--admin-success); }
.msg.alert { background: #fbf6ea; border-color: #dec993; color: #6f5224; }
.msg.alert .msg-head { background-color: var(--admin-warning); }
.msg.info { background: #edf5f8; border-color: #bbd4df; color: #28566b; }
.msg.info .msg-head { background-color: var(--admin-accent); }

/* Authenticator enrollment is intentionally compact: a TOTP is always six digits. */
.totp-confirm-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.totp-confirm-form label { flex-basis: 100%; }
.totp-confirm-form .totp-code-input { width: 9ch; min-width: 9ch; box-sizing: border-box; }
.totp-confirm-form .btn { margin: 0; white-space: nowrap; }
.totp-recovery-continue { display: inline-block; width: auto; }

/* Admin Settings logo previews use the same dark surface as the login header. */
.admin-logo-preview {
    align-items: center;
    background: var(--admin-gray-800);
    border: 1px solid var(--admin-gray-700);
    border-radius: var(--admin-radius);
    display: flex;
    height: 92px;
    justify-content: center;
    margin: 0 0 12px;
    padding: 10px 16px;
}
.admin-logo-preview img { display: block; max-height: 70px; max-width: 100%; object-fit: contain; }

/* Existing CMS/ECM switch remains distinct by label, not by a saturated theme color. */
#admin-toggle { border-color: var(--admin-gray-500); background: var(--admin-gray-700); }
#admin-toggle.cms, #admin-toggle.ecm { background: var(--admin-gray-700); }
#admin-toggle .switch { border-color: var(--admin-gray-300); }

@media screen and (max-width: 768px) {
    #main { box-shadow: 0 1px 3px rgba(32,37,43,.12); }
}