/*
 * Custom stylesheet to make the text in the content area darker and more readable.
 * This targets the main content wrapper of both AdminLTE (.content-wrapper) 
 * and Amaretti (.am-content) templates, leaving the sidebar menus completely untouched.
 */

/* 1. Content body, paragraph, and list items */
.content-wrapper,
.am-content,
.content-wrapper p,
.am-content p,
.content-wrapper li,
.am-content li,
.content-wrapper span:not(.badge):not(.v):not(.count),
.am-content span:not(.badge):not(.v):not(.count),
.content-wrapper div:not(.widget-head):not(.card-header):not(.btn):not(.badge),
.am-content div:not(.widget-head):not(.card-header):not(.btn):not(.badge) {
    color: #000000 !important; /* Extremely dark solid black */
}

/* 2. Headings & Titles */
.content-wrapper h1, .am-content h1,
.content-wrapper h2, .am-content h2,
.content-wrapper h3, .am-content h3,
.content-wrapper h4, .am-content h4,
.content-wrapper h5, .am-content h5,
.content-wrapper h6, .am-content h6,
.content-wrapper .card-title, .am-content .card-title,
.content-wrapper .title, .am-content .title,
.content-wrapper .widget-head .title, .am-content .widget-head .title,
.content-wrapper .header-title, .am-content .header-title {
    color: #000000 !important; /* Solid dark color for headings and titles */
}

/* 3. Form Labels */
.content-wrapper label,
.am-content label,
.content-wrapper .label-control,
.am-content .label-control {
    color: #000000 !important; /* Dark and readable labels */
    font-weight: 600 !important;
}

/* 4. Form Inputs & Controls */
.content-wrapper .form-control,
.am-content .form-control,
.content-wrapper input,
.am-content input,
.content-wrapper select,
.am-content select,
.content-wrapper textarea,
.am-content textarea {
    color: #000000 !important; /* Highly readable input text */
}

.content-wrapper .form-control::placeholder,
.am-content .form-control::placeholder {
    color: #777777 !important; /* Legible placeholder text */
}

/* 5. Tables & DataTables cell contents */
.content-wrapper table td,
.am-content table td,
.content-wrapper table tbody th:not(.th),
.am-content table tbody th:not(.th),
.content-wrapper .table-striped tbody tr:nth-of-type(odd) td,
.am-content .table-striped tbody tr:nth-of-type(odd) td {
    color: #000000 !important; /* Dark and highly visible cell values */
    font-weight: 500 !important; /* Slightly bolder for sharpness */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    letter-spacing: 0.1px !important;
}

.content-wrapper table thead th,
.am-content table thead th {
    color: #ffffff !important; /* Elegant white text */
    background-color: #282828 !important; /* Elegant dark grey background */
    font-weight: 700 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    letter-spacing: 0.2px !important;
    border-bottom: 2px solid #1a1a1a !important;
}

/* 6. Breadcrumbs */
.content-wrapper .breadcrumb li,
.am-content .breadcrumb li,
.content-wrapper .breadcrumb li a,
.am-content .breadcrumb li a,
.content-wrapper .breadcrumb-title,
.am-content .breadcrumb-title {
    color: #000000 !important;
}

.content-wrapper .breadcrumb li.active,
.am-content .breadcrumb li.active {
    color: #000000 !important;
    font-weight: 500;
}

/* 7. DataTables Info & Pagination Labels */
.content-wrapper div.dataTables_info,
.am-content div.dataTables_info,
.content-wrapper .dataTables_wrapper .dataTables_info,
.am-content .dataTables_wrapper .dataTables_info,
.content-wrapper .dataTables_wrapper .dataTables_paginate,
.am-content .dataTables_wrapper .dataTables_paginate {
    color: #000000 !important;
}

/* 8. Revert styles for standard buttons & badges to protect their text colors */
.content-wrapper .btn,
.am-content .btn,
.content-wrapper .btn *,
.am-content .btn *,
.content-wrapper .badge,
.am-content .badge,
.content-wrapper .badge *,
.am-content .badge *,
.content-wrapper .badge-success-1,
.am-content .badge-success-1,
.content-wrapper .success-1,
.am-content .success-1,
.content-wrapper .always-white,
.am-content .always-white,
.content-wrapper .v,
.am-content .v,
.content-wrapper .count,
.am-content .count {
    color: revert !important;
}

/* 9. Vertical timeline styling for state history in order production details */
.timeline-container {
    position: relative;
    padding-left: 30px;
    margin: 20px 0;
}

.timeline-line {
    position: absolute;
    left: 9px;
    top: 5px;
    bottom: 5px;
    width: 2px;
    background-color: #e0e0e0;
}

.timeline-item {
    position: relative;
    margin-bottom: 25px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-badge {
    position: absolute;
    left: -30px;
    top: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
    border: 3px solid #ccc;
    z-index: 2;
    transition: all 0.3s ease;
}

/* Badge state colors */
.timeline-badge.state-1 { border-color: #007bff; background-color: #007bff; } /* En espera - Azul */
.timeline-badge.state-2 { border-color: #ffc107; background-color: #ffc107; } /* En proceso - Amarillo */
.timeline-badge.state-3 { border-color: #28a745; background-color: #28a745; } /* Terminado - Verde */
.timeline-badge.state-0 { border-color: #dc3545; background-color: #dc3545; } /* Anulado - Rojo */

.timeline-content {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 15px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.timeline-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 6px;
}

.timeline-title {
    font-weight: 600;
    font-size: 14px;
    color: #000000;
}

.timeline-date {
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

.timeline-duration {
    font-size: 11px;
    background: #e2e3e5;
    color: #383d41;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 600;
    margin-left: 10px;
    display: inline-block;
}

.timeline-body {
    font-size: 13px;
    color: #000000;
}