/* Customer Service - Bootstrap 5 Compatible Styles */

/* ===== Base Typography ===== */
body {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-size: 14px;
    background-color: #f8f9fa;
}

h1, h2, h3, h4, h5, h6, tfoot { color: #333; }

th, thead { color: #fff; word-break: normal; }
.datepicker th, .datepicker thead { color: #000; }

.break-word { word-break: break-word; }
.nowrap { white-space: nowrap; word-break: normal; }

/* Notes table */
table[style*="table-layout:fixed"] td { word-wrap: break-word; overflow-wrap: break-word; }

/* ===== Navbar Customization ===== */
.navbar {
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    padding: 0.25rem 1rem;
}

.navbar-brand {
    background: url('/images/alliance-arn-logo-black.png') no-repeat center;
    background-size: contain;
    min-width: 120px;
    min-height: 40px;
}

.navbar .badge { font-size: 0.75rem; }

/* ===== Login Page ===== */
.form-signin {
    width: 400px;
    margin: 0 auto;
    padding-top: 60px;
}

.form-signin .card {
    padding: 20px;
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.form-signin .card-body label { font-weight: 600; }

.form-signin .form-control {
    height: 46px;
    background-color: rgba(255, 248, 0, 0.05);
}

.form-signin .btn {
    height: 46px;
    font-size: 16px;
}

header.login h1 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

/* ===== Section spacing ===== */
section { margin-bottom: 30px; }

/* ===== Tables ===== */
.table thead th {
    background-color: #2c3e50;
    color: #fff;
    border-color: #2c3e50;
    font-weight: 500;
    font-size: 0.85rem;
}

.table td { vertical-align: middle; font-size: 0.85rem; }

/* ===== Reservation Status Colors ===== */
table > tbody > tr.reservation-status-cancelled > td,
.squareBox.reservation-status-cancelled { background-color: #F27F7E; }

table > tbody > tr.reservation-status-pendingcancellation > td,
.squareBox.reservation-status-pendingcancellation { background-color: #F0B86F; }

table > tbody > tr.reservation-status-cancellationpending > td,
.squareBox.reservation-status-cancellationpending { background-color: #F0B86F; }

table > tbody > tr.reservation-status-pendingsupplierconfirmation > td,
.squareBox.reservation-status-pendingsupplierconfirmation { background-color: #FFF882; }

table > tbody > tr.reservation-status-pending > td,
.squareBox.reservation-status-pending { background-color: #FFF882; }

table > tbody > tr.reservation-status-inprogress > td,
.squareBox.reservation-status-inprogress { background-color: #FFF882; }

table > tbody > tr.reservation-status-notattempted > td,
.squareBox.reservation-status-notattempted { background-color: #dcdcdc; }

table > tbody > tr.reservation-status-failed > td,
.squareBox.reservation-status-failed { background-color: #E5F2FD; }

/* Status badges */
.badge.reservation-status-pending { background-color: #FFF882; color: #333; }
.badge.reservation-status-pendingcancellation { background-color: #F0B86F; color: #333; }
.badge.reservation-status-cancelled { background-color: #F27F7E; color: #fff; }
.badge.reservation-status-notattempted { background-color: #dcdcdc; color: #333; }
.badge.reservation-status-failed { background-color: #E5F2FD; color: #333; }

/* ===== Cards (replacing panels) ===== */
.card { border: 1px solid #e3e6ea; border-radius: 4px; }

.card-header {
    background-color: #2c3e50;
    color: #fff;
    font-weight: 500;
    border-bottom: none;
    padding: 0.6rem 1rem;
}

.card-header h5 { color: #fff; font-size: 1rem; }

/* ===== Buttons ===== */
.btn-primary {
    background-color: #238ed5;
    border-color: #238ed5;
}
.btn-primary:hover {
    background-color: #1a7abc;
    border-color: #1a7abc;
}

/* ===== Utility ===== */
.hidden { display: none !important; }
.error, .text-error { color: #dc3545; }
.clearfix { overflow: auto; }

/* ===== Loader Animation ===== */
.loader-1 { margin-bottom: 30px; text-align: center; }
.loader-1 span {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #238ed5;
    margin: 0 4px;
    animation: loader-bounce 1.4s infinite ease-in-out both;
}
.loader-1 span:nth-child(1) { animation-delay: -0.32s; }
.loader-1 span:nth-child(2) { animation-delay: -0.16s; }
.loader-1 span:nth-child(3) { animation-delay: 0s; }
.loader-1 span:nth-child(4) { animation-delay: 0.16s; }
.loader-1 span:nth-child(5) { animation-delay: 0.32s; }

@keyframes loader-bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1.0); }
}

/* ===== Conversations ===== */
.conversation-timeline { border-left: 3px solid #e3e6ea; padding-left: 20px; }
.conversation-timeline .timeline-item { margin-bottom: 20px; position: relative; }
.conversation-timeline .timeline-item::before {
    content: '';
    position: absolute;
    left: -27px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #238ed5;
}

/* ===== Miscellaneous ===== */
.highlight { background-color: #d4edda; padding: 10px; border-radius: 4px; }
.qa-warning { background-image: url('/images/qa-warning.svg'); background-repeat: no-repeat; background-position: center; }

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .form-signin { width: 100%; padding: 20px; }
    .table-responsive { font-size: 0.8rem; }
}