/*
 * S3Ranger - Clean and Organized Styles
 * Organized by: Global -> MainScreen -> Widgets -> Common Elements
 */

/* ====================================
 * GLOBAL APP STYLES
 * ==================================== */
App {
    background: $background;
    color: $foreground;
}

/* Common text styling */
Static {
    text-style: none;
    background: transparent;
}

/* ====================================
 * MAIN SCREEN LAYOUT
 * ==================================== */
#main-container {
    background: $background;
    border: solid $primary 50%;
    layout: vertical;
    height: 100%;
}

#content-container {
    layout: horizontal;
    height: 1fr;
}

/* ====================================
 * MAIN FOOTER
 * ==================================== */
#main-footer {
    dock: bottom;
    height: auto;
    background: $background;
    border-top: solid $primary 50%;
    color: $foreground;
    padding: 0 1;
}

/* ====================================
 * TITLE BAR WIDGET
 * ==================================== */
TitleBar {
    dock: top;
    height: auto;
    border-bottom: solid $primary 50%;
    padding: 0 1;
}

#title-bar-container {
    height: auto;
    width: 100%;
}

#title {
    color: $primary;
    content-align: left middle;
    text-style: none;
    width: auto;
}

#status-container {
    dock: right;
    width: auto;
    height: auto;
    content-align: right middle;
}

#connected-indicator {
    color: $success;
    width: auto;
    margin-right: 1;
}

#connected-indicator.error {
    color: $error;
}

#aws-info {
    color: $secondary;
    width: auto;
    text-style: none;
}

/* ====================================
 * BUCKET LIST WIDGET
 * ==================================== */
BucketList {
    width: 40;
    background: $background;
    border-right: solid $primary 50%;
    height: 100%;
}

#bucket-list-container {
    width: 100%;
    background: $background;
    height: 100%;
}

#bucket-panel-title {
    dock: top;
    height: 2;
    background: $background;
    border-bottom: solid $primary 50%;
    color: $foreground;
    content-align: center middle;
    text-style: none;
    padding: 0 1;
}

#bucket-filter {
    dock: top;
    height: 3;
    margin: 2 0 0 0;
    background: $background;
    border: solid $primary 50%;
    color: $foreground;
}

#bucket-filter:focus {
    border: solid $primary;
}

#bucket-help-text {
    dock: top;
    height: 1;
    padding: 0 1;
    background: $background;
    color: $secondary;
    text-style: none;
}

#bucket-list-view {
    background: $background;
    scrollbar-background: $background;
    scrollbar-color: $primary 50%;
    scrollbar-color-hover: $primary;
    scrollbar-size: 1 1;
    height: 1fr;
}

#bucket-loading {
    height: 100%;
    width: 100%;
    content-align: center middle;
    background: $background;
    color: $primary;
    text-style: none;
    display: none;
}

#bucket-loading-more {
    height: auto;
    width: 100%;
    content-align: center middle;
    background: $surface;
    color: $secondary;
    text-style: italic;
    padding: 0 1;
    display: none;
}

/* ====================================
 * BUCKET ITEM COMPONENT
 * ==================================== */
BucketItem {
    height: auto;
    padding: 1 1;
    border-left: solid transparent;
    border-bottom: none;
    background: $background;
}

BucketItem:hover {
    background: $surface;
}

BucketItem > * {
    background: transparent;
}

/* Bucket Item Selection States */
BucketItem.-active,
BucketItem:focus,
BucketItem.-highlight {
    background: $accent;
    color: $background;
    border-left: solid $accent;
}

BucketItem.-active .bucket-name,
BucketItem:focus .bucket-name,
BucketItem.-highlight .bucket-name {
    color: $secondary;
}

BucketItem.-active .bucket-meta,
BucketItem:focus .bucket-meta,
BucketItem.-highlight .bucket-meta {
    color: $secondary;
}

/* ListView Selection States (consolidated) - Override for object list */
ListView#object-list > ListItem.-active,
ListView#object-list > ListItem:focus,
ListView#object-list > ListItem.-cursor {
    background: $accent !important;
    color: $background !important;
    border-left: solid $accent !important;
}

ListView#object-list > ListItem.-active .object-key,
ListView#object-list > ListItem:focus .object-key,
ListView#object-list > ListItem.-cursor .object-key {
    color: $background !important;
}

ListView#object-list > ListItem.-active .object-extension,
ListView#object-list > ListItem:focus .object-extension,
ListView#object-list > ListItem.-cursor .object-extension {
    color: $background !important;
}

ListView#object-list > ListItem.-active .object-modified,
ListView#object-list > ListItem:focus .object-modified,
ListView#object-list > ListItem.-cursor .object-modified {
    color: $background !important;
}

ListView#object-list > ListItem.-active .object-size,
ListView#object-list > ListItem:focus .object-size,
ListView#object-list > ListItem.-cursor .object-size {
    color: $background !important;
}

/* Original ListView Selection States (for bucket list) */
ListView > ListItem.-active,
ListView > ListItem:focus,
ListView > ListItem.-cursor {
    background: $accent;
    color: $background;
    border-left: solid $background;
}

ListView > ListItem.-active .bucket-name,
ListView > ListItem:focus .bucket-name,
ListView > ListItem.-cursor .bucket-name {
    color: $background;
}

ListView > ListItem.-active .bucket-meta,
ListView > ListItem:focus .bucket-meta,
ListView > ListItem.-cursor .bucket-meta {
    color: $background;
}

/* Bucket Item Text Elements */
.bucket-name {
    color: $foreground;
    text-style: none;
    height: auto;
    width: 100%;
    padding: 0;
    margin: 0;
    text-wrap: wrap;
}

.bucket-meta {
    color: $secondary;
    text-style: none;
    height: 1;
    width: 100%;
    padding: 0;
    margin: 0;
}

/* ====================================
 * DOWNLOAD MODAL STYLES
 * ==================================== */

/* Modal overlay */
DownloadModal {
    align: center middle;
    background: #000000 70%;
}

/* Multi-download modal overlay */
MultiDownloadModal {
    align: center middle;
    background: #000000 70%;
}

/* Main dialog container */
#download-dialog {
    width: 100;
    max-width: 120;
    height: auto;
    min-height: 25;
    max-height: 50;
    background: $background;
    border: solid $primary;
}

/* Progress widget */
#progress-indicator {
    height: 100%;
    width: 100%;
    content-align: center middle;
    align: center middle;
    background: $background;
    color: $primary;
    text-style: none;
    display: none;
    padding: 2 4;
}

.progress-container {
    content-align: center middle;
    align: center middle;
    height: 100%;
    width: 100%;
}

.progress-text {
    text-align: center;
    color: $primary;
    text-style: bold;
    margin-bottom: 1;
    width: 100%;
}

.progress-bar {
    text-align: center;
    color: $accent;
    background: $surface;
    height: 3;
    width: 50%;
    border: solid $accent;
    padding: 0 1;
    margin-top: 1;
}

#custom-progress-bar {
    text-align: center;
    color: $accent;
    background: $surface;
    height: 3;
    width: 50%;
    border: solid $accent;
    padding: 0 1;
    margin-top: 1;
    content-align: center middle;
    align: center middle;
}

.progress-bar-container {
    content-align: center middle;
    align: center middle;
    width: 100%;
    height: auto;
}

/* Dialog header */
#download-dialog-header {
    height: auto;
    width: 100%;
    background: $surface;
    border-bottom: solid $primary 50%;
    padding: 1;
}

.dialog-title {
    color: $primary;
    text-style: bold;
    content-align: center middle;
    margin-bottom: 1;
    width: 100%;
}

.dialog-subtitle {
    color: $secondary;
    text-style: none;
    content-align: center middle;
    width: 100%;
}

/* Dialog content */
#download-dialog-content {
    padding: 1 2;
    height: auto;
    width: 100%;
}

.field-group {
    height: auto;
    width: 100%;
    margin-bottom: 1;
}

.field-label {
    color: $foreground;
    text-style: none;
    margin-bottom: 0;
}

.field-value {
    background: $background;
    border: solid $primary 50%;
    padding: 1 2;
    color: $foreground;
    width: 100%;
}

.field-value.readonly {
    background: $surface;
    color: $secondary;
}

#source-field {
    background: $surface;
    color: $secondary;
    border: solid $primary 50%;
    padding: 0 1;
    height: 3;
    width: 100%;
    overflow: scroll;
    text-overflow: fold;
}

.field-input {
    background: $background;
    border: solid $primary 50%;
    color: $foreground;
    width: 100%;
}

.field-input:focus {
    border: solid $primary;
    background: $background;
}

#destination-input {
    background: $background;
    border: solid $primary 50%;
    color: $foreground;
    width: 1fr;
}

#destination-input:focus {
    border: solid $primary;
}

/* Input with button container */
.input-with-button {
    layout: horizontal;
    width: 100%;
    height: auto;
    align: left middle;
}

/* File picker button */
.file-picker-button {
    background: transparent;
    border: none;
    color: $foreground;
    width: auto;
    min-width: 4;
    height: 3;
    margin-left: 1;
    padding: 0 1;
}

.file-picker-button:hover {
    background: $primary 50%;
    border: none;
}

.file-picker-button:focus {
    background: $primary 50%;
    border: none;
}

.field-help {
    color: $secondary;
    text-style: none;
    margin-top: 0;
}

/* Files list for multi-download modal */
.files-list {
    height: auto;
    max-height: 12;
    width: 100%;
    background: $surface;
    border: solid $primary 50%;
    padding: 0 1;
    scrollbar-background: $background;
    scrollbar-color: $primary 50%;
    scrollbar-color-hover: $primary;
    scrollbar-size: 1 1;
}

.files-list:focus {
    border: solid $primary;
}

.file-list-item {
    height: auto;
    width: 100%;
    color: $foreground;
    padding: 0;
    margin: 0;
}

/* Dialog footer */
#download-dialog-footer {
    height: auto;
    min-height: 6;
    width: 100%;
    background: $surface;
    border-top: solid $primary 50%;
    padding: 1;
    layout: horizontal;
    content-align: left middle;
}

.footer-content {
    height: auto;
    width: 100%;
    layout: horizontal;
    content-align: left middle;
}

.keybindings-section {
    height: auto;
    width: 1fr;
    layout: vertical;
    content-align: left top;
}

.dialog-keybindings-row {
    height: auto;
    width: 100%;
    layout: horizontal;
    content-align: left middle;
    margin-bottom: 1;
}

.dialog-keybindings {
    height: auto;
    width: 1fr;
    layout: horizontal;
    content-align: left middle;
}

.keybinding {
    color: $secondary;
    text-style: none;
    margin-right: 2;
    width: 1fr;
    height: auto;
}

.dialog-actions {
    height: auto;
    width: auto;
    layout: horizontal;
    content-align: right middle;
    align: right middle;
}

.dialog-actions Button {
    margin-left: 1;
    background: $surface;
    border: none;
    color: $foreground;
    min-width: 12;
    height: 3;
    padding: 0 2;
}

.dialog-actions Button:hover {
    background: $primary 50%;
    border: none;
    color: $foreground;
}


.dialog-actions Button.primary {
    background: $success;
    border: solid $success;
    color: $background;
}

.dialog-actions Button.primary:hover {
    background: $success;
    border: solid $success;
    color: $background;
}

.dialog-actions Button:disabled {
    background: $background;
    border: solid $surface;
    color: $secondary;
}

/* ====================================
 * UPLOAD MODAL STYLES
 * ==================================== */

/* Modal overlay */
UploadModal {
    align: center middle;
    background: #000000 70%;
}

/* Main dialog container */
#upload-dialog {
    width: 100;
    max-width: 120;
    height: auto;
    min-height: 25;
    max-height: 50;
    background: $background;
    border: solid $primary;
}

/* Upload loading indicator */
#upload-loading {
    height: 100%;
    width: 100%;
    content-align: center middle;
    background: $background;
    color: $primary;
    text-style: none;
    display: none;
}

/* Dialog header */
#upload-dialog-header {
    height: auto;
    width: 100%;
    background: $surface;
    border-bottom: solid $primary 50%;
    padding: 1;
}

/* Dialog content */
#upload-dialog-content {
    padding: 1 2;
    height: auto;
    width: 100%;
}

#source-input {
    background: $background;
    border: solid $primary 50%;
    color: $foreground;
    width: 1fr;
}

#source-input:focus {
    border: solid $primary;
}

#destination-field {
    background: $surface;
    color: $secondary;
    border: solid $primary 50%;
    padding: 0 1;
    height: 3;
    width: 100%;
    overflow: scroll;
    text-overflow: fold;
}

/* Dialog footer */
#upload-dialog-footer {
    height: auto;
    min-height: 6;
    width: 100%;
    background: $surface;
    border-top: solid $primary 50%;
    padding: 1;
    layout: horizontal;
    content-align: left middle;
}

/* ====================================
 * DELETE MODAL STYLES
 * ==================================== */

/* Modal overlay */
DeleteModal {
    align: center middle;
    background: #000000 70%;
}

/* Multi-delete modal overlay */
MultiDeleteModal {
    align: center middle;
    background: #000000 70%;
}

/* Main dialog container */
#delete-dialog {
    width: 100;
    max-width: 120;
    height: auto;
    min-height: 20;
    max-height: 40;
    background: $background;
    border: solid $primary;
}

/* Delete loading indicator */
#delete-loading {
    height: 100%;
    width: 100%;
    content-align: center middle;
    background: $background;
    color: $primary;
    text-style: none;
    display: none;
}

/* Dialog header */
#delete-dialog-header {
    height: auto;
    width: 100%;
    background: $surface;
    border-bottom: solid $primary 50%;
    padding: 1;
}

/* Dialog content */
#delete-dialog-content {
    padding: 1 2;
    height: auto;
    width: 100%;
}

/* Dialog footer */
#delete-dialog-footer {
    height: auto;
    min-height: 6;
    width: 100%;
    background: $surface;
    border-top: solid $primary 50%;
    padding: 1;
    layout: horizontal;
    content-align: left middle;
}

/* Delete button styling */
.dialog-actions Button.delete-button {
    background: $error;
    border: solid $error;
    color: $background;
}

.dialog-actions Button.delete-button:hover {
    background: $error;
    border: solid $error;
    color: $background;
}

.dialog-actions Button.delete-button:focus {
    background: $error;
    border: solid $error;
    color: $background;
}

/* ====================================
 * RENAME MODAL STYLES
 * ==================================== */

/* Modal overlay */
RenameModal {
    align: center middle;
    background: #000000 70%;
}

/* Main dialog container */
#rename-dialog {
    width: 100;
    max-width: 120;
    height: auto;
    min-height: 25;
    max-height: 50;
    background: $background;
    border: solid $primary;
}

/* Dialog header */
#rename-dialog-header {
    height: auto;
    width: 100%;
    background: $surface;
    border-bottom: solid $primary 50%;
    padding: 1;
}

/* Warning text for folder rename */
.warning-text {
    color: $warning;
    text-style: italic;
    margin-top: 1;
    width: 100%;
    content-align: center middle;
}

/* Dialog content */
#rename-dialog-content {
    padding: 1 2;
    height: auto;
    width: 100%;
}

/* Rename input field */
.rename-input {
    width: 100%;
    margin-bottom: 1;
}

/* Current name field in rename modal - reduced padding */
#current-name-field {
    padding: 0 2;
    height: auto;
    min-height: 3;
}

/* Dialog footer */
#rename-dialog-footer {
    height: auto;
    min-height: 6;
    width: 100%;
    background: $surface;
    border-top: solid $primary 50%;
    padding: 1;
    layout: horizontal;
    content-align: left middle;
}

/* ====================================
 * HELP MODAL STYLES
 * ==================================== */

/* Modal overlay */
HelpModal {
    align: center middle;
    background: #000000 70%;
}

/* Main dialog container */
#help-dialog {
    width: 80;
    max-width: 100;
    height: auto;
    max-height: 90%;
    background: $background;
    border: solid $primary;
    padding: 0;
    overflow-y: auto;
}

/* Dialog header */
#help-dialog-header {
    dock: top;
    height: auto;
    background: $surface;
    border-bottom: solid $primary 50%;
    padding: 1 2;
}

/* Dialog content */
#help-dialog-content {
    height: 1fr;
    padding: 1 2;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

#help-dialog-content:focus {
    border: solid $primary;
}

/* Help sections */
.help-section {
    height: auto;
    margin-bottom: 1;
}

.help-section-title {
    color: $primary;
    text-style: bold;
    margin-bottom: 1;
}

.help-text {
    color: $foreground;
    margin-bottom: 1;
}

/* Keybindings container */
.help-keybindings {
    height: auto;
    margin-bottom: 1;
}

/* Individual keybinding rows */
.help-keybinding-row {
    height: 3;
    layout: horizontal;
    margin-bottom: 1;
    align: left middle;
}

.help-keybinding-key {
    width: 15;
    height: 3;
    color: $accent;
    text-style: bold;
    background: $background;
    border: solid $primary 50%;
    padding: 0 1;
    content-align: center middle;
    margin-right: 2;
}

.help-keybinding-desc {
    width: 1fr;
    height: 3;
    color: $foreground;
    content-align: left middle;
}


/* ====================================
 * OBJECT LIST V2 STYLES (ListView-based)
 * ==================================== */

ObjectList {
    width: 1fr;
    background: $background;
    height: 100%;
    min-width: 0;
}

/* Object List Header Row */
#object-list-header {
    height: 2;
    width: 100%;
    border-bottom: solid $primary 50%;
    margin: 0;
}

/* Header checkbox spacer */
.object-checkbox-header {
    color: $foreground;
    text-style: bold;
    height: auto;
    width: 4;
    min-width: 4;
    padding: 0;
    margin: 0 1 0 2;
}

.object-name-header {
    color: $foreground;
    text-style: bold;
    height: auto;
    width: 55%;
    padding-left: 0;
    margin: 0;
}

.object-type-header {
    color: $foreground;
    text-style: bold;
    height: auto;
    width: 10%;
    margin: 0;
}

.object-modified-header {
    color: $foreground;
    text-style: bold;
    height: auto;
    width: 20%;
    margin: 0;
}

.object-size-header {
    color: $foreground;
    text-style: bold;
    height: auto;
    width: 10%;
    padding: 0;
    margin: 0;
}

/* Object List Container */
#object-list {
    background: $background;
    scrollbar-background: $background;
    scrollbar-color: $primary 50%;
    scrollbar-color-hover: $primary;
    scrollbar-size: 1 1;
    height: 1fr;
    border: none;
    margin: 0;
    padding: 0;
}

#object-loading-more {
    height: auto;
    width: 100%;
    content-align: center middle;
    background: $surface;
    color: $secondary;
    text-style: italic;
    padding: 0 1;
    display: none;
}

/* Object Item Component (ListView Item) */
ObjectItem {
    height: auto;
    padding: 1 1;
    border-left: solid transparent;
    border-bottom: none;
    background: $background;
}

ObjectItem:hover {
    background: $surface;
}

ObjectItem > * {
    background: transparent;
}

ObjectItem Horizontal {
    height: auto;
    min-height: 0;
}

/* Object Item Selection States - More specific selectors */
ListView#object-list > ObjectItem.-active,
ListView#object-list > ObjectItem:focus,
ListView#object-list > ObjectItem.-cursor,
ListView#object-list > ObjectItem.-highlight {
    background: $accent !important;
    color: $background !important;
    border-left: solid $accent !important;
}

/* Also target ListItem directly since ObjectItem extends ListItem */
ListView#object-list > ListItem.-active,
ListView#object-list > ListItem:focus,
ListView#object-list > ListItem.-cursor,
ListView#object-list > ListItem.-highlight {
    background: $accent !important;
    color: $background !important;
    border-left: solid $accent !important;
}

ListView#object-list > ObjectItem.-active .object-key,
ListView#object-list > ObjectItem:focus .object-key,
ListView#object-list > ObjectItem.-cursor .object-key,
ListView#object-list > ObjectItem.-highlight .object-key,
ListView#object-list > ListItem.-active .object-key,
ListView#object-list > ListItem:focus .object-key,
ListView#object-list > ListItem.-cursor .object-key,
ListView#object-list > ListItem.-highlight .object-key {
    color: $background !important;
}

ListView#object-list > ObjectItem.-active .object-extension,
ListView#object-list > ObjectItem:focus .object-extension,
ListView#object-list > ObjectItem.-cursor .object-extension,
ListView#object-list > ObjectItem.-highlight .object-extension,
ListView#object-list > ListItem.-active .object-extension,
ListView#object-list > ListItem:focus .object-extension,
ListView#object-list > ListItem.-cursor .object-extension,
ListView#object-list > ListItem.-highlight .object-extension {
    color: $background !important;
}

ListView#object-list > ObjectItem.-active .object-modified,
ListView#object-list > ObjectItem:focus .object-modified,
ListView#object-list > ObjectItem.-cursor .object-modified,
ListView#object-list > ObjectItem.-highlight .object-modified,
ListView#object-list > ListItem.-active .object-modified,
ListView#object-list > ListItem:focus .object-modified,
ListView#object-list > ListItem.-cursor .object-modified,
ListView#object-list > ListItem.-highlight .object-modified {
    color: $background !important;
}

ListView#object-list > ObjectItem.-active .object-size,
ListView#object-list > ObjectItem:focus .object-size,
ListView#object-list > ObjectItem.-cursor .object-size,
ListView#object-list > ObjectItem.-highlight .object-size,
ListView#object-list > ListItem.-active .object-size,
ListView#object-list > ListItem:focus .object-size,
ListView#object-list > ListItem.-cursor .object-size,
ListView#object-list > ListItem.-highlight .object-size {
    color: $background !important;
}

/* Checkbox styling - keep visible in all states */
.object-checkbox {
    color: $secondary !important;
}

/* When row is highlighted/focused, use background color for contrast */
ListView#object-list > ObjectItem.-active .object-checkbox,
ListView#object-list > ObjectItem:focus .object-checkbox,
ListView#object-list > ObjectItem.-cursor .object-checkbox,
ListView#object-list > ObjectItem.-highlight .object-checkbox,
ListView#object-list > ListItem.-active .object-checkbox,
ListView#object-list > ListItem:focus .object-checkbox,
ListView#object-list > ListItem.-cursor .object-checkbox,
ListView#object-list > ListItem.-highlight .object-checkbox {
    color: $background !important;
}

/* Selected items - checkbox in primary color for better visibility */
ObjectItem.selected .object-checkbox {
    color: $primary !important;
}

/* Selected items when highlighted - use background for contrast */
ListView#object-list > ObjectItem.selected.-active .object-checkbox,
ListView#object-list > ObjectItem.selected:focus .object-checkbox,
ListView#object-list > ObjectItem.selected.-cursor .object-checkbox,
ListView#object-list > ObjectItem.selected.-highlight .object-checkbox {
    color: $background !important;
}

/* Object Item Checkbox */
.object-checkbox {
    color: $primary;
    text-style: none;
    height: auto;
    width: 4;
    min-width: 4;
    padding: 0;
    margin: 0 1 0 0;
    background: transparent;
}

/* Object Item Text Elements */
.object-key {
    color: $foreground;
    text-style: none;
    height: auto;
    width: 55%;
    padding: 0 1 0 0;
    margin: 0;
}

.object-extension {
    color: $secondary;
    text-style: none;
    height: auto;
    width: 10%;
    padding: 0;
    margin: 0;
}

.object-modified {
    color: $secondary;
    text-style: none;
    height: auto;
    width: 20%;
    padding: 0;
    margin: 0;
}

.object-size {
    color: $secondary;
    text-style: none;
    height: auto;
    width: 10%;
    padding: 0;
    margin: 0;
}

/* Selected object item styling */
ObjectItem.selected .object-checkbox {
    color: $success;
}

#breadcrumb-bar {
    dock: top;
    height: 2;
    min-height: 2;
    background: $background;
    border-bottom: solid $primary 50%;
    padding: 0 1;
    color: $foreground;
    content-align: left middle;
    margin: 0;
    width: 100%;
    visibility: visible;
}
