/* =========================================
   LAYOUT.CSS - Login, Dashboard, Modals
   ========================================= */

/* --- LOGIN PAGE --- */
#login-container {
    position: fixed; top: 0; left: 0; 
    width: 100vw; height: 100vh; 
    background-color: var(--bg-primary);
    display: flex; justify-content: center; align-items: center; 
    z-index: 200;
}

.login-box {
    background-color: var(--bg-secondary); 
    padding: 30px; 
    border-radius: 10px; 
    box-shadow: 0 10px 25px var(--shadow);
    width: 90%; max-width: 400px; 
    text-align: center; color: var(--text-primary);
}

.login-box h2 { 
    font-size: 1.5rem; font-weight: bold; 
    color: var(--accent-primary); margin-bottom: 20px; 
}

.login-box input[type="text"], 
.login-box input[type="password"] {
    width: 100%; padding: 12px; margin-bottom: 15px; 
    border: 1px solid var(--border-color); border-radius: 6px; 
    font-size: 1rem; background-color: var(--input-bg);
    color: var(--input-text);
}

.login-box input::placeholder { color: var(--text-muted); }

.login-box button {
    width: 100%; padding: 12px; 
    background-color: var(--accent-primary); 
    color: var(--text-inverse); border: none; border-radius: 6px;
    font-size: 1rem; font-weight: 600; cursor: pointer; 
    transition: background-color 0.2s;
}

.login-box button:hover { background-color: var(--accent-secondary); }

.login-error { 
    color: var(--danger); margin-top: 10px; 
    font-weight: 500; display: none; 
}

/* --- DASHBOARD & CARDS --- */
.dashboard { 
    display: flex; gap: 12px; padding: 12px; 
    justify-content: center; flex-wrap: wrap; 
}

.card {
    background-color: var(--card-bg); 
    width: 200px; height: 120px;
    border-radius: 8px; box-shadow: 0 4px 10px var(--shadow);
    display: flex; flex-direction: column; 
    justify-content: center; align-items: center;
    cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; 
    user-select: none; color: var(--text-primary);
}

.card:hover { transform: translateY(-5px); box-shadow: 0 8px 15px var(--shadow); }
.card-icon { font-size: 32px; margin-bottom: 8px; color: var(--accent-primary); }
.card-title { font-size: 1rem; font-weight: 600; text-align: center; color: var(--text-primary); }

/* --- TOOL MODAL CONTAINER --- */
.tool-container {
    position: fixed; top: 0; left: 0; 
    width: 100vw; height: 100vh;
    background-color: var(--tool-overlay); 
    display: none; justify-content: center; align-items: center;
    z-index: 100; padding: 8px;
}

.tool-container.active { display: flex; }

.tool-content-box {
    width: 100%; max-width: 900px; height: 85vh; 
    background: var(--tool-content-bg);
    padding: 12px; border-radius: 8px; 
    box-shadow: 0 6px 16px var(--shadow);
    transform: scale(0.9); opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    overflow-y: auto; position: relative;
    color: var(--text-primary);
}

.tool-container.active .tool-content-box { transform: scale(1); opacity: 1; }

.close-btn {
    background-color: var(--danger); border: none; 
    color: var(--text-inverse); padding: 7px 12px; 
    border-radius: 6px; font-size: 1rem; cursor: pointer;
    transition: background-color 0.2s; display: flex; 
    align-items: center; justify-content: center;
}
.close-btn:hover { background-color: var(--danger-hover); }

.refresh-btn {
    background: var(--accent-primary); color: var(--text-inverse); 
    padding: 7px 12px; border: none; border-radius: 6px; 
    font-size: 1rem; cursor: pointer; display: flex; 
    align-items: center; justify-content: center;
}
.refresh-btn:hover { background-color: var(--accent-secondary); }