/*!
 * TAU-CET 60-30-10 Color Rule - Part 3
 * Custom button classes and utility components
 */

/* ============================================
   CUSTOM BUTTON CLASSES
   ============================================ */

/* Gold Accent Button - For important CTAs */
.btn-gold-accent {
    background: linear-gradient(135deg, #c9a227 0%, #e0bc4d 100%) !important;
    border: none !important;
    color: #0f2d1a !important;
    font-weight: 700 !important;
    padding: 0.5rem 1.5rem !important;
    box-shadow: 0 4px 15px rgba(201, 162, 39, 0.4) !important;
    transition: all 0.3s ease !important;
}

.btn-gold-accent:hover,
.btn-gold-accent:focus {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(201, 162, 39, 0.6) !important;
    color: #0f2d1a !important;
    background: linear-gradient(135deg, #a68520 0%, #c9a227 100%) !important;
}
/* Extra-small action buttons.
   coordinator/review_panel.php uses class="btn-xs" for in-table actions, but the
   class was never defined (Bootstrap 4 stops at .btn-sm), so every one of those
   buttons rendered at full size and made the review tables tall and ragged. */
.btn-xs {
    padding: 0.15rem 0.4rem !important;
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
    border-radius: 0.2rem !important;
}

/* Instrument column-map cells (admin/instruments.php?map=<id>).
   Each cell is a <textarea> so a long accomplishment wraps onto several lines
   instead of being clipped to one line inside a horizontal scroll. These rules
   remove the parts of the default control that fight that: the drag handle, the
   internal scroller (the height is set from scrollHeight in
   js/instruments.js), and the tall default min-height. */
textarea.cell-wrap {
    resize: none;
    overflow-y: hidden;
    min-height: 0;
    height: auto;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.35;
    field-sizing: content;
}
/* A numeric cell stays a comfortable single row - it only ever holds "6" or
   "ETL: 3", and letting it grow with a long pasted value would look wrong. */
textarea.cell-wrap.cell-num {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

/* The review panel's "Edit people" dialog is re-parented to <body> so Bootstrap
   4 will show it on top of the review modal it was opened from. Re-parenting
   alone is not enough: the review modal is z-index 1050 and its backdrop 1040
   (sb-admin-2.css), and the child inherits the same values, so it can end up
   painted underneath. Lift the child - and the backdrop that belongs to it -
   above both. Scoped to the attribute so no other modal in the app changes. */
body > [data-review-modal] {
    z-index: 1080;
}
body > [data-review-modal] ~ .modal-backdrop {
    z-index: 1070;
}
/* The picker's confirmation dialog opens ON TOP of the Edit dialog. It carries
   data-review-modal="2" so queue.php/review.php re-parent it to <body> the same
   way they do the Edit dialog, and these rules stack it one step higher. */
body > [data-review-modal="2"] {
    z-index: 1090;
}
body > [data-review-modal="2"] ~ .modal-backdrop {
    z-index: 1085;
}
/* The Approve confirmation (data-review-modal="3") is opened from the review
   modal itself rather than from the Edit dialog, and it must sit above both. */
body > [data-review-modal="3"] {
    z-index: 1100;
}
body > [data-review-modal="3"] ~ .modal-backdrop {
    z-index: 1095;
}

/* Keep everything INSIDE the dialog. A long research title, an unbreakable
   token, or a wide form control used to push the body wider than the card, so
   the content spilled out past the modal's own edges (sb-admin-2.css sets .table
   to width:100% but a table still sizes to its content's minimum width, which is
   why the two tables in this dialog are wrapped in .table-responsive). The body
   clips any residual overflow, and long words wrap instead of stretching it. */
body > [data-review-modal] .modal-body {
    overflow-x: hidden;
}
body > [data-review-modal] .modal-body table {
    table-layout: fixed;
    width: 100%;
}
body > [data-review-modal] .modal-body td,
body > [data-review-modal] .modal-body th {
    word-break: break-word;
    overflow-wrap: break-word;
}



/* TAU Gold Button */
.btn-tau-gold {
    background-color: #c9a227 !important;
    border-color: #c9a227 !important;
    color: #0f2d1a !important;
    font-weight: 700 !important;
}

.btn-tau-gold:hover,
.btn-tau-gold:focus,
.btn-tau-gold:active {
    background-color: #a68520 !important;
    border-color: #a68520 !important;
    color: #ffffff !important;
}

/* TAU Green Button */
.btn-tau-green {
    background-color: #1a472a !important;
    border-color: #1a472a !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.btn-tau-green:hover,
.btn-tau-green:focus,
.btn-tau-green:active {
    background-color: #0f2d1a !important;
    border-color: #0f2d1a !important;
    color: #ffffff !important;
}

/* ============================================
   CARD HEADER VARIANTS
   ============================================ */

.card .card-header-gold {
    background-color: #c9a227 !important;
    color: #0f2d1a !important;
    border-bottom: 2px solid #1a472a !important;
}

.card .card-header-gold h6,
.card .card-header-gold h5,
.card .card-header-gold h4 {
    color: #0f2d1a !important;
}

.card .card-header-light {
    background-color: #f8f9fc !important;
    color: #1a472a !important;
    border-bottom: 2px solid #c9a227 !important;
}

.card .card-header-light h6,
.card .card-header-light h5,
.card .card-header-light h4 {
    color: #1a472a !important;
}

/* ============================================
   ICON CIRCLES (for dashboard stats)
   ============================================ */

.icon-circle {
    height: 3rem;
    width: 3rem;
    border-radius: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon-circle-primary {
    background-color: rgba(201, 162, 39, 0.2) !important;
    color: #c9a227 !important;
}

.icon-circle-success {
    background-color: rgba(26, 71, 42, 0.2) !important;
    color: #1a472a !important;
}

/* ============================================
   TOPBAR VARIANTS
   ============================================ */

.topbar.topbar-green {
    background-color: #1a472a !important;
    border-bottom: none !important;
}

.topbar.topbar-green #sidebarToggleTop,
.topbar.topbar-green .nav-item .nav-link {
    color: #ffffff !important;
}

.topbar.topbar-green #sidebarToggleTop:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.topbar.topbar-green .nav-item .nav-link:hover {
    color: #c9a227 !important;
}

.topbar.topbar-gold-accent {
    border-bottom: 3px solid #c9a227 !important;
}

/* ============================================
   STAT CARDS (Dashboard widgets)
   ============================================ */

.card-stat .card-body .text-xs {
    color: #c9a227 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.card-stat .card-body .h5 {
    color: #1a472a !important;
    font-weight: 700 !important;
}

.card-stat .card-icon {
    color: rgba(201, 162, 39, 0.2) !important;
}

/* ============================================
   TAU BRANDING
   ============================================ */

.tau-brand {
    display: flex;
    align-items: center;
}

.tau-brand .tau-logo {
    color: #1a472a;
    margin-right: 0.5rem;
}

.tau-brand .tau-logo .tau-icon {
    color: #c9a227;
}

.tau-brand .tau-text {
    color: #1a472a;
    font-weight: 700;
}

.tau-brand .tau-subtitle {
    color: #6c757d;
    font-size: 0.8rem;
}

/* ============================================
   DATATABLES CUSTOMIZATION
   ============================================ */

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #c9a227 !important;
    color: #0f2d1a !important;
    border: 1px solid #c9a227 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(26, 71, 42, 0.1) !important;
    color: #1a472a !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #d1d3e2;
    border-radius: 0.2rem;
    padding: 0.25rem 0.5rem;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #c9a227 !important;
    box-shadow: 0 0 0 0.2rem rgba(201, 162, 39, 0.25) !important;
}