/*!
 * H@CK M1RR0R CMS V2 — hm-dark front theme
 * File: public/themes/hm-dark/assets/css/theme.css
 * MIT (c) 2025 Ghulam <admin@hack-mirror.com>
 */

/* --------------------------------------------------------------------------
   CSS variables / base palette (dark)
   -------------------------------------------------------------------------- */

:root,
[data-bs-theme="dark"] {
    --hm-body-bg: #05060a;
    --hm-body-bg-secondary: #0b0e16;
    --hm-body-bg-elevated: #121625;
    --hm-body-bg-hover: #181d30;

    --hm-border-subtle: #272b3b;
    --hm-border-strong: #363c54;

    --hm-text-main: #f3f5ff;
    --hm-text-muted: #9ca3c7;
    --hm-text-soft: #6b7280;

    --hm-primary: #4f46e5;
    --hm-primary-soft: rgba(79, 70, 229, 0.16);
    --hm-primary-soft-strong: rgba(79, 70, 229, 0.28);

    --hm-accent: #ec4899;
    --hm-accent-soft: rgba(236, 72, 153, 0.18);

    --hm-danger-soft: rgba(248, 113, 113, 0.18);
    --hm-warning-soft: rgba(234, 179, 8, 0.16);
    --hm-success-soft: rgba(34, 197, 94, 0.18);
    --hm-info-soft: rgba(56, 189, 248, 0.18);

    --hm-radius-sm: .25rem;
    --hm-radius-md: .5rem;
    --hm-radius-lg: .75rem;

    --hm-shadow-soft: 0 14px 40px rgba(15, 23, 42, 0.65);
    --hm-shadow-subtle: 0 8px 24px rgba(15, 23, 42, 0.55);

    --hm-nav-height: 3.5rem;
}

/* --------------------------------------------------------------------------
   Global
   -------------------------------------------------------------------------- */

html,
body {
    height: 100%;
}

body {
    background: radial-gradient(circle at top left, #111827 0, #020617 45%, #020617 100%);
    color: var(--hm-text-main);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    color: #a5b4fc;
    text-decoration: none;
}

a:hover {
    color: #c7d2fe;
    text-decoration: underline;
}

code,
pre,
kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Wrapper to push footer to bottom */
.hm-page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.hm-main {
    flex: 1 0 auto;
}

.hm-footer {
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Cards / surfaces
   -------------------------------------------------------------------------- */

.hm-card {
    background: linear-gradient(145deg, var(--hm-body-bg-elevated), var(--hm-body-bg-secondary));
    border-radius: var(--hm-radius-md);
    border: 1px solid rgba(148, 163, 184, 0.07);
    box-shadow: var(--hm-shadow-subtle);
}

/* lighter, used where .border classes are added from PHP */
.hm-card.border {
    box-shadow: var(--hm-shadow-soft);
}

/* compact helper */
.hm-card-compact {
    padding: .75rem 1rem;
}

/* --------------------------------------------------------------------------
   Navbar / header
   -------------------------------------------------------------------------- */

.hm-header {
    backdrop-filter: blur(14px);
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.94), rgba(15, 23, 42, 0.82));
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.hm-header .navbar-brand {
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .85rem;
}

.hm-header .navbar-nav .nav-link {
    font-size: .875rem;
    font-weight: 500;
    color: var(--hm-text-muted);
    padding-inline: .75rem;
    border-radius: 999px;
}

.hm-header .navbar-nav .nav-link:hover {
    color: var(--hm-text-main);
    background-color: rgba(148, 163, 184, 0.12);
}

.hm-header .navbar-nav .nav-link.active {
    color: #e5e7ff;
    background: var(--hm-primary-soft);
    box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.35);
}

/* right-side auth links */
.hm-nav-auth a {
    font-size: .85rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.hm-footer {
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    background: radial-gradient(circle at bottom, #020617 0, #020617 40%, #000000 100%);
    padding: 1rem 0;
    font-size: .8rem;
    color: var(--hm-text-soft);
}

.hm-footer a {
    color: var(--hm-text-muted);
}

.hm-footer a:hover {
    color: var(--hm-text-main);
}

/* --------------------------------------------------------------------------
   Hero / top section (homepage)
   -------------------------------------------------------------------------- */

.hm-hero {
    padding: 1.75rem 0 1.25rem 0;
}

.hm-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .18rem .65rem;
    border-radius: 999px;
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #e0f2fe;
}

.hm-hero-kicker span.badge {
    font-size: .65rem;
    border-radius: 999px;
}

.hm-hero-title {
    font-size: clamp(2.1rem, 2.7vw, 2.6rem);
    font-weight: 700;
    letter-spacing: .02em;
}

.hm-hero-subtitle {
    font-size: .92rem;
    color: var(--hm-text-muted);
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.table {
    --bs-table-color: var(--hm-text-main);
    --bs-table-bg: transparent;
    --bs-table-border-color: rgba(148, 163, 184, 0.15);
    --bs-table-striped-bg: rgba(15, 23, 42, 0.85);
    --bs-table-hover-bg: rgba(30, 64, 175, 0.18);
}

.table-sm td,
.table-sm th {
    padding-block: .4rem;
}

.table thead tr {
    background: radial-gradient(circle at top, rgba(15, 23, 42, 0.8) 0, rgba(15, 23, 42, 0.3) 100%);
}

/* truncate helpers used in PHP templates */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Risk legend (H / M / R / L)
   -------------------------------------------------------------------------- */

.hm-risk-legend {
    font-size: .75rem;
    color: var(--hm-text-muted);
}

.hm-risk-legend-list {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.hm-risk-pill {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .12rem .55rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: rgba(15, 23, 42, 0.9);
}

.hm-risk-pill span.hm-risk-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
}

/* color hints for individual risk letters */
.hm-risk-pill--h .hm-risk-badge {
    background: rgba(59, 130, 246, 0.18);
    color: #bfdbfe;
}

.hm-risk-pill--m .hm-risk-badge {
    background: rgba(45, 212, 191, 0.18);
    color: #a5f3fc;
}

.hm-risk-pill--r .hm-risk-badge {
    background: rgba(234, 179, 8, 0.18);
    color: #facc15;
}

.hm-risk-pill--l .hm-risk-badge {
    background: rgba(248, 113, 113, 0.22);
    color: #fecaca;
}

/* --------------------------------------------------------------------------
   Flags (partials/flag.php)
   -------------------------------------------------------------------------- */

.hm-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.9);
}

.hm-flag span {
    line-height: 1;
}

.hm-flag-xs {
    width: 1.05rem;
    height: 1.05rem;
    font-size: .7rem;
}

.hm-flag-sm {
    width: 1.25rem;
    height: 1.25rem;
    font-size: .84rem;
}

/* --------------------------------------------------------------------------
   Flash messages (partials/flash-messages.php)
   -------------------------------------------------------------------------- */

.hm-flash-container {
    position: fixed;
    top: .85rem;
    right: .85rem;
    z-index: 1080;
    max-width: min(22rem, 90vw);
}

.hm-flash {
    border-radius: var(--hm-radius-md);
    padding: .55rem .65rem;
    font-size: .8rem;
    border: 1px solid transparent;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: .35rem;
    background: rgba(15, 23, 42, 0.95);
    box-shadow: var(--hm-shadow-subtle);
}

.hm-flash-icon {
    font-size: 1rem;
    line-height: 1;
    margin-top: .1rem;
}

.hm-flash-close {
    margin-left: auto;
    margin-top: -.15rem;
    border: none;
    background: transparent;
    color: var(--hm-text-soft);
    cursor: pointer;
}

/* variants */
.hm-flash-success {
    border-color: rgba(34, 197, 94, 0.55);
    background: var(--hm-success-soft);
}

.hm-flash-danger {
    border-color: rgba(248, 113, 113, 0.7);
    background: var(--hm-danger-soft);
}

.hm-flash-warning {
    border-color: rgba(234, 179, 8, 0.7);
    background: var(--hm-warning-soft);
}

.hm-flash-info {
    border-color: rgba(56, 189, 248, 0.7);
    background: var(--hm-info-soft);
}

/* --------------------------------------------------------------------------
   Forms / inputs
   -------------------------------------------------------------------------- */

.hm-admin-form .form-control,
.hm-admin-form .form-select {
    background-color: rgba(15, 23, 42, 0.95);
    border-color: rgba(148, 163, 184, 0.32);
    color: var(--hm-text-main);
    border-radius: .4rem;
    font-size: .82rem;
}

.hm-admin-form .form-control:focus,
.hm-admin-form .form-select:focus {
    border-color: rgba(129, 140, 248, 0.9);
    box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.7);
    background-color: rgba(15, 23, 42, 0.98);
    color: #e5e7eb;
}

.hm-admin-form .form-control::placeholder {
    color: rgba(148, 163, 184, 0.6);
}

/* small checkboxes */
.hm-admin-form .form-check-input {
    width: .9rem;
    height: .9rem;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn-primary {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    border-color: #4f46e5;
    box-shadow: 0 10px 22px rgba(79, 70, 229, 0.45);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #4338ca, #4f46e5);
    border-color: #4338ca;
    box-shadow: 0 14px 30px rgba(79, 70, 229, 0.6);
}

.btn-outline-secondary {
    border-color: rgba(148, 163, 184, 0.6);
    color: var(--hm-text-muted);
}

.btn-outline-secondary:hover {
    background: rgba(148, 163, 184, 0.16);
    color: var(--hm-text-main);
}

/* icon-only buttons in tables */
.btn-icon-sm {
    padding: .2rem .4rem;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.pagination {
    --bs-pagination-bg: rgba(15, 23, 42, 0.9);
    --bs-pagination-border-color: rgba(148, 163, 184, 0.4);
    --bs-pagination-hover-bg: rgba(79, 70, 229, 0.18);
    --bs-pagination-hover-border-color: rgba(129, 140, 248, 0.75);
    --bs-pagination-color: var(--hm-text-muted);
    --bs-pagination-hover-color: #e5e7ff;
    --bs-pagination-focus-box-shadow: 0 0 0 .12rem rgba(129, 140, 248, 0.65);
    --bs-pagination-active-bg: #4f46e5;
    --bs-pagination-active-border-color: #4f46e5;
    --bs-pagination-active-color: #f9fafb;
}

/* --------------------------------------------------------------------------
   Utility helpers
   -------------------------------------------------------------------------- */

.hm-soft-border {
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
}

.hm-soft-bg {
    background: rgba(15, 23, 42, 0.9) !important;
}

.hm-scroll-y {
    max-height: 18rem;
    overflow-y: auto;
}

/* subtle gradient divider */
.hm-divider {
    height: 1px;
    width: 100%;
    background: linear-gradient(
        90deg,
        transparent 0,
        rgba(148, 163, 184, 0.3) 20%,
        rgba(148, 163, 184, 0.3) 80%,
        transparent 100%
    );
}

/* --------------------------------------------------------------------------
   Auth layouts
   -------------------------------------------------------------------------- */

.hm-auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: radial-gradient(circle at top, #020617 0, #020617 45%, #000000 100%);
}

.hm-auth-panel {
    max-width: 28rem;
    width: 100%;
}

/* --------------------------------------------------------------------------
   Responsive tweaks
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .hm-hero {
        padding-top: 1.2rem;
    }

    .hm-header .navbar-nav .nav-link {
        margin-bottom: .25rem;
    }

    .hm-flash-container {
        left: .5rem;
        right: .5rem;
    }
}