/*
 * IndustryConnect staff portal brand layer (admin/brand-ux).
 * Loaded after the Metronic theme on every staff page, the sign-in pages and the error pages.
 * Plain CSS on purpose (not bundled, no build step): it only overrides theme variables and a few classes.
 */

/* ---------- brand colors ---------- */
:root,
[data-theme=light] {
    --ic-red: #ED1C24;
    --ic-red-dark: #C8161D;
    --ic-red-soft: #FDECEC;
    --ic-ink: #1E1E24;
    --ic-ink-2: #3F4254;
    --ic-muted: #5E6278;
    --ic-line: #E4E6EF;
    --ic-surface: #FFFFFF;
    --ic-page: #F5F6F8;

    --kt-primary: #ED1C24;
    --kt-primary-active: #C8161D;
    --kt-primary-light: #FDECEC;
    --kt-primary-inverse: #FFFFFF;
    --kt-primary-rgb: 237, 28, 36;
    --bs-primary: #ED1C24;
    --bs-primary-rgb: 237, 28, 36;
    --kt-link-color: #C8161D;
    --kt-link-hover-color: #9E1117;
    --bs-link-color: #C8161D;
    --bs-link-hover-color: #9E1117;
    --kt-app-sidebar-light-menu-link-bg-color-active: #FDECEC;
    --kt-text-muted: #5E6278;
}

[data-theme=dark] {
    --ic-red: #F0383F;
    --ic-red-dark: #ED1C24;
    --ic-red-soft: #3A1B1F;
    --ic-ink: #F1F1F4;
    --ic-ink-2: #CDCDDE;
    --ic-muted: #A1A5B7;
    --ic-line: #2B2B40;
    --ic-surface: #1E1E2D;
    --ic-page: #151521;

    --kt-primary: #ED1C24;
    --kt-primary-active: #C8161D;
    --kt-primary-light: #3A1B1F;
    --kt-primary-inverse: #FFFFFF;
    --kt-primary-rgb: 237, 28, 36;
    --bs-primary: #ED1C24;
    --bs-primary-rgb: 237, 28, 36;
    --kt-link-color: #F0383F;
    --bs-link-color: #F0383F;
}

/* ---------- typography: readable sizes, dark text ---------- */
body {
    font-size: 14px;
    color: var(--ic-ink-2);
}

.text-muted {
    color: var(--ic-muted) !important;
}

.fs-7,
.small,
small {
    font-size: 0.925rem !important;
}

.fs-8 {
    font-size: 0.875rem !important;
}

a {
    color: var(--kt-link-color);
}

.link-primary,
.text-primary {
    color: var(--ic-red-dark) !important;
}

.btn.btn-light-primary {
    color: var(--ic-red-dark);
    background-color: var(--ic-red-soft);
}

.btn.btn-light-primary:hover:not(.btn-active),
.btn.btn-light-primary:focus:not(.btn-active) {
    color: #FFFFFF;
    background-color: var(--ic-red) !important;
}

.btn.btn-active-light-primary:hover:not(.btn-active),
.btn.btn-active-light-primary.active {
    color: var(--ic-red-dark) !important;
    background-color: var(--ic-red-soft) !important;
}

.form-check-input:checked {
    background-color: var(--ic-red);
    border-color: var(--ic-red);
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(237, 28, 36, .45);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--ic-red);
    color: #FFFFFF;
}

.nav-pills .nav-link.active .badge {
    background-color: #FFFFFF !important;
    color: var(--ic-red-dark) !important;
}

.page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--ic-red) !important;
    border-color: var(--ic-red) !important;
    color: #FFFFFF !important;
}

/* ---------- sidebar and header ---------- */
.app-sidebar-logo {
    min-height: 76px;
}

.app-sidebar-logo img.app-sidebar-logo-default {
    height: 46px !important;
    width: auto;
}

.app-sidebar-logo img.app-sidebar-logo-minimize {
    height: 34px !important;
    width: 34px;
}

[data-theme=dark] .app-sidebar-logo img.app-sidebar-logo-default,
[data-kt-app-layout=dark-sidebar] .app-sidebar-logo img.app-sidebar-logo-default,
[data-theme=dark] .ic-logo-chip,
[data-theme=dark] .ic-account-logo img {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 3px 8px;
}

.app-sidebar .menu .menu-item .menu-link .menu-title {
    font-size: 14px;
    font-weight: 500;
}

[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link.active {
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--ic-red);
}

[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-title {
    color: var(--ic-ink-2);
}

[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item.here > .menu-link .menu-title,
[data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item.here > .menu-link .menu-icon i {
    color: var(--ic-red-dark);
}

.app-header .ic-help-link {
    font-weight: 600;
    color: var(--ic-ink-2);
}

.app-header .ic-help-link:hover {
    color: var(--ic-red-dark);
}

/* subheader (page title bar) */
#kt_app_toolbar .page-heading,
#kt_app_toolbar h1 {
    color: var(--ic-ink) !important;
    font-size: 1.45rem !important;
}

#kt_app_toolbar .page-desc,
#kt_app_toolbar .text-muted {
    font-size: 0.95rem !important;
}

/* ---------- cards and tables ---------- */
.card {
    border: 1px solid var(--ic-line);
    box-shadow: none;
}

table.dataTable thead th,
.table thead th {
    color: var(--ic-ink) !important;
    font-weight: 600;
    font-size: 0.925rem;
    text-transform: none;
}

table.dataTable tbody td,
.table tbody td {
    color: var(--ic-ink-2);
    vertical-align: middle;
}

/* ---------- status pills: one clear pill per row ---------- */
.ic-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    border: 1px solid transparent;
}

.ic-pill::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.ic-pill-green { color: #0E7A3E; background: #E5F6EC; border-color: #BFE6CF; }
.ic-pill-amber { color: #8A5300; background: #FFF4DE; border-color: #FFDFA3; }
.ic-pill-red { color: #B3141A; background: #FDECEC; border-color: #F7C3C5; }
.ic-pill-gray { color: #4B5060; background: #F1F2F5; border-color: #DEE0E7; }
.ic-pill-blue { color: #155A9C; background: #E8F2FC; border-color: #C3DCF5; }

[data-theme=dark] .ic-pill-green { color: #6EE7A0; background: #10301F; border-color: #1E5235; }
[data-theme=dark] .ic-pill-amber { color: #FFC66B; background: #36290F; border-color: #5A431A; }
[data-theme=dark] .ic-pill-red { color: #FF8A8F; background: #3A1B1F; border-color: #5C262C; }
[data-theme=dark] .ic-pill-gray { color: #CDCDDE; background: #2B2B40; border-color: #3A3A55; }
[data-theme=dark] .ic-pill-blue { color: #8CC4FF; background: #142A42; border-color: #234466; }

/* Metronic light badges used for statuses elsewhere: make them readable */
.badge.badge-light-success,
.badge.badge-light-warning,
.badge.badge-light-danger,
.badge.badge-light-secondary,
.badge.badge-light-info,
.badge.badge-light-primary {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4em 0.75em;
}

.badge.badge-light-warning { color: #8A5300; background-color: #FFF4DE; }
.badge.badge-light-success { color: #0E7A3E; background-color: #E5F6EC; }
.badge.badge-light-danger { color: #B3141A; background-color: #FDECEC; }
.badge.badge-light-primary { color: #B3141A; background-color: #FDECEC; }

/* ---------- page intro (Views/Shared/_PageIntro.cshtml) ---------- */
.ic-page-intro {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--ic-surface);
    border: 1px solid var(--ic-line);
    border-left: 4px solid var(--ic-red);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.ic-page-intro .ic-page-intro-icon {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--ic-red-soft);
    color: var(--ic-red-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.ic-page-intro .ic-page-intro-title {
    font-weight: 700;
    color: var(--ic-ink);
    font-size: 1.05rem;
    margin-bottom: 2px;
}

.ic-page-intro .ic-page-intro-text {
    color: var(--ic-ink-2);
    font-size: 0.975rem;
    margin: 0;
}

.ic-page-intro .ic-page-intro-tip {
    color: var(--ic-muted);
    font-size: 0.925rem;
    margin: 6px 0 0;
}

.ic-page-intro .ic-page-intro-actions {
    margin-left: auto;
    flex: none;
    display: flex;
    gap: 8px;
    align-items: center;
}

@media (max-width: 767.98px) {
    .ic-page-intro { flex-wrap: wrap; }
    .ic-page-intro .ic-page-intro-actions { margin-left: 48px; }
}

/* ---------- empty states ---------- */
.ic-empty {
    text-align: center;
    padding: 28px 12px;
    color: var(--ic-muted);
}

.ic-empty .ic-empty-title {
    color: var(--ic-ink);
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 4px;
}

table.dataTable td.dataTables_empty {
    padding: 28px 12px !important;
    color: var(--ic-muted);
    font-size: 1rem;
}

/* ---------- Home ("Start here") ---------- */
.ic-greeting h1 {
    color: var(--ic-ink);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.ic-greeting .ic-scope {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ic-ink-2);
    font-size: 1rem;
}

.ic-task-card {
    height: 100%;
    background: var(--ic-surface);
    border: 1px solid var(--ic-line);
    border-radius: 12px;
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
}

.ic-task-card.is-waiting {
    border-top: 4px solid var(--ic-red);
}

.ic-task-card.is-clear {
    border-top: 4px solid #2BB673;
}

.ic-task-card .ic-task-label {
    color: var(--ic-ink);
    font-weight: 700;
    font-size: 1.05rem;
}

.ic-task-card .ic-task-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--ic-ink);
    line-height: 1.1;
    margin: 8px 0 4px;
}

.ic-task-card .ic-task-number.is-money {
    font-size: 1.6rem;
}

.ic-task-card .ic-task-text {
    color: var(--ic-ink-2);
    font-size: 0.95rem;
    flex: 1 1 auto;
    margin-bottom: 12px;
}

.ic-task-card .ic-task-clear {
    color: #0E7A3E;
    font-weight: 600;
}

.ic-tile {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    height: 100%;
    padding: 14px;
    border: 1px solid var(--ic-line);
    border-radius: 10px;
    background: var(--ic-surface);
    color: var(--ic-ink-2);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ic-tile:hover {
    border-color: var(--ic-red);
    box-shadow: 0 2px 10px rgba(237, 28, 36, .08);
    color: var(--ic-ink-2);
}

.ic-tile .ic-tile-icon {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--ic-red-soft);
    color: var(--ic-red-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.ic-tile .ic-tile-title {
    color: var(--ic-ink);
    font-weight: 700;
    font-size: 1rem;
}

.ic-tile .ic-tile-text {
    font-size: 0.925rem;
    color: var(--ic-muted);
}

.ic-flow {
    counter-reset: icflow;
}

.ic-flow-step {
    position: relative;
    height: 100%;
    padding: 16px 16px 14px 60px;
    border: 1px solid var(--ic-line);
    border-radius: 10px;
    background: var(--ic-surface);
}

.ic-flow-step::before {
    counter-increment: icflow;
    content: counter(icflow);
    position: absolute;
    left: 16px;
    top: 16px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ic-red);
    color: #FFFFFF;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ic-flow-step .ic-flow-title {
    color: var(--ic-ink);
    font-weight: 700;
    font-size: 1rem;
}

.ic-flow-step p {
    color: var(--ic-ink-2);
    font-size: 0.925rem;
    margin: 4px 0 8px;
}

/* ---------- Help page ---------- */
.ic-guide {
    scroll-margin-top: 90px;
}

.ic-guide ol {
    padding-left: 1.3rem;
    margin-bottom: 12px;
}

.ic-guide ol li {
    margin-bottom: 6px;
    color: var(--ic-ink-2);
    font-size: 0.975rem;
}

.ic-guide h3 {
    color: var(--ic-ink);
    font-size: 1.15rem;
    font-weight: 700;
}

.ic-guide-index a {
    display: block;
    padding: 6px 0;
    font-weight: 500;
}

/* ---------- Ad review queue ---------- */
.ic-thumb {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    border: 1px solid var(--ic-line);
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ic-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ic-thumb-badge {
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: .04em;
    color: #B3141A;
    background: #FDECEC;
    border-radius: 6px;
    padding: 4px 8px;
}

.ic-thumb-none {
    color: var(--ic-muted);
    font-size: 0.85rem;
    text-align: center;
    line-height: 1.2;
}

.ic-row-actions {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.ic-row-actions .btn {
    min-width: 84px;
}

.ic-row-sub {
    color: var(--ic-muted);
    font-size: 0.925rem;
    margin-top: 2px;
}

.ic-row-note {
    color: #B3141A;
    font-size: 0.925rem;
    margin-top: 4px;
}

/* ---------- sign-in pages ---------- */
.ic-account-page {
    background: var(--ic-page);
    min-height: 100vh;
}

.ic-account-logo img {
    height: 88px;
    width: auto;
}

.ic-account-card {
    background: var(--ic-surface);
    border: 1px solid var(--ic-line);
    border-top: 4px solid var(--ic-red);
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(30, 30, 36, .06);
}

.ic-account-card h1 {
    color: var(--ic-ink);
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.ic-account-card .ic-account-sub {
    color: var(--ic-muted);
    font-size: 0.975rem;
}

.ic-region-box {
    background: var(--ic-page);
    border: 1px solid var(--ic-line);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.95rem;
    color: var(--ic-ink-2);
}

.ic-account-footer {
    color: var(--ic-muted);
    font-size: 0.875rem;
}

/* ---------- error pages ---------- */
.ic-error-page {
    background: var(--ic-page);
    min-height: 100vh;
}

.ic-error-page .ic-error-card {
    max-width: 640px;
    width: 100%;
    background: var(--ic-surface);
    border: 1px solid var(--ic-line);
    border-top: 4px solid var(--ic-red);
    border-radius: 12px;
    padding: 32px;
}

.ic-error-page .error-title {
    color: var(--ic-red) !important;
    font-size: 3rem !important;
}

.ic-error-page .display-4 {
    font-size: 1.5rem !important;
    color: var(--ic-ink);
}