/* Material Design 3 - Light Theme Styling */

:root {
    --md-sys-color-primary: #6750A4;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #EADDFF;
    --md-sys-color-on-primary-container: #21005D;
    --md-sys-color-secondary: #625B71;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #E8DEF8;
    --md-sys-color-on-secondary-container: #1D192B;
    --md-sys-color-surface: #FEF7FF;
    --md-sys-color-on-surface: #1D1B20;
    --md-sys-color-surface-variant: #E7E0EC;
    --md-sys-color-on-surface-variant: #49454F;
    --md-sys-color-outline: #79747E;
    --md-sys-color-outline-variant: #CAC4D0;
    --md-sys-color-background: #FEF7FF;
    --md-sys-color-on-background: #1D1B20;
    --md-sys-color-error: #B3261E;
    --md-sys-color-on-error: #FFFFFF;
    --md-sys-color-error-container: #F9DEDC;
    --md-sys-color-on-error-container: #410E0B;
    
    --md-elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
    --md-elevation-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
    --md-elevation-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
    
    --md-shape-small: 8px;
    --md-shape-medium: 12px;
    --md-shape-large: 16px;
    --md-shape-full: 9999px;
    
    --transition-speed: 0.25s;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', 'Outfit', sans-serif;
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Auth View Styles */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: radial-gradient(circle at 80% 20%, #EADDFF 0%, #FEF7FF 60%);
}

.auth-card {
    background: var(--md-sys-color-surface);
    border-radius: var(--md-shape-large);
    box-shadow: var(--md-elevation-2);
    padding: 40px;
    width: 400px;
    max-width: 90%;
    text-align: center;
    border: 1px solid var(--md-sys-color-outline-variant);
    animation: fadeIn 0.5s ease-out;
}

.auth-card .logo-container {
    width: 80px;
    height: 80px;
    background-color: var(--md-sys-color-primary-container);
    border-radius: var(--md-shape-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px auto;
}

.auth-card .logo-container span {
    font-size: 48px;
    color: var(--md-sys-color-on-primary-container);
}

.auth-card h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    margin-bottom: 8px;
}

.auth-card p {
    font-size: 14px;
    color: var(--md-sys-color-on-surface-variant);
    margin-bottom: 32px;
}

.auth-card #google-signin-btn {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

/* App Layout Styles */
.app-container {
    display: flex; /* Shown after auth */
    flex: 1;
    flex-direction: column;
    height: 100vh;
    position: relative;
}

/* Top App Bar */
.top-app-bar {
    height: 64px;
    background-color: var(--md-sys-color-surface);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    display: flex;
    align-items: center;
    padding: 0 16px;
    justify-content: space-between;
    z-index: 10;
}

.top-app-bar .left-section {
    display: flex;
    align-items: center;
    gap: 16px;
}

.top-app-bar h2 {
    font-size: 20px;
    font-weight: 500;
}

.icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: var(--md-shape-full);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--md-sys-color-on-surface);
    transition: background-color var(--transition-speed);
}

.icon-btn:hover {
    background-color: var(--md-sys-color-surface-variant);
}

.top-app-bar .right-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-profile-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border-radius: var(--md-shape-full);
    background-color: var(--md-sys-color-surface-variant);
}

.user-profile-summary img {
    width: 32px;
    height: 32px;
    border-radius: var(--md-shape-full);
}

.user-profile-summary .user-name {
    font-size: 14px;
    font-weight: 500;
}

/* Proxy Banner */
.proxy-banner {
    background-color: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-weight: 500;
    font-size: 14px;
    border-bottom: 1px solid var(--md-sys-color-error);
    animation: slideDown 0.3s ease-out;
}

.proxy-banner button {
    background-color: var(--md-sys-color-error);
    color: var(--md-sys-color-on-error);
    border: none;
    padding: 4px 12px;
    border-radius: var(--md-shape-full);
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: opacity var(--transition-speed);
}

.proxy-banner button:hover {
    opacity: 0.9;
}

/* Main Workspace */
.main-workspace {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* Navigation Drawer */
.nav-drawer {
    width: 360px;
    background-color: var(--md-sys-color-surface);
    border-right: 1px solid var(--md-sys-color-outline-variant);
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 4px;
    z-index: 5;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile responsive drawer */
@media (max-width: 900px) {
    .nav-drawer {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        transform: translateX(-100%);
        box-shadow: var(--md-elevation-3);
    }
    .nav-drawer.open {
        transform: translateX(0);
    }
    .drawer-overlay {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.4);
        z-index: 4;
    }
    .drawer-overlay.open {
        display: block;
    }
}

@media (min-width: 901px) {
    .nav-drawer.closed {
        display: none;
    }
}

.drawer-header {
    padding: 16px 12px 8px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
}

.drawer-header-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
    user-select: none;
    border-radius: var(--md-shape-small);
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

.drawer-header-toggle:hover {
    background-color: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface);
}

.drawer-header-toggle .toggle-icon {
    font-size: 20px;
    transition: transform var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Collapsible Nav Sections */
.nav-section-items {
    max-height: 200px; /* Large enough for items */
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
    opacity: 1;
}

.nav-section.collapsed .nav-section-items {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

.nav-section.collapsed .toggle-icon {
    transform: rotate(-90deg); /* Points to the right */
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 56px;
    padding: 0 16px;
    border-radius: var(--md-shape-full);
    text-decoration: none;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

.nav-item:hover {
    background-color: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface);
}

.nav-item.active {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.nav-item .material-symbols-outlined {
    font-size: 24px;
}

.nav-item span:not(.material-symbols-outlined) {
    font-size: 14px;
}

.nav-divider {
    height: 1px;
    background-color: var(--md-sys-color-outline-variant);
    margin: 8px 12px;
}

/* Content Area */
.content-area {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background-color: var(--md-sys-color-background);
}

/* View Components */
.view {
    display: none;
    max-width: 1200px;
    margin: 0 auto;
    animation: fadeIn 0.3s ease-out;
}

.view.active {
    display: block;
}

.view-header {
    margin-bottom: 24px;
}

.view-header h1 {
    font-size: 28px;
    font-weight: 400;
    color: var(--md-sys-color-on-surface);
}

.view-header p {
    font-size: 14px;
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 4px;
}

/* Material MD3 Cards */
.md-card {
    background-color: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-shape-large);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: none;
    transition: box-shadow var(--transition-speed), border-color var(--transition-speed);
}

.md-card:hover {
    box-shadow: var(--md-elevation-1);
    border-color: var(--md-sys-color-outline);
}

.md-card-title {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 16px;
    color: var(--md-sys-color-on-surface);
}

/* Custom MD3 Grid */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

/* Material Input Fields */
.text-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    position: relative;
    width: 100%;
}

.text-field label {
    font-size: 12px;
    font-weight: 500;
    color: var(--md-sys-color-primary);
    margin-bottom: 4px;
}

.text-field input, .text-field select {
    height: 56px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-shape-small);
    padding: 0 16px;
    font-size: 16px;
    background-color: transparent;
    outline: none;
    color: var(--md-sys-color-on-surface);
    transition: border-color var(--transition-speed);
}

.text-field input:focus, .text-field select:focus {
    border-color: var(--md-sys-color-primary);
    border-width: 2px;
}

.text-field input:disabled {
    border-color: var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface-variant);
    background-color: rgba(0,0,0,0.04);
}

/* Password Input Container for Secrets */
.password-input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-container input {
    width: 100%;
    padding-right: 48px;
}

.password-input-container .toggle-eye {
    position: absolute;
    right: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 24px;
    color: var(--md-sys-color-on-surface-variant);
}

/* Material Buttons */
.btn {
    height: 40px;
    padding: 0 24px;
    border-radius: var(--md-shape-full);
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
}

.btn-primary {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.btn-primary:hover {
    background-color: #55408C;
    box-shadow: var(--md-elevation-1);
}

.btn-secondary {
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.btn-secondary:hover {
    background-color: #D6CCE6;
}

.btn-outlined {
    background-color: transparent;
    border: 1px solid var(--md-sys-color-outline);
    color: var(--md-sys-color-primary);
}

.btn-outlined:hover {
    background-color: rgba(103, 80, 164, 0.08);
}

.btn-danger {
    background-color: var(--md-sys-color-error);
    color: var(--md-sys-color-on-error);
}

.btn-danger:hover {
    background-color: #9c1f19;
}

/* User List (Table Accordion) Style */
.user-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-shape-large);
    overflow: hidden;
    background-color: var(--md-sys-color-surface);
}

.user-row-container {
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    transition: background-color var(--transition-speed);
}

.user-row-container:last-child {
    border-bottom: none;
}

.user-row {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    cursor: pointer;
    user-select: none;
    justify-content: space-between;
}

.user-row:hover {
    background-color: var(--md-sys-color-surface-variant);
}

.user-info-main {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--md-shape-full);
    object-fit: cover;
}

.user-details-brief {
    display: flex;
    flex-direction: column;
}

.user-fullname {
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
    font-size: 16px;
}

.user-email-text {
    font-size: 14px;
    color: var(--md-sys-color-on-surface-variant);
}

.user-meta-pills {
    display: flex;
    gap: 8px;
    align-items: center;
}

.pill {
    padding: 4px 12px;
    border-radius: var(--md-shape-full);
    font-size: 12px;
    font-weight: 500;
}

.pill-admin {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.pill-user {
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.pill-active {
    background-color: #C2F0C2;
    color: #006600;
}

.pill-inactive {
    background-color: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
}

.expand-icon {
    font-size: 24px;
    color: var(--md-sys-color-on-surface-variant);
    transition: transform var(--transition-speed);
}

.user-row-container.expanded .expand-icon {
    transform: rotate(180deg);
}

/* Expandable Drawer (Curtain/Dropdown Detail) */
.user-row-drawer {
    max-height: 0;
    overflow: hidden;
    background-color: rgba(243, 240, 248, 0.5);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.user-row-container.expanded .user-row-drawer {
    max-height: 400px; /* Large enough for expanded state */
}

.drawer-content {
    padding: 24px;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

.drawer-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
}

.drawer-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.drawer-info-item {
    display: flex;
    flex-direction: column;
}

.drawer-info-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--md-sys-color-outline);
    margin-bottom: 4px;
}

.drawer-info-value {
    font-size: 14px;
    color: var(--md-sys-color-on-surface);
}

.permissions-summary {
    grid-column: span 2;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-shape-medium);
    padding: 12px;
    margin-top: 8px;
}

.permissions-summary-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--md-sys-color-on-surface-variant);
    margin-bottom: 8px;
}

.permissions-summary-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.permission-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    background-color: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface-variant);
}

.permission-badge.allowed {
    background-color: #D1E7DD;
    color: #0F5132;
}

.permission-badge.denied {
    background-color: #F8D7DA;
    color: #842029;
}

/* Modals */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 20;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease-out;
}

.modal-overlay.open {
    display: flex;
}

.modal-card {
    background-color: var(--md-sys-color-surface);
    border-radius: var(--md-shape-large);
    box-shadow: var(--md-elevation-3);
    width: 600px;
    max-width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    animation: scaleUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-header {
    padding: 24px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    font-size: 22px;
    font-weight: 500;
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Permissions Config Checklist */
.permissions-container {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-shape-medium);
    padding: 16px;
    margin-top: 8px;
}

.module-permission-group {
    margin-bottom: 16px;
}

.module-permission-group:last-child {
    margin-bottom: 0;
}

.module-header-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--md-sys-color-primary);
    margin-bottom: 8px;
}

.options-checklist {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding-left: 8px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--md-sys-color-primary);
}

/* Audit Log Table */
.logs-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}

.logs-table th, .logs-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    font-size: 14px;
}

.logs-table th {
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    background-color: var(--md-sys-color-surface-variant);
}

.logs-table tbody tr:hover {
    background-color: var(--md-sys-color-surface-variant);
}

/* Alerts and feedback toast */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background-color: var(--md-sys-color-on-surface);
    color: var(--md-sys-color-surface);
    padding: 12px 24px;
    border-radius: var(--md-shape-small);
    box-shadow: var(--md-elevation-2);
    font-size: 14px;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.3s, transform 0.3s;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleUp {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* General Layout Adjustments */
.hide {
    display: none !important;
}
.full-width {
    grid-column: span 2;
}

.compliance-info-card {
    background-color: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-shape-large);
    padding: 32px;
    margin-bottom: 24px;
}

.compliance-info-card h2 {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 12px;
    color: var(--md-sys-color-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.compliance-info-card p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--md-sys-color-on-surface-variant);
    margin-bottom: 16px;
}

.compliance-checklist {
    list-style: none;
    margin-top: 20px;
}

.compliance-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 14px;
}

.compliance-checklist li span.material-symbols-outlined {
    color: #0F5132;
    font-weight: bold;
}

/* Header title with icon layout */
.header-title-with-icon {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-icon {
    font-size: 24px;
    color: var(--md-sys-color-on-surface-variant);
}

/* Narrow Mini Drawer Styles on Desktop */
@media (min-width: 901px) {
    /* Set transitioning drawer width */
    .nav-drawer {
        width: 280px; /* Standard M3 width */
        transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .nav-drawer.collapsed-narrow {
        width: 80px;
    }
    
    /* Hide text contents and sub-navigation arrow toggles in narrow view */
    .nav-drawer.collapsed-narrow .drawer-header,
    .nav-drawer.collapsed-narrow .nav-divider,
    .nav-drawer.collapsed-narrow .header-text,
    .nav-drawer.collapsed-narrow .toggle-icon,
    .nav-drawer.collapsed-narrow .nav-item span:not(.material-symbols-outlined) {
        display: none !important;
    }
    
    /* Force collapse all submenus in narrow view */
    .nav-drawer.collapsed-narrow .nav-section-items {
        max-height: 0 !important;
        opacity: 0 !important;
        pointer-events: none;
    }
    
    /* Convert header toggles and items into centered circular icon buttons */
    .nav-drawer.collapsed-narrow .drawer-header-toggle,
    .nav-drawer.collapsed-narrow .nav-item {
        justify-content: center;
        padding: 0;
        width: 56px;
        height: 56px;
        margin: 0 auto 8px auto;
        border-radius: var(--md-shape-full);
    }
    
    .nav-drawer.collapsed-narrow .drawer-header-toggle .header-title-with-icon {
        gap: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .nav-drawer.collapsed-narrow .drawer-header-toggle .header-icon {
        margin: 0;
        font-size: 24px;
    }
}