/* static/css/custom_admin.css */

.wrapped-pre {
    white-space: pre-wrap;
    max-width: 100%; /* Adjusts to fit within the container */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Header */
#header {
    background: var(--primary) !important;
    height: auto !important;
    color: #ffffff !important;
}

body.dashboard #header {
    background: var(--primary) !important;
}

/*  site name */
div#header #branding {
    display: block !important;
}

#branding h1#site-name {
    color: #ffffff !important;
    display: inline !important;
    visibility: visible !important;
    font-weight: 600 !important;
}

#branding a {
    color: #ffffff !important;
    text-decoration: none;
}

/* Module headers and captions */
.module h2,
.dashboard .module caption,
.change-list .module caption,
.module thead th,
.module tfoot td {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    font-weight: bold !important;
}
/* Table headers */
#changelist table thead th {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    font-weight: bold !important;
}

/* Link Text table headers */
#changelist table thead th a {
    color: #ffffff !important;  
    font-weight: bold !important;
}

#changelist table thead th a:hover {
    color: #ffffff !important;  
    text-decoration: underline !important; 
}
/* Breadcrumbs */
.breadcrumbs {
    background-color: var(--primary) !important;
    color: #ffffff !important;
}

.breadcrumbs a {
    color: #ffffff !important;
}

/* Navigation and Row Selection */
#nav-sidebar .current-model,
.current-app .current-model,
tr.selected td,
.selected td,
.selected th,
.selected {
    background-color: var(--secondary) !important;
    color: #ffffff !important;
}

/* Hover states */
.module tbody tr:hover,
.row1:hover,
.row2:hover,
#nav-sidebar a:hover,
#nav-sidebar .current-app .section:hover {
    background-color: var(--secondary) !important;
}

/* To prevent color change on hover basically at time of text */
#nav-sidebar a,
#nav-sidebar .current-app .section {
    color: inherit !important;
}

/* Links in selected/hovered states */
.selected a:link,
.selected a:visited,
tr:hover a:link,
tr:hover a:visited,
#nav-sidebar .current-model a {
    color: #ffffff !important;
}

/* Buttons and actions */
.button, 
input[type=submit], 
input[type=button], 
.submit-row input, 
a.button,
.object-tools a {
    background-color: var(--primary) !important;
    color: #ffffff !important;
}

.button:hover, 
input[type=submit]:hover, 
input[type=button]:hover,
.object-tools a:hover {
    background-color: #2a3b8f !important;
}

/* Pagination */
.paginator a:link, 
.paginator a:visited {
    background-color: var(--primary) !important;
    color: #ffffff !important;
}

.paginator a:hover {
    background-color: var(--primary) !important;
}

/* Navigation Menu and Section Headers */
.dashboard .module caption,
.module thead th {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    font-weight: bold !important;
}

#nav-sidebar caption {
  background-color: var(--primary) !important;
  color: #ffffff !important;
  font-weight: bold !important;
}

/* Keep link text dark on hover */
#nav-sidebar a:hover,
.module tbody tr:hover a,
.row1:hover a,
.row2:hover a {
    color: inherit !important;  
}

#nav-sidebar .current-model:hover {
    background-color: var(--secondary) !important;
}

#nav-sidebar a:hover {
    background-color: transparent !important;
    color: inherit !important;
}

.module tbody tr a:hover {
    background-color: transparent !important;
    color: inherit !important;
}

#site-footer {
    background-color: transparent !important;
    color: inherit !important;
    text-align: center;
    padding: 15px;
    border-top: 1px solid #ddd;
    font-size: 14px;
}

code, pre {
    font-family: var(--font-family-monospace);
    color: var(--text-color);
    font-size: 0.75rem;
    overflow-x: auto;
}

/* ICONS of dart-mode*/
.theme-toggle svg.theme-icon-when-auto,
.theme-toggle svg.theme-icon-when-dark,
.theme-toggle svg.theme-icon-when-light {
    fill: var(--header-link-color);
    color: var(--primary);
}


/* First, ensure buttons maintain their text visibility */
.button,
input[type=submit],
input[type=button],
.submit-row input,
a.button {
    background: var(--primary) !important;
    color: #ffffff !important;
    padding: 4px 5px;
    border: none;
    border-radius: 4px;
}

/* Modify the hover state for rows to prevent text color changes */
.module tbody tr:hover,
.row1:hover,
.row2:hover {
    background-color: var(--secondary) !important;
}

/* Important: Add specific rule to maintain button visibility on row hover */
.module tbody tr:hover .button,
.row1:hover .button,
.row2:hover .button,
tr:hover .button,
tr:hover input[type=submit],
tr:hover input[type=button] {
    color: #ffffff !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hover effect */
td.field-process_file a.button:hover {
  background-color: var(--primary) !important;
  color: #fff;
}