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

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #172B4D; /* Atlassian Dark Blue/Gray */
    background-color: #F4F5F7; /* Light Gray background */
    overflow: hidden; /* Prevent body scroll */
}

a {
    color: #0052CC; /* Atlassian Blue */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    background-color: #F4F5F7;
    border: 1px solid #DFE1E6;
    border-radius: 3px;
    padding: 6px 12px;
    color: #42526E; /* Medium Gray */
}

button:hover {
    background-color: #EBECF0; /* Slightly darker gray */
}

input[type="text"] {
    font-family: inherit;
    font-size: inherit;
    padding: 6px 10px;
    border: 1px solid #DFE1E6;
    border-radius: 3px;
}

i { /* Basic icon styling */
    margin-right: 5px;
    color: #5E6C84; /* Icon gray */
}

i.fas.fa-chevron-down,
i.fas.fa-chevron-right {
    font-size: 0.8em;
    color: #7A869A; /* Lighter icon gray */
}

.user-avatar, .user-avatar-sm {
    border-radius: 50%;
    vertical-align: middle;
}

.user-avatar-sm {
    width: 24px;
    height: 24px;
}

.user-avatar {
     width: 32px;
     height: 32px;
}

/* Confluence Container */
.confluence-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Top Bar */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #DFE1E6; /* Light border */
    height: 50px; /* Fixed height */
    flex-shrink: 0; /* Prevent shrinking */
}

.top-bar-left, .top-bar-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo {
    font-size: 1.2em;
    font-weight: bold;
    color: #2684FF; /* Confluence blue */
    display: flex;
    align-items: center;
}
.logo i {
    color: #2684FF;
    font-size: 1.1em;
    margin-right: 8px;
}

.search-bar {
    display: flex;
    align-items: center;
    background-color: #F4F5F7;
    border-radius: 3px;
    padding: 0 8px;
    border: 1px solid #DFE1E6;
}
.search-bar i {
    color: #5E6C84;
    margin-right: 5px;
}
.search-bar input {
    border: none;
    background: transparent;
    outline: none;
    padding: 6px 0;
}

.ask-ai-btn {
    background-color: #E9F2FF; /* Light blue */
    color: #0052CC;
    border-color: transparent;
}
.ask-ai-btn i {
    color: #0052CC;
}
.create-btn {
    background-color: #0052CC; /* Primary blue */
    color: #FFFFFF;
    border-color: transparent;
    font-weight: 500;
}
.create-btn:hover {
    background-color: #0041A3; /* Darker blue */
}

.user-actions i {
    font-size: 1.2em;
    color: #5E6C84;
    margin-left: 15px;
    cursor: pointer;
}
.user-actions i:hover {
    color: #42526E;
}
.user-actions .user-avatar-sm {
    margin-left: 15px;
}

/* Main Layout */
.main-layout {
    display: flex;
    flex-grow: 1; /* Take remaining height */
    overflow: hidden; /* Prevent layout overflow */
}

/* Sidebar */
.sidebar {
    width: 280px;
    background-color: #FAFBFC; /* Very light gray */
    border-right: 1px solid #DFE1E6;
    padding: 15px 0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0; /* Prevent shrinking */
    height: 100%;
    overflow-y: auto; /* Allow sidebar scrolling */
}

.sidebar-nav ul, .page-tree ul {
    list-style: none;
    padding-left: 0;
}
.sidebar-nav li a, .page-tree li a {
    display: flex;
    align-items: center;
    padding: 6px 20px;
    color: #42526E;
    text-decoration: none;
    border-radius: 3px;
    margin: 2px 10px;
}
.sidebar-nav li a:hover {
    background-color: #EBECF0;
    text-decoration: none;
}
.sidebar-nav li a i.nav-arrow {
    margin-left: auto;
    font-size: 0.7em;
}

.sidebar-space {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #DFE1E6;
    flex-grow: 1; /* Pushes footer down */
}
.space-header {
    padding: 0 20px 10px 20px;
    font-weight: 500;
    display: flex;
    align-items: center;
}
.space-icon {
    display: inline-block;
    background-color: #DEEBFF; /* Light blue bg */
    color: #0747A6; /* Darker blue */
    padding: 3px 5px;
    border-radius: 3px;
    margin-right: 8px;
    font-size: 0.9em;
}
.space-icon i {
    color: #0747A6;
    margin-right: 0;
}
.space-more {
    margin-left: auto;
    cursor: pointer;
}
.sidebar-space > ul {
    list-style: none;
}
.sidebar-space > ul li a {
     padding: 6px 20px;
     display: block;
     color: #42526E;
     margin: 2px 10px;
     border-radius: 3px;
}
.sidebar-space > ul li a:hover {
    background-color: #EBECF0;
    text-decoration: none;
}
.sidebar-space .content-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 15px; /* Space for icons */
}
.sidebar-space .content-item a {
     flex-grow: 1;
}
.sidebar-space .content-actions i {
    cursor: pointer;
    margin-left: 8px;
}

.sidebar-search {
    display: flex;
    align-items: center;
    margin: 15px 10px;
    padding: 0 8px;
    background-color: #FFFFFF;
    border: 1px solid #DFE1E6;
    border-radius: 3px;
}
.sidebar-search i {
    color: #7A869A;
    margin-right: 5px;
}
.sidebar-search input {
    border: none;
    outline: none;
    flex-grow: 1;
    padding: 6px 0;
    background: transparent;
}

.page-tree {
    margin-top: 10px;
}
.page-tree ul {
    padding-left: 0;
}
.page-tree li {
    padding: 4px 10px 4px 15px; /* Base padding */
    display: flex;
    align-items: center;
    position: relative;
}
.page-tree li ul {
     padding-left: 25px; /* Indentation for children */
     width: 100%; /* Ensure nested list takes width */
}
.page-tree li i.page-icon {
    margin-right: 8px;
    width: 16px; /* Align icons */
    text-align: center;
}
.page-tree li.active-page {
    background-color: #E9F2FF; /* Light blue background for active page */
    border-radius: 3px;
    margin: 0 5px; /* Adjust margin for background */
    padding-left: 10px; /* Adjust padding for background */
    font-weight: 500;
}
.page-tree li.active-page a {
    color: #0052CC; /* Blue text for active */
}
.page-tree .tree-toggle {
    cursor: pointer;
    width: 15px;
    text-align: center;
    margin-right: 5px;
    position: absolute;
    left: 5px; /* Position toggle */
}
.page-tree li > i.page-icon { /* Shift icon right when toggle is present */
    margin-left: 18px;
}
.page-tree li > .tree-indent { /* Indent items without toggle */
     margin-left: 23px;
}
.page-tree .tree-create {
    color: #0052CC;
}
.page-tree li.active-section {
    background-color: #E9F2FF; /* Highlight active section */
    border-left: 3px solid #0052CC;
    margin: 5px 0 5px 5px;
    padding-left: 17px; /* Adjust for border */
}
.page-tree li.active-section a {
    font-weight: 500;
    color: #0052CC;
}
.page-tree li.active-section i.nav-arrow {
    display: none; /* Hide arrow in active section */
}


.sidebar-footer {
    padding: 15px 20px;
    border-top: 1px solid #DFE1E6;
    margin-top: auto; /* Pushes to bottom */
    flex-shrink: 0;
}
.invite-btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
    background-color: #FFFFFF;
}
.feedback-link {
    color: #5E6C84;
    font-size: 0.9em;
    display: flex;
    align-items: center;
}
.feedback-link i {
    margin-right: 5px;
}


/* Content Area */
.content-area {
    flex-grow: 1; /* Takes remaining width */
    padding: 25px 40px;
    background-color: #FFFFFF;
    overflow-y: auto; /* Allow content scrolling */
    height: 100%;
}

.breadcrumbs {
    font-size: 0.9em;
    color: #5E6C84;
    margin-bottom: 15px;
}
.breadcrumbs strong {
    color: #42526E;
}

.page-header {
    margin-bottom: 20px;
}
.page-header h1 {
    font-size: 2em;
    font-weight: 500;
    color: #172B4D;
    margin-bottom: 5px;
}
.page-meta {
    font-size: 0.9em;
    color: #5E6C84;
    display: flex;
    align-items: center;
    gap: 5px;
}
.page-meta a {
    color: #0052CC;
}
.page-meta i {
    font-size: 1em;
    margin-left: 8px;
}
.page-meta .user-avatar-sm {
    margin-right: 5px;
}

.page-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #DFE1E6;
}
.action-left, .action-right {
    display: flex;
    gap: 8px;
}
.action-btn {
    background: none;
    border: none;
    padding: 5px;
    font-size: 1.2em;
    color: #5E6C84;
}
.action-btn:hover {
    background-color: #EBECF0;
}
.action-btn.locked i {
    color: #0052CC; /* Blue lock icon */
}
.filter-btn {
    font-size: 1em; /* Reset font size for text buttons */
    background-color: #F4F5F7;
    border: 1px solid #DFE1E6;
    padding: 6px 12px;
}
.filter-btn:hover {
     background-color: #EBECF0;
}
.filter-btn i.fa-chevron-down {
    margin-left: 5px;
    margin-right: 0; /* No margin needed after chevron */
}
.sort-btn i.fa-filter {
     margin-right: 3px;
}

.table-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.filter-chip {
    background-color: #F4F5F7;
    border: 1px solid transparent; /* For hover effect */
    border-radius: 15px; /* Pill shape */
    padding: 4px 10px;
    font-size: 0.9em;
    color: #42526E;
}
.filter-chip:hover {
    background-color: #EBECF0;
    border-color: #DFE1E6;
}
.filter-chip i {
    margin-left: 4px;
    margin-right: 0;
    font-size: 0.8em;
}

.table-row-placeholder {
    border: 1px solid #DFE1E6;
    border-radius: 3px;
    padding: 10px 15px;
    background-color: #FAFBFC;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    color: #172B4D;
}
.row-arrow {
    margin-right: 10px;
}
.row-lock {
    margin-right: 10px;
    color: #0052CC;
}

.add-label-btn {
    background: none;
    border: none;
    color: #0052CC;
    padding: 5px 0;
    margin-bottom: 25px;
}
.add-label-btn:hover {
    background: none;
    text-decoration: underline;
}
.add-label-btn i {
    color: #0052CC;
    margin-right: 3px;
}

.related-content h2 {
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
.info-icon {
    font-size: 0.9em;
    margin-left: 8px;
    color: #7A869A;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */
    gap: 15px;
    margin-bottom: 30px;
}

.related-card {
    border: 1px solid #DFE1E6;
    border-radius: 3px;
    padding: 15px;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
}

.related-card .card-icon {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #5E6C84;
    height: 25px; /* Align icon area */
}
.related-card .card-content {
    flex-grow: 1; /* Pushes 'more like this' down */
}
.related-card h3 {
    font-size: 1em;
    font-weight: 500;
    margin-bottom: 5px;
    color: #0052CC; /* Link-like title */
    cursor: pointer;
}
.related-card h3:hover {
    text-decoration: underline;
}
.related-card p {
    font-size: 0.9em;
    color: #5E6C84;
    margin-bottom: 10px;
}
.more-like-this {
    font-size: 0.9em;
    color: #5E6C84;
    margin-top: auto; /* Pushes to bottom of card */
}
.more-like-this i {
     font-size: 1em;
     margin-right: 3px;
}

.comment-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid #DFE1E6;
    margin-top: 20px;
}
.comment-box input[type="text"] {
    flex-grow: 1;
    background-color: #FAFBFC; /* Light background for input */
}
.comment-box input[type="text"]::placeholder {
    color: #7A869A;
}

.content-area iframe { /* Or a more specific selector if needed */
    border: none; /* Removes the border */
    /* You might consolidate other iframe styles here too */
    width: 60%;
    height: 600px; /* Or set a specific height */
    display: block; /* Ensures proper block layout if centered */
    margin-left: auto; /* Alternative centering method if display:block */
    margin-right: auto; /* Alternative centering method if display:block */
}