/* ===========================================================
   ToDoListTracker — main.css
   Combined design: your line system + modern ChatGPT-style theme
   Supports: light/dark modes via [data-theme="dark"]
   =========================================================== */

/* 1. Base Theme Variables
   ----------------------------------------------------------- */
:root {
    --font-body: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'Fira Code', 'Courier New', monospace;

    --bg-color: #fafafa;
    --bg-secondary: #f6f7f8;
    --text-color: #111111;
    --text-muted: #666666;
    --border-color: #e0e0e0;

    --accent-color: #2f4789;
    --accent-hover: #1b2e8c;
    --link-color: #a9ba35;

    --line-color: #333;
    --line-overlay-bg: rgba(250, 250, 250, 0.6);

    --shadow-soft: 0 1px 3px rgba(0,0,0,0.08);
    --radius: 8px;
    --transition: 0.2s ease-in-out;

    --bg-tertiary: #eaeaea;
    --success: #2ecc71;
    --danger: #e74c3c;

    --heading-weight: 600;
    --heading-line-height: 1.2;
    --heading-margin-top: 1.2em;
    --heading-margin-bottom: 0.5em;

    --h1-size: 1.8rem;
    --h2-size: 1.4rem;
    --h3-size: 1.2rem;
}

/* 2. Dark Theme Overrides
   ----------------------------------------------------------- */
[data-theme="dark"] {
    --bg-color: #121212;
    --bg-secondary: #151515;
    --text-color: #e6e6e6;
    --text-muted: #aaaaaa;
    --border-color: #333333;

    --accent-color: #00c896;
    --accent-hover: #00b488;
    --link-color: #00c896;

    --line-color: #aaa;
    --line-overlay-bg: rgba(18, 18, 18, 0.7);

    --shadow-soft: 0 1px 3px rgba(0,0,0,0.6);

    --bg-tertiary: #222;
    --success: #27ae60;
    --danger: #c0392b;
}

/* 3. Global Layout
   ----------------------------------------------------------- */
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    line-height: 1.6;
    transition: background-color var(--transition), color var(--transition);
}

/* 4. Main Page Structure
   ----------------------------------------------------------- */
main {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* 5. Decorative Lines
   ----------------------------------------------------------- */

/* Shared line style */
.line {
    height: 1px;
    background-color: var(--line-color);
    margin: 0 auto;
    opacity: 0.6;
}

/* Top and bottom line groups */
.top-lines {
    position: relative;
    /* margin: 10px auto; */
    margin: 10px 10px 10px;
    width: 98%;
}

.bottom-lines {
    position: relative;
    margin: 0px 10px 30px;
    width: 98%;
}

/* Line width relationships */
.top-lines .line1 { width: 98%; }
.top-lines .line2 { width: 96%; margin-top: 2px; }

.bottom-lines .line1 { width: 96%; }
.bottom-lines .line2 { width: 98%; margin-top: 2px; margin-bottom: -8px; padding-top: 0;}

/* Overlay text styles */
.header-text {
    position: absolute;
    top: -0.9em;
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--text-color);
    padding: 0 1%;
}

/* Text backdrop (keeps lines visible under faded overlay) */
.header-text span {
    position: relative;
    z-index: 1;
}
.header-text span::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1.2em;
    transform: translateY(-50%);
    background: var(--line-overlay-bg);
    z-index: -1;
}

/* 6. Headings
   ----------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--heading-weight);
    margin: var(--heading-margin-top) 0 var(--heading-margin-bottom);
    line-height: var(--heading-line-height);
}

h1 { font-size: var(--h1-size); text-align: center; }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }

/* 7. Links & Buttons
   ----------------------------------------------------------- */
a {
    color: var(--link-color);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

button {
    background: var(--accent-color);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
    box-shadow: var(--shadow-soft);
}
button:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

/* 8. Forms
   ----------------------------------------------------------- */
input, select, textarea {
    background: var(--bg-secondary);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    width: 100%;
    font-size: 1rem;
    transition: border-color var(--transition), background var(--transition);
}
input:focus, textarea:focus {
    border-color: var(--accent-color);
    outline: none;
}

/* 9. Header & Footer
   ----------------------------------------------------------- */
header, footer {
    background: var(--bg-secondary);
    color: var(--text-color);
    padding: 1rem 0;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

footer {
    padding: 10px 0;
}

header h1 {
  margin-top: -0.25rem;   /* tighten top spacing */
  margin-bottom: 0.5rem; /* optional: keep a little room below */
}

.logo-catchphrase {
  /*font-family: "Garamond", "Palatino Linotype", "Book Antiqua", serif;*/
  font-family: "Georgia", "Times New Roman", Times, serif;
  font-size: 0.85rem;         /* smaller text */
  font-style: italic;         /* gives it that old-style touch */
  letter-spacing: 0.5px;      /* slight spacing for elegance */
  color: #555;                /* softer contrast than pure black */
  margin: 0;                  /* tidy alignment with logo */
}

footer {
    border-top: 1px solid var(--border-color);
    border-bottom: none;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* 10. Utilities
   ----------------------------------------------------------- */
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mb-1 { margin-bottom: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-2 { margin-bottom: 2rem; }

/* 11. Scrollbar (Optional)
   ----------------------------------------------------------- */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
}

/* 12. Page Specific 
   ----------------------------------------------------------- */
/* ===========================================================
   Bunbury Experiment — tenant.css
   Full-width, full-height tenant layout
   =========================================================== */

/* ===========================================================
   Navigation Bar (bodyNavBar)
   =========================================================== */
#bodyNavBar {
    width: 100%;
    background-color: var(--bg-secondary);
    display: flex;
    justify-content: center;        /* center nav horizontally */
    align-items: center;
    padding: 0;                     /* remove any padding gap */
    box-sizing: border-box;
    position: relative;
    z-index: 10;
    border: none;                   /* remove top/bottom borders */
    box-shadow: none;               /* remove drop shadow */
}

#bodyNavBar .bodyNavBar-left {
    flex: 1;
}

.bodyMain-nav ul {
    display: flex;
    justify-content: space-evenly;  /* evenly distribute across width */
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;                    /* ensures even distribution */
    max-width: 1200px;              /* optional: limits excessive spacing on wide monitors */
}

.bodyMain-nav li {
    flex: 1;                        /* each item takes equal space */
    text-align: center;
}

.bodyMain-nav a {
    display: block;
    padding: 1rem 0;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.bodyMain-nav a:hover,
.bodyMain-nav a:focus {
    background-color: var(--accent-bg-hover, rgba(255,255,255,0.08));
    color: var(--accent-color, #4CAF50);
}

/* ===========================================================
   Main Content Section
   =========================================================== */
#bodySection {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    flex: 1;                        /* let it expand naturally inside body flex */
    margin: 0 auto;
    padding: 2rem 5%;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Left section: 2/3 width */
#bodySection .bodySection-left {
    flex: 0 0 66%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* Right section: 1/3 width */
#bodySection .bodySection-right {
    flex: 0 0 30%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    height: 100%;
    min-height: 70vh;
}

/* Info boxes */
.bodySection-box {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow-soft);
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
}

.bodySection-box h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    color: var(--text-color);
}

.bodySection-box + .bodySection-box {
    margin-top: 1rem;
}

/* Bottom box anchored near footer */
.bodySection-box.secondary {
    margin-top: auto;
    align-self: flex-end;
    width: 100%;
    margin-bottom: 1.5rem;
}

/* ===========================================================
   Responsive Adjustments
   =========================================================== */
@media (max-width: 900px) {
    #bodyNavBar {
        flex-direction: column;
        padding: 0.5rem 1rem;
    }

    .bodyMain-nav ul {
        flex-direction: column;
        align-items: stretch;
    }

    .bodyMain-nav a {
        padding: 0.75rem 1rem;
        text-align: center;
    }

    #bodySection {
        flex-direction: column;
        width: 100%;
        padding: 1rem;
        min-height: auto;
    }

    #bodySection .bodySection-left,
    #bodySection .bodySection-right {
        flex: 1 1 100%;
        padding: 1rem 0;
    }
}

h2 {
    margin-top: 0;
}