/* index.css */

/* --- CSS Variables --- */
:root {
    /* Canadian Modern Palette */
    --primary-red: #D83D3D;         /* Maple Red */
    --primary-red-dark: #B72C2C;   /* Darker Maple Red for hover */
    --primary-blue: #4A90E2;        /* Glacial Blue (Accent) */
    --primary-blue-dark: #357ABD;  /* Darker Glacial Blue */
    --text-dark: #2D3748;          /* Charcoal */
    --text-light: #718096;         /* Medium Slate */
    --text-white: #ffffff;
    --bg-light: #F8F9FA;           /* Snowfield */
    --bg-white: #ffffff;
    --bg-dark: #2D3748;            /* Charcoal background for dark elements */
    --bg-dark-contrast: #E9ECEF;
    --border-color: #E2E8F0;       /* Light Slate */
    --border-primary: #22283a;
    
    /* Status Colors */
    --status-available: #38A169;   /* Forest Green */
    --status-offline: #718096;     /* Medium Slate */
    --status-in-use: #FFC107;      /* Amber */
    --status-passed: #38A169;
    --status-failed: #D83D3D;
    --status-not-run: #718096;
    --status-incomplete: #FFC107;


    /* Log Colors */
    --log-verbose: #A0AEC0;        /* Light Slate for verbose */
    --log-debug: #718096;          /* Medium Slate for debug */
    --log-info: #4A90E2;           /* Use Glacial Blue for info */
    --log-warn: #FFC107;
    --log-error: #D83D3D;          /* Use Maple Red for error */

    /* Base Styles */
    --font-family: 'Inter', sans-serif;
    --box-shadow: 0 2px 4px rgba(45, 55, 72, 0.08); /* Softer shadow */
    --border-radius: 6px;
}

/* --- Global Styles & Resets --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.5;
    overflow-x: hidden;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: 1rem;
}

hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 1rem 0;
}

/* --- NEW MAIN LAYOUT --- */
#root, .app-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-body {
    display: flex;
    flex-grow: 1;
    overflow: hidden; /* Important for child scrolling */
}

.app-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Ensures header is fixed and content scrolls */
    transition: margin-left 0.3s ease-in-out;
}

.page-content-wrapper {
    flex-grow: 1;
    overflow-y: auto;
    background-color: var(--bg-light);
}


/* --- NEW SIDEBAR --- */
.sidebar {
    background-color: var(--bg-white);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    width: 260px;
    flex-shrink: 0;
    transition: width 0.3s ease-in-out;
}

.sidebar-header {
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 57px; /* Match header height */
    transition: padding 0.3s ease-in-out;
}

.sidebar-logo img {
    height: 35px;
    transition: all 0.3s ease-in-out;
}

.sidebar-nav {
    flex-grow: 1;
    padding: 1rem;
    overflow-y: auto;
    overflow-x: hidden;
}

.nav-group {
    margin-bottom: 1.5rem;
}

.nav-group-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    padding: 0 0.75rem;
    margin-bottom: 0.5rem;
    display: block;
    white-space: nowrap;
    transition: opacity 0.2s ease-in-out;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    position: relative;
    white-space: nowrap;
}

.nav-item:hover {
    background-color: #FEF2F2; /* Lighter red */
    color: var(--primary-red-dark);
}

.nav-item.active {
    background-color: var(--primary-red);
    color: var(--text-white);
    box-shadow: 0 4px 8px rgba(216, 61, 61, 0.2);
}

.nav-item.active i {
    color: var(--text-white);
}

.nav-item i {
    font-size: 1.5rem;
    color: var(--text-light);
    transition: color 0.2s ease-in-out;
    min-width: 24px; /* Ensure icon alignment */
}
.nav-item:hover i {
     color: var(--primary-red-dark);
}

.sidebar-footer {
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
}

.user-profile-sidebar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.2s;
    overflow: hidden;
}

.user-profile-sidebar:hover {
    background-color: var(--bg-light);
}

.user-profile-sidebar .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--primary-red);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.user-profile-sidebar .user-info {
    flex-grow: 1;
    min-width: 0;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.user-profile-sidebar .username {
    display: block;
    font-weight: 700;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-profile-sidebar .role {
    font-size: 0.85rem;
    color: var(--text-light);
}

.logout-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--text-light);
    padding: 0.5rem;
    border-radius: 50%;
    transition: background-color 0.2s, color 0.2s;
    margin-left: auto;
}

.logout-btn:hover {
    background-color: #FEE2E2;
    color: var(--primary-red);
}

.sidebar-toggle-wrapper {
    border-top: 1px solid var(--border-color);
    margin: 0.5rem -1rem -1rem;
    padding: 0.5rem;
    display: flex;
    justify-content: flex-end;
}

.sidebar-toggle {
    background: none;
    border: none;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    transition: all 0.2s;
}
.sidebar-toggle:hover {
    background-color: var(--bg-light);
    color: var(--text-dark);
}
.sidebar-toggle i {
    font-size: 1.75rem;
    transition: transform 0.3s ease-in-out;
}

/* --- SIDEBAR COLLAPSED STATE --- */
.sidebar.collapsed {
    width: 80px;
}
.sidebar.collapsed .sidebar-header {
    padding: 0.75rem 0.5rem;
}
.sidebar.collapsed .sidebar-logo img {
    height: 30px;
}
.sidebar.collapsed .nav-group-title,
.sidebar.collapsed .nav-item span {
    display: none;
    opacity: 0;
}
.sidebar.collapsed .nav-item {
    justify-content: center;
}
.sidebar.collapsed .user-profile-sidebar {
    justify-content: center;
    padding: 0.5rem 0;
}
.sidebar.collapsed .logout-btn {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.sidebar.collapsed .sidebar-toggle-wrapper {
    justify-content: center;
}
.sidebar.collapsed .sidebar-toggle i {
    transform: rotate(180deg);
}

/* --- Main App Container --- */
/* #root, .app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
} */

/* --- Common Header --- */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1.5rem;
    background-color: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    flex-shrink: 0;
    height: 57px;
}

.header-left .logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.header-left .logo img {
    height: 30px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.persona-switcher {
    display: flex;
    background-color: var(--bg-light);
    border-radius: var(--border-radius);
    padding: 3px;
    border: 1px solid var(--border-color);
}
.persona-switcher button {
    padding: 0.35rem 1rem;
    border: none;
    background-color: transparent;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-light);
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.persona-switcher button.active {
    background-color: var(--bg-white);
    color: var(--primary-red);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.agent-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}
.agent-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.agent-status.disconnected {
    color: var(--text-light);
}
.agent-status.disconnected .agent-status-dot {
    background-color: var(--status-offline);
}
.agent-status.connected {
    color: var(--status-available);
    background-color: #C6F6D5;
    border-color: var(--status-available);
}
.agent-status.connected .agent-status-dot {
    background-color: var(--status-available);
    animation: pulse-available 2s infinite;
}

.language-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

/* User Profile Menu */
.user-profile {
    position: relative;
}

.avatar-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
}

.user-profile .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--text-light);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    transition: box-shadow 0.2s;
}

.avatar-btn:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}
.avatar-btn:hover .avatar {
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.3);
}

.user-profile-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(45, 55, 72, 0.12);
    width: 240px;
    z-index: 1100;
    padding: 0.5rem 0;
    opacity: 0;
    transform: translateY(-10px);
    animation: fadeInMenu 0.2s forwards;
}

@keyframes fadeInMenu {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-profile-menu .menu-header {
    padding: 0.5rem 1rem;
}
.user-profile-menu .username {
    display: block;
    font-weight: 700;
    color: var(--text-dark);
}
.user-profile-menu .user-email {
    font-size: 0.85rem;
    color: var(--text-light);
}
.user-profile-menu hr {
    margin: 0.5rem 0;
}
.user-profile-menu .menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    color: var(--text-dark);
    text-decoration: none;
    font-size: 0.95rem;
    transition: background-color 0.2s;
}
.user-profile-menu .menu-item:hover {
    background-color: var(--bg-light);
}
.user-profile-menu .menu-item i {
    font-size: 1.25rem;
    color: var(--text-light);
}
.user-profile-menu .menu-item.active {
    background-color: var(--bg-light);
    font-weight: 700;
    color: var(--primary-red);
}

/* --- Live Session Indicator --- */
.live-session-indicator {
    padding: 0.35rem 1rem;
    border: 1px solid var(--primary-red);
    background-color: #FEE2E2;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: 500;
    color: var(--primary-red-dark);
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.live-session-indicator:hover,
.live-session-indicator.active {
    background-color: var(--primary-red);
    color: white;
}

.live-session-indicator .live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--primary-red);
    animation: pulse-red 1.5s infinite;
}

.live-session-indicator:hover .live-dot,
.live-session-indicator.active .live-dot {
    background-color: white;
    animation: none;
}

@keyframes pulse-red {
  0% {
    box-shadow: 0 0 0 0 rgba(216, 61, 61, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(216, 61, 61, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(216, 61, 61, 0);
  }
}

/* --- START: NEW CANADIAN THEME AUTH PAGE --- */
.auth-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--bg-light);
    background-image:
        radial-gradient(circle at 1px 1px, var(--border-color) 1px, transparent 0),
        radial-gradient(circle at 10px 10px, var(--border-color) 1px, transparent 0);
    background-size: 20px 20px;
}
.auth-header-new {
    padding: 1rem 2rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}
.auth-logo {
    text-decoration: none;
    display: inline-block;
}
.auth-logo img {
    height: 35px;
    vertical-align: middle;
}
.auth-content-wrapper {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.auth-card-new {
    width: 100%;
    max-width: 420px;
    background: var(--bg-white);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    text-align: center;
    transition: all 0.3s ease-in-out;
}
.auth-card-new.signup-view {
    max-width: 1200px;
    padding: 0;
    display: flex;
    overflow: hidden;
}
.signup-promo-new {
    flex: 1;
    background-image: linear-gradient(to top, rgba(216, 61, 61, 0.8), rgba(45, 55, 72, 0.8)), url('https://images.unsplash.com/photo-1503614472-8c93d56e92ce?q=80&w=2011&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.signup-promo-new h2 {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}
.signup-promo-new .subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}
.value-props {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: left;
}
.value-props li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.value-props i {
    font-size: 1.75rem;
    margin-top: 4px;
    color: rgba(255,255,255,0.8);
}
.value-props strong {
    display: block;
    font-weight: 700;
}
.value-props span {
    font-size: 0.9rem;
    opacity: 0.8;
}
.auth-form-container {
    flex: 1;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    margin: -2.5rem -2.5rem 1.5rem -2.5rem; /* Extend to card edges */
}
.auth-form-container .auth-tabs {
    margin: -3rem -3rem 1.5rem -3rem;
}

.auth-tab {
    flex: 1;
    padding: 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-light);
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease-in-out;
}

.auth-tab.active {
    color: var(--primary-red);
    border-bottom-color: var(--primary-red);
}

.auth-tab:not(.active):hover {
    background-color: var(--bg-light);
}

.auth-card-new h1 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}
.auth-card-new p {
    color: var(--text-light);
    margin-bottom: 1.5rem;
}
.auth-form-new {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
}
.auth-form-new .form-group {
    display: flex;
    flex-direction: column;
}
.auth-form-new label {
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}
.auth-form-new input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 1rem;
    transition: all 0.2s;
}
.auth-form-new input:focus {
    outline: none;
    border-color: var(--primary-red);
    box-shadow: 0 0 0 3px rgba(216, 61, 61, 0.1);
}
.auth-options {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 0.9rem;
}

.auth-options a {
    color: var(--primary-red);
    text-decoration: none;
    font-weight: 500;
}
.auth-options a:hover {
    text-decoration: underline;
}
.auth-card-new .btn-primary {
    padding: 0.8rem;
    font-size: 1.05rem;
    font-weight: 700;
}
.divider-or {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-light);
    font-size: 0.8rem;
    margin: 0.5rem 0;
}
.divider-or::before, .divider-or::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border-color);
}
.divider-or:not(:empty)::before { margin-right: .5em; }
.divider-or:not(:empty)::after { margin-left: .5em; }

.btn-google {
    background-color: var(--bg-white);
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    padding: 0.75rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-weight: 500;
}
.btn-google:hover { background-color: var(--bg-light); }
.btn-google img { width: 20px; height: 20px; }
.auth-error {
    background-color: #FED7D7;
    color: #9B2C2C;
    padding: 0.75rem;
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}
.auth-message {
    background-color: #C6F6D5;
    color: #2F855A;
    padding: 0.75rem;
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}
.signup-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.signup-fields-grid .form-group {
    margin: 0;
}
.signup-fields-grid .full-width {
    grid-column: 1 / -1;
}

/* --- Subscription Plan Selection in Auth Form --- */
.subscription-plans-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 0.5rem;
}

.subscription-plan-card {
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    position: relative;
    background-color: var(--bg-white);
    display: flex;
    flex-direction: column;
}

.subscription-plan-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.subscription-plan-card.selected {
    border-color: var(--primary-red);
    box-shadow: 0 0 0 3px rgba(216, 61, 61, 0.1);
}

.popular-badge {
    position: absolute;
    top: -10px;
    right: 15px;
    background-color: var(--primary-red);
    color: white;
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 12px;
}

.subscription-plan-card h4 {
    font-size: 1.1rem;
    color: var(--text-dark);
}

.subscription-plan-card .plan-price {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0.5rem 0;
}

.subscription-plan-card .plan-price .price-per {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-light);
    margin-left: 0.25rem;
}

.subscription-plan-card .plan-features {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-dark);
    flex-grow: 1;
}

.subscription-plan-card .plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.subscription-plan-card .plan-features li i {
    color: var(--status-available);
    font-size: 1.25rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.subscription-plan-card .plan-select-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    font-weight: 500;
    color: var(--text-light);
}

.subscription-plan-card.selected .plan-select-indicator {
    color: var(--primary-red);
}

.subscription-plan-card .radio-button {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s;
}

.subscription-plan-card.selected .radio-button {
    border-color: var(--primary-red);
}

.subscription-plan-card .radio-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--primary-red);
}

@media (max-width: 900px) {
    .auth-card-new.signup-view {
        flex-direction: column;
        max-width: 480px;
    }
    .signup-promo-new {
        display: none;
    }
    .auth-form-container {
        padding: 2.5rem;
    }
    .subscription-plans-container {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 500px) {
    .auth-content-wrapper { padding: 1rem; }
    .auth-card-new { padding: 1.5rem; }
    .auth-form-container { padding: 1.5rem; }
    .signup-fields-grid { grid-template-columns: 1fr; }
}

/* --- END: NEW CANADIAN THEME AUTH PAGE --- */

/* --- Banners / Alerts --- */
.info-banner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 2rem;
    background-color: #EBF8FF; /* Light Blue */
    color: #2C5282; /* Dark Blue */
    border: 1px solid #90cdf4; /* Medium Blue */
}
.info-banner i {
    font-size: 2rem;
    margin-top: 0.25rem;
    color: var(--primary-blue);
}
.info-banner-content h4 {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
    color: var(--primary-blue-dark);
}
.info-banner-content p {
    margin: 0;
    line-height: 1.6;
    color: var(--text-dark);
}


/* --- Common Nav Tabs (Dashboard) --- */
.nav-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
}

.nav-tab {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border: none;
    background: none;
    color: var(--text-light);
    font-size: 1rem;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease-in-out;
}

.nav-tab.active {
    color: var(--primary-red);
    border-bottom-color: var(--primary-red);
}

/* --- Device Dashboard --- */
.dashboard-header {
    background-color: var(--bg-white);
    padding: 0 1.5rem;
}
.dashboard-main {
    flex-grow: 1;
    padding: 1.5rem;
}
.filters-bar {
    background: var(--bg-white);
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--box-shadow);
}
.filter-group {
    display: flex;
    border-radius: var(--border-radius);
    overflow: hidden;
}
.filter-group button {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    background-color: var(--bg-white);
    color: var(--text-light); /* Make unselected text visible */
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.filter-group button:hover:not(.active) {
    background-color: var(--bg-light);
    color: var(--text-dark);
}
.filter-group button:not(:last-child) { border-right-width: 0; }
.filter-group button.active {
    background-color: var(--primary-red);
    color: var(--bg-white);
    border-color: var(--primary-red);
}
.filter-group.view-mode-toggle button {
    font-size: 1.25rem;
    padding: 0.4rem 0.8rem;
}
.search-bar {
    flex-grow: 1;
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding-left: 0.75rem;
}
.search-bar i { color: var(--text-light); }
.search-bar input {
    border: none;
    outline: none;
    padding: 0.6rem;
    width: 100%;
    background: transparent;
}
.filter-dropdown {
    padding: 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--bg-white);
    min-width: 150px;
}
.device-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}
.no-devices-msg {
    text-align: center;
    padding: 2rem;
    color: var(--text-light);
}

/* Device Grouping Styles */
.device-group-container {
    margin-bottom: 2.5rem;
}
.device-group-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}
.host-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--primary-red);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-right: 1rem;
}
.device-group-title {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}
.device-group-title h3 {
    font-size: 1.5rem;
    color: var(--text-dark);
    margin: 0;
}
.host-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--text-light);
}
.host-meta .host-name {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 500;
}
.host-meta .device-count {
    font-weight: 500;
}
.agent-status-tag {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    margin-top: 4px;
}
.agent-status-tag.connected {
    background-color: #C6F6D5;
    color: #2F855A;
}
.agent-status-tag.disconnected {
    background-color: #E2E8F0;
    color: #4A5568;
}

/* --- Device Card --- */
.device-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    overflow: hidden; /* To contain the accent border */
    border-left: 5px solid transparent; /* Placeholder for OS color */
}

/* OS Accent Borders */
.device-card.os-android { border-left-color: var(--status-available); }
.device-card.os-ios { border-left-color: var(--text-light); }

.device-card.selected {
    border-color: var(--primary-red);
    border-left-width: 5px; /* Keep the OS accent width consistent */
    box-shadow: 0 0 0 2px var(--primary-red);
}
.device-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(45, 55, 72, 0.12);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    background-color: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
}
.device-card.status-in-use .card-header {
    background-color: #FFFBEB; /* Light Amber */
}
.device-name { 
    font-size: 1.1rem; 
    font-weight: 700;
    color: var(--text-dark);
    margin-right: 1rem; /* Space for checkbox */
}
.card-checkbox { 
    transform: scale(1.2); 
    margin-top: 2px;
}
.offline-tag {
    position: absolute;
    top: 0px; 
    right: 10px;
    background: var(--status-offline);
    color: white;
    padding: 0.1rem 0.5rem;
    font-size: 0.7rem;
    border-radius: 0 0 3px 3px;
    z-index: 2;
}
.upgrade-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: var(--primary-blue);
    color: white;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--border-radius);
    z-index: 2;
}
.card-body { 
    display: flex; 
    gap: 1rem; 
    padding: 1rem;
}
.device-icon { 
    font-size: 3.5rem; /* Larger icon */
    color: var(--primary-blue); 
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
}
.device-details p { 
    font-size: 0.9rem; 
    color: var(--text-light); 
    margin-bottom: 0.5rem; 
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.device-details p:last-child { margin-bottom: 0; }
.device-details i { 
    font-size: 1.2rem; 
    color: var(--text-light); 
    display: flex;
    align-items: center;
    justify-content: center;
}
.device-details span { 
    color: var(--text-dark); 
    font-weight: 500; 
}

/* Card Tags */
.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}
.card-tag {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    color: var(--text-dark);
    background-color: var(--bg-dark-contrast);
}
.tag-new { background-color: var(--primary-blue); color: var(--text-white); }
.tag-high-demand { background-color: var(--primary-red); color: var(--text-white); }
.tag-beta-os { background-color: var(--status-in-use); color: var(--text-dark); }
/* Custom device type tags */
.tag-phone { background-color: #3498db; color: var(--text-white); }
.tag-tablet { background-color: #9b59b6; color: var(--text-white); }
.tag-iphone { background-color: #34495e; color: var(--text-white); }
.tag-ipad { background-color: #8e44ad; color: var(--text-white); }
.tag-smart-tv { background-color: #16a085; color: var(--text-white); }
.tag-pos-device { background-color: #f39c12; color: var(--text-dark); }
.tag-smartwatch { background-color: #2c3e50; color: var(--text-white); }
.tag-automotive { background-color: #c0392b; color: var(--text-white); }
.tag-embedded { background-color: #7f8c8d; color: var(--text-white); }


/* Status colors are already defined, but let's ensure they apply correctly */
.status-available { color: var(--status-available); font-weight: 700; }
.status-offline { color: var(--status-offline); font-weight: 700; }
.status-in-use { color: var(--status-in-use); font-weight: 700; }

@keyframes pulse-available {
  0% {
    box-shadow: 0 0 0 0 rgba(56, 161, 105, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(56, 161, 105, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(56, 161, 105, 0);
  }
}

.status-icon-available {
    border-radius: 50%;
    animation: pulse-available 2s infinite;
    color: var(--status-available) !important;
}

.status-icon-in-use {
    border-radius: 50%;
    animation: pulse-red 2s infinite;
    color: var(--primary-red) !important;
}

.card-actions {
    margin-top: auto; /* Push actions to the bottom */
    padding: 0.5rem 1rem 0.75rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-light);
}
.action-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background-color: var(--bg-white);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    transition: all 0.2s;
    color: var(--text-dark);
}
.action-btn:hover:not(:disabled) { 
    background-color: var(--primary-blue); 
    color: white; 
    border-color: var(--primary-blue); 
}
.action-btn.btn-launch:hover:not(:disabled),
.action-btn.btn-remove:hover:not(:disabled) { /* Specific hover for launch */
    background-color: var(--primary-red); 
    border-color: var(--primary-red);
    color: white;
}
.action-btn:disabled { cursor: not-allowed; opacity: 0.6; }

.device-card.locked-for-upgrade {
    opacity: 0.65;
    background-color: var(--bg-light);
}
.device-card.locked-for-upgrade:hover {
    transform: none;
    box-shadow: var(--box-shadow);
}


/* Device List View */
.device-list-container {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow-x: auto;
    box-shadow: var(--box-shadow);
}
.device-list-table {
    width: 100%;
    border-collapse: collapse;
}
.device-list-table th, .device-list-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.device-list-table th {
    font-weight: 700;
    color: var(--text-light);
    font-size: 0.85rem;
    text-transform: uppercase;
}
.device-list-table th.sortable {
    cursor: pointer;
}
.device-list-table th.sortable:hover {
    color: var(--text-dark);
}
.device-list-table th.sortable::after {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.5em;
    opacity: 0.4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24' 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14m-4-7l4 4 4-4'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}
.device-list-table th.sortable.asc::after {
    opacity: 1;
    transform: rotate(180deg);
}
.device-list-table th.sortable.desc::after {
    opacity: 1;
    transform: rotate(0deg);
}
.device-list-table tbody tr:last-child td {
    border-bottom: none;
}
.device-list-table tbody tr:not(.status-in-use):hover {
    background-color: var(--bg-light);
}
.device-list-table tbody tr.selected {
    background-color: #FEE2E2;
}
.device-list-table tbody tr.status-in-use {
    background-color: #FFFBEB; /* Light Amber */
    color: var(--text-light);
}
.device-list-table tbody tr.status-in-use .device-name-cell,
.device-list-table tbody tr.status-in-use .status-in-use {
    color: var(--text-dark);
    font-weight: 700;
}
.device-list-table tbody tr.status-in-use.selected {
    background-color: #ffeeb9; /* A slightly darker amber for selected+in-use */
}
.device-list-table .device-name-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
}
.device-list-table .device-name-cell i {
    font-size: 1.5rem;
}
.device-list-table .card-actions {
    background: transparent;
    border: none;
    padding: 0;
}

.device-list-table tr.locked-for-upgrade {
    opacity: 0.65;
    background-color: var(--bg-light);
}

.device-list-table tr.locked-for-upgrade:hover {
    background-color: var(--bg-light);
}

.upgrade-tag-list {
    background: var(--primary-blue);
    color: white;
    padding: 0.1rem 0.4rem;
    font-size: 0.7rem;
    border-radius: 4px;
    font-weight: 700;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.device-list-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
}
.device-list-status .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.device-list-status.status-available .status-dot {
    background-color: var(--status-available);
    animation: pulse-available 2s infinite;
}
.device-list-status.status-in-use .status-dot {
    background-color: var(--primary-red);
    animation: pulse-red 2s infinite;
}

.pagination { display: flex; justify-content: center; align-items: center; margin-top: 2rem; gap: 0.5rem; }
.pagination button { padding: 0.5rem 1rem; border: 1px solid var(--border-color); background-color: var(--bg-white); cursor: pointer; }
.pagination button:disabled { cursor: not-allowed; opacity: 0.5; }
.pagination span { padding: 0.5rem 1rem; border: 1px solid var(--border-color); background-color: var(--primary-red); color: white; }

.footer { padding: 0.75rem 1.5rem; background-color: var(--bg-white); border-top: 1px solid var(--border-color); display: flex; gap: 2rem; }
.footer span { font-weight: 500; color: var(--text-dark); }

/* --- REVAMPED ANALYTICS DASHBOARD --- */
.analytics-dashboard-container {
    padding: 1.5rem;
}
.dashboard-filter-bar {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.dashboard-filter-bar .filter-dropdown {
    min-width: 200px;
}
.dashboard-filter-bar .filter-group {
    margin-left: auto;
}
.analytics-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: min-content;
    gap: 1.5rem;
}
.dashboard-widget {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.widget-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.widget-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.widget-content {
    padding: 1.25rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
/* Widget sizing */
.widget-span-3 { grid-column: span 3; }
.widget-span-4 { grid-column: span 4; }
.widget-span-5 { grid-column: span 5; }
.widget-span-6 { grid-column: span 6; }
.widget-span-7 { grid-column: span 7; }
.widget-span-8 { grid-column: span 8; }
.widget-span-9 { grid-column: span 9; }
.widget-span-12 { grid-column: span 12; }

/* Key Metrics Widget */
.key-metrics-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
}
.key-metrics-container .dashboard-widget {
    padding: 1.25rem;
}
.stat-card-title {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-light);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.stat-card-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.1;
}
.stat-card-value.pass-rate-green { color: var(--status-passed); }
.stat-card-value.pass-rate-amber { color: var(--status-in-use); }
.stat-card-value.pass-rate-red { color: var(--status-failed); }
.stat-card-value .unit {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-light);
    margin-left: 0.25rem;
}

/* Donut Chart Widget */
.donut-chart-container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.donut-chart-svg {
    position: relative;
    flex-shrink: 0;
}
.donut-chart-center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.donut-chart-total {
    font-size: 2rem;
    font-weight: 700;
}
.donut-chart-label {
    font-size: 0.9rem;
    color: var(--text-light);
}
.donut-chart-legend ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.donut-chart-legend li {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    font-weight: 500;
}
.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 0.75rem;
}

/* BYOD Health Widget */
.byod-widget .agent-status-tag {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
}
.byod-widget .agent-status-tag.connected {
    background-color: #C6F6D5;
    color: #2F855A;
}
.byod-widget .agent-status-tag.disconnected {
    background-color: #E2E8F0;
    color: #4A5568;
}
.byod-device-list {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.byod-device-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
}
.byod-device-item .status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.byod-device-item .device-name {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.byod-device-item .device-status {
    color: var(--text-light);
    font-weight: 400;
}

/* Project Quality & Failing Tests Widgets */
.quality-list, .activity-list {
    list-style: none;
    padding: 0;
    overflow-y: auto;
    max-height: 250px;
}
.quality-item, .activity-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
}
.quality-item:not(:last-child), .activity-item:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}
.quality-item-info {
    font-weight: 500;
}
.quality-item-info span {
    display: block;
    font-size: 0.85rem;
    color: var(--text-light);
}
.quality-item-score {
    font-weight: 700;
    font-size: 1rem;
}
.progress-bar-container {
    width: 100px;
    height: 8px;
    background-color: var(--bg-dark-contrast);
    border-radius: 4px;
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    background-color: var(--status-passed);
    transition: width 0.3s ease-in-out;
}

/* Activity Widget */
.activity-item .activity-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-right: 1rem;
    color: var(--text-white);
}
.activity-icon.passed { background-color: var(--status-passed); }
.activity-icon.failed { background-color: var(--status-failed); }
.activity-icon.incomplete { background-color: var(--status-incomplete); }

.activity-details {
    flex-grow: 1;
}
.activity-details p {
    margin: 0;
    font-weight: 500;
    font-size: 0.95rem;
}
.activity-details p .project-name {
    color: var(--primary-red);
}
.activity-details span {
    font-size: 0.85rem;
    color: var(--text-light);
}
.activity-item .btn-view-session {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.activity-item .btn-view-session:hover {
    background-color: var(--bg-dark-contrast);
    color: var(--primary-blue);
    border-color: var(--primary-blue);
}

/* --- IDE-STYLE DEVICE LAUNCH PAGE --- */

.launch-page-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
    position: relative;
}

.launch-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background-color: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    gap: 1rem;
    flex-wrap: wrap;
}
.launch-header-group {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.back-to-devices-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--primary-red);
}

.launch-header .session-timer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.1rem;
    font-family: 'Courier New', Courier, monospace;
    color: var(--text-dark);
    background-color: var(--bg-light);
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.launch-header .session-timer i {
    font-size: 1.5rem;
    color: var(--primary-red);
}


.launch-header .active-device-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-dark);
}
.launch-header .active-device-title i {
    font-size: 1.2rem;
    margin-right: 0.5rem;
    color: var(--text-light);
}
.test-session-selector {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.test-session-selector select {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--bg-white);
    min-width: 180px;
}
.test-session-selector button {
    padding: 0.5rem 1rem;
    font-weight: 500;
}
.sync-actions-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    position: relative;
}
.sync-options { position: relative; }
.sync-options-btn {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-light);
}
.sync-options-btn:hover { background-color: var(--bg-dark-contrast); }
.sync-options-dropdown {
    position: absolute;
    top: 100%; right: 0;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    z-index: 100;
    padding: 0.5rem;
    width: 180px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.sync-options-dropdown label { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem; }


.device-control-center {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
    position: relative;
}

.panel-resizer {
    background-color: var(--border-color);
    cursor: col-resize;
    width: 5px;
    flex-shrink: 0;
    transition: background-color 0.2s;
    z-index: 20;
}
.panel-resizer:hover {
    background-color: var(--primary-blue);
}

.control-sidebar {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    gap: 0.5rem;
    border-right: 1px solid var(--border-color);
    background: var(--bg-light);
    flex-shrink: 0;
    width: 50px;
}
.control-sidebar button {
    width: 36px; height: 36px;
    border: none; background: transparent; border-radius: var(--border-radius);
    font-size: 1.5rem; color: var(--text-light);
    cursor: pointer; transition: all 0.2s;
}
.control-sidebar button:hover { background-color: var(--bg-dark-contrast); }
.control-sidebar button.active { background-color: var(--primary-red); color: white; }

.right-tool-panel {
    display: flex;
    flex-direction: column;
    background: var(--bg-white);
    flex-shrink: 0;
    min-width: 300px;
    max-width: 800px;
    overflow: hidden;
}
.tool-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.tool-panel-header h4 {
    font-size: 1rem;
    font-weight: 700;
}
.tool-panel-header .panel-toggle-btn {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--text-light);
}
.tool-panel-header .panel-toggle-btn:hover { background-color: var(--bg-dark-contrast); }

.tool-panel-content-wrapper {
    flex-grow: 1;
    overflow: hidden; /* This is key */
    position: relative;
}

.panel-content {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    overflow-y: auto;
    padding: 1rem;
}

.panel-toggle-btn.collapsed {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
}
.panel-toggle-btn.collapsed:hover {
    background-color: var(--primary-red);
    color: white;
}


.tab-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.tab-content h4 { margin-bottom: 1rem; flex-shrink: 0; }
.tab-content .btn-primary, .tab-content .btn-secondary { width: 100%; margin-bottom: 0.5rem; }
.tab-content input[type="text"], .tab-content textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 0.5rem;
}
.separator-text { text-align: center; color: var(--text-light); font-size: 0.9rem; margin: 0.5rem 0; }
.installed-apps-list {
    list-style: none;
    padding: 0;
    font-size: 0.9rem;
}
.installed-apps-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; }

.logs-container { height: 100%; display: flex; flex-direction: column; }
.logs-output {
    flex-grow: 1;
    background: var(--bg-dark);
    color: var(--text-white);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8rem;
    padding: 0.5rem;
    border-radius: var(--border-radius);
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse; /* New logs appear at the bottom but are added to top of DOM */
    min-height: 0; /* Fix for flexbox overflow bug */
}
.log-entry { display: flex; gap: 0.75rem; white-space: pre-wrap; word-break: break-all;}
.log-entry:hover { background-color: rgba(255, 255, 255, 0.1); }
.log-level { font-weight: bold; }
.log-verbose .log-level { color: var(--log-verbose); }
.log-debug .log-level { color: var(--log-debug); }
.log-info .log-level { color: var(--log-info); }
.log-warn .log-level { color: var(--log-warn); }
.log-error .log-level { color: var(--log-error); }
.log-crash {
    background-color: rgba(216, 61, 61, 0.3);
    border-left: 3px solid var(--log-error);
    font-weight: bold;
}

/* --- Logs Panel Controls --- */
.logs-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.log-filter-input {
    flex-grow: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    min-width: 150px;
}
.log-filter-group {
    display: flex;
    gap: 0.25rem;
}
.log-level-toggle {
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--border-color);
    background-color: var(--bg-white);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease;
    opacity: 0.6;
}
.log-level-toggle.active {
    opacity: 1;
}
.log-level-toggle.level-verbose.active { background-color: #E2E8F0; color: #4A5568; border-color: var(--log-verbose); }
.log-level-toggle.level-debug.active { background-color: #EBF4FF; color: var(--log-debug); border-color: var(--log-debug); }
.log-level-toggle.level-info.active { background-color: #EBF8FF; color: var(--log-info); border-color: var(--log-info); }
.log-level-toggle.level-warn.active { background-color: #FFFBEB; color: #B7791F; border-color: var(--log-warn); }
.log-level-toggle.level-error.active { background-color: #FFF5F5; color: var(--log-error); border-color: var(--log-error); }
.logs-controls .btn-secondary {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

/* --- Interactive Shell Panel --- */
.shell-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.shell-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-dark);
    color: var(--text-white);
    font-family: 'Courier New', Courier, monospace;
    border-radius: var(--border-radius);
    overflow: hidden;
    min-height: 0; /* Flexbox fix */
}
.shell-output-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0.5rem;
    font-size: 0.9rem;
}
.shell-line {
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.4;
}
.shell-line.type-command {
    color: #82aaff; /* Light blue for commands */
}
.shell-line.type-command::before {
    content: '$ ';
    color: var(--status-available); /* Green prompt */
}
.shell-line.type-stderr {
    color: var(--log-error);
}
.shell-input-container {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    background: #3c4a60; /* Slightly lighter than bg-dark */
    flex-shrink: 0;
    border-top: 1px solid #4a5568;
}
.shell-input-container .prompt {
    color: var(--status-available);
    font-weight: bold;
    margin-right: 0.5rem;
    animation: blink 1.5s step-end infinite;
}
.shell-input {
    flex-grow: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-white);
    font-family: inherit;
    font-size: inherit;
    padding: 0.25rem;
}
.quick-commands-panel {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.quick-commands-panel h5 {
    margin-bottom: 0.25rem;
    color: var(--text-light);
    font-size: 0.9rem;
}
.quick-command-btn {
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    font-family: 'Courier New', Courier, monospace;
}
@keyframes blink { 50% { opacity: 0; } }

.setting-item { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; }
.switch { position: relative; display: inline-block; width: 50px; height: 28px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 28px; }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--primary-red); }
input:checked + .slider:before { transform: translateX(22px); }

/* --- App Installation Panel --- */
.install-method-switcher {
    display: flex;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
}
.install-method-switcher button {
    flex-grow: 1;
    padding: 0.5rem;
    border: none;
    background: var(--bg-white);
    cursor: pointer;
    font-weight: 500;
    color: var(--text-light);
    transition: all 0.2s;
}
.install-method-switcher button:not(:last-child) {
    border-right: 1px solid var(--border-color);
}
.install-method-switcher button.active {
    background-color: var(--primary-red);
    color: white;
}
.install-method-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.install-method-desc {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 0.25rem;
}
.install-method-desc strong {
    color: var(--text-dark);
}

/* --- ENHANCED AUTOMATION PANEL --- */
.automation-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.automation-method-switcher {
    display: flex;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    flex-shrink: 0;
}
.automation-method-switcher button {
    flex-grow: 1;
    padding: 0.6rem;
    border: none;
    background: var(--bg-white);
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-light);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.automation-method-switcher button:not(:last-child) {
    border-right: 1px solid var(--border-color);
}
.automation-method-switcher button.active {
    background-color: var(--primary-red);
    color: white;
}

.automation-dropzone {
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    text-align: center;
    background-color: var(--bg-light);
    transition: background-color 0.2s, border-color 0.2s;
}
.automation-dropzone:not(.disabled):hover {
    border-color: var(--primary-blue);
    background-color: #EBF8FF;
}
.automation-dropzone.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.automation-dropzone label {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.automation-dropzone i {
    font-size: 2.5rem;
    color: var(--primary-blue);
}
.automation-dropzone span {
    font-weight: 500;
    color: var(--text-dark);
}
.automation-dropzone small {
    font-size: 0.8rem;
    color: var(--text-light);
}
.automation-config {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.automation-config .form-group {
    display: flex;
    flex-direction: column;
}
.automation-config .form-group label {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}
.automation-config .form-group input,
.automation-config .form-group select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}
.automation-controls {
    display: flex;
}
.automation-controls button {
    width: 100%;
}
.automation-output-section {
    margin-top: 1rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allows this section to fill remaining space */
    min-height: 0; /* Fix for flexbox overflow bug */
}
.automation-output-section h5 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.automation-results-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    background: var(--bg-light);
    padding: 0.75rem;
    border-radius: var(--border-radius);
    margin-bottom: 0.75rem;
    font-weight: 500;
    font-size: 0.9rem;
}
.automation-results-summary span { display: flex; align-items: center; gap: 0.35rem; }
.automation-results-summary .result-passed { color: var(--status-available); }
.automation-results-summary .result-failed { color: var(--log-error); }
.automation-results-summary .result-skipped { color: var(--text-light); }
.automation-logs {
    flex-grow: 1;
    background: var(--bg-dark);
    color: #c9d1d9; /* Lighter than text-white for better readability */
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem; /* Slightly larger */
    padding: 1rem;
    border-radius: var(--border-radius);
    overflow-y: auto;
    line-height: 1.6;
    min-height: 400px; /* Increased height for better visibility */
}

.automation-log-entry {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.1rem 0.5rem;
    margin: 0 -0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.automation-log-entry:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.automation-log-entry i {
    margin-top: 5px;
    color: var(--text-light);
    font-size: 1rem;
}

.automation-log-entry .log-message {
    white-space: pre-wrap;
    word-break: break-all;
}

.automation-log-entry.log-system {
    color: var(--primary-blue);
}
.automation-log-entry.log-system i {
    color: var(--primary-blue);
}

.automation-log-entry.log-passed {
    color: var(--status-available);
}
.automation-log-entry.log-passed i {
    color: var(--status-available);
}

.automation-log-entry.log-failed {
    color: #ff8989; /* Lighter red for dark bg */
    background-color: rgba(239, 68, 68, 0.1);
}
.automation-log-entry.log-failed i {
    color: var(--log-error);
}


.generated-code-container {
    margin-top: 1rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.generated-code-container pre {
    flex-grow: 1;
    background: var(--bg-dark);
    color: var(--text-white);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    padding: 1rem;
    border-radius: var(--border-radius);
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
}
.local-run-panel h5 {
    font-size: 1.1rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}
.local-run-panel code {
    background: var(--bg-dark-contrast);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
}
.local-run-panel p {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 1rem;
}
.capabilities-display {
    position: relative;
    background: var(--bg-dark);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-primary);
    margin-top: 1rem;
}

.capabilities-display pre {
    padding: 1rem;
    padding-top: 3rem; /* Make space for the button */
    margin: 0;
    color: #c9d1d9;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    white-space: pre-wrap;
    overflow-x: auto;
    word-break: break-all;
}
.capabilities-display code {
    background: transparent; /* Inherit the dark background from <pre> */
    padding: 0; /* Remove padding that creates the "highlight" effect */
    color: inherit; /* Ensure text color from <pre> is used */
    font-family: inherit;
}

.btn-copy-code {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 1;
    background-color: #374151;
    color: var(--text-primary);
    border: 1px solid #4b5563;
    border-radius: var(--border-radius);
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s ease-in-out;
}

.btn-copy-code:hover {
    background-color: #4b5563;
}

.btn-copy-code .bx-check {
    color: var(--status-available);
}

/* Language selector for local Appium connection */
.automation-language-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}
.automation-language-selector button {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    background-color: var(--bg-white);
    color: var(--text-dark);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.automation-language-selector button:hover:not(.active) {
    background-color: var(--bg-dark-contrast);
}
.automation-language-selector button.active {
    background-color: var(--primary-red);
    color: white;
    border-color: var(--primary-red-dark);
}


/* Media Gallery in Control Panel */
.media-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.75rem;
}
.media-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid var(--border-color);
    background-color: var(--bg-dark-contrast);
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s, box-shadow 0.2s;
}
.media-thumbnail:hover {
    transform: scale(1.05);
    box-shadow: var(--box-shadow);
}
.media-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.media-thumbnail .video-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--text-light);
}
.media-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: white;
    padding: 1rem 0.5rem 0.5rem;
    font-size: 0.8rem;
    text-align: left;
    display: flex;
    flex-direction: column;
}
.media-overlay i {
    position: absolute;
    top: -10px;
    right: 5px;
    font-size: 1.2rem;
    opacity: 0.7;
}
.media-overlay span {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.media-overlay small {
    font-size: 0.7rem;
    opacity: 0.8;
}

/* File Explorer */
.file-explorer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex-shrink: 0;
}
.file-explorer-actions button {
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
}
.breadcrumb {
    display: flex;
    align-items: center;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.25rem 0.5rem;
    font-size: 0.9rem;
    flex-shrink: 0;
    overflow-x: auto;
    margin-bottom: 0.75rem;
}
.breadcrumb button {
    background: none; border: none; cursor: pointer;
    color: var(--primary-blue);
    padding: 0.25rem;
}
.breadcrumb button:hover { text-decoration: underline; }
.breadcrumb span {
    color: var(--text-light);
    margin: 0 0.25rem;
}
.file-list-container {
    flex-grow: 1;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-white);
}
.file-list { list-style: none; padding: 0; }
.file-item {
    display: grid;
    grid-template-columns: 24px 1fr 80px auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}
.file-item:last-child { border-bottom: none; }
.file-item:hover { background-color: var(--bg-light); }
.file-item-name {
    display: flex; align-items: center; gap: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    word-break: break-all;
}
.file-item-name i { font-size: 1.25rem; color: var(--primary-blue); }
.file-item-size { text-align: right; color: var(--text-light); }
.file-item-actions { display: flex; justify-content: flex-end; }
.file-item-actions button {
    width: 28px; height: 28px;
    border-radius: 50%; border: none;
    background: transparent; color: var(--text-light);
    cursor: pointer; font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center;
}
.file-item-actions button:hover { background-color: var(--bg-dark-contrast); color: var(--text-dark); }
.file-explorer-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    color: var(--text-light);
    gap: 0.5rem;
}
.file-explorer-error {
    background-color: #FED7D7;
    color: #C53030;
    padding: 0.75rem;
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}


/* Center Panel (Tabs, Screen, Toolbar) */
.center-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--bg-light);
    flex-grow: 1;
    min-width: 0;
}

/* Device Tabs */
.device-tabs {
    display: flex;
    flex-shrink: 0;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
    padding: 0 0.5rem;
    align-items: center;
}
.device-tab {
    display: flex;
    align-items: center;
    border-right: 1px solid var(--border-color);
}
.device-tab .tab-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    color: var(--text-light);
    font-weight: 500;
}
.device-tab.active .tab-main {
    color: var(--primary-red);
    border-bottom-color: var(--primary-red);
}
.device-tab .tab-close {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-light);
    padding: 0 0.5rem;
    font-size: 1.2rem;
    margin-left: -5px;
}
.device-tab .tab-close:hover {
    color: var(--primary-red);
}
.add-device-tab-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius);
    border: 1px dashed var(--border-color);
    background-color: transparent;
    color: var(--text-light);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 0.5rem;
    transition: all 0.2s;
}
.add-device-tab-btn:hover {
    background-color: var(--bg-dark-contrast);
    color: var(--primary-red);
    border-color: var(--primary-red);
}

/* Sync Actions Dropdown */
.sync-actions-container {
    margin-left: auto;
    position: relative;
    padding: 0 0.5rem;
}
.sync-actions-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}
.sync-actions-btn.active {
    background-color: #EBF8FF;
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}
.sync-actions-btn.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
.sync-actions-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(45, 55, 72, 0.12);
    width: 220px;
    z-index: 1100;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    animation: fadeInMenu 0.15s forwards;
}
.sync-actions-dropdown .dropdown-header {
    padding: 0.25rem 0.5rem 0.5rem;
    font-size: 0.8rem;
    color: var(--text-light);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.5rem;
}
.sync-actions-dropdown label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    transition: background-color 0.2s;
}
.sync-actions-dropdown label:hover {
    background-color: var(--bg-light);
}
.sync-actions-dropdown input[type="checkbox"] {
    width: 16px;
    height: 16px;
}


/* --- Tests Panel --- */
.test-steps-panel {
    display: flex;
    flex-direction: column;
}
.test-case-group {
    margin-bottom: 1.5rem;
}
.test-case-group h5 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}
.test-step-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.test-step-item label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.95rem;
}
.test-step-item input[type="checkbox"] {
    margin-top: 4px;
    transform: scale(1.2);
}
.test-step-item input[type="checkbox"]:checked + span {
    text-decoration: line-through;
    color: var(--text-light);
}


/* Device Screen (Center) */
.device-screen-wrapper {
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.device-screen-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow: hidden;
    flex-grow: 1;
}
.device-bezel {
    background: #111;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3), inset 0 0 5px rgba(255,255,255,0.1);
    transition: all 0.4s ease-in-out;
    transform-origin: center center;
}
.device-screen {
    background: #000;
    width: 100%;
    height: 100%;
    position: relative; /* Needed for recording indicator */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.device-screen.stream-failed {
    background-image: url('https://storage.googleapis.com/agent-tools/android-homescreen-placeholder.png');
    background-size: cover;
    background-position: center;
}

.device-screen video, .device-screen canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: inherit;
}

.stream-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    color: var(--text-white);
    font-weight: 500;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 1rem;
    border-radius: inherit; /* Inherit border radius from screen */
    user-select: none;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    z-index: 5; /* Ensure it's on top of the video element */
}
.stream-overlay i {
    font-size: 2.5rem;
}
.stream-overlay h4 {
    margin: 0.5rem 0 0.25rem;
    color: var(--text-white);
    font-weight: 700;
    font-size: 1.1rem;
}
.stream-overlay p {
    max-width: 80%;
    font-size: 0.9rem;
    color: var(--text-light);
    margin: 0;
    font-weight: 400;
    line-height: 1.4;
}

/* Phone Styles */
.device-bezel.phone { border-radius: 40px; padding: 15px; }
.device-bezel.phone .device-screen { border-radius: 25px; }
.device-bezel.phone.portrait { width: 320px; height: 650px; }
.device-bezel.phone.landscape { width: 650px; height: 320px; }

/* Tablet Styles */
.device-bezel.tablet { border-radius: 30px; padding: 18px; }
.device-bezel.tablet .device-screen { border-radius: 12px; }
.device-bezel.tablet.portrait { width: 450px; height: 600px; }
.device-bezel.tablet.landscape { width: 800px; height: 550px; }

/* Watch Styles */
.device-bezel.watch { 
    width: 280px; 
    height: 280px; 
    border-radius: 50px; 
    padding: 12px;
}
.device-bezel.watch .device-screen { border-radius: 38px; }

/* TV Styles */
.device-bezel.tv { 
    width: 800px; 
    height: 450px; 
    border-radius: 20px; 
    padding: 10px;
}
.device-bezel.tv.portrait { /* For robustness, though unlikely */
    width: 450px; 
    height: 800px; 
}
.device-bezel.tv .device-screen { border-radius: 10px; }


/* --- iOS Device Bezel Overrides --- */

/* Base iPhone look */
.device-bezel.platform-ios.phone {
    border: 10px solid #1c1c1c;
    border-radius: 50px; /* More rounded corners for iPhones */
    padding: 5px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4), 
                inset 0 0 8px rgba(255,255,255,0.15),
                inset 0 0 0 2px #333;
    position: relative;
    background: #000;
}

.device-bezel.platform-ios.phone .device-screen {
    border-radius: 44px; /* Matches inner radius */
    overflow: hidden; /* Important for notch */
}

/* Portrait iPhone size */
.device-bezel.platform-ios.phone.portrait {
    width: 320px;
    height: 694px; /* Based on iPhone 13 Pro aspect ratio */
}

/* Landscape iPhone size */
.device-bezel.platform-ios.phone.landscape {
    width: 694px;
    height: 320px;
}

/* The "Notch" or "Dynamic Island" for portrait mode */
.device-bezel.platform-ios.phone.portrait::before {
    content: '';
    position: absolute;
    top: 5px; /* Aligns with inner padding */
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 30px;
    background: #1c1c1c; /* Same as the outer border */
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    z-index: 10; /* Above the screen content */
}

/* The "Notch" for landscape mode (on the side) */
.device-bezel.platform-ios.phone.landscape::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    height: 140px;
    width: 30px;
    background: #1c1c1c;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    z-index: 10;
}

/* Side buttons for added realism in portrait */
.device-bezel.platform-ios.phone.portrait::after {
    content: '';
    position: absolute;
    left: -4px;
    top: 100px;
    width: 3px;
    height: 30px;
    background: #555;
    border-radius: 3px 0 0 3px;
    box-shadow: inset 1px 0 rgba(255,255,255,0.1);
}

/* Power button for added realism in portrait */
.device-bezel.platform-ios.phone.portrait .device-screen::after {
    content: '';
    position: absolute;
    right: -17px; /* (border + padding) */
    top: 150px;
    width: 3px;
    height: 70px;
    background: #555;
    border-radius: 0 3px 3px 0;
    box-shadow: inset -1px 0 rgba(255,255,255,0.1);
}

/* Base iPad look - thin, uniform bezels */
.device-bezel.platform-ios.tablet {
    border: 14px solid #1c1c1c;
    border-radius: 36px;
    padding: 2px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.35), 
                inset 0 0 6px rgba(255,255,255,0.1),
                inset 0 0 0 2px #333;
    background: #000;
}

.device-bezel.platform-ios.tablet .device-screen {
    border-radius: 22px;
}

/* Portrait iPad size */
.device-bezel.platform-ios.tablet.portrait {
    width: 450px; 
    height: 630px;
}

/* Landscape iPad size */
.device-bezel.platform-ios.tablet.landscape {
    width: 800px; 
    height: 570px;
}


/* Recording Indicator */
.recording-indicator {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-family: 'Courier New', Courier, monospace;
    z-index: 10;
    animation: pulse 1.5s infinite;
}

.recording-indicator i {
    color: var(--primary-red);
    font-size: 0.7rem;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(216, 61, 61, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(216, 61, 61, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(216, 61, 61, 0);
    }
}


/* Enhanced Toolbar */
.enhanced-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-white);
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
    flex-shrink: 0;
}
.toolbar-group {
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
}
.toolbar-group:not(:last-child) {
    border-right: 1px solid var(--border-color);
}
.enhanced-toolbar button {
    width: 40px; height: 40px;
    border: none;
    background: transparent;
    border-radius: var(--border-radius);
    color: var(--text-dark);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.enhanced-toolbar button:hover {
    background-color: var(--bg-dark-contrast);
}
.enhanced-toolbar button.active {
    color: var(--primary-red);
    background-color: #FEE2E2; /* Light Red */
}

/* Zoom Slider */
.zoom-slider-container {
    min-width: 220px;
    gap: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
.zoom-slider-container i {
    font-size: 1.2rem;
}
.zoom-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    background: var(--border-color);
    outline: none;
    border-radius: 5px;
    transition: opacity .2s;
}
.zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--primary-red);
    cursor: pointer;
    border-radius: 50%;
}
.zoom-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--primary-red);
    cursor: pointer;
    border-radius: 50%;
    border: none;
}
.zoom-value {
    min-width: 40px;
    text-align: right;
    font-size: 0.9rem;
    color: var(--text-dark);
    font-weight: 500;
}

/* --- Performance HUD --- */
.performance-hud {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(17, 17, 17, 0.7);
    backdrop-filter: blur(5px);
    color: var(--text-white);
    border-radius: var(--border-radius);
    padding: 0.5rem 1rem;
    display: flex;
    gap: 1.5rem;
    z-index: 20;
    transition: all 0.3s ease-in-out;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.performance-hud:hover {
    padding: 1rem 1.5rem;
    gap: 2rem;
    background: rgba(17, 17, 17, 0.85);
}
.perf-metric {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    font-family: 'Courier New', Courier, monospace;
}
.perf-metric i {
    font-size: 1.25rem;
    color: var(--primary-blue);
    transition: transform 0.3s;
}
.performance-hud:hover .perf-metric i {
    transform: scale(1.1);
}
.perf-metric .perf-label {
    display: none;
}
.performance-hud:hover .perf-label {
    display: inline;
}


/* --- Modals --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}
.modal-content {
    background: var(--bg-white);
    border-radius: var(--border-radius);
    width: 90%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}
.modal-content.confirmation-modal {
    max-width: 450px;
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
.modal-header h3 { font-size: 1.25rem; }
.modal-close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    font-weight: 300;
    cursor: pointer;
    color: var(--text-light);
}
.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex-grow: 1; /* Fix: Ensure body takes up available space and scrolls */
}
.modal-body p {
    margin-bottom: 1rem;
    color: var(--text-light);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

/* This is the fix for the modal layout */
.modal-content form {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0; /* Prevents flex children from overflowing */
}


/* Styles for enhanced Add Device Modal */
.modal-content.add-device-modal-content {
    width: 90%;
    max-width: 950px;
    max-height: 90vh;
}
.add-device-modal-content .modal-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.add-device-modal-content .modal-body p {
    flex-shrink: 0;
}
.add-device-modal-content .modal-filters-container {
    flex-shrink: 0;
    padding-bottom: 1rem;
}
.modal-filters-container .filters-bar {
    box-shadow: none;
    padding: 0;
    background-color: transparent;
    border: 1px solid var(--border-color);
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 0;
}
.add-device-modal-content .modal-grid-container {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 1rem; /* Space for scrollbar */
    margin-right: -1rem; /* Counteract parent padding */
}
.add-device-modal-content .device-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    padding-bottom: 1rem;
}

/* Styles for Device Info Modal */
.device-info-list {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 0.75rem;
    font-size: 0.95rem;
}
.device-info-list dt {
    font-weight: 500;
    color: var(--text-light);
}
.device-info-list dd {
    font-weight: 500;
    color: var(--text-dark);
    word-break: break-all;
}

/* Styles for Edit Device Modal Form */
.form-grid {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 1.25rem;
    align-items: center;
}
.form-grid label {
    font-weight: 500;
    color: var(--text-light);
    text-align: right;
}
.form-grid input,
.form-grid select {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--bg-white);
    font-size: 0.95rem;
    color: var(--text-dark);
}
.form-grid input:focus,
.form-grid select:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}
.form-grid input:disabled {
    background-color: var(--bg-light);
    cursor: not-allowed;
    color: var(--text-light);
}

/* Test Cases Modal Styles */
.test-case-modal-info {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    line-height: 1.6;
}
.test-case-list {
    list-style: none;
    padding: 0;
    max-height: 40vh;
    overflow-y: auto;
}
.test-case-list li {
    padding: 0.5rem 0.25rem;
    border-radius: var(--border-radius);
    transition: background-color 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.test-case-list li:hover {
    background-color: var(--bg-light);
}
.test-case-list label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-weight: 500;
    flex-grow: 1;
}
.test-case-list input[type="checkbox"] {
    transform: scale(1.2);
}
.test-case-info-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primary-blue);
    font-size: 1.5rem;
    padding: 0.25rem;
    display: flex;
    align-items: center;
}
.test-case-info-btn:hover {
    color: var(--primary-blue-dark);
}

/* Test Case Details Modal */
.modal-overlay.details-modal-overlay {
    z-index: 2001; /* Must be higher than the first modal's overlay */
}
.test-case-details-modal h4 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
    font-size: 1.1rem;
}
.test-case-details-modal p {
    margin-bottom: 1.5rem; /* More space after description */
}
.test-steps-list {
    list-style-type: decimal;
    padding-left: 1.5rem;
    font-size: 0.95rem;
}
.test-steps-list li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}


/* Test Session Results Modal */
.test-results-list {
    list-style: none;
    padding: 0;
    max-height: 30vh;
    overflow-y: auto;
    margin-bottom: 1rem;
}

.test-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0.25rem;
    border-bottom: 1px solid var(--border-color);
}

.test-result-item:last-child {
    border-bottom: none;
}

.test-result-item span {
    font-weight: 500;
    padding-right: 1rem; /* space between text and select */
}

.test-result-item select {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--bg-white);
    min-width: 180px;
    font-weight: 500;
}


/* --- Buttons --- */
.btn-primary { background-color: var(--primary-red); color: white; border: none; padding: 0.75rem; border-radius: var(--border-radius); cursor: pointer; transition: background-color 0.2s; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.btn-primary:hover { background-color: var(--primary-red-dark); }
.btn-primary:disabled { background-color: var(--text-light); cursor: not-allowed; }
.btn-secondary { background-color: var(--bg-light); color: var(--text-dark); border: 1px solid var(--border-color); padding: 0.75rem; border-radius: var(--border-radius); cursor: pointer; transition: background-color 0.2s; }
.btn-secondary:hover { background-color: var(--border-color); }
.btn-quit { background-color: var(--primary-red); color: white; border: none; padding: 0.5rem 1rem; border-radius: var(--border-radius); cursor: pointer; font-weight: 500; transition: background-color 0.2s; }
.btn-quit:hover { background-color: var(--primary-red-dark); }

.btn-danger {
    background-color: var(--primary-red);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
}
.btn-danger:hover:not(:disabled) {
    background-color: var(--primary-red-dark);
}
.btn-danger:disabled {
    background-color: var(--text-light);
    cursor: not-allowed;
}


.btn-launch-selected {
    background-color: var(--primary-red);
    color: white;
    border: none;
    padding: 0.6rem 1rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.btn-launch-selected:hover { background-color: var(--primary-red-dark); }

/* --- Standalone Page Styles (e.g. Integrations, BYOD) --- */
.page-container {
    padding: 1.5rem;
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
}

.page-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.page-header h1 {
    font-size: 1.75rem;
}

.back-to-dashboard-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-dark);
    transition: all 0.2s;
}

.back-to-dashboard-btn:hover {
    background-color: var(--border-color);
    border-color: var(--text-light);
}


/* --- Integration Settings Page --- */
.integration-settings-page {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 1.5rem;
}

.integration-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
}

.integration-card-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.integration-card-header h2 {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.integration-card-header h2 i {
    font-size: 1.75rem;
}

.integration-card-header p {
    color: var(--text-light);
}

.integration-card-body {
    padding: 1.5rem;
    flex-grow: 1;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.form-group a {
    font-size: 0.85rem;
    color: var(--primary-blue);
    text-decoration: none;
}
.form-group a:hover {
    text-decoration: underline;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 1rem;
}

.input-with-icon {
    position: relative;
}

.input-with-icon input {
    padding-right: 3rem; /* Space for icon */
}

.input-with-icon .icon-btn {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--text-light);
    padding: 0.25rem;
}

.connection-status {
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 500;
}

.connection-status.hidden {
    display: none;
}

.connection-status.testing {
    background-color: #E2E8F0; /* Light Slate */
    color: var(--text-dark);
}

.connection-status.success {
    background-color: #C6F6D5; /* Light Green */
    color: #2F855A; /* Dark Green */
}

.connection-status.error {
    background-color: #FED7D7; /* Light Red */
    color: #C53030; /* Dark Red */
}

.integration-card-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background-color: var(--bg-light);
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.quality-express-card {
    background-image: linear-gradient(45deg, var(--bg-white), #f0f4ff);
    border-color: var(--primary-blue);
}

/* --- START: API KEY MANAGEMENT --- */
.api-key-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.api-key-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}
.api-key-item-details {
    display: flex;
    flex-direction: column;
}
.api-key-item-details .key-name {
    font-weight: 700;
    font-size: 1.05rem;
}
.api-key-item-details .key-prefix {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    color: var(--text-light);
}
.api-key-item-details .key-date {
    font-size: 0.8rem;
    color: var(--text-light);
}
.api-key-item .btn-danger {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}
.new-key-display-container {
    padding: 1.5rem;
    background-color: #FFF5F5;
    border: 1px solid #FED7D7;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
}
.new-key-display-container strong {
    color: var(--primary-red-dark);
    display: block;
    margin-bottom: 0.5rem;
}
.new-key-display {
    background-color: var(--bg-white);
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 500;
}
.new-key-display .copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: inherit;
    font-weight: 500;
    color: var(--primary-blue);
}
/* --- END: API KEY MANAGEMENT --- */


/* --- Connect Local Device Page / Agent Control Panel --- */
.agent-control-panel-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 1.5rem;
    align-items: flex-start;
}
.agent-main-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.agent-sidebar {
    position: sticky;
    top: calc(57px + 1.5rem); /* Header height + page padding */
}
.agent-control-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}
.agent-control-card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.agent-control-card-header h3 {
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.agent-control-card-body {
    padding: 1.5rem;
}

/* Prerequisites Checklist */
.prerequisites-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.prerequisites-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
}
.prerequisites-item .status-icon {
    font-size: 1.5rem;
}
.prerequisites-item .status-icon.ok { color: var(--status-available); }
.prerequisites-item .status-icon.missing { color: var(--log-error); }
.prerequisites-item .status-icon.unknown { color: var(--text-light); }

.prerequisites-item-details {
    flex-grow: 1;
}
.prerequisites-item-details strong {
    font-weight: 700;
}
.prerequisites-item-details code {
    background: var(--bg-dark-contrast);
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
}
.prerequisites-item-details a {
    font-size: 0.9em;
    color: var(--primary-blue);
    text-decoration: none;
}
.prerequisites-item-details a:hover { text-decoration: underline; }

/* Agent Log Viewer */
.agent-log-viewer {
    background: var(--bg-dark);
    color: var(--text-white);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    border-radius: var(--border-radius);
    height: 300px;
    overflow-y: auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column-reverse; /* New logs on top of DOM, but at bottom of view */
}
.agent-log-entry {
    white-space: pre-wrap;
    word-break: break-all;
}
.agent-log-entry .timestamp { color: var(--log-debug); margin-right: 0.5rem; }
.agent-log-entry .level-info { color: var(--log-info); font-weight: bold; }
.agent-log-entry .level-error { color: var(--log-error); font-weight: bold; }
.agent-log-entry .level-warn { color: var(--log-warn); font-weight: bold; }


.bx-spin {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.btn-success {
    background-color: var(--status-available);
    color: white;
    cursor: default;
}
.btn-success:hover {
    background-color: var(--status-available);
}

/* --- NEW BYOD PAGE STYLES --- */
.connection-method-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.connection-method-card {
    background: var(--bg-white);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    position: relative;
}
.connection-method-card:hover {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}
.connection-method-card.active {
    border-color: var(--primary-red);
    box-shadow: 0 0 0 3px rgba(216, 61, 61, 0.2);
}
.connection-method-card .card-icon {
    font-size: 3rem;
    color: var(--primary-red);
}
.connection-method-card .card-content h4 { font-size: 1.1rem; margin: 0 0 0.25rem; }
.connection-method-card .card-content p { font-size: 0.9rem; color: var(--text-light); margin: 0; }
.active-indicator {
    position: absolute;
    top: 10px; right: 10px;
    font-size: 1.5rem;
    color: var(--primary-red);
}
.connection-instructions {
    background: var(--bg-light);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    line-height: 1.7;
}
.connection-instructions h4, .connection-instructions h5 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}
.connection-instructions p { margin: 0; }
.wireless-connect-form {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.wireless-connect-form input {
    flex-grow: 1;
}
.wireless-status-msg {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
}
.wireless-status-msg.status-error { color: var(--log-error); }
.wireless-status-msg.status-success { color: var(--status-available); }
.wireless-status-msg.status-loading { color: var(--primary-blue); }

.detected-devices-list-byod {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.detected-devices-list-byod li {
    display: grid;
    grid-template-columns: 24px 1fr auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}
.detected-devices-list-byod li i { font-size: 1.5rem; }
.detected-devices-list-byod .device-info { display: flex; flex-direction: column; line-height: 1.3; }
.detected-devices-list-byod .device-info span { font-size: 0.85rem; color: var(--text-light); }
.device-connection-tag {
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* New Status Tag for Fleet Onboarding */
.status-tag {
    padding: 0.4rem 0.8rem;
    border-radius: var(--border-radius);
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.status-tag.success { background-color: #C6F6D5; color: #2F855A; }
.status-tag.loading { background-color: #EBF8FF; color: var(--primary-blue); }
.status-tag.pending { background-color: #E2E8F0; color: #4A5568; }

.diagnostics-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.diagnostic-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.diagnostic-item i { font-size: 1.75rem; }
.diagnostic-item.status-ok i { color: var(--status-available); }
.diagnostic-item.status-error i { color: var(--log-error); }
.diagnostic-item.status-loading i { color: var(--primary-blue); }
.diagnostic-details strong { display: block; }
.diagnostic-details span { font-size: 0.85rem; color: var(--text-light); }

.pairing-methods-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.pairing-method-box {
    background-color: var(--bg-white);
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pairing-method-box h5 {
    font-size: 1rem;
    margin: 0;
}

.pairing-method-box p {
    font-size: 0.9rem;
    color: var(--text-light);
    flex-grow: 1;
    margin: 0;
}

.pairing-code-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pairing-code-form .ip-port-group {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0.5rem;
}

.pairing-code-form input,
.pairing-code-form button {
    width: 100%;
}


/* --- BYOD / Agent Setup Page --- */
.setup-instructions-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    align-items: flex-start;
}

.setup-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: 1.5rem;
}

.setup-card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
.setup-card-header h3 {
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.setup-card-body {
    padding: 1.5rem;
    line-height: 1.7;
}

.setup-card-body p {
    color: var(--text-light);
    margin-bottom: 1rem;
}

.setup-card-body h4 {
    font-size: 1.1rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.setup-card-body code {
    background: var(--bg-dark-contrast);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    color: var(--text-dark);
}

.download-kit-btn {
    width: 100%;
    margin-bottom: 1rem;
    padding: 1rem;
    font-size: 1.1rem;
}

.individual-downloads {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.individual-downloads .btn-secondary {
    flex: 1;
}

/* --- New Status Checklist Styles --- */
.status-checklist-item .status-icon {
    font-size: 1.5rem;
}
.status-checklist-item.status-pending .status-icon,
.status-checklist-item.status-pending strong {
    color: var(--text-light);
    opacity: 0.6;
}
.status-checklist-item.status-loading .status-icon {
    color: var(--primary-blue);
}
.status-checklist-item.status-success .status-icon {
    color: var(--status-available);
}
.status-checklist-item.status-error .status-icon {
    color: var(--log-error);
}
.status-checklist-item .status-error-text {
    font-size: 0.85rem;
    color: var(--log-error);
    font-weight: 500;
}

/* --- Test Sessions History Page --- */
.sessions-history-content {
    background: var(--bg-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
}
.sessions-filter-bar {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
.sessions-table-container {
    overflow-x: auto;
}
.sessions-table {
    width: 100%;
    border-collapse: collapse;
}
.sessions-table th, .sessions-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.sessions-table th {
    background-color: var(--bg-light);
    font-weight: 700;
    color: var(--text-light);
    font-size: 0.85rem;
    text-transform: uppercase;
}
.sessions-table tbody tr:not(.expansion-row):last-child td {
    border-bottom: none;
}
.sessions-table tbody tr:not(.expansion-row):hover {
    background-color: #fcfcfd;
}
.sessions-table .actions-cell {
    display: flex;
    gap: 0.5rem;
}
.sessions-table .action-btn {
    width: 32px;
    height: 32px;
    font-size: 1.1rem;
}
.sessions-table .action-btn i {
    transition: transform 0.2s ease-in-out;
}
.sessions-table tbody tr[aria-expanded="true"] .action-btn i {
    transform: rotate(180deg);
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 16px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    display: inline-block;
    white-space: nowrap;
}
.status-badge.status-passed { background-color: #C6F6D5; color: #2F855A; }
.status-badge.status-failed { background-color: #FED7D7; color: #9B2C2C; }
.status-badge.status-not-run { background-color: #E2E8F0; color: #4A5568; }
.status-badge.status-incomplete { background-color: #FEFCBF; color: #975A16; }

.expansion-row td {
    padding: 0;
    border-bottom: 2px solid var(--primary-red);
}
.expansion-content {
    background-color: var(--bg-light);
    padding: 1rem 1.5rem 1.5rem 3.5rem; /* Indent content */
    line-height: 1.6;
}
.expansion-content strong {
    color: var(--text-dark);
    display: block;
    margin-bottom: 0.25rem;
    margin-top: 0.75rem;
}
.expansion-content strong:first-child {
    margin-top: 0;
}
.expansion-content p {
    color: var(--text-light);
    margin: 0;
    font-style: italic;
}
.expansion-content ul {
    list-style: none;
    padding: 0;
    color: var(--text-light);
}
.expansion-content ul li::before {
    content: '›';
    margin-right: 0.5rem;
    color: var(--primary-blue);
}

/* --- NEW MODERN TEST SESSIONS PAGE --- */
.page-title-header {
    margin-bottom: 1.5rem;
}
.page-title-header h1 {
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
}
.page-title-header p {
    color: var(--text-light);
    font-size: 1rem;
}

.sessions-history-content.modern {
    background-color: transparent;
    box-shadow: none;
    border: none;
    overflow: visible;
}

.sessions-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--bg-white);
    padding: 1rem 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
}
.sessions-controls .nav-tabs {
    border-bottom: none;
}
.sessions-controls .sessions-filter-bar {
    padding: 0;
    display: flex;
    gap: 1rem;
}
.sessions-controls .filter-dropdown {
    min-width: 180px;
}
.sessions-controls .search-bar {
    max-width: 400px;
}

.sessions-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.session-card {
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}
.session-card:hover {
    box-shadow: 0 4px 12px rgba(45, 55, 72, 0.12);
}

.session-card-main {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    gap: 1.5rem;
    cursor: pointer;
}

.session-status-indicator {
    width: 6px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}
.session-card.status-passed .session-status-indicator,
.session-card.status-pass-with-condition .session-status-indicator {
    background-color: var(--status-passed);
}
.session-card.status-failed .session-status-indicator {
    background-color: var(--status-failed);
}
.session-card.status-0 .session-status-indicator {
    background-color: var(--status-incomplete);
}

.session-details {
    flex-grow: 1;
}
.session-project {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-light);
    display: block;
    margin-bottom: 0.25rem;
}
.session-description {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    color: var(--text-dark);
}
.session-meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.9rem;
    color: var(--text-light);
}
.session-meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.tester-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--text-light);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.8rem;
}

.session-device-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--text-dark);
    min-width: 180px;
}
.session-device-info i {
    font-size: 1.5rem;
    color: var(--text-light);
}

.session-result {
    min-width: 120px;
    text-align: right;
}

.session-actions {
    position: relative;
}
.actions-menu-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--text-light);
    transition: background-color 0.2s;
}
.actions-menu-btn:hover {
    background-color: var(--bg-dark-contrast);
}
.actions-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    z-index: 10;
    width: 200px;
    padding: 0.5rem 0;
}
.actions-dropdown a, .actions-dropdown button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    color: var(--text-dark);
    text-decoration: none;
    font-size: 0.95rem;
    transition: background-color 0.2s;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
}
.actions-dropdown a:hover, .actions-dropdown button:hover {
    background-color: var(--bg-light);
}
.actions-dropdown hr { margin: 0.5rem 0; }
.action-delete { color: var(--primary-red); }

.session-card-expansion {
    background-color: var(--bg-light);
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid var(--border-color);
}
.expansion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}
.expansion-grid strong {
    font-weight: 700;
    color: var(--text-dark);
    display: block;
    margin-bottom: 0.5rem;
}
.expansion-grid p, .expansion-grid ul {
    color: var(--text-light);
    font-size: 0.95rem;
    margin: 0;
}
.expansion-grid ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.expansion-grid ul li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sessions-history-footer {
    margin-top: 1.5rem;
}

/* --- END: MODERN TEST SESSIONS PAGE --- */


/* --- START: Added styles for TestSessionDetailsPage --- */
.session-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.session-details-title {
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
}
.session-details-title strong {
    color: var(--primary-red);
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 1.5rem;
}

.info-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.info-card.full-width {
    grid-column: 1 / -1;
}

.info-card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-light);
}
.info-card-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}

.info-card-body {
    padding: 1.5rem;
    flex-grow: 1;
}

.info-list {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 1rem;
}
.info-list dt {
    font-weight: 500;
    color: var(--text-light);
}
.info-list dd {
    font-weight: 500;
    color: var(--text-dark);
    word-break: break-word;
}
.info-list dd textarea {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.5rem;
    font-family: inherit;
    background-color: var(--bg-dark-contrast);
    resize: none;
}
.details-device-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.details-device-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: var(--border-radius);
    background-color: var(--bg-light);
}
.details-device-list i { font-size: 2rem; }
.details-device-list .device-info { display: flex; flex-direction: column; }
.details-device-list .device-info strong { font-weight: 700; }
.details-device-list .device-info span { font-size: 0.9rem; color: var(--text-light); }

.table-container {
    overflow-x: auto;
}
.table-container table {
    width: 100%;
    border-collapse: collapse;
}
.table-container th, .table-container td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}
.table-container th {
    font-weight: 700;
    color: var(--text-light);
    font-size: 0.85rem;
    text-transform: uppercase;
    background-color: var(--bg-light);
}
.artifact-placeholder {
    text-align: center;
    color: var(--text-light);
    padding: 2rem;
}
.artifact-placeholder i {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    display: block;
}

.details-artifacts-content {
    padding: 1.5rem;
    min-height: 200px;
    display: flex;
    flex-direction: column;
}

/* Media Gallery in Details Page */
.media-gallery .media-thumbnail-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: white;
    padding: 1.5rem 0.5rem 0.5rem;
    font-size: 0.8rem;
    text-align: left;
    opacity: 0;
    transition: opacity 0.2s;
}
.media-gallery .media-thumbnail:hover .media-thumbnail-overlay {
    opacity: 1;
}
.media-gallery .media-thumbnail-overlay span {
    font-weight: 700;
    display: block;
}
.media-gallery .media-thumbnail-overlay small {
    font-size: 0.75rem;
}


/* Log Viewer in Details Page */
.details-log-viewer {
    display: flex;
    flex-direction: column;
    height: 400px;
    gap: 1rem;
}
.details-log-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-shrink: 0;
}
.details-log-controls input {
    flex-grow: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 0.9rem;
}
.details-log-output {
    flex-grow: 1;
    background: var(--bg-dark);
    color: var(--text-white);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8rem;
    padding: 0.5rem;
    border-radius: var(--border-radius);
    overflow-y: auto;
}

.session-card-expansion .artifact-summary {
    display: flex;
    gap: 1.5rem;
    font-style: normal;
    font-weight: 500;
}
.session-card-expansion .artifact-summary span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* --- END: Added styles for TestSessionDetailsPage --- */

/* --- START: Added responsive styles for Auth Page --- */
@media (max-width: 992px) {
    .signup-layout {
        grid-template-columns: 1fr;
    }
    .signup-promo {
        display: none;
    }
    .auth-wrapper.signup-view .auth-card {
        max-width: 450px;
    }
}
/* --- END: Added responsive styles for Auth Page --- */

/* --- START: REVAMPED APP STORE PAGE --- */
.app-store-main-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.app-store-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.app-store-header .header-text h1 { font-size: 1.75rem; margin-bottom: 0.25rem; }
.app-store-header .header-text p { color: var(--text-light); font-size: 1rem; margin: 0; }
.app-store-header .header-actions { display: flex; align-items: center; gap: 1rem; }
.app-store-header .header-actions .btn-secondary,
.app-store-header .header-actions .btn-primary { padding: 0.6rem 1rem; font-size: 0.9rem; }

.app-store-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    background: var(--bg-white);
    padding: 1rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    box-shadow: var(--box-shadow);
}
.app-store-filter-bar .search-bar {
    max-width: 300px;
}

.app-store-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}
.app-card-modern {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
}
.app-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(45, 55, 72, 0.12);
}
.app-card-platform-indicator {
    position: absolute;
    top: 0; left: 0;
    width: 5px; height: 100%;
}
.app-card-platform-indicator[data-platform="android"] { background-color: var(--status-available); }
.app-card-platform-indicator[data-platform="ios"] { background-color: var(--text-light); }

.app-card-modern .app-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
.app-card-modern .app-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    flex-shrink: 0;
}
.app-card-modern .app-title { flex-grow: 1; }
.app-card-modern .app-title h4 { font-size: 1.1rem; margin: 0; }
.app-card-modern .app-title span { font-size: 0.9rem; color: var(--text-light); }

.app-card-modern .app-card-body {
    padding: 1rem 1.5rem;
    flex-grow: 1;
}
.app-card-modern .app-description {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 1rem;
    height: 3.6em;
    overflow: hidden;
    line-height: 1.2em;
}
.app-card-modern .app-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
}
.app-card-modern .app-meta span { display: flex; align-items: center; gap: 0.5rem; }
.app-card-modern .app-meta i { font-size: 1.2rem; color: var(--text-light); }
.app-card-modern .cicd-badge {
    margin-top: 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    background-color: #EBF8FF;
    color: var(--primary-blue);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.app-card-modern .app-card-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-light);
}
.btn-icon-only {
    width: 36px; height: 36px;
    padding: 0;
}
.app-card-modern .app-card-footer .btn-primary { padding: 0.5rem 1rem; font-size: 0.9rem; }
.app-store-empty-state { text-align: center; color: var(--text-light); padding: 4rem; grid-column: 1 / -1; }
.app-store-empty-state i { font-size: 3rem; margin-bottom: 1rem; }

/* Upload App Modal */
.upload-modal-content { max-width: 700px; }
.upload-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.upload-form-grid .form-group { margin-bottom: 0; }
.upload-form-grid .form-group.span-2 { grid-column: span 2; }
.upload-form-grid .form-group input, .upload-form-grid .form-group select, .upload-form-grid .form-group textarea { width: 100%; padding: 0.6rem; }
.upload-dropzone {
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
    padding: 2rem;
    text-align: center;
    background-color: var(--bg-light);
    transition: all 0.2s;
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.5rem;
}
.upload-dropzone.active, .upload-dropzone:hover { border-color: var(--primary-blue); background-color: #EBF8FF; }
.upload-dropzone i { font-size: 2.5rem; color: var(--primary-blue); }
.upload-dropzone span { font-weight: 500; color: var(--text-dark); }
.upload-dropzone small { font-size: 0.8rem; color: var(--text-light); }

/* Install App Modal */
.install-modal-content { max-width: 500px; }
.install-device-list { list-style: none; padding: 0; max-height: 40vh; overflow-y: auto; border: 1px solid var(--border-color); border-radius: var(--border-radius); }
.install-device-list li { display: flex; align-items: center; gap: 1rem; padding: 0.75rem; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background-color 0.2s; }
.install-device-list li:last-child { border-bottom: none; }
.install-device-list li:hover { background-color: var(--bg-light); }
.install-device-list li.selected { background-color: #EBF8FF; }
.install-device-list li i { font-size: 1.5rem; }
.install-device-list li .install-device-info { flex-grow: 1; }
.install-device-list li .install-device-info span { font-weight: 500; }
.install-device-list li .install-device-info small { color: var(--text-light); }
.install-device-list li.no-devices { justify-content: center; cursor: default; }

/* --- END: REVAMPED APP STORE PAGE --- */

/* --- START: Profile & Settings Page --- */
.settings-page-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.settings-tabs-container {
    background-color: var(--bg-white);
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
.settings-tabs .nav-tab {
    padding: 1rem 0.5rem;
    margin-right: 2rem;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
}
.settings-tab-content {
    padding: 1.5rem;
}
.settings-content {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 2rem;
    max-width: 800px;
    margin: 0 auto;
}
.profile-avatar-section {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}
.profile-avatar-wrapper {
    position: relative;
}
.profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: var(--primary-red);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 3rem;
    border: 4px solid var(--bg-white);
    box-shadow: 0 0 0 2px var(--border-color);
}
.edit-avatar-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    box-shadow: var(--box-shadow);
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.5rem;
    transition: all 0.2s;
}
.edit-avatar-btn:hover:not(:disabled) {
    background-color: var(--primary-blue);
    color: white;
}
.edit-avatar-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
.profile-form {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 1.5rem;
    align-items: center;
}
.profile-form label {
    font-weight: 500;
    text-align: right;
    color: var(--text-light);
}
.profile-form input {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}
.profile-form .profile-form-static-value {
    font-weight: 500;
    padding: 0.6rem 0;
}
.profile-form .profile-form-actions {
    grid-column: 2 / 3;
    display: flex;
    justify-content: flex-start;
}
.profile-form .btn-update {
    background-color: var(--text-dark);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
}
.profile-form .btn-update:hover:not(:disabled) {
    background-color: #000;
}
.profile-form .btn-update:disabled {
    background-color: var(--text-light);
    cursor: not-allowed;
}
.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.password-toggle-btn {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--text-light);
}
.password-hint {
    grid-column: 2 / 3;
    font-size: 0.85rem;
    color: var(--text-light);
    margin-top: -1rem;
}
/* --- END: Profile & Settings Page --- */

/* --- START: Danger Zone for Profile Page --- */
.danger-zone {
    margin-top: 2rem;
    border: 2px solid var(--primary-red);
    border-radius: var(--border-radius);
    background-color: #FFF5F5;
}
.danger-zone-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #FED7D7;
}
.danger-zone-header h4 {
    margin: 0;
    color: var(--primary-red-dark);
    font-size: 1.1rem;
}
.danger-zone-content {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.danger-zone-content p {
    color: var(--text-light);
    margin: 0.25rem 0 0;
    max-width: 400px;
}
.danger-zone-content strong {
    color: var(--text-dark);
}
/* --- END: Danger Zone for Profile Page --- */


/* --- START: Test Case Library --- */
.test-case-library-layout {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 1.5rem;
    flex-grow: 1; 
    min-height: 0; /* flexbox/grid fix */
}

.library-sidebar, .library-main-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.library-panel {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.library-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.library-panel-header h2 {
    font-size: 1.1rem;
}
.library-panel-header .header-actions {
    display: flex;
    gap: 0.5rem;
}

.integration-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-light);
}
.integration-header .meta {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
}
.integration-actions { display: flex; gap: 0.25rem; }
.integration-actions button {
    width: 28px; height: 28px;
    border-radius: 50%; border: none; background: transparent;
    cursor: pointer; font-size: 1.5rem; color: var(--text-light);
}
.integration-actions button:hover { background: var(--bg-dark-contrast); }


.library-panel-body {
    padding: 0.5rem;
    overflow-y: auto;
    flex-grow: 1;
}

/* Project/Group List */
.library-panel-body ul {
    list-style: none;
    padding: 0;
}
.project-header, .test-group-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: 500;
}
.project-header:hover, .test-group-item:hover {
    background-color: var(--bg-light);
}

.project-header.selected, .test-group-item.selected {
    background-color: #FEE2E2; /* Light red */
    color: var(--primary-red-dark);
    font-weight: 700;
}
.project-header.selected .item-count,
.test-group-item.selected .item-count {
    background-color: var(--primary-red);
    color: white;
}
.project-header.selected .item-actions button,
.test-group-item.selected .item-actions button {
    color: var(--primary-red-dark);
}
.project-header.selected .item-actions button:hover,
.test-group-item.selected .item-actions button:hover {
    background-color: rgba(216, 61, 61, 0.2);
}

.project-header i { font-size: 1.25rem; }

.test-group-list {
    margin-left: 2rem;
    padding-left: 1rem;
    border-left: 1px solid var(--border-color);
}
.no-groups-message {
    padding: 0.6rem;
    font-size: 0.9rem;
    color: var(--text-light);
    font-style: italic;
}

.item-actions { display: none; }
.project-header:hover .item-actions,
.test-group-item:hover .item-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.item-actions button {
    background: none; border: none; cursor: pointer;
    color: var(--text-light);
    width: 28px; height: 28px; border-radius: 50%;
}
.item-actions button:hover { background-color: var(--bg-dark-contrast); }

.item-count {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-light);
    background-color: var(--bg-dark-contrast);
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    margin-left: auto;
}

/* Source Badges */
.source-badge {
    font-size: 1rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-weight: 700;
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.source-badge.source-jira { background-color: #0052CC; }
.source-badge.source-azure { background-color: #0078D4; }


/* Test Case List */
.test-case-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.breadcrumb-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-light);
}
.breadcrumb-header .breadcrumb-item {
    color: var(--text-dark);
}
.breadcrumb-header .breadcrumb-link {
    color: var(--text-light);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s;
}
.breadcrumb-header .breadcrumb-link:hover {
    color: var(--primary-red);
}
.breadcrumb-header .breadcrumb-item.active, .breadcrumb-header .breadcrumb-link.active {
    color: var(--text-dark);
}

.test-case-filters {
    display: flex;
    gap: 1rem;
    padding: 0.5rem;
    margin-bottom: 1rem;
}

.test-case-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.test-case-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
}
.test-case-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-light);
}
.test-case-card-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
}
.test-case-card-body {
    padding: 1rem;
    flex-grow: 1;
    font-size: 0.9rem;
    color: var(--text-light);
}
.test-case-card-body p {
    margin: 0;
}
.test-case-card .card-tags {
    justify-content: flex-start;
}
.test-case-card-footer {
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.85rem;
    color: var(--text-light);
}
.bug-id-badge {
    margin-top: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    background-color: #FFFBEB;
    color: #B7791F;
    border: 1px solid #F6E05E;
    border-radius: var(--border-radius);
    font-weight: 500;
    font-size: 0.8rem;
}
.priority-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.6rem;
    border-radius: 10px;
    border: 1px solid;
    text-transform: uppercase;
}
.priority-badge.priority-high { color: #C53030; background-color: #FED7D7; border-color: #FC8181; }
.priority-badge.priority-medium { color: #B7791F; background-color: #FEFCBF; border-color: #F6E05E; }
.priority-badge.priority-low { color: #2F855A; background-color: #C6F6D5; border-color: #68D391; }


/* Dynamic Steps in TestCaseModal */
.dynamic-steps-list { display: flex; flex-direction: column; gap: 0.5rem; }
.step-input-group { display: flex; align-items: center; gap: 0.5rem; }
.step-input-group input { flex-grow: 1; }
.step-input-group .btn-secondary {
    width: 36px; height: 36px; padding: 0;
    flex-shrink: 0; font-size: 1.5rem;
}

/* AI Generator Modal */
.ai-generator-modal {
    max-width: 600px;
}
.ai-generator-modal .hint {
    font-size: 0.9rem;
    color: var(--text-light);
    margin: -0.25rem 0 0.5rem;
}
.generated-cases-container {
    margin-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
}
.generated-cases-container h4 {
    margin-bottom: 0.5rem;
}
/* Re-use test case list style from another modal */
.generated-cases-container .test-case-list {
    max-height: 25vh;
}
/* --- END: Test Case Library --- */

/* --- START: New Test Case Empty State --- */
.test-case-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
    height: 100%;
    background-color: var(--bg-light);
}
.test-case-empty-state i {
    font-size: 4rem;
    color: var(--border-color);
    margin-bottom: 1rem;
}
.test-case-empty-state h3 {
    font-size: 1.5rem;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}
.test-case-empty-state p {
    color: var(--text-light);
    margin-bottom: 1.5rem;
    max-width: 400px;
}
.empty-state-actions {
    display: flex;
    gap: 1rem;
}
/* --- END: New Test Case Empty State --- */


/* Subscription Page */
.subscription-page-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: flex-start;
}
.current-plan-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
}
.current-plan-card h3 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    text-align: center;
}
.subscription-details-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.subscription-content-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
}
.subscription-content-card h3 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.billing-info-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    align-items: center;
}
.payment-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.card-brand-logo { height: 24px; }
.card-details span { display: block; }
.card-details small { color: var(--text-light); }
.stripe-compliance {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-light);
}
.stripe-compliance i { font-size: 1.5rem; }
.stripe-logo { height: 20px; margin-left: auto; }
.subscription-plans {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.subscription-card {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    text-align: center;
}
.subscription-card.popular { border-color: var(--primary-red); }
.subscription-card .plan-subtitle {
    font-size: 0.8rem;
    color: var(--text-light);
    text-transform: uppercase;
    font-weight: 700;
}
.subscription-card .plan-price {
    font-size: 1.5rem;
    font-weight: 700;
    display: block;
    margin: 0.5rem 0;
}
.plan-features {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.plan-features li i {
    color: var(--status-passed);
    font-size: 1.25rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* User Management */
.user-management-page {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}
.user-management-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
.user-management-table-container { overflow-x: auto; }
.user-management-table {
    width: 100%;
    border-collapse: collapse;
}
.user-management-table th, .user-management-table td {
    padding: 1rem 1.5rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}
.user-management-table th { font-weight: 700; }
.user-management-table tr:last-child td { border-bottom: none; }
.user-management-table .actions-cell { display: flex; gap: 0.5rem; }
.no-data-message {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem;
    color: var(--text-light);
}
.no-data-message i { font-size: 1.5rem; }

/* Super Admin Page */
.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.kpi-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
}
.kpi-card .kpi-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}
.kpi-card .kpi-value {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-dark);
}
.kpi-card .kpi-change {
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.kpi-card .kpi-change.positive { color: var(--status-passed); }
.kpi-card .kpi-change.negative { color: var(--status-failed); }

.admin-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    align-items: flex-start;
}
.admin-grid .full-width {
    grid-column: 1 / -1;
}

.cohort-table-container {
    overflow-x: auto;
}
.cohort-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    text-align: center;
}
.cohort-table th, .cohort-table td {
    padding: 0.75rem 0.5rem;
    border: 1px solid var(--border-color);
}
.cohort-table th {
    background: var(--bg-light);
    font-weight: 700;
}
.cohort-table td {
    background: var(--bg-white);
}
.cohort-table .cohort-label {
    background: var(--bg-light);
    font-weight: 700;
    text-align: left;
}

.ai-insights-card {
    background-image: linear-gradient(45deg, #f9fafb, #eef2ff);
    border: 1px solid var(--primary-blue);
}
.ai-insights-card h3 {
    color: var(--primary-blue-dark);
}
.ai-insights-card .btn-primary {
    background-color: var(--primary-blue);
}
.ai-insights-card .btn-primary:hover {
    background-color: var(--primary-blue-dark);
}
.ai-insights-card pre {
    white-space: pre-wrap;
    background-color: rgba(255,255,255,0.5);
    padding: 1rem;
    border-radius: var(--border-radius);
    line-height: 1.6;
    max-height: 300px;
    overflow-y: auto;
    font-family: inherit;
    font-size: 0.95rem;
}
.ai-insights-card .loading-state {
    text-align: center;
    color: var(--text-light);
}

.chart-container {
    height: 300px;
}

/* --- Help Page --- */
.help-page-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.help-intro {
    font-size: 1.1rem;
    color: var(--text-light);
    max-width: 800px;
    margin-bottom: 1rem;
}
.help-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}
.help-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
.help-card-header i {
    font-size: 2.5rem;
    color: var(--primary-red);
}
.help-card.byod-card .help-card-header i { color: var(--primary-blue); }
.help-card.community-card .help-card-header i { color: var(--status-available); }
.help-card-header h3 {
    font-size: 1.5rem;
    margin: 0;
}
.help-card-body {
    padding: 1.5rem;
    line-height: 1.7;
}
.help-card-body p {
    margin-bottom: 1rem;
}
.help-card-body ul, .help-card-body ol {
    margin-left: 1.5rem;
    padding-left: 1rem;
}
.help-card-body ul li, .help-card-body ol li {
    margin-bottom: 0.75rem;
}
.help-card-body h4 {
    font-size: 1.1rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}
.help-steps li::marker {
    font-weight: 700;
}

/* --- Button Variants --- */
.btn-accent {
    background-color: var(--primary-blue);
    color: white;
    border: none;
    padding: 0.75rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.btn-accent:hover:not(:disabled) {
    background-color: var(--primary-blue-dark);
}
.btn-accent:disabled {
    background-color: var(--text-light);
    cursor: not-allowed;
}

/* --- START: API KEY MANAGEMENT ENHANCEMENTS --- */
.form-group .hint {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-top: 0.25rem;
}
.new-key-display-container {
    padding: 1rem 1.5rem;
    background-color: #FFF5F5; /* Light Red */
    border: 1px solid #FED7D7; /* Medium Red */
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
}
.new-key-display-container strong {
    color: var(--primary-red-dark);
    display: block;
    margin-bottom: 0.75rem;
    font-size: 1.05rem;
}
.new-key-display {
    background-color: var(--bg-light);
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 500;
}
.new-key-display code {
    word-break: break-all; /* Prevents overflow and scrollbar */
    flex-grow: 1;
    line-height: 1.4;
}
.new-key-display .copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem; /* Aligned with text */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-family); /* Use main font for button text */
    font-weight: 700;
    color: var(--primary-blue);
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius);
    transition: all 0.2s;
    flex-shrink: 0; /* Prevents button from shrinking */
}
.new-key-display .copy-btn:hover {
    background-color: var(--bg-dark-contrast);
}
.new-key-display .copy-btn.copied {
    color: var(--status-available);
}
/* --- END: API KEY MANAGEMENT ENHANCEMENTS --- */

/* --- Upload App Modal Enhancements --- */
.upload-dropzone.parsing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--bg-light);
    color: var(--text-light);
}

.uploaded-file-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--bg-light);
}

.uploaded-file-info i {
    font-size: 2.5rem;
    color: var(--primary-blue);
}

.uploaded-file-info .file-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.uploaded-file-info .file-details span {
    font-weight: 500;
    color: var(--text-dark);
}

.uploaded-file-info .file-details small {
    font-size: 0.9rem;
    color: var(--text-light);
}

.uploaded-file-info .btn-secondary {
    padding: 0.5rem 1rem;
}

/* --- Integration Import Modal Styles --- */
.import-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 0.5rem;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}
.import-list-item:hover {
    background-color: var(--bg-light);
    border-color: var(--primary-blue);
    transform: translateX(3px);
}
.import-list-item i {
    font-size: 1.5rem;
}

/* Toast Notifications */
.toast-container {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.toast {
    background-color: var(--bg-dark);
    color: var(--text-white);
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: slideIn 0.3s forwards;
    min-width: 250px;
}
.toast i {
    font-size: 1.5rem;
}
.toast.toast-success i { color: var(--status-available); }
.toast.toast-info i { color: var(--primary-blue); }
.toast.toast-error i { color: var(--primary-red); }

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Alpha Release Banner */
.alpha-banner {
    background-color: #FFFBEB; /* Light yellow */
    color: #B7791F; /* Dark yellow/brown */
    padding: 0.75rem 1.5rem;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 500;
    border-bottom: 1px solid #F6E05E;
    width: 100%;
    z-index: 1500; /* High z-index to be on top */
    flex-shrink: 0;
}

.alpha-banner a {
    color: #0052CC; /* A blue link color */
    font-weight: 700;
    text-decoration: none;
}

.alpha-banner a:hover {
    text-decoration: underline;
}