/* ========================================
   ARMA REFORGER MAP OVERLAY ZONE EDITOR
   Main Stylesheet
   ======================================== */

@import url('css/base.css');
@import url('css/layout.css');
@import url('css/components.css');
@import url('css/canvas.css');
@import url('css/zones.css');
@import url('css/modal.css');
@import url('css/extractor.css');

/* Main Layout Adjustment for Tabs */
/* We rely on layout.css for .main-content { display: flex; flex: 1; ... } */

.main-view-column {
   flex: 1;
   display: flex;
   flex-direction: column;
   min-width: 0;
   position: relative;
   overflow: auto;
   height: 100%;
   min-height: 0;
   /* Prevent overflow here too */
}

/* Toolbar is separate, so canvas-container needs to fill remaining space in column */
.canvas-container {
   flex: 1;
   /* Remove previous flex: 1 from canvas.css if it conflicts, but usually fine */
}

/* Tab Bar Styles */
.tab-bar {
   display: flex;
   background: var(--color-bg-secondary);
   border-bottom: 1px solid var(--color-border);
   height: 36px;
   flex-shrink: 0;
   /* Prevent shrinking! */
   align-items: flex-end;
   padding: 0 4px;
   gap: 2px;
}

.tab {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 0 12px;
   height: 32px;
   font-size: 13px;
   color: var(--color-text-secondary);
   background: transparent;
   border: 1px solid transparent;
   border-bottom: none;
   border-radius: 4px 4px 0 0;
   cursor: pointer;
   user-select: none;
   max-width: 200px;
}

.tab:hover {
   background: var(--color-bg-tertiary);
}

.tab.active {
   background: var(--color-bg-tertiary);
   color: var(--color-text-primary);
   border-color: var(--color-border);
   border-bottom: 1px solid var(--color-bg-tertiary);
   /* Hack to blend with container, or just use highlighting */
   background: var(--color-bg-primary);
   /* Canvas bg */
   border-bottom-color: var(--color-bg-primary);
   position: relative;
   top: 1px;
   /* Cover bottom border */
}

.tab-icon {
   width: 14px;
   height: 14px;
   opacity: 0.7;
}

.tab-title {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.tab-close {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 16px;
   height: 16px;
   border-radius: 2px;
   margin-right: -4px;
   opacity: 0.8;
   /* Increased from 0.6 */
}

.tab-close:hover {
   background: var(--color-bg-secondary);
   color: var(--color-danger);
   /* Make it red on hover */
   opacity: 1;
}

.tab-new {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
   border-radius: 4px;
   color: var(--color-text-secondary);
   /* brighter than muted */
   cursor: pointer;
   margin-left: 4px;
   margin-bottom: 2px;
   background: var(--color-bg-secondary);
   /* Slight background */
}

.tab-new:hover {
   background: var(--color-bg-tertiary);
   color: var(--color-text-primary);
}