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


* {
    font-family: 'Roboto Mono', monospace;
}

/*
Colour Palette:

	•	Background Panel: #dfe6eb
	•	Headings (Dark Blue): #0a3d6b
	•	Shadows (Darker Blue): Slight shadow effect using #021a33
	•	Results (Bright Blue): #1e5fe0
	•	Accent Red (Buttons): #c0392b

*/




#fade-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 9999;
    /* Ensure it covers everything */
    animation: fadeOutOverlay 1.1s ease-in-out forwards;
    pointer-events: none;
    /* Prevent blocking interaction */
}

@keyframes fadeOutOverlay {
    0% {
        opacity: 1;
        background-color: black;
    }

    50% {
        opacity: 1;
        background-color: white;
    }

    75% {
        opacity: 1;
        background-color: white;
    }

    100% {
        opacity: 0;
        background-color: transparent;
    }
}


html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Prevent scrolling */
}

/* LAYOUT */

/* Reset default margin and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Container for the 3-column layout */
.container {
    display: flex;
    width: 100vw; /* Viewport width */
    height: 100vh; /* Viewport height */
    box-sizing: border-box; /* Ensure padding and border are included in the width/height */
    overflow: hidden; /* Prevent internal scrolling */
}

/* 3 Columns: 20% - 60% - 20% */
.column {
    padding: 10px;
}

.left {
    width: 18%;
    background-color: #dfe6eb;
}

.middle {
    padding-top: 15px;
    padding-left: 30px;
    margin-top: 0px;
    width: 64%;
    max-height: 98%;
}

.right {
    width: 18%;
    background-color: #dfe6eb;
    justify-content: center;
    /* Horizontally centers the table */
}

/* 4 Columns: 20% - 30% - 30% - 20% */

.hleft {
    width: 20%;
    background-color: #dfe6eb;
    padding: 10px;
}

.hright {
    width: 20%;
    background-color: #dfe6eb;
    padding: 10px;
    justify-content: center;
    /* Horizontally centers the table */
}


.middleL {
    width: 30%;
    margin-top: 3px;
}

.middleR {
    width: 30%;
    margin-top: 62.5px;
}




/* ---------------------------------------------- */



/* SIDEBAR */


.sidebar {
    text-align: left;
}

.sidebar h1 {
    font-size: 28px;
    /* Adjust as needed */
    font-weight: bold;
    background: -webkit-linear-gradient(#1e5fe0, #0a3d6b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 1px 1px 5px rgba(30, 58, 95, 0.3);
    /* Drop shadow */
    text-align: center;
    line-height: 90%;
    padding-top: 20px;
}

.sidebar h1 a {
    font-size: 32px;
    /* Adjust as needed */
    font-weight: bold;
    background: -webkit-linear-gradient(90deg, #1e5fe0, #0a3d6b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 1px 1px 8px rgba(30, 58, 95, 0.3);
    /* Drop shadow */
    text-align: center;
    line-height: 93%;
    padding-top: 18px;

}

.sidebar h1 a:hover {
    font-size: 32px;
    /* Adjust as needed */
    font-weight: bold;
    color: #0a3d6b;
    text-shadow: 0px 0px 0.5px #0a3d6b, 0.5px 0.5px 12px #c0392b;
    /* Blue shadow + red offset shadow */
    text-align: center;
    line-height: 93%;
    padding-top: 18px;
}

.sidebar h3 {
    font-size: 15px;
    color: #0a3d6b;
    font-weight: 900;
    line-height: 200%;
}

.sidebar a {
    padding-left: 20px;
    color: black;
    font-weight: Semi-bold;
    font-size: 13px;
    line-height: 150%;
    white-space: nowrap;
    /* Prevents wrapping */
    overflow: hidden;
    /* Ensures text stays within the box */
    text-overflow: ellipsis;
    /* Adds an ellipsis if the text overflows (optional) */
    display: inline-block;
    /* Ensures the above rules apply correctly */
}

.sidebar a:visited {
    color: black;
    text-decoration: none; /* Match other states for consistency */
}


.sidebar a:link {
    color: black;
    text-decoration: none;
}

.sidebar a:hover {
    text-decoration: none;
    font-weight: bold;
    color: #1e5fe0;
    text-shadow: 1px 1px 6px #c0392b;
}

.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes logo-pulse {
    0% {
        filter: drop-shadow(5px 5px 10px rgba(0, 0, 139, 0.5));
        /* Start with dark blue */
    }

    50% {
        filter: drop-shadow(5px 5px 20px rgba(0, 0, 139, 0.8));
        /* Slightly brighter and larger */
    }

    100% {
        filter: drop-shadow(5px 5px 10px rgba(0, 0, 139, 0.5));
        /* Return to the original */
    }
}

@keyframes logo-hover-pulse {
    0% {
        filter: drop-shadow(5px 5px 10px rgba(192, 57, 43, 0.7));
        /* Start with red */
    }

    50% {
        filter: drop-shadow(5px 5px 20px rgba(192, 57, 43, 1));
        /* Brighter and larger red shadow */
    }

    100% {
        filter: drop-shadow(5px 5px 10px rgba(192, 57, 43, 0.7));
        /* Return to the original */
    }
}

.logo {
    width: 90%;
    /* Scales the image to fit the container */
    height: auto;
    animation: logo-pulse 1.75s infinite;
    /* Add the pulsing effect */
    transition: animation 0.3s ease;
    /* Smooth transition between animations */
}

.logo:hover {
    animation: logo-hover-pulse 1.75s infinite;
    /* Change to the red pulse on hover */
}

.user-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
}

#username-display {
    margin-right: 10px;
    color: #0a3d6b;
    font-weight: bold;
}





/* ---------------------------------------------- */


/* PHONE LIST */

#important-tasks-link {
    text-decoration: none;
}

#important-task-count {
    font-size: 1.2em;
    margin-left: 5px;
    text-align: center;
}


.phone h2 {
    text-align: center;
    white-space: nowrap;
    /* Prevents wrapping */
    line-height: 300%;
    font-size: 20px;
    /* Adjust as needed */
    font-weight: bold;
    background: -webkit-linear-gradient(#1e5fe0, #0a3d6b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 1px 1px 5px rgba(30, 58, 95, 0.3);
    /* Drop shadow */
}


.phone table {
    margin: 0 auto;
    /* Centers the table within the flex container */
    text-align: center;
    font-size: 13px;
    color: black;
    border-spacing: 50px 0px;
    white-space: nowrap;
    /* Prevents wrapping */
}

/* ---------------------------------------------- */


/* CALENDAR */



/* Nested columns within right column */
.hrightTop {
    height: 68%;
}

/* Parent container for centering */
.hrightBottom {
    display: flex;
    justify-content: center;
    /* Horizontally center */
    align-items: bottom;
    /* Vertically center */
    height: 32%;
    /* Maintain the container's height */
    margin: 0;
    /* Ensure no additional margins */
    padding: 0;
    box-sizing: border-box;
    /* Prevent padding/margins from affecting alignment */
}

/* Calendar Container: Fixed 7x30px grid box */
#calendar-container {
    width: 245px;
    /* 7 columns * 35px width */
    height: 280px;
    /* 7 rows * 35px height */
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    /* Ensure auto margins don't cause misalignment */
    box-sizing: border-box;
}

/* Calendar Header: Buttons and Month-Year */
#calendar-header {
    position: absolute;
    top: 0;
    /* Align to the top of the box */
    left: 0;
    right: 0;
    height: 35px;
    /* Same as a calendar cell */
    display: flex;
    justify-content: space-between;
    /* Align buttons left/right */
    align-items: center;
    /* Vertically center content */
    font-size: 14px;
    font-weight: bold;
}

#month-year {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    /* Prevent wrapping */
    font-size: 15px;
}

/* Buttons */
#prev-month,
#next-month {
    width: 35px;
    /* Same as a single box */
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #052c4f;
    border-radius: 3px;
    box-shadow: 0px 0px 3px 0px #021a33;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

#prev-month:hover,
#next-month:hover {
    background-color: #c0392b;
    box-shadow: 0px 0px 3px 0px #c0392b;
}





/* Calendar Table */
#calendar {
    position: absolute;
    top: 35px;
    /* Start below the header */
    width: 100%;
    height: 245px;
    /* 6 rows of 35px (excluding header row) */
    border-collapse: collapse;
}

#calendar th,
#calendar td {
    width: 35px;
    /* Lock cell width */
    height: 35px;
    /* Lock cell height */
    text-align: center;
    vertical-align: middle;
}

/* Today's Date Highlight */
.pulse-shadow {
    font-weight: bold;
    border-radius: 50%;
    /* Optional round shape */
}





@keyframes shadow-pulse {
    0% {
        box-shadow: 0 0 0 0px rgba(192, 57, 43, 0.5);
    }

    100% {
        box-shadow: 0 0 0 5px rgba(192, 57, 43, 0);
    }
}

.pulse-shadow {
    border-radius: 50%;
    /* Make it round */
    animation: shadow-pulse 1.5s infinite;
    text-align: center;
    /* Center horizontally */
    vertical-align: middle;
    /* Center vertically */
}




.holiday {
    position: relative;
    background-color: lightgray; /* Light background */
    border-radius: 50px; /* Rounded corners */
    color: #2c3e50;
    font-weight: bold;
    text-align: center;
}

.holiday::after {
    content: '✖'; /* Big red cross */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px; /* Adjust size as needed */
    color: #e63946; /* Bright red color */
    opacity: 0.8; /* Slight transparency */
    pointer-events: none; /* Ensure the cross doesn’t interfere with hover/click events */
}




/* ---------------------------------------------- */





/* BODY TEXT */

body {
    font-size: 13px;
    font-family: 'Roboto Mono', monospace;
}

label {
    font-size: 13px;
    font-family: 'Roboto Mono', monospace;
}



h1 {
    text-align: left;
    font-size: 20px;
    font-weight: bold;
    line-height: 300%;
    background: -webkit-linear-gradient(#1e5fe0, #0a3d6b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 1px 1px 5px rgba(30, 58, 95, 0.3);
    white-space: nowrap;
    display: inline-block;
    transform: scaleX(calc(100% / max-content));
    /* Shrink to fit */
    transform-origin: left;
    /* Keep left-aligned */
}

h2 {
    text-align: center;
    font-size: 20px;
    color: #0a3d6b;
    font-weight: bold;
    line-height: 300%;
}

h3 {
    font-size: 14px;
    color: #0a3d6b;
    font-weight: bold;
    line-height: 175%;
}

p {
    font-size: 13px;
    color: black;
    line-height: 200%;
}

table {
    font-size: 13px;
    color: black;
    line-height: 200%;
}



p a,
h2 a,
h3 a {
    text-decoration: none;
    color: black;
}

p a:hover,
h2 a:hover,
h3 a:hover {
    text-decoration: none;
    font-weight: bold;
    color: #c0392b;
}


.results {
    color: #1e5fe0;
    font-size: 13px;
    font-weight: bold;
}

button {
    background-color: #052c4f;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
    border-radius: 3px;
    box-shadow: 0px 0px 3px 0px #021a33;
}

button:hover {
    background-color: #c0392b;
    box-shadow: 0px 0px 3px 0px #c0392b;
}


form p,
form label {
    line-height: 250%;
}


/* ---------------------------------------------- */



/* ---------------   WEATHER    ------------------------- */



.column.middleR {
    position: relative;
    /* Establishes this container as the positioning context */
}

.weather-widget-fixed {
    position: absolute;
    /* Positions it relative to the container */
    bottom: 0;
    /* Sticks to the bottom of the container */
    left: 0;
    /* Aligns to the left edge */
    width: 100%;
    /* Fills the width of the container */
    z-index: 10;
    /* Ensures it stays above other elements in the container */
    background-color: rgba(255, 255, 255, 0.9);
    /* Optional: Adds a semi-transparent background */
    padding: 10px 0;
    /* Optional: Adds vertical spacing */
    text-align: center;
    /* Centers the content */
}


/* ---------------------------------------------- */


/* Notebook Styles */
.notebook-textarea,
.notebook-search {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.notebook-textarea {
    min-height: 100px;
}

.notebook-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.notebook-block {
    padding: 10px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
}

.notebook-textarea-small {
    width: 100%;
    border: none;
    resize: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: 14px;
}

.notebook-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

/* Notebook Button Styles */
.notebook-button,
.notebook-button-small {
    background-color: #052c4f;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
    border-radius: 3px;
    box-shadow: 0px 0px 3px 0px #021a33;
}

.notebook-button:hover,
.notebook-button-small:hover {
    background-color: #c0392b;
    box-shadow: 0px 0px 3px 0px #c0392b;
}

/* Default compact style */
.notebook-textarea-small {
    height: 50px;
    /* Compact preview size */
    overflow: hidden;
}

/* Expanded style */
.notebook-textarea-large {
    height: auto;
    /* Expands to fit content */
    min-height: 150px;
    /* Ensure it grows sufficiently */
    overflow: auto;
    border: 1px solid #007BFF;
    background: #fff;
}

/* Scrollable Notebook Container */
.notebook-container {
    max-height: 67vh;
    /* Adjust height as needed */
    overflow-y: auto;
    /* Enable vertical scrolling */
    padding-right: 10px;
    /* Optional: space for scrollbar */
    scrollbar-width: thin;
    /* Firefox scrollbar styling */
    scrollbar-color: #052c4f #f1f1f1;
    /* Firefox colors */
}

/* WebKit Scrollbar Styling */
.notebook-container::-webkit-scrollbar {
    width: 10px;
}

.notebook-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.notebook-container::-webkit-scrollbar-thumb {
    background: #052c4f;
    border-radius: 5px;
}

.notebook-container::-webkit-scrollbar-thumb:hover {
    background: #c0392b;
}

/* Default compact text size for previews */
.notebook-textarea-small {
    height: 50px;
    /* Compact size */
    overflow: hidden;
    font-size: 11px;
    /* Smaller font for previews */
    transition: font-size 0.2s, height 0.2s;
    /* Smooth transition */
}

/* Expanded mode text size and height */
.notebook-textarea-large {
    height: auto;
    /* Fit content */
    min-height: 150px;
    /* Ensure sufficient size */
    overflow: auto;
    font-size: 14px;
    /* Larger font for editing */
    border: 1px solid #007BFF;
    background: #fff;
    font-weight: 560;
    color: #1A5FE0;
}

/* Actions container hidden by default */
.notebook-actions {
    display: none;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

/* Show buttons in expanded mode */
.notebook-textarea-large+.notebook-actions {
    display: flex;
}


/* ---------------------------------------------- */




/* PAPER COSTS Styles */

.middle {
    overflow: hidden;
}

#controls {
    margin-bottom: 20px;
}

#table-container {
    width: 99%;
    height: calc(100vh - 110px);
    overflow-y: auto;
    overflow-x: auto;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #ccc;
}

.paper-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    text-align: left;
}

.paper-table th,
.paper-table td {
    border: 1px solid #ddd;
    padding: 2px;
}

.paper-table th {
    background-color: #f4f4f4;
    font-weight: bold;
    text-align: left;
    padding: 8px;
}

.paper-table tr:hover {
    background-color: #f9f9f9;
    /* Highlight rows on hover */
}

.paper_search {
    width: 90%;
    padding: 2px;
    font-size: 10px;
    margin: 2px 0;
}

.sort-btn {
    background-color: #052c4f;
    color: white;
    padding: 4px 12px;
    border: none;
    cursor: pointer;
    border-radius: 2px;
    box-shadow: 0px 0px 3px 0px #021a33;
    font-size: 10px;
}

/* Column Widths */
.paper-table th:nth-child(1) {
    width: 6%;
}

.paper-table th:nth-child(2) {
    width: 20%;
}

.paper-table th:nth-child(3) {
    width: 8%;
}

.paper-table th:nth-child(4) {
    width: 6%;
}

.paper-table th:nth-child(5) {
    width: 6%;
}

.paper-table th:nth-child(6) {
    width: 6%;
}

.paper-table th:nth-child(7) {
    width: 6%;
}

.paper-table th:nth-child(8) {
    width: 6%;
}

.paper-table th:nth-child(9) {
    width: 8%;
}

.paper-table th:nth-child(10) {
    width: 12%;
}




/* ---------------------------------------------- */




/* TASKS */


/* Container styling for the To-Do List */
.task_container {
    display: flex;
    gap: 20px;
    height: calc(90vh - 15px); /* Account for padding */
    overflow: hidden; /* Prevent scrolling for the entire container */
    box-sizing: border-box;
}

/* Left, middle, and right columns */
.task_left_column,
.task_middle_column,
.task_right_column {
    width: 31%;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    overflow-y: auto; /* Allow vertical scrolling if content exceeds height */
    height: 99%; /* Ensure columns stretch to fit the container */
}








/* Lists styling */
.task_list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.task_list ul li {
    position: relative; /* To position the buttons absolutely */
    padding: 10px 40px 10px 10px; /* Add space for buttons on the right */
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-between; /* Spread content and buttons */
    align-items: center; /* Center align vertically */
    transition: all 0.2s ease-in-out;
}

/* Hover effect for list items */
.task_list ul li:hover {
    background-color: #e9ecef;
    transform: translateY(-2px);
}

/* Highlight active list item */
.task_list ul li.task_active {
    font-weight: bold;
    background-color: #007bff;
    color: #fff;
}

/* Task container inputs */
.task_input {
    width: 100%;
    padding: 8px;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    resize: vertical; /* Allow resizing vertically */
    min-height: 70px; /* Minimum height for multiple lines */
}

/* Task buttons */
.task_button {
    padding: 4px;
    margin-right: 10px; /* Space between buttons and text */
    background: none;
    border: none;
    color: #007bff;
    cursor: pointer;
    font-size: 12px;
    transition: color 0.2s ease-in-out;
}

.task_button:hover {
    color: #0056b3; /* Darker blue on hover */
}

/* Different colors for specific actions */
.task_complete_button i {
    color: #28a745; /* Green for complete */
}

.task_important_button i {
    color: #ffc107; /* Yellow for important */
}

.task_delete_button i {
    color: #dc3545; /* Red for delete */
}

/* Complete Button Styling */
.task_complete_button i {
    color: #28a745; /* Green for complete */
}

.task_complete_button:hover i {
    color: #218838; /* Darker green on hover */
}



/* Icon alignment */
.task_button i {
    pointer-events: none; /* Prevent click events on the icon */
}

.task_button:active {
    transform: scale(0.96);
}

/* Add buttons */
.task_add_button {
    font-size: 12px; /* Smaller font size for the button text */
    margin-top: 8px;
    background-color: #052c4f;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 3px;
    box-shadow: 0px 0px 3px 0px #021a33;
}

.task_add_button:hover {
    background-color: #c0392b;
    color: white;
}

/* Delete buttons */
.task_delete_button {
    color: #fff;
}

.task_delete_button:hover {
    background-color: #dc3545;
    box-shadow: 0px 0px 3px 0px #c0392b;
}

/* Task list container */
.task_lists_container,
.task_tasks_container,
.task_important_tasks_container {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    min-height: 0; /* Allow flexible height for scrolling */
    height: 75%; /* Match parent height */
    overflow-y: auto; /* Enable scrolling for long content */
}

/* Messages */
.task_message {
    margin: 10px 0;
    font-size: 12px;
    color: #6c757d;
    text-align: center;
}

.task_text {
    width: 100%;
    font-size: 12px;
    color: #333;
    padding: 5px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
    transition: max-height 0.3s ease, font-size 0.3s ease;
}

.edit_task {
    width: 100%;
    font-size: 14px; /* Larger font for editing */
    color: #1e5fe0; /* Different color for editing */
    padding: 5px;
    line-height: 1.5;
    display: block;
    white-space: pre-wrap; /* Preserve line breaks */
    max-height: none; /* Allow full content */
    min-height: 550px;
    font-weight: bold;
    overflow: visible; /* Ensure all content is visible */
    resize: none; /* Disable manual resizing if not needed */
}


.expanded {
    width: 100%;
    font-size: 14px; /* Larger font for editing */
    color: #1e5fe0; /* Different color for editing */
    padding: 5px;
    line-height: 1.5;
    display: block;
    white-space: pre-wrap; /* Preserve line breaks */
    max-height: none; /* Allow full content */
    font-weight: bold;
    overflow: visible; /* Ensure all content is visible */
}



/* Remove bullet points and spacing */
.task_item {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 5px 0; /* Adjust as needed */
    border-bottom: 1px solid #ddd; /* Optional: a divider between tasks */
}

.task_edit_input {
    width: 100%;
    height: auto; /* Adjust as needed */
    border: none;
    padding: 0;
    font-family: inherit; /* Match the font */
    font-size: inherit;
    line-height: inherit;
    resize: none; /* Disable resizing */
    overflow: hidden; /* Prevent scrollbars */
    background: none; /* Match the background */
    outline: none; /* Remove focus outline */
}



.task_save_button {
    font-size: 10px;
    background-color: #052c4f;
    color: white;
    padding: 5px;
    border: none;
    cursor: pointer;
    border-radius: 3px;
    box-shadow: 0px 0px 3px 0px #021a33;
}

.task_save_button:hover {
    background-color: #c0392b;
    box-shadow: 0px 0px 3px 0px #c0392b;
}