/* Oferta de plazas — public offer table. */

/* Fix DevExtreme Excel export icons when the grid lives outside the
   admin chrome (which already applies this override via
   algoria_admin.css). Without it the toolbar button and the dropdown
   "Export all data" / "Export selected rows" items render a broken
   glyph. Pattern copied from learning_agreement_subjects.css. */
.dx-datagrid-export-button .dx-icon-export-excel-button:before,
.dx-datagrid-export-menu .dx-icon-xlsxfile:before {
    content: "\f060";
}

/* Info notice shown next to the call selector so it does not eat
   vertical space above the grid. */
.offer-inline-notice {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 0.9em;
}

/* Review-mode notice — shown to is_staff when the call hasn't hit its
   publication window yet. Intentionally subtle: a thin left-border rule
   + muted colours, not a full Bootstrap alert. The detail about caché
   bypass lives in the title tooltip, not in the visible text. */
.offer-review-note {
    margin-top: 12px;
    margin-bottom: 12px;
    padding: 6px 10px;
    font-size: 0.88em;
    color: #6b5a1f;
    background: #fdf8e4;
    border-left: 3px solid #d9b45a;
    border-radius: 2px;
}
.offer-review-note .offer-review-icon {
    margin-right: 6px;
    color: #a58324;
    font-size: 0.95em;
}
.offer-review-note strong {
    font-weight: 600;
}

.offer-empty-message {
    padding: 1.5rem;
    color: #888;
    font-style: italic;
    text-align: center;
}

#grid-offer-table {
    margin-top: 0;
}

/* Horizontal-scroll hint — mirrored from tutor_section.html so coordinator
   staff recognise the pattern immediately. */
.grid-scroll-indicator {
    position: relative;
}
.grid-scroll-indicator::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 25px;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(0, 0, 0, 0.15) 100%
    );
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.3s ease;
    opacity: 1;
}
.grid-scroll-indicator.reached-right::after {
    opacity: 0;
}

.scroll-arrow-container {
    display: none;
    text-align: right;
    margin-bottom: 5px;
    color: #337ab7;
    font-weight: bold;
    font-size: 0.9em;
    transition: opacity 0.3s ease;
    opacity: 0;
}
.scroll-arrow-container.show-arrow {
    display: block;
    opacity: 1;
}
.scroll-arrow-container i {
    margin-left: 5px;
    animation: slideArrow 1.5s infinite;
}
@keyframes slideArrow {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

/* Plazas cell — one line per row, no headers. Text inherits from the
   DataGrid cell so the plaza lines match the surrounding row size. */
.offer-plazas-list {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1.4;
}
.offer-plazas-list li {
    padding: 1px 0;
}
.offer-plazas-list li + li {
    border-top: 1px solid #f0f0f0;
}
.offer-plaza-kind {
    display: inline-block;
    min-width: 2.5em;
    padding: 0 4px;
    margin-right: 4px;
    font-size: 0.75rem;
    background: #eee;
    border-radius: 3px;
    color: #555;
    text-align: center;
}


/* Titulaciones cell — stacked rows with collapse. Keeps the column
   width bounded even when the agreement lists many degrees. Filtering,
   search and export keep working on the joined _degrees_text data
   field, so the collapsed state doesn't hide matches from the user. */
.offer-degrees-list {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1.35;
}
.offer-degrees-list li {
    padding: 1px 0;
}
.offer-degrees-list li + li {
    border-top: 1px solid #f0f0f0;
}
.offer-degrees-extra {
    display: none;
}
.offer-degrees-list.offer-degrees-expanded .offer-degrees-extra {
    display: list-item;
}
.offer-degrees-toggle-row {
    border-top: none !important;
    padding-top: 2px;
}
.offer-degrees-toggle {
    font-size: 0.85em;
    color: #337ab7;
    cursor: pointer;
    text-decoration: none;
}
.offer-degrees-toggle:hover {
    text-decoration: underline;
}

/* Idiomas cell — mini-table with headers. Fills the DX cell edge-to-edge
   (no outer padding), aligned to the top. Font size inherits from the
   grid row. */
td.offer-cell-flush {
    padding: 0 !important;
    vertical-align: top !important;
}
.offer-cell-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.offer-cell-table thead th {
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid #ddd;
    padding: 4px 8px;
    color: #555;
    background: #f6f6f6;
}
.offer-cell-table tbody td {
    padding: 4px 8px;
    vertical-align: top;
    border-bottom: 1px solid #f0f0f0;
}
.offer-cell-table tbody tr:last-child td {
    border-bottom: none;
}
.offer-languages-none {
    color: #888;
    font-style: italic;
}

/* Dimmed row — all plazas = 0. Target cells so DX hover/background is
   overridden too. */
tr.offer-dim-row > td {
    color: #a0a0a0 !important;
}
tr.offer-dim-row .offer-plaza-kind {
    opacity: 0.6;
}

.offer-badge {
    display: inline-block;
    margin-bottom: 4px;
    padding: 2px 6px;
    font-size: 0.75rem;
    background: #f0ad4e;
    color: #fff;
    border-radius: 3px;
}

/* Results counter in the DataGrid toolbar — placed right before the
   Excel export button. Updates live in onContentReady so it tracks
   filters. */
.offer-count-badge {
    display: inline-block;
    padding: 4px 10px;
    margin-right: 8px;
    font-size: 0.9em;
    color: #555;
    background: #f0f0f0;
    border-radius: 12px;
    white-space: nowrap;
}

/* ℹ info icon used inside the "Código Acuerdo" column. The global
   .main td .glyphicon::before rule in eruma.css wraps every glyphicon
   inside a td with a tiny blue circle bubble — we cancel it here at
   the same specificity, same pattern as tutor_section.html's
   .raw-icon escape hatch. */
.main td .offer-info-icon::before,
.main .iconed .offer-info-icon::before,
.main td :hover .offer-info-icon::before,
.main .iconed:hover .offer-info-icon::before {
    color: inherit;
    background-color: transparent;
    display: inline;
    line-height: inherit;
    width: auto;
    height: auto;
    padding: 0;
    position: static;
    top: auto;
    border-radius: 0;
    font-size: inherit;
    text-shadow: inherit;
}
.offer-info-trigger {
    color: #337ab7;
    text-decoration: none;
    margin-left: 6px;
    cursor: pointer;
    vertical-align: middle;
}
.offer-info-trigger:hover,
.offer-info-trigger:focus {
    color: #23527c;
    text-decoration: none;
}

/* Detail modal — overlay propio Algoria (CLAUDE.md §9).
   Bootstrap's .modal.fade is broken in the admin chrome, and we want
   the same behaviour here for consistency. */
.offer-detail-modal {
    position: relative;
    background: #fff;
    padding: 24px 28px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}
.offer-detail-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #888;
    cursor: pointer;
}
.offer-detail-close:hover { color: #000; }
.offer-detail-loading {
    padding: 20px;
    text-align: center;
    color: #888;
    font-style: italic;
}
.offer-detail-header h3 {
    margin: 0 0 4px 0;
    font-size: 1.3rem;
}
.offer-detail-header .offer-detail-subtitle {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 16px;
}
.offer-detail-section {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}
.offer-detail-section h4 {
    margin: 0 0 8px 0;
    font-size: 0.95rem;
    color: #337ab7;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.offer-detail-section .offer-detail-html {
    line-height: 1.5;
}
.offer-detail-section .offer-detail-html p:last-child {
    margin-bottom: 0;
}
.offer-detail-tutors li {
    padding: 4px 0;
}
.offer-detail-tutors .offer-detail-tutor-email {
    color: #666;
    font-size: 0.9em;
    margin-left: 6px;
}
.offer-detail-languages-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px;
}
.offer-detail-languages-table th,
.offer-detail-languages-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: top;
    text-align: left;
}
.offer-detail-languages-table thead th {
    background: #f6f6f6;
    font-weight: 600;
    color: #555;
}
/* Stronger visual break between languages so per-language comments
   don't blend into the next language's row. Only the FIRST row of
   each follow-up language gets the dark border — inner rows (the
   per-language comments) keep the light default separator so the
   observations stay visually bound to their language. */
.offer-detail-languages-table tbody + tbody > tr:first-child > td,
.offer-detail-languages-table tbody + tbody > tr:first-child > th {
    border-top: 2px solid #bbb;
}

/* Plazas block inside the modal — show as an actual bulleted list so
   multiple items read as a list. The table column still uses the flat
   look via .offer-plazas-list (no bullets, inherits size). */
.offer-detail-plazas {
    list-style: disc inside;
    padding-left: 4px;
}
.offer-detail-plazas li {
    padding: 2px 0;
}
.offer-detail-plazas li + li {
    border-top: none;
}
.offer-detail-cert-list {
    margin: 4px 0 0 0;
    padding-left: 18px;
    font-size: 0.9em;
}
.offer-detail-cert-list li { padding: 2px 0; }
.offer-detail-cert-notes {
    color: #666;
    font-size: 0.88em;
}
.offer-detail-empty {
    color: #999;
    font-style: italic;
}