/*
 * KEI SaaS Dashboard - Stylesheet
 * Scoped entirely to .kei-dashboard - zero theme conflicts.
 * Designed to complement the Hostinger AI theme dark aesthetic
 * used on kei.c3er.com (cyberpunk / streetwear / digital drops).
 *
 * Colour tokens - all derived from CSS custom properties so a
 * child-theme can override any single token without editing this file:
 *
 *   --kei-bg            Page / sidebar background
 *   --kei-surface       Card / panel surface
 *   --kei-surface-2     Hover / elevated surface
 *   --kei-border        Subtle border / divider
 *   --kei-text          Primary text
 *   --kei-text-muted    Secondary / label text
 *   --kei-accent        Brand accent (neon cyan default)
 *   --kei-accent-rgb    RGB triplet for alpha usage
 *   --kei-danger        Error / cancelled status
 *   --kei-success       Completed / active status
 *   --kei-info          Processing status
 */

/* ================================================================
   CSS CUSTOM PROPERTIES
================================================================ */
.kei-dashboard {
    --kei-bg:          #0d0d0f;
    --kei-surface:     #141418;
    --kei-surface-2:   #1c1c22;
    --kei-border:      rgba(255,255,255,0.08);
    --kei-text:        #e8e8f0;
    --kei-text-muted:  #7a7a8e;
    --kei-accent:      #00e5c8;
    --kei-accent-rgb:  0,229,200;
    --kei-danger:      #ff4d6d;
    --kei-success:     #00e5a0;
    --kei-info:        #4d9fff;
    --kei-radius:      10px;
    --kei-sidebar-w:   230px;
    --kei-transition:  0.18s ease;
    --kei-font:        inherit; /* inherits Hostinger AI theme font */
}

/* ================================================================
   RESET (scoped)
================================================================ */
.kei-dashboard *,
.kei-dashboard *::before,
.kei-dashboard *::after {
    box-sizing: border-box;
}

.kei-dashboard {
    display: flex;
    min-height: 100vh;
    background: var(--kei-bg);
    color: var(--kei-text);
    font-family: var(--kei-font);
    font-size: 14px;
    line-height: 1.6;
}

/* ================================================================
   SIDEBAR
================================================================ */
.kei-sidebar {
    width: var(--kei-sidebar-w);
    min-width: var(--kei-sidebar-w);
    background: var(--kei-surface);
    border-right: 1px solid var(--kei-border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 100;
    transition: transform var(--kei-transition);
}

/* Logo */
.kei-sidebar__logo {
    padding: 24px 20px 20px;
    border-bottom: 1px solid var(--kei-border);
}
.kei-sidebar__logo a {
    text-decoration: none;
}
.kei-logo-img {
    max-height: 36px;
    max-width: 160px;
    width: auto;
    object-fit: contain;
    display: block;
}
.kei-logo-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--kei-text);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Nav */
.kei-sidebar__nav {
    flex: 1;
    padding: 16px 0;
}
.kei-sidebar__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.kei-nav__item {
    margin: 2px 10px;
    border-radius: var(--kei-radius);
    overflow: hidden;
}
.kei-nav__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    color: var(--kei-text-muted);
    text-decoration: none;
    border-radius: var(--kei-radius);
    transition: background var(--kei-transition), color var(--kei-transition);
    font-size: 13.5px;
    font-weight: 500;
}
.kei-nav__link:hover {
    background: var(--kei-surface-2);
    color: var(--kei-text);
}
.kei-nav__item--active .kei-nav__link,
.kei-nav__link.is-active {
    background: rgba(var(--kei-accent-rgb), 0.12);
    color: var(--kei-accent);
}
.kei-nav__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kei-nav__icon svg {
    width: 18px;
    height: 18px;
}
.kei-nav__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bottom user block */
.kei-sidebar__user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-top: 1px solid var(--kei-border);
}
.kei-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--kei-border);
    flex-shrink: 0;
}
.kei-user-meta {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.kei-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--kei-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kei-user-email {
    font-size: 11px;
    color: var(--kei-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile close button (hidden on desktop) */
.kei-sidebar__close {
    display: none;
}

/* ================================================================
   MAIN CONTENT
================================================================ */
.kei-main {
    flex: 1;
    min-width: 0;
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* ================================================================
   TOP HEADER BAR
================================================================ */
.kei-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.kei-topbar__title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 2px;
    color: var(--kei-text);
    line-height: 1.3;
}
.kei-topbar__title span {
    color: var(--kei-accent);
}
.kei-topbar__sub {
    margin: 0;
    font-size: 12px;
    color: var(--kei-text-muted);
}
.kei-topbar__right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.kei-topbar__notif {
    background: var(--kei-surface-2);
    border: 1px solid var(--kei-border);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--kei-text-muted);
    transition: color var(--kei-transition), border-color var(--kei-transition);
}
.kei-topbar__notif:hover {
    color: var(--kei-text);
    border-color: var(--kei-accent);
}
.kei-topbar__notif svg {
    width: 18px;
    height: 18px;
}
.kei-topbar__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--kei-accent);
}

/* ================================================================
   BADGES
================================================================ */
.kei-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.kei-badge--active {
    background: rgba(0,229,160,0.15);
    color: var(--kei-success);
    border: 1px solid rgba(0,229,160,0.25);
}
.kei-badge--success {
    background: rgba(0,229,160,0.12);
    color: var(--kei-success);
    border: 1px solid rgba(0,229,160,0.2);
}
.kei-badge--info {
    background: rgba(77,159,255,0.12);
    color: var(--kei-info);
    border: 1px solid rgba(77,159,255,0.2);
}
.kei-badge--danger {
    background: rgba(255,77,109,0.12);
    color: var(--kei-danger);
    border: 1px solid rgba(255,77,109,0.2);
}
.kei-badge--neutral {
    background: rgba(255,255,255,0.06);
    color: var(--kei-text-muted);
    border: 1px solid var(--kei-border);
}

/* ================================================================
   STATUS DOT
================================================================ */
.kei-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 6px;
}
.kei-status-dot--green { background: var(--kei-success); box-shadow: 0 0 6px var(--kei-success); }

/* ================================================================
   SECTION WRAPPER
================================================================ */
.kei-section {
    /* intentionally minimal - layout handled per-section */
}
.kei-section__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--kei-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 14px;
}

/* ================================================================
   SUMMARY CARDS GRID
================================================================ */
.kei-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 1100px) {
    .kei-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

.kei-card {
    background: var(--kei-surface);
    border: 1px solid var(--kei-border);
    border-radius: var(--kei-radius);
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: border-color var(--kei-transition), transform var(--kei-transition);
}
.kei-card:hover {
    border-color: rgba(var(--kei-accent-rgb), 0.3);
    transform: translateY(-2px);
}
.kei-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.kei-card__icon svg { width: 20px; height: 20px; }

.kei-card__icon--plan      { background: rgba(var(--kei-accent-rgb), 0.12); color: var(--kei-accent); }
.kei-card__icon--billing   { background: rgba(77,159,255,0.12);             color: var(--kei-info); }
.kei-card__icon--downloads { background: rgba(0,229,160,0.12);              color: var(--kei-success); }
.kei-card__icon--support   { background: rgba(255,77,109,0.12);             color: var(--kei-danger); }

.kei-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.kei-card__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--kei-text-muted);
    font-weight: 600;
}
.kei-card__value {
    font-size: 18px;
    font-weight: 700;
    color: var(--kei-text);
    line-height: 1.2;
}

/* ================================================================
   QUICK ACTIONS
================================================================ */
.kei-actions-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

@media (max-width: 1100px) {
    .kei-actions-row { grid-template-columns: repeat(2, 1fr); }
}

.kei-action-card {
    background: var(--kei-surface);
    border: 1px solid var(--kei-border);
    border-radius: var(--kei-radius);
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--kei-text-muted);
    transition: background var(--kei-transition), border-color var(--kei-transition), color var(--kei-transition), transform var(--kei-transition);
    cursor: pointer;
    text-align: center;
}
.kei-action-card:hover {
    background: var(--kei-surface-2);
    border-color: rgba(var(--kei-accent-rgb), 0.4);
    color: var(--kei-accent);
    transform: translateY(-2px);
}
.kei-action-card__icon {
    width: 44px;
    height: 44px;
    background: var(--kei-surface-2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--kei-transition);
}
.kei-action-card:hover .kei-action-card__icon {
    background: rgba(var(--kei-accent-rgb), 0.12);
}
.kei-action-card__icon svg { width: 20px; height: 20px; }
.kei-action-card__label {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
}

/* ================================================================
   ACTIVITY FEED
================================================================ */
.kei-activity__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--kei-border);
    border-radius: var(--kei-radius);
    overflow: hidden;
}
.kei-activity__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--kei-border);
    background: var(--kei-surface);
    transition: background var(--kei-transition);
}
.kei-activity__item:last-child { border-bottom: none; }
.kei-activity__item:nth-child(even) { background: var(--kei-surface-2); }
.kei-activity__item:hover { background: rgba(var(--kei-accent-rgb), 0.04); }

.kei-activity__icon {
    width: 34px;
    height: 34px;
    background: var(--kei-surface-2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--kei-text-muted);
}
.kei-activity__icon svg { width: 16px; height: 16px; }

.kei-activity__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.kei-activity__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--kei-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kei-activity__title:hover { color: var(--kei-accent); }
.kei-activity__meta {
    font-size: 11px;
    color: var(--kei-text-muted);
}

/* Empty state */
.kei-empty-state {
    color: var(--kei-text-muted);
    font-size: 13px;
    padding: 20px 0 10px;
}

/* ================================================================
   WC CONTENT AREA (Orders, Downloads, etc.)
================================================================ */
.kei-wc-content {
    background: var(--kei-surface);
    border: 1px solid var(--kei-border);
    border-radius: var(--kei-radius);
    padding: 24px;
}
.kei-wc-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.kei-wc-content table th {
    text-align: left;
    padding: 10px 12px;
    background: var(--kei-surface-2);
    color: var(--kei-text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--kei-border);
}
.kei-wc-content table td {
    padding: 12px;
    border-bottom: 1px solid var(--kei-border);
    color: var(--kei-text);
    vertical-align: middle;
}
.kei-wc-content table tr:last-child td { border-bottom: none; }
.kei-wc-content table tr:hover td { background: rgba(var(--kei-accent-rgb), 0.03); }

/* ================================================================
   BUTTONS
================================================================ */
.kei-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background var(--kei-transition), transform var(--kei-transition);
}
.kei-btn-primary {
    background: var(--kei-accent);
    color: #000;
}
.kei-btn-primary:hover {
    background: #00ffd9;
    transform: translateY(-1px);
}

/* ================================================================
   MOBILE HAMBURGER
================================================================ */
.kei-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    align-self: flex-start;
}
.kei-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--kei-text);
    border-radius: 2px;
    transition: background var(--kei-transition);
}
.kei-hamburger:hover span { background: var(--kei-accent); }

/* ================================================================
   SECTION INNER (support page etc.)
================================================================ */
.kei-section-inner {
    background: var(--kei-surface);
    border: 1px solid var(--kei-border);
    border-radius: var(--kei-radius);
    padding: 28px;
}
.kei-section-inner h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--kei-text);
}
.kei-section-inner p {
    color: var(--kei-text-muted);
    font-size: 14px;
    margin: 0 0 18px;
}

/* ================================================================
   RESPONSIVE - TABLET & MOBILE
================================================================ */
@media (max-width: 768px) {
    .kei-dashboard {
        flex-direction: column;
    }

    .kei-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        transform: translateX(-100%);
        z-index: 9999;
        box-shadow: 4px 0 30px rgba(0,0,0,0.5);
        width: 260px;
    }
    .kei-sidebar.is-open {
        transform: translateX(0);
    }

    .kei-sidebar__close {
        display: flex;
        position: absolute;
        top: 12px;
        right: 12px;
        background: none;
        border: none;
        color: var(--kei-text-muted);
        font-size: 22px;
        cursor: pointer;
        line-height: 1;
        padding: 4px 8px;
    }

    .kei-hamburger { display: flex; }

    .kei-main {
        padding: 20px 16px;
    }

    .kei-cards-grid,
    .kei-actions-row {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .kei-topbar__title { font-size: 18px; }
}

@media (max-width: 480px) {
    .kei-cards-grid,
    .kei-actions-row {
        grid-template-columns: 1fr;
    }
    .kei-topbar {
        flex-direction: column;
        align-items: flex-start;
    }
}