/* ======================================== */
/*            Global Styles & Layout        */
/* ======================================== */

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

html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* System font stack */
    line-height: 1.5;
    color: #1f2937; /* Default text color */
    background: linear-gradient(to right bottom, #f8fafc, #f1f5f9); /* Default body background */
}

body.flex { /* Class added in header.php */
    display: flex;
}

body.h-screen { /* Class added in header.php */
    height: 100vh;
}

body.overflow-hidden { /* Class added in header.php */
    overflow: hidden; /* Prevent body scroll when sidebar/main scrolls */
}

/* Link reset */
a {
    color: inherit;
    text-decoration: none;
}

/* Scrollbar styling (Optional, from UI) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Sidebar Layout */
.sidebar {
    width: 256px; /* Corresponds to w-64 */
    flex-shrink: 0; /* Prevent sidebar from shrinking */
    background: linear-gradient(to bottom, #ffffff, #f9fafb);
    box-shadow: 5px 0px 15px -3px rgba(0, 0, 0, 0.05);
    overflow-y: auto; /* Enable vertical scroll */
    height: 100vh; /* Full height */
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease-in-out; /* For potential collapse later */
}

.sidebar-header {
    padding: 1.5rem 1rem 1rem 1rem; /* Top, R/L, Bottom */
    text-align: center;
    flex-shrink: 0; /* Prevent header from shrinking */
}

.sidebar-title {
    font-size: 1.25rem; /* Corresponds to text-xl */
    font-weight: 700; /* Corresponds to font-bold */
    /* Gradient text effect - requires background clip vendor prefixes */
    background: linear-gradient(to right, #6366f1, #8b5cf6);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.sidebar-nav {
    margin-top: 1rem; /* Corresponds to mt-4 */
    flex-grow: 1; /* Allow nav to fill remaining space */
    overflow-y: auto; /* Scroll within nav if needed */
}

.sidebar-nav ul {
    list-style: none;
}

/* Sidebar main menu item */
.sidebar-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    border-radius: 0.75rem;
    margin: 0.5rem 1rem;
    padding: 0.75rem 1rem;
    color: #374151; /* Default text color */
}

.sidebar-item:hover {
    background-color: #eef2ff;
    color: #4f46e5;
}
.sidebar-item:hover .sidebar-icon,
.sidebar-item:hover .sidebar-arrow {
    color: #4f46e5; /* Change icon/arrow color on hover */
}


.sidebar-item-content {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Corresponds to gap-3 */
}

.sidebar-icon {
    display: inline-block;
    width: 1.25rem; /* Corresponds to w-5 */
    text-align: center;
    color: #6b7280; /* Corresponds to text-gray-500 */
    font-size: 0.9em; /* Adjust icon size */
    flex-shrink: 0;
}
.submenu-icon {
     width: 1rem; /* Corresponds to w-4 */
     color: #9ca3af; /* Corresponds to text-gray-400 */
     font-size: 0.8em;
}

.sidebar-arrow {
    font-size: 0.75rem; /* Corresponds to text-xs */
    transition: transform 0.2s ease-in-out;
    color: #6b7280;
    flex-shrink: 0;
}

/* Rotate arrow when open */
.sidebar-item.open .sidebar-arrow {
    transform: rotate(180deg);
}

/* Submenu container */
.sidebar-submenu {
    list-style: none;
    padding-left: 1.5rem; /* Indentation */
    /* max-height: 0; */ /* Using display none/block from JS now */
    display: none; /* Hidden by default */
    overflow: hidden;
    /* transition: max-height 0.3s ease-out; */ /* Transition requires max-height */
}

/* Submenu item link */
.submenu-item {
    display: flex; /* Use flex for alignment */
    align-items: center;
    gap: 0.5rem; /* Space between icon and text */
    padding: 0.5rem 1rem 0.5rem 1.5rem;
    font-size: 0.9rem;
    color: #4b5563;
    border-radius: 0.5rem;
    margin: 0.25rem 1rem;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.submenu-item:hover {
    background-color: #f3f4f6;
    color: #1f2937;
}
.submenu-item:hover .submenu-icon {
    color: #1f2937;
}


/* Active submenu item */
.submenu-item.active {
    background-color: #e0e7ff; /* Light indigo */
    color: #4f46e5; /* Indigo */
    font-weight: 500;
}
.submenu-item.active .submenu-icon {
     color: #4f46e5; /* Match text color */
}


/* Main Content Area Layout */
.main-content {
    flex-grow: 1; /* Take remaining width */
    overflow-y: auto; /* Enable vertical scroll */
    height: 100vh; /* Full height */
    /* Padding is added by .page-container within each page */
}


/* ======================================== */
/*       End Global Styles & Layout         */
/* ======================================== */

/* ======================================== */
/*           Notification Styles            */
/* ======================================== */

/* Container for the page content within the main area */
.page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem; /* Corresponds to p-8 in Tailwind */
    /* Add other base styles if needed */
}

/* Page title styles */
.page-title {
    font-size: 1.75rem; /* Corresponds to text-2xl */
    font-weight: 600; /* Corresponds to font-semibold */
    color: #4338ca; /* Corresponds to text-indigo-700 */
    margin-bottom: 1.5rem; /* Corresponds to mb-6 */
    display: flex; /* To align icon and text */
    align-items: center; /* To align icon and text */
    gap: 0.75rem; /* Corresponds to gap-3 */
}

/* Icon placeholder basic style */
.icon-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background-color: #eef2ff;
    color: #4f46e5;
    border-radius: 0.5rem;
    font-size: 1rem;
}

/* Specific color for page title icon */
.page-title .icon-placeholder {
    color: #f59e0b; /* Corresponds to text-yellow-500 */
}


/* List container for notifications */
.notification-list {
    /* No specific container styles needed based on UI */
}

/* Base styles for notification cards */
.notification-card {
    background-color: white;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-left: 4px solid; /* Base for status color */
    transition: all 0.3s ease-in-out;
    display: flex; /* Replicates flex */
    align-items: flex-start; /* Replicates items-start */
}

.notification-card:hover {
    box-shadow: 0 15px 20px -5px rgba(0, 0, 0, 0.08), 0 8px 8px -5px rgba(0, 0, 0, 0.03);
    transform: translateY(-3px);
}

/* Status color variants */
.notification-info { border-left-color: #3b82f6; }
.notification-success { border-left-color: #10b981; }
.notification-warning { border-left-color: #f59e0b; }
.notification-error { border-left-color: #ef4444; }

/* Wrapper for the icon (if needed for spacing/alignment) */
.notification-icon-wrapper {
    margin-right: 1rem; /* Space between icon and content */
    flex-shrink: 0; /* Prevent icon from shrinking */
}

/* Base styles for the status icon circle */
.notification-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icon color variants */
.notification-icon.icon-info { background-color: #dbeafe; color: #2563eb; }
.notification-icon.icon-success { background-color: #d1fae5; color: #059669; }
.notification-icon.icon-warning { background-color: #fef3c7; color: #d97706; }
.notification-icon.icon-error { background-color: #fee2e2; color: #dc2626; }

/* Content area within the card */
.notification-content {
    flex-grow: 1; /* Allow content to take remaining space */
}

/* Notification title */
.notification-title {
    font-weight: 600; /* Corresponds to font-semibold */
    color: #1f2937; /* Corresponds to text-gray-800 */
    margin-bottom: 0.25rem; /* Corresponds to mb-1 */
}

/* Notification main text */
.notification-text {
    font-size: 0.875rem; /* Corresponds to text-sm */
    color: #4b5563; /* Corresponds to text-gray-600 */
    margin-bottom: 0.5rem; /* Corresponds to mb-2 */
    line-height: 1.4; /* Added for better readability */
}

/* Notification timestamp */
.notification-time {
    font-size: 0.75rem; /* Corresponds to text-xs */
    color: #9ca3af; /* Corresponds to text-gray-400 */
}

/* Close button styles */
.notification-close-btn {
    background: none;
    border: none;
    color: #9ca3af; /* Corresponds to text-gray-400 */
    font-size: 1.25rem; /* Adjust size as needed */
    line-height: 1;
    cursor: pointer;
    padding: 0 0.5rem; /* Add some padding for easier clicking */
    margin-left: 1rem; /* Corresponds to ml-4 */
    align-self: flex-start; /* Align button to the top */
    flex-shrink: 0;
}

.notification-close-btn:hover {
    color: #4b5563; /* Corresponds to hover:text-gray-600 */
}

/* 通知表单样式 */
.notification-form {
    background-color: white;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 2rem;
    margin-bottom: 2rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #4b5563;
}

.form-control {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: border-color 0.2s ease-in-out;
}

.form-control:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

.form-select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 1rem;
    background-color: white;
    transition: border-color 0.2s ease-in-out;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    border-radius: 0.5rem;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: linear-gradient(to right, #6366f1, #8b5cf6);
    color: white;
}

.btn-primary:hover {
    background: linear-gradient(to right, #4f46e5, #7c3aed);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.2);
}

/* 通知设置区域 */
.notification-settings {
    background-color: white;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 2rem;
    margin-bottom: 2rem;
}

.notification-list {
    background-color: white;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 2rem;
    margin-bottom: 2rem;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .page-container {
        padding: 1rem;
    }
    
    .notification-form,
    .notification-settings,
    .notification-list {
        padding: 1.5rem;
    }
}

/* ======================================== */
/*         End Notification Styles          */
/* ======================================== */
/* ======================================== */
/*          Article Page Styles             */
/* ======================================== */

/* Base card style (can be shared or made specific) */
.card {
    background-color: white;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 2rem;
    margin-bottom: 2rem; /* Or handle spacing in .page-container */
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: translateY(-5px);
}

/* Title within the card */
.card-title {
    /* Inherits from .page-title, potential overrides here */
    margin-bottom: 1.5rem; /* Corresponds to mb-6 */
}

/* Specific icon color for article title */
.article-card .card-title .icon-placeholder {
     color: #6366f1; /* Corresponds to text-indigo-500 */
}

/* Form group for label and input */
.form-group {
    margin-bottom: 1.5rem; /* Corresponds to mb-6 */
}

/* Form label */
.form-label {
    display: block; /* Makes it take full width */
    font-size: 0.875rem; /* Corresponds to text-sm */
    font-weight: 500; /* Corresponds to font-medium */
    color: #374151; /* Corresponds to text-gray-700 */
    margin-bottom: 0.5rem; /* Corresponds to mb-2 */
}

/* Textarea styling */
.form-textarea {
    display: block; /* Take full width */
    width: 100%; /* Explicit width */
    border-radius: 0.75rem;
    border: 1px solid #d1d5db; /* Corresponds to border-gray-300 */
    padding: 1rem;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    line-height: 1.5; /* Basic line height */
    font-family: inherit; /* Inherit font from body */
    font-size: 1rem; /* Default textarea font size */
    box-sizing: border-box; /* Include padding and border in element's total width and height */
}

.form-textarea::placeholder {
    color: #9ca3af; /* Corresponds to placeholder-gray-400 */
}

.form-textarea:focus {
    outline: none;
    border-color: #6366f1; /* Corresponds to focus:border-indigo-500 */
    /* Replicating focus:ring-indigo-500 with box-shadow */
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}

/* Button group container */
.button-group {
    display: flex;
    justify-content: flex-end; /* Aligns buttons to the right */
    gap: 1rem; /* Corresponds to space-x-4 */
}

/* Base button style */
.btn {
    border-radius: 0.75rem;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    display: inline-flex; /* Allows icon and text alignment */
    align-items: center;
    gap: 0.5rem; /* Space between icon and text */
    border: none; /* Remove default border */
    cursor: pointer;
    font-size: 1rem; /* Base button font size */
    line-height: 1; /* Ensure text aligns well */
    text-decoration: none; /* Remove underline if used as link */
    white-space: nowrap; /* Prevent text wrapping */
}

.btn .icon-placeholder {
    /* Styles for icons inside buttons if needed */
    /* Example: font-size: 0.9em; */
}

/* Primary button style */
.btn-primary {
    background: linear-gradient(to right, #6366f1, #8b5cf6);
    color: white;
}

.btn-primary:hover {
    background: linear-gradient(to right, #4f46e5, #7c3aed);
    box-shadow: 0 4px 6px rgba(99, 102, 241, 0.5);
}

/* Secondary button style */
.btn-secondary {
    background-color: #e5e7eb; /* Corresponds to bg-gray-200 */
    color: #4b5563; /* Corresponds to text-gray-600 */
}

.btn-secondary:hover {
    background-color: #d1d5db; /* Corresponds to hover:bg-gray-300 */
}


/* ======================================== */
/*        End Article Page Styles           */
/* ======================================== */
/* ======================================== */
/*       Template Management Styles         */
/* ======================================== */

/* Header for the page containing title and add button */
.page-header {
    display: flex;
    justify-content: space-between; /* Pushes title and button apart */
    align-items: center; /* Vertically aligns title and button */
    margin-bottom: 2rem; /* Corresponds to mb-8 */
}

/* Icon color for template page title */
.page-header .page-title .icon-placeholder {
    color: #a855f7; /* Corresponds to text-purple-500 */
}

/* Grid container for template cards */
.template-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Default: 1 column */
    gap: 1.5rem; /* Corresponds to gap-6 */
}

/* Responsive grid columns */
@media (min-width: 640px) { /* Corresponds to sm: */
    .template-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 768px) { /* Corresponds to md: */
    .template-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 1024px) { /* Corresponds to lg: */
    .template-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Specific styles for template cards */
.template-card {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    height: 100%; /* Make cards fill grid row height */
    padding: 1.5rem; /* Overrides default card padding if needed */
    /* Inherits base .card styles (background, shadow, border-radius) */
}

/* Template preview area */
.template-preview {
    height: 150px;
    background-color: #f3f4f6; /* Default background */
    border-radius: 0.75rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af; /* Placeholder text color */
    font-style: italic;
    background-size: cover; /* For background images */
    background-position: center; /* For background images */
    overflow: hidden; /* Ensure content doesn't overflow */
}

/* Container for title and description */
.template-info {
    flex-grow: 1; /* Allows this section to take up space, pushing actions down */
    margin-bottom: 1rem; /* Space before action buttons */
}

/* Template title */
.template-title {
    font-size: 1.125rem; /* Corresponds to text-lg */
    font-weight: 600; /* Corresponds to font-semibold */
    color: #374151; /* Corresponds to text-gray-700 */
    margin-bottom: 0.25rem; /* Corresponds to mb-1 */
}

/* Template description */
.template-description {
    font-size: 0.875rem; /* Corresponds to text-sm */
    color: #6b7280; /* Corresponds to text-gray-500 */
    line-height: 1.4;
}

/* Container for action buttons within the template card */
.template-actions {
    /* Reuses .button-group for flex-end alignment and gap */
    margin-top: auto; /* Push actions to the bottom if info doesn't fill space */
}

/* Adjust button sizes for template card if needed */
.template-actions .btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    gap: 0.3rem;
}

/* Outline button style */
.btn-outline {
    border: 1px solid #6366f1;
    color: #6366f1;
    background-color: transparent;
}

.btn-outline:hover {
    background-color: rgba(99, 102, 241, 0.1); /* Light indigo background on hover */
}

/* Disabled button state (for '已选择') */
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    /* Adjust background/color if needed for disabled state */
}


/* ======================================== */
/*     End Template Management Styles       */
/* ======================================== */
/* ======================================== */
/*        Article Management Styles         */
/* ======================================== */

/* Specific card styles if needed */
.manage-card {
    /* Inherits base .card styles */
}

/* Icon color for manage page title */
.manage-card .page-title .icon-placeholder {
    color: #3b82f6; /* Corresponds to text-blue-500 */
}

/* Danger button (already styled in article styles, ensure consistency) */
.btn-danger {
    background-color: #ef4444;
    color: white;
}
.btn-danger:hover {
    background-color: #dc2626;
    box-shadow: 0 4px 6px rgba(239, 68, 68, 0.5);
}
.btn-danger .icon-placeholder {
    /* Specific icon styles for danger button if needed */
}


/* Table container for horizontal scrolling */
.table-container {
    overflow-x: auto; /* Enables horizontal scroll on small screens */
    margin-top: 1.5rem; /* Space below header */
}

/* Base table style */
.data-table {
    width: 100%;
    border-collapse: separate; /* Allows border-radius on th */
    border-spacing: 0;
    min-width: 600px; /* Prevents excessive squishing */
    border: 1px solid #e5e7eb; /* Optional: Add border around table */
    border-radius: 0.75rem; /* Optional: Match card radius */
    overflow: hidden; /* Ensures radius clips content */
}

/* Table header cells */
.data-table th {
    background-color: #f9fafb; /* Corresponds to bg-gray-50 */
    color: #4b5563; /* Corresponds to text-gray-600 */
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 1rem 1.5rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb; /* Corresponds to divide-gray-200 */
}

/* Table body cells */
.data-table td {
    padding: 1rem 1.5rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: middle;
    background-color: white; /* Ensure body background is white */
    color: #1f2937; /* Default text color */
}

/* Remove bottom border from last row */
.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* Row hover effect */
.data-table tbody tr:hover td {
    background-color: #f3f4f6; /* Corresponds to hover:bg-gray-100 */
    transition: background-color 0.2s ease-in-out;
}

/* Specific column widths/styles */
.data-table .checkbox-col {
    width: 3rem; /* Adjust as needed */
    padding-right: 0.5rem; /* Reduce padding */
    text-align: center;
}
.data-table .actions-col {
    text-align: right;
    white-space: nowrap; /* Prevent actions wrapping */
}

/* Checkbox styling */
.form-checkbox {
    border-radius: 0.25rem;
    border: 1px solid #d1d5db;
    color: #6366f1; /* Checkmark color */
    width: 1rem;
    height: 1rem;
    vertical-align: middle; /* Align checkbox nicely */
    cursor: pointer;
    /* Basic appearance reset */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: white;
    position: relative; /* For custom checkmark */
    display: inline-block; /* Ensure it aligns correctly */
}
.form-checkbox:checked {
    background-color: #6366f1;
    border-color: #6366f1;
}
/* Simple checkmark using pseudo-element */
.form-checkbox:checked::after {
    content: '';
    display: block;
    width: 0.3rem;
    height: 0.6rem;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 45%; /* Adjust vertical position */
}


.form-checkbox:focus {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
    /* Remove the Tailwind ring simulation from previous steps if present */
    box-shadow: none;
}

/* Header checkbox specific styles if needed */
.header-checkbox { }
/* Row checkbox specific styles if needed */
.row-checkbox { }


/* Status badge base */
.status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px; /* Pill shape */
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2; /* Adjust line height */
}

/* Status badge variants */
.status-published { background-color: #dcfce7; color: #166534; }
.status-draft { background-color: #ffedd5; color: #9a3412; }
.status-archived { background-color: #e5e7eb; color: #4b5563; }

/* Article title cell */
.article-title {
    font-weight: 500; /* Corresponds to font-medium */
    color: #111827; /* Corresponds to text-gray-900 */
}

/* Timestamp cell */
.timestamp {
    font-size: 0.875rem; /* Corresponds to text-sm */
    color: #6b7280; /* Corresponds to text-gray-500 */
    white-space: nowrap;
}

/* Actions cell container */
.actions-cell {
    text-align: right; /* Align buttons to the right */
    display: flex; /* Use flex for gap */
    justify-content: flex-end;
    gap: 0.5rem; /* Space between buttons */
}

/* Icon button base style */
.btn-icon {
    background: none;
    border: none;
    padding: 0.5rem;
    border-radius: 0.375rem; /* Add slight rounding */
    color: #6b7280; /* Default icon color */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    line-height: 1; /* Prevent extra space */
}

.btn-icon:hover {
    color: #4f46e5; /* Corresponds to hover:text-indigo-600 */
    background-color: #eef2ff; /* Corresponds to hover:bg-indigo-100 */
}

.btn-icon:disabled {
    color: #d1d5db; /* Corresponds to disabled text-gray-400 */
    background-color: transparent;
    cursor: not-allowed;
}
.btn-icon:disabled .icon-placeholder {
    color: #d1d5db; /* Ensure placeholder matches */
}

/* Danger variant for icon button */
.btn-icon-danger {
    color: #ef4444; /* Corresponds to text-red-500 */
}
.btn-icon-danger:hover {
    color: #dc2626; /* Corresponds to hover:text-red-700 */
    background-color: #fee2e2; /* Corresponds to hover:bg-red-100 */
}

/* Row shown when table is empty */
.no-data {
    text-align: center;
    padding: 2rem;
    color: #6b7280;
    font-style: italic;
}

/* Pagination container */
.pagination-container {
    margin-top: 1.5rem; /* Corresponds to mt-6 */
    display: flex;
    justify-content: flex-end; /* Align to the right */
}

.pagination-info {
    font-size: 0.875rem;
    color: #6b7280;
}


/* ======================================== */
/*      End Article Management Styles       */
/* ======================================== */
/* ======================================== */
/*           Visitor Stats Styles           */
/* ======================================== */

/* Specific card styles if needed */
.visitor-card {
    /* Inherits base .card styles */
}

/* Header adjustments for visitor page (allow wrapping) */
.visitor-header {
    /* Inherits .page-header styles (flex, justify-between, align-items, mb) */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    gap: 1rem; /* Add gap for wrapped items */
}

/* Icon color for visitor page title */
.visitor-card .page-title .icon-placeholder {
    color: #22c55e; /* Corresponds to text-green-500 */
}

/* Container for date input and clear button */
.visitor-actions {
    display: flex;
    align-items: center;
    /* margin-left: auto; */ /* Push to right if not wrapping */
}

/* Label for the date input */
.date-label {
    /* Inherits .form-label */
    margin-bottom: 0; /* Remove bottom margin */
    margin-right: 0.5rem; /* Space before input */
    white-space: nowrap;
}

/* Base input style (can be shared) */
.form-input {
    border-radius: 0.75rem;
    border: 1px solid #d1d5db;
    padding: 0.5rem 1rem;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    font-size: 0.875rem;
    line-height: 1.5;
}
.form-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}

/* Specific style for date input */
.input-date {
    /* Inherits .form-input */
    margin-right: 0.5rem; /* Space before button */
    /* Add specific width if needed */
    /* width: 150px; */
}

/* Specific styles for visitor table if needed */
.visitor-table {
    /* Inherits .data-table */
    min-width: 800px; /* Increase min-width for more columns */
}

/* IP Address styling */
.visitor-table .ip-address {
    font-family: monospace; /* Monospaced font */
    font-size: 0.875rem;
    color: #374151; /* Corresponds to text-gray-700 */
}

/* Location styling */
.visitor-table .location {
    font-size: 0.875rem;
    color: #4b5563; /* Corresponds to text-gray-600 */
}

/* User ID styling */
.visitor-table .user-id {
    font-family: monospace;
    font-size: 0.875rem;
    color: #2563eb; /* Corresponds to text-blue-600 for identified */
}
.visitor-table .user-id .unidentified {
    color: #9ca3af; /* Corresponds to text-gray-400 */
    font-style: italic;
    font-family: sans-serif; /* Reset font for unidentified text */
}

/* Visit count styling */
.visitor-table .visit-count {
    text-align: center;
    font-size: 0.875rem;
    color: #374151;
}

/* Last page cell styling */
.visitor-table .last-page {
    font-size: 0.875rem;
    color: #4b5563;
    /* Tooltip styles will handle hover effect */
    max-width: 200px; /* Limit width */
    overflow: hidden;
    text-overflow: ellipsis; /* Add ellipsis */
    white-space: nowrap; /* Prevent wrapping */
    position: relative; /* Needed for tooltip positioning */
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block; /* Or block depending on context */
    cursor: pointer;
}

/* Tooltip text bubble */
.tooltip .tooltiptext {
    visibility: hidden; /* Hidden by default */
    width: max-content; /* Adjust width based on content */
    max-width: 300px; /* Max width to prevent very long tooltips */
    background-color: #374151; /* Dark background */
    color: #fff; /* White text */
    text-align: center;
    border-radius: 0.375rem; /* Rounded corners */
    padding: 0.5rem 0.75rem;
    position: absolute;
    z-index: 10; /* Ensure it's above other elements */
    bottom: 125%; /* Position above the element */
    left: 50%;
    transform: translateX(-50%); /* Center the tooltip */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s;
    font-size: 0.75rem;
    white-space: normal; /* Allow tooltip text to wrap */
    pointer-events: none; /* Prevent tooltip from interfering with mouse */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Optional shadow */
}

/* Show tooltip on hover */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* Ensure table cells don't wrap unnecessarily */
.visitor-table td {
    white-space: nowrap;
}
/* Allow wrapping only for specific columns if needed */
/* .visitor-table .location { white-space: normal; } */


/* ======================================== */
/*         End Visitor Stats Styles         */
/* ======================================== */
/* ======================================== */
/*            Logout Link Styles            */
/* ======================================== */

/* Container for logout link (optional, for spacing) */
.sidebar-logout {
    list-style: none;
    margin-top: auto; /* Push logout to the bottom */
    padding-top: 1rem; /* Space above logout */
    border-top: 1px solid #e5e7eb; /* Separator line */
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
}

.logout-link {
    /* Inherits .sidebar-item styles */
    color: #ef4444; /* Red color for logout */
}

.logout-link:hover {
    background-color: #fee2e2; /* Light red background */
    color: #dc2626; /* Darker red */
}

.logout-link .sidebar-icon {
    color: #ef4444; /* Match link color */
}

.logout-link:hover .sidebar-icon {
     color: #dc2626; /* Match link hover color */
}

/* ======================================== */
/*          End Logout Link Styles          */
/* ======================================== */
/* ======================================== */
/*           Comment Section Styles         */
/* ======================================== */

.comment-section {
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.comment-item {
    border: 1px solid #e5e7eb; /* Light gray border */
    border-radius: 0.5rem; /* Rounded corners */
    padding: 1.25rem; /* Inner spacing */
    margin-bottom: 1.5rem; /* Space between comments */
    background-color: #f9fafb; /* Slightly off-white background for each comment */
    transition: box-shadow 0.2s ease-in-out;
}

.comment-item:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.comment-author-info {
    font-size: 0.875rem; /* text-sm */
    color: #6b7280; /* text-gray-500 */
}

.comment-author-info strong {
    color: #1f2937; /* text-gray-800 */
}

.comment-content {
    color: #374151; /* text-gray-700 */
    line-height: 1.6;
    margin-bottom: 1rem;
    white-space: pre-wrap; /* Preserve line breaks and spaces */
}

.comment-actions {
    display: flex;
    gap: 0.75rem; /* Space between buttons */
    margin-bottom: 0.75rem;
}

.comment-actions .btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border-radius: 0.375rem; /* Slightly smaller radius for inner buttons */
}

.btn-edit {
    background-color: #e0e7ff; /* Light indigo */
    color: #4f46e5; /* Indigo */
}

.btn-edit:hover {
    background-color: #c7d2fe;
    color: #4338ca;
}

.btn-delete {
    background-color: #fee2e2; /* Light red */
    color: #ef4444; /* Red */
}

.btn-delete:hover {
    background-color: #fecaca;
    color: #dc2626;
}

.comment-meta {
    font-size: 0.75rem; /* text-xs */
    color: #9ca3af; /* text-gray-400 */
    text-align: right;
}

/* Styles for pinned comments section title */
.pinned-comments-title {
    font-size: 1.5rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    color: #374151; /* text-gray-700 */
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
}

/* Specific styles for the comment management page */
.comment-management-page .page-title {
    color: #1d4ed8; /* A different blue for this page title */
}

.comment-management-page .comment-item {
    position: relative; /* For potential absolute positioning of elements later */
}

.comment-management-page .comment-id {
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.comment-management-page .user-id {
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.comment-management-page .comment-timestamps {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.5rem;
}

/* Ensure buttons in comment_management.php also use the .btn class for consistency */
#pinnedComments .btn, #normalComments .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem; /* Adjusted padding */
    font-weight: 500;
    border-radius: 0.375rem; /* Adjusted radius */
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    border: none;
    font-size: 0.875rem; /* Ensure font size matches */
    margin-right: 0.5rem; /* Add some margin between buttons */
}

#pinnedComments .btn:last-child, #normalComments .btn:last-child {
    margin-right: 0;
}

/* Add a bit more spacing for the overall comment management container */
.comment-management-container {
    padding: 1rem 0; /* Add some vertical padding */
}