@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
    --bg-color: #ffffff;
    --text-primary: #000000;
    --text-secondary: #999999;
    --border-color: #e0e0e0;
    --accent-color: #000000;
    --completed-color: #d1d1d1;
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --line-height-item: 2rem;
    /* Fixed height for lines to ensure alignment */
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: var(--font-family);
    line-height: 1.5;
    height: 100vh;
    padding: 1rem;
    overflow-x: hidden;
}

.container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Header */
.main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding-bottom: 0.5rem;
}

.header-left h1 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.week-nav-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.header-right-menu {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.circle-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: var(--font-family);
    font-weight: 500;
    transition: transform 0.1s;
}

.circle-btn:active {
    transform: scale(0.95);
}

.user-initials {
    background-color: #e8ebfa;
    /* Light blueish purple */
    color: #000;
    font-size: 0.9rem;
}

.more-options {
    background-color: #c4aef2;
    /* Purple */
    color: #000;
}

.nav-arrow {
    background-color: #222222;
    /* Dark/Black */
    color: #fff;
}

.nav-arrow svg {
    width: 20px;
    height: 20px;
}

/* Weekly Grid */
.week-grid {
    display: grid;
    /* 6 columns: 5 for weekdays, 1 for weekend split */
    grid-template-columns: repeat(5, 1fr) 1fr;
    gap: 1.5rem;
    width: 100%;
}

/* Day Column */
.day-column {
    display: flex;
    flex-direction: column;
}

/* Weekend Column (Split) */
.weekend-column {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    /* Space between Sat and Sun */
}

.weekend-half {
    display: flex;
    /* Ensure flex for contents */
    flex-direction: column;
    flex: 1;
}

.day-header {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--text-primary);
}

.day-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.day-date-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.day-initial {
    font-size: 0.9rem;
    color: var(--text-secondary);
    /* Light grey as per reference */
    font-weight: 400;
}

.day-name {
    font-size: 0.9rem;
    text-transform: uppercase;
    color: var(--text-primary);
    font-weight: 700;
}

/* Task List */
.task-list {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.task-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--line-height-item);
    /* Enforce height */
    border-bottom: 1px solid var(--border-color);
    position: relative;
    font-size: 0.95rem;
}

.task-item.ghost-item {
    /* Ghost items usually don't have checkboxes until used, or maintain spacing */
}

.task-checkbox {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--border-color);
    border-radius: 50%;
    margin-left: 0.5rem;
    cursor: pointer;
    background-color: transparent;
    transition: all 0.2s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    /* Hidden by default */

    /* Add light grey checkmark for unchecked state */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e0e0e0' width='14px' height='14px'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Show on hover of the item */
.task-item:hover .task-checkbox {
    opacity: 1;
}

/* Always show if checked - MODIFIED: User wants it hidden too until hovered */
.task-checkbox:checked {
    /* opacity: 1;  <-- Removed to let it hide */
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' width='14px' height='14px'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Also show if the input in the row has focus (accessibility/UX) */
.task-item:focus-within .task-checkbox {
    opacity: 1;
}

.task-checkbox:hover {
    border-color: var(--text-secondary);
}

.task-input {
    border: none;
    background: transparent;
    font-family: var(--font-family);
    font-size: 0.95rem;
    color: var(--text-primary);
    flex-grow: 1;
    height: 100%;
    outline: none;
    padding: 0;
}

.task-item.completed .task-input {
    color: var(--completed-color);
    text-decoration: line-through;
}

/* Someday Section */
.someday-section {
    margin-top: 3rem;
    margin-bottom: 2rem;
    width: 100%;
}

.section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    /* "Sadece başlık solda kalacak" -> It is already block level left aligned. */
}

.someday-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 equal columns */
    gap: 2rem;
}

.someday-column {
    display: flex;
    flex-direction: column;
}



/* Drag and Drop Visuals */
.task-item.dragging {
    opacity: 0.5;
    background-color: #f9f9f9;
}

.task-list.drag-over {
    background-color: #f7f9fc;
    /* Subtle blue highlight */
    border-radius: 4px;
    box-shadow: inset 0 0 0 2px var(--border-color);
}


/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    /* Dimmed backdrop */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-container {
    background-color: #E8EAF6;
    /* Lavenderish light blue matching reference */
    width: 100%;
    max-width: 500px;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
    max-height: 90vh;
    overflow-y: visible;
    /* Change to visible to allow popup overflow? But then scrolling breaks. */
    /* Better approach: Let's trust z-index for now. If user sees NO dialog, it's likely JS not running or old JS. */
    overflow-y: auto;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-date-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #333;
    font-weight: 500;
}

.modal-actions {
    display: flex;
    gap: 0.5rem;
}

.icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: #444;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.icon-btn:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Modal Title Row */
.modal-title-section {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 2px solid #ccc;
    padding-bottom: 0.5rem;
}

.modal-title-input {
    width: 100%;
    background: transparent;
    border: none;
    font-size: 1.4rem;
    font-weight: 600;
    color: #000;
    font-family: var(--font-family);
    outline: none;
}

.big-checkbox {
    width: 24px;
    height: 24px;
    border-width: 2px;
}

/* Editor Section */
.editor-toolbar {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.editor-toolbar button {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: serif;
    /* For H, B aesthetics */
    font-size: 1.1rem;
    color: #333;
    padding: 0;
}

.modal-description-content {
    min-height: 60px;
    font-size: 0.95rem;
    color: #333;
    outline: none;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.modal-description-content:empty:before {
    content: attr(placeholder);
    color: #888;
    display: block;
    /* For Firefox */
}

/* Subtasks */
.subtasks-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.subtask-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.subtask-text {
    background: transparent;
    border: none;
    outline: none;
    flex-grow: 1;
    font-family: var(--font-family);
}

.subtask-completed .subtask-text {
    text-decoration: line-through;
    margin-right: 0.8rem;
    position: relative;
    /* For progress ring */
    color: #777;
}

/* Checkbox Progress Ring Style */
.task-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    appearance: none;
    cursor: pointer;
    background-color: transparent;
    border: 2px solid #ccc;
    /* Default empty state */
    display: grid;
    place-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.task-checkbox:checked {
    background-color: #000;
    border-color: #000;
}

.task-checkbox:checked::before {
    content: "✔";
    color: #fff;
    font-size: 12px;
}

/* Partial Progress State */
.task-checkbox.has-progress {
    border: none !important;
    /* Remove default border to show gradient */
    /* Variable --p will be set by JS (0-100) */
    background: radial-gradient(closest-side, white 70%, transparent 71%),
        conic-gradient(#333 var(--p, 0%), #e0e0e0 0);
    /* 
       radial-gradient creates the hollow center (white).
       conic-gradient creates the pie chart (dark progress, light remaining).
    */
}

.task-checkbox.has-progress::before {
    content: "✔";
    color: #ccc;
    /* Faint check */
    font-size: 12px;
}

.task-checkbox.has-progress:checked {
    background: #000;
    /* Override progress with full black on check */
}

.task-checkbox.has-progress:checked::before {
    color: #fff;
    /* White check when fully checked */
}

.subtask-checkbox {
    width: 18px;
    height: 18px;
    border: 1.5px solid #555;
    border-radius: 50%;
    appearance: none;
    cursor: pointer;
    display: grid;
    place-content: center;
}

.subtask-checkbox::before {
    content: "";
    width: 10px;
    height: 10px;
    background: #000;
    border-radius: 50%;
    transform: scale(0);
    transition: 0.2s;
}

.subtask-checkbox:checked::before {
    transform: scale(1);
}


/* Add Subtask Input */
.add-subtask-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Match .subtask-item gap (0.5rem) */
    margin-top: 0.5rem;
}

.subtask-circle-placeholder {
    width: 18px;
    height: 18px;
    border: 1.5px solid #aaa;
    border-radius: 50%;
    margin-left: 0;
    /* REMOVED extra margin to align with list items */
}

#modal-add-subtask-input {
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.95rem;
    color: #555;
    flex-grow: 1;
}

.modal-footer-decoration {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* Month View Drawer Styles */
.month-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 480px;
    height: 100vh;
    background-color: #fff;
    z-index: 1001;
    padding: 2rem;
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.1);
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    display: flex !important;
    flex-direction: column;
}

.month-view.open {
    transform: translateX(0);
}

/* Backdrop */
.drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    /* Darker dim */
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.drawer-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

/* Drawer Header */
.month-view-header {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.drawer-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#drawer-year-display {
    font-size: 2.2rem;
    font-weight: 800;
    color: #000;
    margin: 0;
    line-height: 1;
}

.drawer-nav-buttons {
    display: flex;
    gap: 0.5rem;
}

/* Image Preview Styles (List View) */
.modal-image-preview-container {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.image-preview-wrapper {
    position: relative;
    width: 100%;
    height: 180px;
    /* Fixed height for aesthetics */
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #ddd;
    background: #f9f9f9;
    transition: transform 0.2s;
}

.image-preview-wrapper:hover {
    transform: scale(1.02);
}

.image-preview-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Crop center for cleaner look */
    display: block;
    cursor: pointer;
}

/* Image Viewer Modal */
.image-viewer-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-viewer-modal img {
    max-width: 90%;
    max-height: 90%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
}

.viewer-btn {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    cursor: pointer;
    display: grid;
    place-content: center;
    transition: background 0.2s;
    backdrop-filter: blur(5px);
}

.viewer-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.viewer-btn.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 24px;
}

.viewer-actions {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 15px;
}

.viewer-btn svg {
    width: 24px;
    height: 24px;
}

/* Hide the old inline remove button since we manage it in viewer now?
   No, user might want to remove without opening. Keep it but style it smaller. */
.btn-remove-image-item {
    position: absolute;
    top: 8px;
    right: 8px;
    /* ... existing styles ... */
    z-index: 2;
}

.nav-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background-color: #222;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.nav-arrow:hover {
    background-color: #000;
}

.nav-arrow svg {
    width: 20px;
    height: 20px;
    stroke: #fff;
}

.month-name-row {
    text-align: center;
    position: relative;
}

#month-name-display {
    font-size: 1.2rem;
    font-weight: 700;
    color: #888;
    background: #fff;
    padding: 0.2rem 1rem;
    border-radius: 4px;
}

.month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-content: start;
    flex-grow: 1;
}

/* Day Cell in Month */
.month-day-cell {
    min-height: 85px;
    padding: 0.3rem 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: background 0.1s;
}

.month-day-cell:hover {
    background-color: #fafafa;
}

.month-day-cell.faded {
    opacity: 0.3;
    pointer-events: none;
}

/* Color Picker Styles */
.color-picker-container {
    position: relative;
    display: inline-block;
}

#modal-color-btn {
    position: relative;
    color: #333;
    /* default icon color */
}

/* Update icon fill to match selected color? 
   Or just keep it generic. Reference shows button with selected color circle inside.
   Let's keep generic for now or update inline style via JS. */

.color-popup {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    /* Align right with button */
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 10px;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    z-index: 2000;
    width: 120px;
}

.color-popup.show {
    display: grid;
}

.color-option {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.1s;
    border: 1px solid rgba(0, 0, 0, 0.05);
    /* Subtle border for all */
}

.color-option:hover {
    transform: scale(1.2);
}

.color-option.selected {
    outline: 2px solid #333;
    outline-offset: 2px;
}

/* Task Item Colors (Week View) */
/* The reference implies full background color for pills in month view,
   and potentially highlight or background in week view.
   Tweek standard: Highlight pen effect (background color). */

.task-item.color-red .task-input {
    background-color: #ffcccc;
}

.task-item.color-yellow .task-input {
    background-color: #fff5cc;
}

.task-item.color-black .task-input {
    background-color: #333;
    color: #fff;
}

.task-item.color-grey .task-input {
    background-color: #ccc;
}

.task-item.color-blue .task-input {
    background-color: #cce5ff;
}

.task-item.color-orange .task-input {
    background-color: #ffe0b2;
}

.task-item.color-green .task-input {
    background-color: #d4edda;
}

.task-item.color-purple .task-input {
    background-color: #e2d9f3;
}

/* Rounded Corners and Padding for Colored Tasks */
.task-item[class*="color-"] .task-input {
    border-radius: 6px;
    padding-left: 6px;
    padding-right: 6px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
    /* Subtle depth */
}

/* Update Ghost Input as well if we want default? No defaults are white. */

/* Task Pill Colors (Month View) */
/* Override default grey */
.task-pill.color-red {
    background-color: #ffcccc;
    color: #550000;
}

.task-pill.color-yellow {
    background-color: #fff5cc;
    color: #554400;
}

.task-pill.color-black {
    background-color: #333;
    color: #fff;
}

.task-pill.color-grey {
    background-color: #ccc;
    color: #000;
}

.task-pill.color-blue {
    background-color: #cce5ff;
    color: #003366;
}

.task-pill.color-orange {
    background-color: #ffe0b2;
    color: #663300;
}

.task-pill.color-green {
    background-color: #d4edda;
    color: #004400;
}

.task-pill.color-purple {
    background-color: #e2d9f3;
    color: #330066;
}

/* Month Day Number Font Size fix from previous step */
.month-day-number {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
    color: #333;
}

.month-day-tasks {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    align-items: center;
}

/* Task Pill (Summary) */
.task-pill {
    font-size: 0.65rem;
    background-color: #efefef;
    padding: 1px 4px;
    border-radius: 3px;
    color: #444;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
    text-align: center;
}

.task-pill.completed {
    text-decoration: line-through;
    opacity: 0.5;
}

@media (max-width: 600px) {
    .month-view {
        width: 100vw;
    }

    .month-grid {
        grid-template-columns: repeat(7, 1fr);
    }

    .month-day-cell {
        min-height: 60px;
    }

    .month-day-number {
        font-size: 0.8rem;
    }
}


@media (max-width: 600px) {
    .week-grid {
        grid-template-columns: 1fr;
        /* 1 col mobile */
        gap: 2rem;
    }

    .someday-grid {
        grid-template-columns: 1fr;
        /* Stack someday lists on mobile */
        gap: 2rem;
    }

    .header-left h1 {
        font-size: 1.5rem;
        /* Smaller title on mobile */
    }
}

/* Auth Screens */
.auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    /* Dimmed background behind the card */
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.auth-card {
    background-color: #fcf4f1;
    /* Light beige/pinkish */
    width: 90%;
    max-width: 450px;
    border-radius: 30px;
    padding: 2.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.auth-header h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #000;
    line-height: 1.2;
    max-width: 70%;
}

.auth-toggle-btn {
    background: transparent;
    border: 1px solid #000;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.auth-toggle-btn:hover {
    background: #000;
    color: #fff;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.input-group input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    font-size: 1rem;
    color: #333;
    outline: none;
    transition: border-color 0.2s;
}

.input-group input:focus {
    border-bottom-color: #000;
}

.input-group input::placeholder {
    color: #888;
}

.auth-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Right align "Forgot Password" */
    gap: 1.5rem;
    margin-top: 1rem;
}

.forgot-password {
    font-size: 0.9rem;
    color: #888;
    text-decoration: none;
}

.auth-submit-btn {
    width: 100%;
    /* Full width button */
    padding: 14px;
    background-color: #cbbdb9;
    /* Greyish beige button */
    border: none;
    border-radius: 30px;
    color: #fff;
    /* White text? Or dark? Image shows white text on dark beige */
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s;
}

.auth-submit-btn:hover {
    background-color: #bfaea9;
}

.register-footer {
    align-items: center;
}

.legal-text {
    font-size: 0.75rem;
    color: #999;
    text-align: left;
    line-height: 1.4;
}