/* --- ARIAS ALPHA: COMMAND CONSOLE THEME v5.0 --- */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Titillium+Web:wght@300;400;700&display=swap');

:root {
    --gold: #D4AF37;
    --gold-dim: rgba(212, 175, 55, 0.15);
    --gold-glow: rgba(212, 175, 55, 0.6); 
    --secondary-yellow: #FFD700;
    --black-bg: #000000;
    --panel-bg: rgba(12, 12, 12, 0.95);
    --border-color: #333;
    --status-green: #00ff41;
    --status-red: #ff3333;
}

* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }

/* --- CRITICAL VIEWPORT FIXES --- */
html {
    background-color: #000000 !important; /* Paint the canvas black */
    height: 100%;
    overflow: hidden;
}

body {
    background-color: var(--black-bg);
    color: white;
    font-family: 'Titillium Web', sans-serif;
    
    /* USE DYNAMIC VIEWPORT HEIGHT */
    /* This accounts for the nav bar appearing/disappearing */
    height: 100dvh; 
    width: 100vw;
    
    /* Fixed Gradient */
    background-image: radial-gradient(circle at 50% 50%, #111 0%, #000 100%);
    background-attachment: fixed; /* Ensures gradient doesn't scroll */
    
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* --- ORB ANIMATION --- */
@keyframes orb-trace {
    0%   { top: -3px; left: -3px; opacity: 1; }
    24%  { top: -3px; left: calc(100% - 3px); opacity: 1; }
    25%  { top: -3px; left: calc(100% - 3px); opacity: 0; }
    26%  { top: -3px; left: calc(100% - 3px); opacity: 1; }
    49%  { top: calc(100% - 3px); left: calc(100% - 3px); opacity: 1; }
    50%  { top: calc(100% - 3px); left: calc(100% - 3px); opacity: 0; }
    51%  { top: calc(100% - 3px); left: calc(100% - 3px); opacity: 1; }
    74%  { top: calc(100% - 3px); left: -3px; opacity: 1; }
    75%  { top: calc(100% - 3px); left: -3px; opacity: 0; }
    76%  { top: calc(100% - 3px); left: -3px; opacity: 1; }
    99%  { top: -3px; left: -3px; opacity: 1; }
    100% { top: -3px; left: -3px; opacity: 0; }
}

/* --- MAIN LAYOUT WRAPPER --- */
.console-wrapper {
    display: flex; flex-direction: column; 
    height: 100%; width: 100%;
    
    /* Safe Area Padding Applied HERE, not on body */
    padding-top: env(safe-area-inset-top, 0px);
    padding-right: env(safe-area-inset-right, 1rem);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 1rem);
    
    /* Add standard padding */
    padding: 1rem;

    opacity: 0.2; transition: opacity 1s; pointer-events: none;
    overflow: hidden;
}
.console-active { opacity: 1; pointer-events: all; }

header {
    flex-shrink: 0; display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--gold-dim); padding-bottom: 0.5rem; margin-bottom: 1rem;
}
.header-controls { display: flex; gap: 1rem; align-items: center; }

/* --- SCROLLABLE GRID AREA --- */
.console-grid {
    flex: 1; 
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch;
    display: grid; grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(300px, auto); gap: 15px;
    
    padding-bottom: 50px; 
    scrollbar-width: thin; scrollbar-color: var(--gold-dim) transparent;
}

/* --- MODULE CARD --- */
.module, .login-console {
    background: var(--panel-bg); border: 1px solid rgba(255,255,255,0.1);
    position: relative; display: flex; flex-direction: column;
    transition: all 0.2s; overflow: hidden;
}

.module::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
    background: var(--gold); box-shadow: 0 0 15px var(--gold);
    transform: scaleX(0); transform-origin: left; transition: transform 0.3s; z-index: 5;
}
.module:hover::before { transform: scaleX(1); }

.module::after, .login-console::after {
    content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 8px 2px var(--secondary-yellow);
    z-index: 20; animation: orb-trace 8s infinite linear; pointer-events: none;
}
.module:nth-child(1)::after { animation-delay: 0s; }
.module:nth-child(2)::after { animation-delay: 4s; }
.module:nth-child(3)::after { animation-delay: 8s; }
.module:nth-child(4)::after { animation-delay: 2s; }
.module:nth-child(5)::after { animation-delay: 6s; }

.module:hover { border-color: rgba(212, 175, 55, 0.6); box-shadow: 0 0 25px rgba(212, 175, 55, 0.15); }

.mod-header {
    padding: 10px 15px; background: rgba(255,255,255,0.03);
    display: flex; justify-content: space-between; align-items: center; cursor: grab;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mod-header:active { cursor: grabbing; }

.mod-title {
    font-family: 'Rajdhani', sans-serif; text-transform: uppercase; letter-spacing: 1px;
    color: var(--gold); font-weight: 700; display: flex; align-items: center; gap: 10px;
    text-shadow: 0 0 5px rgba(212, 175, 55, 0.3);
}
.mod-body {
    flex: 1; padding: 15px; color: #ccc; font-size: 0.9rem;
    display: flex; flex-direction: column; font-family: 'Titillium Web', sans-serif;
    overflow: hidden;
}

.action-btn {
    margin-top: auto; background: transparent; border: 1px solid var(--gold-dim);
    color: var(--gold); padding: 8px; font-family: 'Rajdhani'; text-transform: uppercase;
    cursor: pointer; transition: 0.2s; text-align: center; text-decoration: none; display: block;
}
.action-btn:hover { background: var(--gold-dim); letter-spacing: 2px; color: white; box-shadow: 0 0 10px var(--gold-dim); }

.header-btn {
    background: transparent; border: 1px solid var(--gold-dim); color: var(--gold);
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: 0.3s; border-radius: 4px; 
}
.header-btn:hover { background: var(--gold-dim); box-shadow: 0 0 15px var(--gold-dim); border-color: var(--gold); color: white; }
.header-btn.active { background: var(--gold); color: black; box-shadow: 0 0 15px var(--gold); }
.header-btn.logout-btn:hover { border-color: #ff3333; color: #ff3333; background: rgba(255, 51, 51, 0.1); box-shadow: 0 0 15px rgba(255, 51, 51, 0.2); }

.span-2-col { grid-column: span 2; }
.span-2-row { grid-row: span 2; }
.hidden { display: none !important; }

#init-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; z-index: 9999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    cursor: pointer;
}

.svc-badge { position: relative; min-width: 60px; justify-content: flex-end; padding-bottom: 5px; }
.svc-count-input {
    background: transparent; border: 1px solid transparent; border-bottom: 1px solid;
    font-family: 'Rajdhani'; font-weight: bold; font-size: 1.1rem; text-align: center;
    width: 40px; margin-top: 2px; padding: 0;
}
.svc-count-input:focus { outline: none; background: rgba(255,255,255,0.1); }
.svc-count-read { font-family: 'Rajdhani'; font-weight: bold; font-size: 1.2rem; margin-top: 2px; border-bottom: 1px solid transparent; }

/* --- RESPONSIVE / MOBILE MODE --- */
@media (max-width: 1100px) {
    .console-wrapper { padding: 0.5rem; }
    
    .console-grid {
        display: flex;       
        flex-direction: column; 
        padding-bottom: 150px; /* Increased padding to clear nav bar */
    }
    
    .module {
        min-height: auto; flex-shrink: 0; margin-bottom: 15px; min-height: 200px;
    }
    
    /* REORDERING */
    #mod-tasks  { order: 1; } 
    #mod-aria   { order: 2; } 
    #mod-deploy { order: 3; } 
    #mod-users  { order: 4; } 
    #mod-fleet  { order: 5; } 

    .span-2-col, .span-2-row { grid-column: auto; grid-row: auto; }

    header { flex-direction: column; gap: 10px; text-align: center; }
    .header-controls { width: 100%; justify-content: center; }
}

/* --- TABLE ACTION BUTTONS (MINI) --- */
.action-btn.mini {
    padding: 4px 8px;
    font-size: 0.7rem;
    border-width: 1px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(0,0,0,0.3);
}
.action-btn.mini:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 8px currentColor; /* Glows with its own text color */
}

/* Button Variants */
.btn-blue { border-color: #00d2ff; color: #00d2ff; }
.btn-gold { border-color: var(--gold); color: var(--gold); }
.btn-orange { border-color: #fd7e14; color: #fd7e14; }
.btn-red { border-color: #ff3333; color: #ff3333; }

.action-btn:disabled {
    border-color: #444 !important;
    color: #666 !important;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.5;
}