/* Define CSS Variables for Light theme (default) */
:root {
    --background: 0 0% 100%;
    /* white */
    --foreground: 224 71.4% 4.1%;
    /* dark gray */
    --card: 0 0% 100%;
    /* white */
    --card-foreground: 224 71.4% 4.1%;
    /* dark gray */
    --popover: 0 0% 100%;
    /* white */
    --popover-foreground: 224 71.4% 4.1%;
    /* dark gray */
    --primary: 220 90% 50%;
    /* Adjusted blue */
    --primary-foreground: 0 0% 100%;
    /* white */
    --secondary: 220 14.3% 95.9%;
    /* light gray */
    --secondary-foreground: 220 9% 40%;
    /* gray */
    --muted: 220 14.3% 95.9%;
    /* light gray */
    --muted-foreground: 220 9% 46.1%;
    /* gray */
    --accent: 220 14.3% 95.9%;
    /* light gray */
    --accent-foreground: 220 9% 40%;
    /* gray */
    --destructive: 0 84.2% 60.2%;
    /* red */
    --destructive-foreground: 0 0% 100%;
    /* white */
    --border: 220 13% 91%;
    /* light gray border */
    --input: 220 13% 91%;
    /* light gray border */
    --ring: 220 90% 50%;
    /* Adjusted blue for focus */
    --radius: 0.5rem;
    --radius-md: calc(var(--radius) - 2px);
    --radius-sm: calc(var(--radius) - 4px);
    --radius-lg: var(--radius);
    /* Added for consistency */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --ring-offset-width: 2px;
    --ring-offset-color: hsl(var(--background));
    /* Default light */
    --ring-color: hsl(var(--ring) / 0.5);
    --ring-width: 2px;
}

/* Define CSS Variables for Dark Theme */
.dark {
    --background: 224 71.4% 4.1%;
    /* dark gray */
    --foreground: 210 20% 98%;
    /* nearly white */
    --card: 224 71.4% 4.1%;
    /* dark gray */
    --card-foreground: 210 20% 98%;
    /* nearly white */
    --popover: 224 71.4% 4.1%;
    /* dark gray */
    --popover-foreground: 210 20% 98%;
    /* nearly white */
    --primary: 210 90% 60%;
    /* Brighter blue for dark */
    --primary-foreground: 224 71.4% 4.1%;
    /* dark gray */
    --secondary: 215 27.9% 16.9%;
    /* darker gray */
    --secondary-foreground: 210 20% 98%;
    /* nearly white */
    --muted: 215 27.9% 16.9%;
    /* darker gray */
    --muted-foreground: 217.9 10.6% 64.9%;
    /* lighter gray */
    --accent: 215 27.9% 16.9%;
    /* darker gray */
    --accent-foreground: 210 20% 98%;
    /* nearly white */
    --destructive: 0 62.8% 50.6%;
    /* slightly less intense red */
    --destructive-foreground: 0 0% 100%;
    /* white */
    --border: 215 27.9% 16.9%;
    /* darker gray */
    --input: 215 27.9% 16.9%;
    /* darker gray */
    --ring: 210 90% 60%;
    /* Brighter blue for focus */
    --ring-offset-color: hsl(var(--background));
    /* Dark background for offset */
    --ring-color: hsl(var(--ring) / 0.6);
}

/* Basic Reset & Body */
*,
*::before,
*::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: hsl(var(--border));
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    /* Updated Font Stack */
    font-family: 'Noto Sans Arabic', 'Noto Sans', sans-serif;
}

body {
    margin: 0;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    min-height: 100vh;
    padding: 1rem;
    /* p-4 */
    font-family: inherit;
    /* Use html font */
    line-height: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Layout Container */
.main-container {
    max-width: 48rem;
    /* approx max-w-3xl */
    margin-left: auto;
    margin-right: auto;
}

/* Headings */
h1 {
    font-size: 1.875rem;
    /* text-3xl */
    line-height: 2.25rem;
    font-weight: 700;
    /* font-bold */
    letter-spacing: -0.025em;
    /* tracking-tight */
    color: hsl(var(--foreground));
    margin: 0;
    /* Reset margin */
}

h2 {
    font-size: 1.5rem;
    /* text-2xl */
    line-height: 2rem;
    font-weight: 600;
    /* font-semibold */
    letter-spacing: -0.025em;
    /* tracking-tight */
    margin-top: 0;
    /* Reset margin */
    margin-bottom: 1.25rem;
    /* mb-5 */
}

/* Header */
.app-header {
    display: flex;
    flex-direction: column;
    /* Default mobile */
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    /* mb-8 */
    padding-bottom: 1rem;
    /* pb-4 */
    border-bottom: 1px solid hsl(var(--border));
}

.app-header h1 {
    margin-bottom: 1rem;
    /* mb-4 default mobile */
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* space-x-2 */
}

/* RTL adjustments for spacing */
html[dir="rtl"] .header-controls {
    gap: 0;
    margin-right: -0.5rem;
}

html[dir="rtl"] .header-controls>* {
    margin-right: 0.5rem;
}

/* General Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: var(--radius-md);
    /* rounded-md */
    font-size: 0.875rem;
    /* text-sm */
    line-height: 1.25rem;
    font-weight: 500;
    /* font-medium */
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, opacity 0.15s ease-in-out;
    cursor: pointer;
    height: 2.5rem;
    /* h-10 */
    padding-left: 1rem;
    /* px-4 */
    padding-right: 1rem;
    padding-top: 0.5rem;
    /* py-2 */
    padding-bottom: 0.5rem;
    font-family: inherit;
    /* Ensure buttons use the correct font */
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), 0 0 0 calc(var(--ring-offset-width) + var(--ring-width)) var(--ring-color);
    /* ring-2 ring-ring ring-offset-2 ring-offset-background */
}

.btn:disabled {
    pointer-events: none;
    opacity: 0.5;
}

.btn svg {
    width: 1rem;
    /* w-4 */
    height: 1rem;
    /* h-4 */
}

/* Icon spacing */
.btn svg:not(:last-child) {
    margin-right: 0.25rem;
    /* mr-1 */
}

html[dir="rtl"] .btn svg:not(:last-child) {
    margin-right: 0;
    margin-left: 0.25rem;
    /* rtl:ml-1 */
}

/* Button Variants */
.btn-primary {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.btn-primary:hover {
    background-color: hsl(var(--primary) / 0.9);
    /* hover:bg-primary/90 */
}

.btn-secondary {
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
}

.btn-secondary:hover {
    background-color: hsl(var(--secondary) / 0.8);
    /* hover:bg-secondary/80 */
}

.btn-outline {
    border: 1px solid hsl(var(--input));
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    /* Added for clarity */
}

.btn-outline:hover {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

/* <<< NEW: Style for Icon-Only Buttons in header >>> */
.btn-icon-only {
    padding-left: 0.75rem;
    /* px-3 */
    padding-right: 0.75rem;
    width: 2.5rem;
    /* Make it square-ish h-10 w-10 */
}

.btn-icon-only svg {
    width: 1.125rem;
    /* 18px */
    height: 1.125rem;
    margin: 0 !important;
    /* Override LTR/RTL margin */
}


/* Small destructive icon button (used for todo delete) */
.btn-icon-sm-destructive {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, opacity 0.15s ease-in-out;
    cursor: pointer;
    height: 2rem;
    /* h-8 */
    width: 2rem;
    /* w-8 */
    padding: 0;
    flex-shrink: 0;
    color: hsl(var(--destructive));
    font-family: inherit;
    /* Ensure icon buttons inherit font too (though they may not have text) */
}

.btn-icon-sm-destructive:hover {
    background-color: hsl(var(--destructive) / 0.1);
    /* hover:bg-destructive/10 */
    color: hsl(var(--destructive));
    /* Ensure color stays */
}

.btn-icon-sm-destructive:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), 0 0 0 calc(var(--ring-offset-width) + var(--ring-width)) var(--ring-color);
}

.btn-icon-sm-destructive:disabled {
    pointer-events: none;
    opacity: 0.5;
}

.btn-icon-sm-destructive svg {
    width: 1rem;
    height: 1rem;
}


/* Input Fields & Textarea */
.input,
.textarea {
    display: flex;
    /* flex */
    height: 2.5rem;
    /* h-10 */
    width: 100%;
    /* w-full */
    border-radius: var(--radius-md);
    /* rounded-md */
    border: 1px solid hsl(var(--input));
    background-color: hsl(var(--background));
    padding: 0.5rem 0.75rem;
    /* px-3 py-2 */
    font-size: 1rem;
    /* Use 16px+ font-size to potentially avoid auto-zoom on iOS */
    line-height: 1.25rem;
    color: hsl(var(--foreground));
    /* Added for explicit color */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    font-family: inherit;
    /* Ensure input uses the correct font */
}

.input::placeholder,
.textarea::placeholder {
    color: hsl(var(--muted-foreground));
    /* placeholder:text-muted-foreground */
}

.input:focus-visible,
.textarea:focus-visible {
    outline: none;
    /* focus-visible:outline-none */
    border-color: hsl(var(--ring));
    /* Simulate ring with border */
    box-shadow: 0 0 0 var(--ring-width) hsl(var(--ring) / 0.4);
    /* focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 (offset simulated by no shadow on element itself) */
}

.input:disabled,
.textarea:disabled {
    cursor: not-allowed;
    /* disabled:cursor-not-allowed */
    opacity: 0.5;
    /* disabled:opacity-50 */
}

.textarea {
    min-height: 6.25rem;
    /* min-h-[100px] */
    height: auto;
    /* Reset height */
    line-height: inherit;
    /* Use default line height */
    font-size: 1rem;
    /* Ensure textarea also avoids zoom */
}

/* Todo Add Section */
.add-todo-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* gap-2 */
    margin-bottom: 1.5rem;
    /* mb-6 */
}

.add-todo-section .input {
    flex-grow: 1;
    /* flex-grow */
}

/* List Containers */
.list-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* space-y-3 equivalent */
}

#notes-list.list-container {
    gap: 1rem;
    /* space-y-4 equivalent */
}

/* Todo Item */
.todo-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    /* p-4 */
    border-radius: var(--radius-lg);
    /* rounded-lg */
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--card));
    box-shadow: var(--shadow-sm);
    transition: opacity 0.3s ease-in-out, background-color 0.2s ease-in-out, transform 0.3s ease-in-out, max-height 0.3s ease-in-out, margin 0.3s ease-in-out, padding 0.3s ease-in-out, border-width 0.3s ease-in-out;
    /* Added animation props */
    opacity: 1;
    overflow: hidden;
    /* Needed for max-height animation */
}

.todo-item-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* gap-3 */
    flex-grow: 1;
    /* flex-grow */
    min-width: 0;
    /* Fix potential overflow */
}

.todo-item-label {
    flex-grow: 1;
    word-break: break-word;
    /* break-words */
    cursor: pointer;
    color: hsl(var(--card-foreground));
    transition: color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out;
}

.todo-item .btn-icon-sm-destructive {
    margin-left: 0.5rem;
    /* ml-2 */
}

html[dir="rtl"] .todo-item .btn-icon-sm-destructive {
    margin-left: 0;
    margin-right: 0.5rem;
    /* rtl:mr-2 */
}

/* Todo Item Completed State */
.todo-item.completed {
    opacity: 0.6;
    /* opacity-60 */
    background-color: hsl(var(--muted) / 0.5);
    /* bg-muted/50 */
}

.todo-item.completed .todo-item-label {
    text-decoration: line-through;
    /* line-through */
    color: hsl(var(--muted-foreground));
    /* text-muted-foreground */
}

/* Notes Add Section */
.add-note-section {
    margin-bottom: 1.5rem;
    /* mb-6 */
}

.add-note-section .btn-primary {
    /* Target specific button */
    margin-top: 0.75rem;
    /* mt-3 */
    width: 100%;
    /* w-full */
}

/* Note Card */
.note-card {
    padding: 1rem;
    /* p-4 */
    border-radius: var(--radius-lg);
    /* rounded-lg */
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--card));
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out, margin 0.3s ease-in-out, padding 0.3s ease-in-out, border-width 0.3s ease-in-out;
    /* Animation props */
    overflow: hidden;
    /* Needed for max-height animation */
    opacity: 1;
}

.note-content {
    /* Renamed class for clarity */
    font-size: 0.875rem;
    /* text-sm */
    line-height: 1.625;
    /* leading-relaxed */
    margin-bottom: 0.75rem;
    /* mb-3 */
    flex-grow: 1;
    /* flex-grow */
    white-space: pre-wrap;
    /* whitespace-pre-wrap */
    word-break: break-word;
    /* break-words */
    color: hsl(var(--card-foreground));
    /* Ensure text color */
}

.note-content a {
    color: hsl(var(--primary));
    text-decoration: underline;
    text-decoration-offset: 2px;
    transition: color 0.2s ease;
    font-weight: 500;
    /* font-medium */
}

.note-content a:hover {
    opacity: 0.8;
    /* hover:opacity-80 */
}

.note-card-date {
    font-size: 0.75rem;
    /* text-xs */
    line-height: 1rem;
    color: hsl(var(--muted-foreground));
    /* text-muted-foreground */
    margin-bottom: 0.75rem;
    /* mb-3 */
    align-self: flex-start;
    /* self-start */
}

.note-card-actions {
    display: flex;
    justify-content: flex-end;
    /* justify-end */
    gap: 0.5rem;
    /* gap-2 */
    border-top: 1px solid hsl(var(--border));
    padding-top: 0.75rem;
    /* pt-3 */
    margin-top: auto;
    /* mt-auto */
}

/* Smaller buttons for note actions */
.note-card-actions .btn {
    height: 2rem;
    /* h-8 */
    padding: 0.375rem 0.625rem;
    /* py-1.5 px-2.5 */
    font-size: 0.75rem;
    /* text-xs */
}

.note-card-actions .btn svg {
    width: 0.875rem;
    /* 14px */
    height: 0.875rem;
    /* 14px */
    /* Spacing handled by general .btn rule */
}

/* Specific styles for note action buttons */
.btn-note-secondary {
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
}

.btn-note-secondary:hover {
    background-color: hsl(var(--secondary) / 0.8);
    /* hover:bg-secondary/80 */
}

.btn-note-destructive {
    background-color: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
}

.btn-note-destructive:hover {
    background-color: hsl(var(--destructive) / 0.9);
    /* hover:bg-destructive/90 */
}

/* Loading Indicator */
#loading-indicator {
    position: fixed;
    top: 1rem;
    /* top-4 */
    right: 1rem;
    /* right-4 */
    background-color: hsl(var(--primary) / 0.9);
    color: hsl(var(--primary-foreground));
    padding: 0.3rem 0.75rem;
    /* px-3 py-1.5 ish */
    border-radius: var(--radius-lg);
    /* rounded-lg */
    font-size: 0.75rem;
    /* text-xs */
    font-weight: 500;
    /* font-medium */
    display: none;
    /* Initially hidden */
    z-index: 50;
    /* z-50 */
    box-shadow: var(--shadow);
    /* shadow */
}

#loading-indicator.show {
    display: block;
}

/* Custom Checkbox (Existing Style - good as is) */
.custom-checkbox {
    appearance: none;
    background-color: transparent;
    margin: 0;
    font: inherit;
    color: hsl(var(--primary));
    width: 1.15em;
    height: 1.15em;
    border: 0.1em solid hsl(var(--border));
    border-radius: 0.25em;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    flex-shrink: 0;
    /* flex-shrink-0 */
}

.custom-checkbox::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em hsl(var(--primary));
    background-color: CanvasText;
    /* Fallback */
    transform-origin: center;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.custom-checkbox:checked {
    background-color: hsl(var(--primary));
    border-color: hsl(var(--primary));
}

.custom-checkbox:checked::before {
    transform: scale(1);
    box-shadow: inset 1em 1em hsl(var(--primary-foreground));
    /* Checkmark color */
}

.custom-checkbox:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), 0 0 0 calc(var(--ring-offset-width) + var(--ring-width)) var(--ring-color);
}

.custom-checkbox:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Utility: Hidden */
.hidden {
    display: none !important;
}

/* Empty list message styling */
.empty-list-message {
    text-align: center;
    color: hsl(var(--muted-foreground));
    padding-top: 2rem;
    /* py-8 */
    padding-bottom: 2rem;
    font-size: 0.875rem;
    /* text-sm */
}

/* --- Modal Styles --- */

.modal-overlay {
    position: fixed;
    inset: 0;
    /* top, right, bottom, left = 0 */
    background-color: rgba(0, 0, 0, 0.5);
    /* Semi-transparent black */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    /* Ensure it's on top */
    opacity: 0;
    visibility: hidden;
    /* Use visibility for better accessibility */
    transition: opacity 0.2s ease-in-out, visibility 0s linear 0.2s;
    /* Delay visibility change */
    padding: 1rem;
    /* Add padding for small screens */
}

.modal-overlay.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease-in-out, visibility 0s linear 0s;
}

.modal-dialog {
    background-color: hsl(var(--card));
    color: hsl(var(--card-foreground));
    padding: 1.5rem;
    /* p-6 */
    border-radius: var(--radius-lg);
    /* rounded-lg */
    box-shadow: var(--shadow);
    /* shadow */
    max-width: 90%;
    /* Responsive */
    width: 28rem;
    /* max-w-sm ish */
    transform: scale(0.95);
    opacity: 0;
    /* Start hidden */
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.modal-overlay.show .modal-dialog {
    transform: scale(1);
    opacity: 1;
    /* Fade in */
}

.modal-title {
    font-size: 1.125rem;
    /* text-lg */
    font-weight: 600;
    /* font-semibold */
    line-height: 1.75rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
    /* mb-2 */
}

.modal-description {
    font-size: 0.875rem;
    /* text-sm */
    color: hsl(var(--muted-foreground));
    margin-top: 0;
    /* <<< Adjusted margin for better spacing with title >>> */
    margin-bottom: 1.5rem;
    /* mb-6 */
    line-height: 1.4;
    /* Slightly more line height for readability */
}

/* Specific margin for About modal description */
#about-modal .modal-description {
    margin-bottom: 1.5rem;
    /* mb-6 */
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    /* Align buttons right */
    gap: 0.75rem;
    /* space-x-3 ish */
    margin-top: 1.5rem;
    /* Add space above buttons */
}

/* Adjust modal button styles if needed */
.modal-actions .btn {
    height: 2.25rem;
    /* Slightly smaller maybe? h-9 */
    padding-left: 0.75rem;
    /* px-3 */
    padding-right: 0.75rem;
}

/* Specific destructive button style for confirmation */
.modal-actions .btn-destructive {
    background-color: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
}

.modal-actions .btn-destructive:hover {
    background-color: hsl(var(--destructive) / 0.9);
}

/* Specific secondary button style for cancel */
.modal-actions .btn-secondary {
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
}

.modal-actions .btn-secondary:hover {
    background-color: hsl(var(--secondary) / 0.8);
}

/* Specific primary button style for About modal close */
#about-modal .modal-actions .btn-primary {
    /* Style is already defined, but specificity ensures it if needed */
}


/* Responsive adjustments */
@media (min-width: 640px) {

    /* sm breakpoint */
    body {
        padding: 1.5rem;
        /* sm:p-6 */
    }

    .app-header {
        flex-direction: row;
        /* sm:flex-row */
    }

    .app-header h1 {
        margin-bottom: 0;
        /* sm:mb-0 */
    }

    .add-note-section .btn-primary {
        width: auto;
        /* sm:w-auto */
    }
}

@media (min-width: 768px) {

    /* md breakpoint */
    body {
        padding: 2rem;
        /* md:p-8 */
    }
}