/* top of file */

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #1C1A18;
        color: #C8BFAF;
    }

    a {
        text-decoration: none;
        color: #F4F1E8;
    }

    a:hover {
        color: #2980b9;
    }

    h1, h2, h3 {
        color: #6c88c6;
    }

    input, select, textarea {
        padding: 8px;
        margin-top: 4px;
        margin-bottom: 12px;
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    input[type="submit"] {
        background-color: #2980b9;
        color: white;
        border: none;
        cursor: pointer;
        font-weight: bold;
        transition: background-color 0.2s ease-in-out;
    }


    input[type="submit"]:hover {
        background-color: #3498db;
    }

        /* Navigation bar */
    .navbar {
        display: flex;
        justify-content: space-between;
        
        align-items: center;
        padding: 15px 25px;
        background-color: #C9A227;
        border-bottom: #7A1E1E solid 3px;
        color: #F4F1E8;
    }

    .nav-left {
        display: flex;
        align-items: center;
        gap: 20px;
    }
    
    .nav-center {
        display: flex;
        gap: 20px;
    }
    
    .nav-right {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .username-display a {
        padding-right: 0 !important;
        margin-right: 0 !important;
    }

    .site-title {
        margin: 0;
        font-size: 20px;
        color: white;
    }

    .username-display {
        font-size: 14px;
        background-color: rgba(255,255,255,0.1);
        padding: 6px 10px;
        border-radius: 6px;
    }

    .navbar a {
        color: white;
        margin-right: 20px;
    }

    .navbar a:hover {
        color: #ecf0f1;
    }
    /* Page layout */
    .container {
        display: flex;
        min-height: 100vh;
    }

    .upload-form {
        background-color: #2A2420;
        padding: 20px;
        border-radius: 8px;
        border: 1px solid #C9A227;
    }

    .btn-submit, .btn-primary, .btn-danger-small {
        background-color: #2980b9;
        color: white;
        border: none;
        cursor: pointer;
        font-weight: bold;
        transition: background-color 0.2s ease-in-out;
        border-radius: 2px;
    }

        /* Left sidebar */
    .sidebar {
        width: 250px;
        background-color: #241E1A;
        border-right: 2px solid #7A1E1E;
        box-sizing: border-box;
        position: sticky;   
        top: 0;
        
    }
    
    .upload-done {
        padding: 20px;
        display: flex;
        flex-direction: column;
    } 
    
    
    .sidebar label {
        margin-top: 0;
        color: #C9A227;
    }
    .sidebar a {
        color: #F4F1E8;
    }

    .sidebar a:hover {
        color: #C9A227;
        background: rgba(201,162,39,0.08);
        /* Main content */
    }

    .sidebar.collapsed {
        width: 70px;
        height: 100vh;
    }

    .sidebar-content {
        padding: 20px;
    }
    .sidebar-content input, .sidebar-content select, .login-container input, .upload-form input, .upload-form textarea , .upload-form select {
        background: #2C2A28;
        padding: 10px;
        border-radius: 4px;
        color: #F4F1E8;
    }
    .sidebar-content input:focus, .sidebar-content select:focus {
        outline: none;
        border-color: #C9A227;
    }
    .sidebar-content input[type="submit"], .upload-form input[type="submit"] {
        background: #C9A227;
        color: #1C1A18;
        border: none;
        padding: 10px 15px;
        border-radius: 4px;
        cursor: pointer;
    }

    .sidebar.collapsed .sidebar-content {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0s ease;
    }

    .toggle-btn {
        position: absolute;
        top: 15px;
        right: -18px;
        background: #C9A227;
        color: #1C1A18;
        border: none;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        cursor: pointer;
        font-size: 16px;
    }

    .main {
        flex: 1;
        padding: 20px;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .icon-main{
        flex: 1;
        padding: 20px;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        flex-direction: column;
    }

    .upload-main {
        display: block;
        align-items: center;
        margin: 0 auto;
        padding: 20px;
        width: 60%;
    }

    .icon-grid{
        flex: 1;
        padding: 20px;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .profile-container {
        flex: 1;
        padding: 20px;
    }

    .login-container {
        display: flex;
        align-items: center;
        height: 100vh;
        flex-direction: column;
    }

    

    .login-form {
        text-align: center;
        padding: 20px;
        border: 1px solid #C9A227;
        width: 300px;
    }

   .icon-card {
        background-color: #2A2420;
        height: 350px;
        width: 210px;  /* Fixed width is often safer than aspect-ratio for grid flow */
        text-align: center;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        transition: transform 0.2s, box-shadow 0.2s;
        overflow: hidden;
        /* The Magic Sauce */
        display: flex;
        flex-direction: column;
    }

   .icon-info {
        display: flex;
        flex-direction: row; /* Ensure horizontal alignment */
        justify-content: space-around; /* Spread them out */
        align-items: center;
        padding: 5px 10px;
        gap: 10px;
    }

    .icon-card img {
        width: 100%;
        height: 220px;    /* Give the image a specific portion of the card */
        object-fit: cover; /* for the icon to retain its usual height */
        object-position: top; /* Align the image to the top of the container */
        display: block;
    }

    .icon-stat {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5px; /* Space between icon and number */
        font-size: 0.9rem;
    }
    
    .icon-card p, .icon-card h3 {
        margin: 0;
        padding: 10px;
        flex-grow: 1;      /* This pushes the text to fill the remaining space */
        display: flex;
        align-items: center; /* Vertically centers the title */
        justify-content: center;
        font-size: 0.9rem;
        line-height: 1.2;
    }

    .icon-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        cursor: pointer;
    } 

    .interaction-wrapper {
        display: flex;
        gap: 30px;
        align-items: flex-start;
        margin-top: 20px;
        width: 100%;
        flex-direction: row;
    }

    .icon-detail {
        display: grid;
        grid-template-columns: 400px 1fr;
        gap: 2rem;
        align-items: start;
        justify-items: stretch;
    }

    .candle-section {
        flex: 0 0 auto; /* Keeps it from stretching */
        padding-top: 20px;
    }

    #candle-button {
        background: none;
        border: 1px solid #ccc;
        cursor: pointer;
        font-size: 1.2rem;
        border-radius: 20px;
        padding: 5px 15px;
        transition: all 0.3s ease;
    }

    #candle-button.candle-active {
        border-color: #ff9800;
        box-shadow: 0 0 10px rgba(255, 152, 0, 0.5);
        background-color: #fff9c4;
    }

    #candle-button.candle-active #candle-icon {
        filter: drop-shadow(0 0 5px orange);
    }


    .icon-description {
        display: flex;
        flex-direction: column;
    }

        /* Container Spacing */
  /* Adjusting comments to take the remaining space */
    .comments-container {
        flex: 1; /* Takes up the rest of the horizontal space */
        margin: 0 !important; /* Overriding your previous auto margins */
        width: auto !important;
    }

    .counter-container {
        font-size: 0.8rem;
        color: #888;
        text-align: right;
        margin-top: -5px;
        margin-bottom: 15px;
    }

    #char-count {
        font-weight: bold;
    }

    .section-title {
        color: #6c88c6;
        margin-bottom: 25px;
    }

    /* Form Styling */
    .comment-form textarea {
        width: 100%;
        height: 100px;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        background: #2C2A28;
        color: #F4F1E8;
        font-family: inherit;
        resize: vertical;
        margin-bottom: 10px;
        transition: border-color 0.3s;
    }

    .comment-form textarea:focus {
        outline: none;
        border-color: #ff9800; /* Matching your candle glow */
    }

    /* Comment Cards */
    .comment-card {
        background: #2A2420;
        border: 1px solid #7A1E1E;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        transition: transform 0.2s;
    }

    .comment-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        font-size: 0.9rem;
    }

    .comment-author {
        font-weight: bold;
        text-decoration: none;
        color: #C8BFAF;
    }

    .comment-author:hover {
        color: #ff9800;
    }

    .comment-date {
        color: #888;
    }

    .edited-tag {
        font-style: italic;
        opacity: 0.7;
        margin-left: 5px;
    }

    .comment-body {
        line-height: 1.6;
        color: #F4F1E8;
        white-space: pre-line; /* Preserves line breaks from textarea */
    }

    /* Action Buttons */
    .comment-actions {
        margin-top: 12px;
        display: flex;
        gap: 15px;
        font-size: 0.8rem;
        border-top: 1px solid #f9f9f9;
        padding-top: 8px;
    }

    .action-link {
        color: #007bff;
        text-decoration: none;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
    }

    .delete-text {
        color: #dc3545;
    }

    .action-link:hover {
        text-decoration: underline;
    }
    

    .icon-img {
        max-width: 70%;   /* ensures image never exceeds container width */
        aspect-ratio: auto; /* maintain original aspect ratio */
        height: auto;       /* maintain aspect ratio */
        border: 4px solid #C9A227;
        display: block;
        margin-bottom: 20px;
    }

    .editable-text {
        padding: 4px 8px;
        border: 1px dashed transparent;
        transition: all 0.2s;
        cursor: pointer;
        font-weight: bold;
        border-radius: 4px;
    }

    .editable-text:hover {
        background-color: #f0f0f0;
        border-color: #ccc;
        color: #1c1c1c;
    }

    .editable-text:focus {
        outline: none;
        background-color: white;
        border: 1px solid #007bff;
        cursor: text;
        color: #1c1c1c
    }

    .settings-container, .edit-icon-container, .manage-uploads {
        margin: 0 auto;
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    


    /* Mobile Compatibility Overrides */
@media screen and (max-width: 768px) {
    /* 1. Stack the Navigation */
    .navbar {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding: 10px;
    }

    .nav-left,
    .nav-right {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;
    }

    .site-title {
        width: 100%;
        text-align: center;
        margin-bottom: 5px;
    }

    .navbar a {
        margin: 0;
        padding: 5px 8px;
    }

    /* 2. Handle the Sidebar and Container */
    .container {
        flex-direction: column; /* Stack sidebar on top of main content */
        padding: 5px;
    }

    .sidebar {
        width: 100% !important; /* Force full width on mobile */
        position: relative;
        border-right: none;
        border-bottom: 2px solid #7A1E1E;
    }

    .toggle-btn {
        position: relative;   /* remove absolute */
        top: auto;
        right: auto;
        display: block;
        margin: 10px auto;
    }

    .sidebar.collapsed {
        width: 100% !important;
        height: 20px;
    }

    /* 3. Adjust Main Content Areas */
    .main, .icon-grid, .icon-main {
        padding: 10px;
        justify-content: center;
    }

    .upload-main {
        width: 95%; /* Make upload form wider on small screens */
    }

    /* 4. Icon Cards & Details */
    .icon-card {
        width: 100%; /* Scale cards to container width */
        max-width: 160px;; 
        height: auto;
    }

    .icon-detail {
        grid-template-columns: 1fr; /* Stack image on top of description */
        justify-items: center;
    }

    .icon-img {
        max-width: 100%;
    }
    
     .interaction-wrapper {
        flex-direction: column;
        gap: 20px;
    }

    .candle-section {
        padding-top: 0;
    }

    .comments-container {
        width: 100% !important;
    }

    
    .icon-info {
        flex-direction: row !important; /* Force horizontal even on mobile */
        justify-content: center;
        gap: 15px;
    }

    /* 5. Forms and Inputs */
    .login-form {
        width: 90%;
        box-sizing: border-box;
    }

    .comments-container {
        width: 95%;
        padding: 10px;
    }

    /* 6. Typography adjustments */
    .site-title {
        font-size: 1.5rem;
    }
    
    h1 {
        font-size: 1.4rem;
    }
}