/* ==========================================================
 * PROJECT RECORDS™
 * Copyright (c) 2026 Space Wize Enterprise
 * All rights reserved. 
 * ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Rajdhani:wght@500;700&display=swap');

/* ==========================================================
   1. GLOBAL RESET & BASE LAYOUT
   ========================================================== */
* {
    box-sizing: border-box;
}

html {
    height: auto;
    min-height: 100%;
}

body {
    height: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: 'Rajdhani', sans-serif;
    background-color: #ffffff;
    color: #2b3a4a;
    transition: background-color 0.3s ease;
}

.page-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 20px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#main-app {
    flex: 1;
}

footer {
    flex-shrink: 0;
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    border-top: 3px solid #111;
    font-weight: bold;
    font-size: 0.85rem;
}

/* ==========================================================
   2. TYPOGRAPHY
   ========================================================== */
h1, h2, h3 {
    font-family: 'Share Tech Mono', monospace;
    color: #ff007f; 
    text-shadow: 1px 1px 0px rgba(255, 0, 127, 0.2);
    text-transform: uppercase;
    letter-spacing: 1px;
}

h2 {
    color: #00bfff; 
}

.inline-title { 
    cursor: pointer; 
    display: inline-block; 
    margin-top: 0; 
}

.meta-subtitle { 
    font-size: 12px; 
    color: gray; 
    font-weight: normal; 
}

.timestamp-lbl { 
    font-size: 11px; 
    color: gray; 
}

.frozen-heading { 
    list-style-type: none; 
    font-weight: bold; 
    margin-bottom: 8px; 
}

/* ==========================================================
   3. BUTTONS & CONTROLS
   ========================================================== */
button {
    font-family: 'Share Tech Mono', monospace;
    background: #ffffff;
    border: 2px solid #00bfff;
    color: #00bfff;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s ease;
    text-transform: uppercase;
    box-shadow: 2px 2px 0px #0088cc;
}

button:hover {
    background: #00bfff;
    color: #ffffff;
    box-shadow: 0 0 8px rgba(0, 191, 255, 0.5);
}

#focus-mode-btn {
    background-color: #ffffff !important;
    border-color: #00bfff !important;
    color: #00bfff !important;
    box-shadow: 2px 2px 0px #0088cc !important;
}

#focus-mode-btn:hover {
    background-color: #00bfff !important;
    color: #ffffff !important;
    box-shadow: 0 0 8px rgba(0, 191, 255, 0.5) !important;
}

.file-away-btn { 
    background: #6f42c1; 
    color: white; 
    cursor: pointer; 
    border: none; 
    padding: 6px 10px; 
    border-radius: 4px; 
    width: 100%; 
    font-size: 13px; 
}

.edit-btn { 
    background: #007bff; 
    color: white; 
    cursor: pointer; 
    border: none; 
    padding: 6px 10px; 
    border-radius: 4px; 
    width: 100%; 
    font-size: 13px; 
    font-weight: bold; 
}

.revive-btn { 
    position: absolute; 
    top: 15px; 
    right: 15px; 
    background: #28a745; 
    color: white; 
    border-radius: 4px; 
    padding: 5px 10px; 
    cursor: pointer; 
}

.delete-btn { 
    position: absolute; 
    bottom: 15px; 
    right: 15px; 
    background: #dc3545; 
    color: white; 
    border-radius: 4px; 
    padding: 5px 10px; 
    cursor: pointer; 
}

.logout-control-btn {
    background: #dc3545;
    color: white;
    cursor: pointer;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: bold;
}

.logout-control-btn:hover {
    background: #c82333;
}

#user, #pass {
  width: 200px;
}

/* ==========================================================
   4. INPUTS, FORMS & MODALS
   ========================================================== */
input[type="text"], textarea, select {
    background: #f8f9fa !important;
    border: 2px solid #ced4da !important;
    color: #2b3a4a !important;
    font-family: 'Share Tech Mono', monospace;
    padding: 6px;
    border-radius: 4px;
    width: 95%;
}

input[type="text"]:focus, textarea:focus {
    outline: none;
    border-color: #00bfff !important;
}

.task-checkbox {
    accent-color: #ff007f;
    cursor: pointer;
}

.task-input-group { 
    margin-bottom: 8px; 
}

#project-modal > div {
    background: #ffffff !important;
    border: 3px solid #ff007f !important;
    box-shadow: 0 0 20px rgba(255, 0, 127, 0.2) !important;
    border-radius: 6px !important;
    color: #2b3a4a !important;
}

#dynamic-tasks-container {
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    margin-bottom: 15px;
}

#dynamic-tasks-container::-webkit-scrollbar {
    width: 6px;
}

#dynamic-tasks-container::-webkit-scrollbar-thumb {
    background-color: #bbb;
    border-radius: 4px;
}

#dynamic-tasks-container::-webkit-scrollbar-thumb:hover {
    background-color: #999;
}

/* ==========================================================
   5. PROJECT CARDS & VAULT CARDS
   ========================================================== */
.project-card {
    background: #ffffff !important;
    border: 2px solid #ced4da !important;
    border-radius: 6px !important;
    box-shadow: 4px 4px 0px #adb5bd !important; 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    padding: 15px;
    margin: 15px 0;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.project-card p, .project-card-content {
    word-break: break-word;
    overflow-wrap: break-word;
}

.project-card-content {
    flex-grow: 1;
    padding-right: 140px;
}

.project-card-actions {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 120px;
}

.project-description-box {
    max-height: 220px; /* Adjust height limit as needed */
    overflow-y: auto;
    white-space: pre-wrap; /* Keeps line breaks and spacing intact */
    padding-right: 8px;
}

.vault-card {
    border-color: #999;
    background-color: #e9ecef;
    text-align: left;
    width: 80%;
}

.vault-task-list {
    padding-left: 0;
}

.vault-task-item {
    list-style-type: none;
    padding: 6px 10px;
    margin-bottom: 4px;
    border-radius: 4px;
    border: 1px solid;
}

.vault-task-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.vault-task-fail {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

/* ==========================================================
   6. UI UTILITIES (TOAST & SIDEWAYS BUTTON)
   ========================================================== */
#toast-notification {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background-color: #007bff;
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 6px;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease-in-out;
    pointer-events: none;
}

#toast-notification.toast-visible {
    opacity: 1;
    transform: translateY(0);
}

#back-to-top-btn {
    position: fixed;
    right: 10px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center;
    background-color: #007bff;
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1.5px;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: 99999;
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 0.4s ease, right 0.4s ease, background-color 0.2s ease;
}

#back-to-top-btn:hover {
    background-color: #0056b3;
}

#back-to-top-btn.top-btn-visible {
    opacity: 1 !important;
    right: -20px;
    pointer-events: auto;
}

/* --- LIGHT MODE / LAB MODE SCROLLBARS --- */
/* Standard Firefox support */
body:not(.dark-mode) * {
    scrollbar-color: #0088cc #f0f4f8; /* thumb color | track color */
    scrollbar-width: thin;
}

/* Chrome, Edge, Safari, Opera */
body:not(.dark-mode) ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body:not(.dark-mode) ::-webkit-scrollbar-track {
    background: #f0f4f8;
    border-radius: 4px;
}

body:not(.dark-mode) ::-webkit-scrollbar-thumb {
    background-color: #00bfff;
    border-radius: 4px;
    border: 1px solid #dcdfe3;
}

body:not(.dark-mode) ::-webkit-scrollbar-thumb:hover {
    background-color: #0088cc; /* Darker blue on hover */
}

/* ==========================================================
   7. ANIMATIONS & GLOW EFFECTS
   ========================================================== */
@keyframes eggheadPulse {
    0% { box-shadow: 0 0 5px rgba(0, 191, 255, 0.5); border-color: #00bfff; }
    50% { box-shadow: 0 0 20px rgba(0, 191, 255, 0.8); border-color: #ff007f; } 
    100% { box-shadow: 0 0 5px rgba(0, 191, 255, 0.5); border-color: #00bfff; }
}

.focused-active-glow {
    border: 2px solid #00bfff !important;
    animation: eggheadPulse 2s infinite ease-in-out !important;
}

/* ==========================================================
   8. DARK MODE OVERRIDES
   ========================================================== */
body.dark-mode {
    background-color: #0b0f19 !important;
    color: #e0e6ed !important; 
}

body.dark-mode h1, 
body.dark-mode h3 {
    color: #ff007f; 
    text-shadow: 0 0 8px rgba(255, 0, 127, 0.4);
}

body.dark-mode h2 {
    color: #00e5ff; 
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.3);
}

body.dark-mode .project-card {
    background: #171d26 !important;
    border: 2px solid #2d3748 !important;
    box-shadow: 4px 4px #0b0d13 !important; 
}

body.dark-mode input[type="text"], 
body.dark-mode textarea, 
body.dark-mode select {
    background: #0b0f17 !important;
    border: 2px solid #4a5568 !important;
    color: #ffffff !important;
}

body.dark-mode input[type="text"]:focus, 
body.dark-mode textarea:focus {
    border-color: #00e5ff !important;
}

body.dark-mode #project-modal > div {
    background: #171d26 !important;
    border: 3px solid #ff007f !important;
    box-shadow: 0 0 25px rgba(255, 0, 127, 0.3) !important;
    color: #e2e8f0 !important;
}

body.dark-mode button {
    background: #171d26;
    border-color: #00e5ff;
    color: #00e5ff;
    box-shadow: 2px 2px 0px #006688;
}

body.dark-mode button:hover {
    background: #00e5ff;
    color: #111;
}

body.dark-mode #focus-mode-btn {
    background: #171d26 !important;
    border-color: #00e5ff !important;
    color: #00e5ff !important;
    box-shadow: 2px 2px 0px #006688 !important;
}

body.dark-mode #focus-mode-btn:hover {
    background: #00e5ff !important;
    color: #111111 !important;
}

body.dark-mode #toast-notification {
    background-color: #00e5ff;
    color: #0b0f19;
}

body.dark-mode #back-to-top-btn {
    background-color: #00e5ff;
    color: #0b0f19;
}

body.dark-mode .file-away-btn {
    background-color: #4c2d87 !important; /* Darker purple */
    color: #e2e8f0 !important;
}

body.dark-mode .file-away-btn:hover {
    background-color: #5c37a4 !important;
}

body.dark-mode .edit-btn {
    background-color: #0056b3 !important; /* Darker blue */
    color: #ffffff !important;
}

body.dark-mode .edit-btn:hover {
    background-color: #0069d9 !important;
}

/* Standard Firefox support */
body.dark-mode * {
    scrollbar-color: #00e5ff #0b0f17; /* thumb color | track color */
    scrollbar-width: thin;
}

/* Chrome, Edge, Safari, Opera */
body.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: #0b0f17;
    border-radius: 4px;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background-color: #00e5ff;
    border-radius: 4px;
    border: 1px solid #171d26;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background-color: #ff007f; /* Glows pink on hover! */
}

/* ==========================================================
 * DARK MODE INPUT STYLING
 * ========================================================== */

/* Dark mode styles for text, password, and form inputs */
body.dark-mode input[type="text"],
body.dark-mode input[type="password"],
body.dark-mode textarea,
body.dark-mode select {
    background-color: #1e1e2f !important; /* Dark container background */
    color: #e0e0e0 !important;           /* Light text color */
    border: 1px solid #3d3d5c !important; /* Subtle dark border */
    border-radius: 4px;
    padding: 8px 10px;
    transition: all 0.3s ease;
}

/* Change style when the user clicks inside the input bar */
body.dark-mode input[type="text"]:focus,
body.dark-mode input[type="password"]:focus,
body.dark-mode textarea:focus {
    border-color: #007bff !important;     /* Bright accent color on focus */
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.4);
    outline: none;
}

/* Style placeholder text (e.g., "Username...", "Password...") */
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #8888a0 !important;
}

body.dark-mode input:-webkit-autofill,
body.dark-mode input:-webkit-autofill:hover, 
body.dark-mode input:-webkit-autofill:focus {
    -webkit-text-fill-color: #e0e0e0 !important;
    -webkit-box-shadow: 0 0 0px 1000px #1e1e2f inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

#core-display-list ul {
    list-style: none !important;
    padding-left: 20px !important;
    margin-top: 4px !important;
    display: block !important;
}

#core-display-list li {
    display: list-item !important;
    color: inherit;
}