/* Basic Reset & General Styles */
body, html {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f4f7f6;
    color: #333;
    height: 100%; /* Ensures container can be min-height 100vh */
}

.container {
    display: flex; /* Desktop: Sidebar and content side-by-side */
    min-height: 100vh; /* Ensure container takes at least full viewport height */
    /* Default padding for desktop, can be adjusted in media query */
    /* padding: 0; /* Added this to remove default padding if any */
}

/* Sidebar Styles */
.sidebar {
    width: 220px; /* Desktop sidebar width */
    background-color: #2c3e50; /* Dark blue/grey */
    color: #ecf0f1; /* Light grey text */
    padding-top: 20px;
    flex-shrink: 0; /* Prevent sidebar from shrinking */
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    /* Ensure sidebar is fixed on desktop if desired, but we'll make it static on mobile */
    /* If fixed, content needs margin-left. If static, they just flow */
    /* Let's keep it static and use flex layout for simplicity */
    position: static; /* Default static */
}

.sidebar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.sidebar ul li a {
    display: block; /* Make links fill the list item width */
    color: #ecf0f1;
    padding: 12px 20px; /* Default desktop padding */
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.3s ease, padding-left 0.3s ease;
    border-left: 3px solid transparent; /* For active indicator */
}

.sidebar ul li a:hover {
    background-color: #34495e; /* Slightly lighter dark blue/grey */
    padding-left: 25px; /* Desktop hover effect */
    border-left-color: #1abc9c;
}

.sidebar ul li a.active {
    background-color: #1abc9c; /* Teal */
    color: #fff;
    font-weight: bold;
    border-left-color: #f1c40f; /* Yellow accent for active */
}

/* User Info in Sidebar */
.user-info {
    padding: 10px 20px;
    color: #ecf0f1;
    background-color: #34495e;
    border-bottom: 1px solid #2c3e50;
    font-size: 0.9em;
}
.user-info a {
    color: #1abc9c;
    text-decoration: none;
}
.user-info a:hover {
    text-decoration: underline;
}

/* Admin Specific Menu Color */
/* Applying !important because the general active state might override */
.sidebar ul li a.admin-menu { background-color: #c0392b !important; }
.sidebar ul li a.admin-menu:hover { background-color: #e74c3c !important; }
.sidebar ul li a.admin-menu.active {
    background-color: #e74c3c !important; /* Brighter red for active */
    border-left-color: #f1c40f; /* Keep accent color */
}


/* Main Content Styles */
.content {
    flex-grow: 1; /* Takes remaining space */
    padding: 25px; /* Default desktop padding */
    background-color: #ffffff;
    overflow-y: auto; /* Allow scrolling for content if it overflows */
    width: 100%; /* Ensure content flex item respects flex container */
}

.content h1 {
    color: #2c3e50;
    border-bottom: 2px solid #eaecee;
    padding-bottom: 10px;
    margin-top: 0;
    font-size: 1.8em;
}

.content p {
    line-height: 1.6;
}

/* Styles for management.html columns and forms are in management.html's <style> tag */
/* Styles for account_detail.html are in account_detail.html's <style> tag */


/* Flash Messages (Copied from base.html for consistency) */
.flashes {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
}
.flashes li, .flash-messages li { /* Compatible with login.html */
    padding: 12px 15px;
    border-radius: 5px;
    margin-bottom: 12px;
    font-size: 0.95em;
    border: 1px solid transparent; /* Base border */
}
.flashes li.success, .flash-messages li.success {
    background-color: #d1e7dd; color: #0f5132; border-color: #badbcc;
}
.flashes li.danger, .flash-messages li.danger {
    background-color: #f8d7da; color: #842029; border-color: #f5c2c7;
}
.flashes li.warning, .flash-messages li.warning {
    background-color: #fff3cd; color: #664d03; border-color: #ffecb5;
}
.flashes li.info, .flash-messages li.info {
    background-color: #cff4fc; color: #055160; border-color: #b6effb;
}
/* Default / fallback style if no specific category class is applied */
.flashes li:not(.success):not(.danger):not(.warning):not(.info),
.flash-messages li:not(.success):not(.danger):not(.warning):not(.info) {
     background-color: #d1ecf1; /* Similar to info */
     color: #0c5460;
     border-color: #bee5eb;
}


/* --- 响应式样式 (添加到文件底部) --- */

/* 断点：当屏幕宽度小于或等于 768px (例如，平板和手机) 时应用 */
@media (max-width: 768px) {
    /* 调整主容器布局：垂直堆叠 */
    .container {
        flex-direction: column; /* 将子元素（侧边栏和内容）垂直排列 */
        padding: 0; /* 移除容器的整体内边距，让子元素控制自己的内边距 */
    }

    /* 调整侧边栏样式，使其适应小屏幕 */
    .sidebar {
        width: 100%; /* 侧边栏占据整个宽度 */
        height: auto; /* 高度根据内容自动调整 */
        max-height: none; /* 移除可能限制高度的规则 */
        overflow-y: visible; /* 移除滚动条 */
        position: static; /* 取消固定定位，使其随页面正常流动和滚动 */
        border-right: none; /* 移除右侧边框 */
        border-bottom: 1px solid #2c3e50; /* 在底部增加边框，作为顶部导航和内容的分隔线 */
        padding-top: 0; /* 移除顶部内边距 */
        padding-bottom: 10px; /* 增加底部内边距 */
    }

    /* 调整用户信息的显示 */
    .sidebar .user-info {
        text-align: center; /* 信息文字居中 */
        padding: 10px; /* 调整内边距 */
        border-bottom: 1px solid #34495e; /* 保持底部边框，颜色可以深一些 */
    }


    /* 调整侧边栏内的列表项（导航菜单）显示方式 */
    .sidebar ul {
        display: flex; /* 让菜单项水平排列，更像手机应用顶部的导航 */
        flex-wrap: wrap; /* 允许菜单项在空间不足时换行 */
        padding: 0 5px; /* 调整内边距，根据需要调整 */
        gap: 5px 10px; /* 设置菜单项之间的水平和垂直间距 */
        justify-content: center; /* 如果菜单项不多，可以在侧边栏居中显示 */
    }
     .sidebar ul li {
         flex-grow: 0; /* 菜单项不强制等宽增长 */
         flex-shrink: 0; /* 菜单项不收缩 */
         flex-basis: auto; /* 宽度自适应内容 */
         text-align: center; /* 文字居中 */
         border-bottom: none; /* 移除列表项底部边框 */
         padding: 0; /* 列表项本身没有内边距 */
         margin: 0; /* 列表项本身没有外边距，靠 gap 控制间距 */
     }
    .sidebar ul li a {
        padding: 8px 12px; /* 调整链接内边距，使其更像按钮，根据需要调整 */
        border-radius: 4px; /* 给菜单项一个小的圆角 */
        border-left: none; /* 移除左侧边框 */
        transition: background-color 0.3s ease; /* 移除 padding-left 过渡 */
        font-size: 0.95em; /* 稍微减小字体大小 */
    }
     .sidebar ul li a:hover {
          padding-left: 12px; /* 移除桌面hover效果 */
          border-left-color: transparent; /* 移除桌面hover效果 */
          background-color: #34495e; /* 悬停背景色 */
     }
     .sidebar ul li a.active {
          border-left-color: transparent; /* 移除选中左侧 accent */
          background-color: #1abc9c; /* 选中背景色 */
          color: white; /* 选中文字颜色 */
     }

    /* 移除管理员菜单的红色背景，使其与其他菜单项风格一致 */
     .sidebar ul li a.admin-menu { background-color: transparent !important; }
     .sidebar ul li a.admin-menu:hover { background-color: #34495e !important; } /* 悬停效果与普通菜单项一致 */
     .sidebar ul li a.admin-menu.active { background-color: #1abc9c !important; } /* 选中效果与普通菜单项一致 */


    /* 调整主内容区域，使其占据整个宽度 */
    .content {
        margin-left: 0; /* 移除左侧为侧边栏留出的空间 */
        padding: 15px; /* 调整内边距，根据需要调整 */
        width: 100%; /* 内容区域占据整个宽度 */
        /* 移除可能限制高度和溢出隐藏的规则 */
        max-height: none;
        overflow-y: visible;
    }

    /* 调整内容区域标题 */
     .content h1 {
        font-size: 1.5em; /* 减小标题字号 */
        padding-bottom: 8px; /* 减小底部内边距 */
     }
     .content p {
         font-size: 0.95em; /* 稍微减小段落字号 */
     }


    /* 通用图片和视频适应（如果已经在文件顶部定义了可以省略这里） */
    /* img, video {
        max-width: 100%;
        height: auto;
        display: block;
    } */


    /* 调整管理页面的 Action Bar 布局 */
    .action-bar-management {
         flex-direction: column; /* 按钮和搜索框垂直堆叠 */
         align-items: stretch; /* 堆叠后等宽 */
         gap: 10px; /* 调整间距 */
    }
     .action-bar-management .add-button {
          display: block; /* 添加按钮占据整行 */
          width: 100%;
          text-align: center;
     }
     .search-container {
         width: 100%; /* 搜索容器占据整行 */
         max-width: none; /* 移除最大宽度限制 */
     }


    /* 调整文案库页面搜索区域 */
     .search-filter-area {
         padding: 15px; /* 减小内边距 */
     }
     .filter-group label.category-title {
         margin-bottom: 5px; /* 调整间距 */
     }
     .tag-options {
         gap: 8px; /* 调整标签间距 */
     }
      .tag-options label {
          padding: 5px 10px; /* 调整标签内边距 */
          font-size: 0.8em; /* 减小标签字号 */
      }
     .search-buttons {
         margin-top: 15px; /* 调整间距 */
     }


    /* 调整文案列表卡片布局 */
     .copywriting-list-container {
         grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* 在小屏幕上至少保证280px宽度 */
         gap: 15px; /* 调整间距 */
     }
     .copywriting-item-card {
          padding: 15px; /* 减小卡片内边距 */
     }
      .copywriting-item-card h3 {
          font-size: 1.1em; /* 减小标题字号 */
      }
      .copywriting-item-card .original-copy-preview {
          font-size: 0.85em; /* 减小预览文字字号 */
          -webkit-line-clamp: 4; /* 可以多显示几行文案 */
          min-height: auto; /* 移除固定最小高度 */
      }
     .copywriting-item-card .tags-preview {
         font-size: 0.75em; /* 减小标签预览字号 */
     }
      .copywriting-item-card .tag-chip {
          padding: 2px 6px; /* 减小标签芯片内边距 */
      }
     .copywriting-item-card .view-detail-link {
         padding: 6px 12px; /* 减小按钮内边距 */
         font-size: 0.85em; /* 减小按钮字号 */
     }


    /* 调整对标账号详情页布局 */
    .account-header {
        flex-direction: column; /* 图片和信息垂直堆叠 */
        align-items: center; /* 堆叠后水平居中 */
        gap: 15px; /* 调整间距 */
        padding-bottom: 15px; /* 调整底部内边距 */
    }

    .account-header img.cover-image {
         width: 80px; /* 头像大小 */
         height: 80px;
    }

    .account-info {
        text-align: center; /* 信息文字居中 */
    }
    .account-info h2.account-name {
         font-size: 1.4em; /* 减小账号名称字号 */
         margin-bottom: 5px; /* 调整间距 */
    }
     .account-info p {
         font-size: 0.9em; /* 减小简介/点赞字号 */
     }

    /* 调整账号整体分析布局 */
    .overall-analysis-container {
        flex-direction: column; /* 图片和文本垂直堆叠 */
        align-items: center; /* 堆叠后水平居中 */
        gap: 15px; /* 调整间距 */
    }

    .overall-analysis-cover {
        width: 80%; /* 图片宽度可以调整，例如占据容器宽度的80% */
        height: auto; /* 高度自适应 */
        max-width: 180px; /* 限制最大尺寸 */
    }
    .overall-analysis-cover img {
         width: 100%; /* 确保图片在其容器内自适应 */
         height: auto;
    }
     .overall-analysis-text p {
          font-size: 0.9em; /* 减小分析文本字号 */
          padding: 10px; /* 减小内边距 */
     }


    /* 调整分析网格布局 */
    .analysis-grid {
        grid-template-columns: 1fr; /* 在小屏幕上变为单列网格 */
        gap: 15px; /* 调整间距 */
    }
     .analysis-grid .analysis-item {
          padding: 10px; /* 减小内边距 */
     }
     .analysis-grid .analysis-item strong {
          font-size: 0.85em; /* 减小标题字号 */
     }
      .analysis-grid .analysis-item p {
          font-size: 0.8em; /* 减小分析文本字号 */
      }


    /* 调整对标视频列表项布局 */
     .video-link-item {
         flex-direction: column; /* 标题和按钮垂直堆叠 */
         align-items: stretch; /* 堆叠后等宽 */
         gap: 8px; /* 调整间距 */
         padding: 8px; /* 减小内边距 */
     }
     .video-link-item strong {
          text-align: center; /* 标题居中 */
          font-size: 1em; /* 调整标题字号 */
     }
     .video-link-item a.video-button {
         text-align: center; /* 按钮文字居中 */
         width: 100%; /* 按钮占据整个宽度 */
         padding: 8px 12px; /* 调整按钮内边距 */
         font-size: 0.9em; /* 调整按钮字号 */
     }
     .video-link-item span {
         text-align: center; /* 提示文本居中 */
         font-size: 0.85em; /* 调整提示文本字号 */
     }

    /* 调整文案管理页面的表格 */
    /* 表格滚动容器样式需要在HTML中添加包裹div */
     .responsive-table-container {
        overflow-x: auto; /* 允许水平滚动 */
        -webkit-overflow-scrolling: touch; /* 改进移动端滚动体验 */
        margin-bottom: 15px; /* 避免滚动条和下方元素太近 */
     }

     /* 给表格一个足够大的最小宽度，使其在小屏幕上超出容器并可滚动 */
    .standalone-copywriting-list table,
    .user-list table {
        min-width: 600px; /* 示例宽度，根据内容调整 */
        max-width: none;
     }

     /* 调整表格单元格内边距 */
     .standalone-copywriting-list th,
     .standalone-copywriting-list td,
     .user-list th,
     .user_list td {
         padding: 8px; /* 减小单元格内边距 */
     }
     /* 针对文案管理页面的标签芯片，可能需要调整一下，使其不影响布局 */
     .standalone-copywriting-list .tag-chip {
         white-space: nowrap; /* 防止标签换行 */
     }


} /* --- 媒体查询块结束 --- */

/* 可以添加更多断点，例如针对更大的屏幕 */
/*
@media (min-width: 769px) and (max-width: 1200px) {
    // Tablet and small desktop specific styles
}
*/