/* ─── macblash-training.css ─── */
/* Extracted from show_event.blade.php to be used globally for Events and Training */

/* ─── GSAP hidden for animation ─── */
.gsap-hidden { opacity: 0; }

/* ─── Hero ─── */
.ev-detail-hero {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    border-radius: 0 0 28px 28px;
    margin-bottom: -60px;
}
.ev-detail-hero-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    filter: blur(20px) brightness(0.35) saturate(1.4);
    transform: scale(1.05);
    z-index: 0;
}
.ev-detail-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(10,10,16,1) 0%, rgba(10,10,16,0.7) 40%, rgba(10,10,16,0.2) 100%);
    z-index: 1;
}
.ev-detail-hero-content {
    position: relative; z-index: 2;
    width: 100%;
    padding: 40px 0 80px;
    display: flex;
    align-items: flex-end;
    gap: 28px;
}
.ev-detail-hero-img {
    flex-shrink: 0;
    width: 180px; height: 180px;
    border-radius: 18px;
    overflow: hidden;
    border: 2px solid rgba(139,92,246,0.4);
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(139,92,246,0.2);
}
.ev-detail-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-detail-hero-info { flex: 1; min-width: 0; }
.ev-detail-hero-badge { margin-bottom: 10px; }
.ev-detail-hero-title {
    font-size: 32px; font-weight: 900;
    color: #f1f5f9; line-height: 1.2; margin-bottom: 10px;
    overflow-wrap: break-word;
}
.ev-detail-hero-org {
    font-size: 15px; color: #8B5CF6; font-weight: 600;
    display: flex; align-items: center; gap: 6px; margin-bottom: 14px;
    /* rusty begin update | 2026-08-29 16:40 */
    /* Action: flex items default to min-width:auto, which keeps unbroken text (e.g. a long short_desc with no spaces) at its full intrinsic width instead of wrapping — this lets it shrink and wrap inside the hero column */
    overflow-wrap: anywhere;
    word-break: break-word;
    /* rusty end update */
}
.ev-detail-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ─── Action Buttons ─── */
.ev-action-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px; border-radius: 10px; font-size: 13px; font-weight: 600;
    cursor: pointer; border: none; transition: all 0.3s ease; text-decoration: none;
}
.ev-action-btn.primary { background: linear-gradient(135deg, #8B5CF6, #7C3AED); color: #fff; }
.ev-action-btn.primary:hover { background: linear-gradient(135deg, #7C3AED, #6D28D9); transform: translateY(-1px); }
.ev-action-btn.location { background: rgba(16,185,129,0.12); color: #10B981; border: 1px solid rgba(16,185,129,0.3); }
.ev-action-btn.location:hover { background: rgba(16,185,129,0.22); color: #10B981; text-decoration: none; }
.ev-action-btn.share-ev { background: rgba(139,92,246,0.12); color: #8B5CF6; border: 1px solid rgba(139,92,246,0.25); }
.ev-action-btn.share-ev:hover { background: rgba(139,92,246,0.22); }
.ev-action-btn.video-btn { background: rgba(239,68,68,0.12); color: #ef4444; border: 1px solid rgba(239,68,68,0.3); }
.ev-action-btn.video-btn:hover { background: rgba(239,68,68,0.22); color: #ef4444; text-decoration: none; }
/* rusty begin new code | 2026-08-29 15:05 */
/* Action: mail-btn variant for the "تواصل مع المدرب" trainer-contact action on show_service_train */
.ev-action-btn.mail-btn { background: rgba(6,182,212,0.12); color: #06b6d4; border: 1px solid rgba(6,182,212,0.3); }
.ev-action-btn.mail-btn:hover { background: rgba(6,182,212,0.22); color: #06b6d4; text-decoration: none; }
/* rusty end new code */
.ev-action-btn.edit-btn { background: rgba(139,92,246,0.12); color: #8B5CF6; border: 1px solid rgba(139,92,246,0.3); }
.ev-action-btn.edit-btn:hover { background: rgba(139,92,246,0.22); color: #8B5CF6; text-decoration: none; }
.ev-action-btn.delete-btn { background: rgba(239,68,68,0.12); color: #ef4444; border: 1px solid rgba(239,68,68,0.3); }
.ev-action-btn.delete-btn:hover { background: rgba(239,68,68,0.22); color: #ef4444; text-decoration: none; }

/* Status Badges */
.ev-status-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
    border-radius: 50px; font-size: 12px; font-weight: 700;
}
.ev-status-badge .badge-dot { width: 7px; height: 7px; border-radius: 50%; }
.ev-status-badge.badge-live { background: rgba(16,185,129,0.15); color: #10B981; border: 1px solid rgba(16,185,129,0.3); }
.ev-status-badge.badge-live .badge-dot { background: #10B981; animation: ev-pulse 1.5s ease-in-out infinite; }
.ev-status-badge.badge-soon { background: rgba(245,158,11,0.15); color: #F59E0B; border: 1px solid rgba(245,158,11,0.3); }
.ev-status-badge.badge-soon .badge-dot { background: #F59E0B; }
.ev-status-badge.badge-ended { background: rgba(100,116,139,0.15); color: #64748b; border: 1px solid rgba(100,116,139,0.25); }
.ev-status-badge.badge-ended .badge-dot { background: #64748b; }
@keyframes ev-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }

/* ─── Info Cards Row ─── */
.ev-info-cards {
    position: relative; z-index: 10;
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 14px; margin-bottom: 20px; padding-top: 74px;
}
/* rusty begin new code | 2026-08-29 16:40 */
/* Action: the shared sitewide .content class (style.css) carries padding:70px 0, which stacked on top of ev-info-cards' own margin-bottom left a ~100px gap before the description box. Override just the top padding when .content directly follows the info-cards row. */
.ev-info-cards + .content {
    padding-top: 10px;
}
/* rusty end new code */
.ev-info-card {
    background: rgba(18,18,26,0.9);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px; padding: 16px 18px;
    display: flex; flex-direction: column; gap: 6px;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.ev-info-card:hover { border-color: rgba(139,92,246,0.3); box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.ev-info-card-label {
    font-size: 11px; font-weight: 600; letter-spacing: 0.8px;
    text-transform: uppercase; color: #64748b;
    display: flex; align-items: center; gap: 6px;
}
.ev-info-card-label i { color: #8B5CF6; }
.ev-info-card-value { font-size: 14px; font-weight: 700; color: #e2e8f0; }
.ev-info-card-value a { color: #10B981; text-decoration: none; }
.ev-info-card-value a:hover { text-decoration: underline; }

/* ─── Glass Content Sections ─── */
.ev-glass-section {
    background: rgba(18,18,26,0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px; padding: 28px 32px;
    margin-bottom: 24px;
}
.ev-glass-section-title {
    font-size: 16px; font-weight: 700; color: #e2e8f0;
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 18px; padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ev-glass-section-title i { color: #8B5CF6; }

/* ─── Description ─── */
.ev-desc-content {
    color: #94a3b8; font-size: 15px; line-height: 1.8;
    /* rusty begin update | 2026-08-29 16:40 */
    /* Action: admin-entered descriptions can contain long unbroken runs with no spaces, which otherwise overflow the glass panel in a single line instead of wrapping */
    overflow-wrap: anywhere;
    word-break: break-word;
    /* rusty end update */
}
.ev-desc-content h1,.ev-desc-content h2,.ev-desc-content h3 { color: #e2e8f0; margin-bottom: 12px; }
.ev-desc-content p { margin-bottom: 14px; }
.ev-desc-content a { color: #8B5CF6; }

/* ─── Registration alerts override ─── */
.alert { border-radius: 12px; }

/* ─── Rating Section (identical to show_live) ─── */
.live-rating-section {
    background: rgba(18,18,26,0.8);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px; padding: 24px 28px;
    margin-bottom: 24px;
}
.live-rating-section-title {
    font-size: 15px; font-weight: 700; color: #e2e8f0;
    display: flex; align-items: center; gap: 8px; margin-bottom: 18px;
}
.live-rating-section-title i { color: #F59E0B; }
.live-avg-rating { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.live-avg-score { font-size: 42px; font-weight: 900; color: #f1f5f9; line-height: 1; }
.live-avg-stars { display: flex; gap: 3px; color: #F59E0B; font-size: 16px; }
.live-avg-count { font-size: 12px; color: #64748b; margin-top: 4px; }
.mac-forum-star-rating { display: flex; flex-direction: row-reverse; gap: 4px; }
.mac-forum-star-rating input { display: none; }
.mac-forum-star-rating label { cursor: pointer; color: #475569; font-size: 22px; transition: color 0.15s; }
.mac-forum-star-rating input:checked ~ label,
.mac-forum-star-rating label:hover,
.mac-forum-star-rating label:hover ~ label { color: #F59E0B; }
.live-comment-textarea {
    width: 100%; min-height: 90px; background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09); border-radius: 10px;
    color: #e2e8f0; padding: 12px 14px; font-size: 14px; resize: vertical; outline: none;
    transition: border-color 0.2s;
}
.live-comment-textarea:focus { border-color: rgba(139,92,246,0.4); }
.live-comment-textarea::placeholder { color: #475569; }
.live-submit-btn {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
    padding: 11px 28px; background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    color: #fff; border: none; border-radius: 12px; font-size: 14px; font-weight: 700;
    cursor: pointer; transition: all 0.3s;
}
.live-submit-btn:hover { background: linear-gradient(135deg, #7C3AED, #6D28D9); transform: translateY(-1px); }
.live-submit-btn.is-glitching {
    animation: glitch-submit 0.4s steps(2, end) infinite;
}
/* rusty begin new code | 2026-09-09 19:20 */
/* Action: "إرسال التقييم" hugs the reading-END edge for EVERY rating widget that uses
   this section (Events, News, Free Games, Live, LMS): LEFT in Arabic (RTL),
   RIGHT in English (LTR). block + fit-content so margin-inline-start:auto pushes it. */
.live-rating-section .live-submit-btn {
    display: flex;
    width: fit-content;
    margin-inline-start: auto;
    margin-inline-end: 0;
}
/* rusty end new code */
@keyframes glitch-submit {
    0%   { transform: translateX(0); filter: hue-rotate(0deg); }
    25%  { transform: translateX(-3px); filter: hue-rotate(90deg); }
    50%  { transform: translateX(3px); filter: hue-rotate(180deg); }
    75%  { transform: translateX(-2px); filter: hue-rotate(270deg); }
    100% { transform: translateX(0); filter: hue-rotate(0deg); }
}
.live-comments-list { margin-top: 8px; }
.live-comment-item {
    display: flex; gap: 12px; padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.live-comment-item:last-child { border-bottom: none; }
.live-comment-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
    border: 1px solid rgba(139,92,246,0.25);
}
.live-comment-body { flex: 1; min-width: 0; }
.live-comment-name {
    font-size: 13px; font-weight: 700; color: #e2e8f0;
    display: flex; align-items: center; gap: 6px; margin-bottom: 3px;
}
.live-comment-name .verified { color: #8B5CF6; font-size: 12px; }
.live-comment-stars { display: flex; gap: 2px; color: #F59E0B; font-size: 12px; margin-bottom: 5px; }
.live-comment-text { font-size: 13px; color: #94a3b8; line-height: 1.55; }
.live-comment-date { font-size: 11px; color: #475569; margin-top: 5px; }
.live-action-btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px;
    border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: all 0.3s ease; text-decoration: none;
}
.live-action-btn.share { background: rgba(139,92,246,0.12); color: #8B5CF6; border: 1px solid rgba(139,92,246,0.25); }

/* ─── Photo Gallery ─── */
.ev-photo-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.ev-photo-item { border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; cursor: pointer; }
.ev-photo-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.3s; }
.ev-photo-item:hover img { transform: scale(1.06); }

/* ─── Video Player ─── */
.ev-video-wrap { border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 8px 32px rgba(0,0,0,0.6); }
.ev-video-wrap .ratio { border-radius: 14px; overflow: hidden; }

/* rusty begin new code | 2026-08-29 14:22 */
/* Action: Gaming HUD treatment for training/service card title, price and status chip (all_services_train.blade.php) */

/* ─── Status Chip (top-right over thumbnail) ─── */
.train-status-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 50px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.train-status-chip.is-live { background: rgba(16,185,129,0.18); color: #34d399; border-color: rgba(16,185,129,0.4); }
.train-status-chip.is-recorded { background: rgba(6,182,212,0.18); color: #22d3ee; border-color: rgba(6,182,212,0.4); }
/* rusty begin new code | 2026-08-29 16:30 */
/* Action: declined-state variant, for training registration status chips on the profile page */
.train-status-chip.is-declined { background: rgba(239,68,68,0.18); color: #f87171; border-color: rgba(239,68,68,0.4); }
/* rusty end new code */
.train-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; flex-shrink: 0; }
.train-status-chip.is-live .train-status-dot { animation: ev-pulse 1.5s ease-in-out infinite; }

/* ─── Floating HUD bar (title + price), straddles the image/body seam on purpose ─── */
.train-hud-bar {
    position: relative; z-index: 4;
    margin: -34px 14px 0;
    padding: 14px 16px;
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(180deg, rgba(14,14,20,0.94) 0%, rgba(14,14,20,0.86) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(139,92,246,0.35);
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.train-hud-bar::before {
    content: ''; position: absolute; top: 0; left: 14px; right: 14px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(6,182,212,0.85), transparent);
}
.group:hover .train-hud-bar { border-color: rgba(6,182,212,0.5); box-shadow: 0 12px 30px rgba(0,0,0,0.55), 0 0 20px rgba(139,92,246,0.15); }

.train-hud-accent {
    flex-shrink: 0; align-self: stretch; width: 4px; border-radius: 4px;
    background: linear-gradient(180deg, #8b5cf6, #06b6d4);
    box-shadow: 0 0 8px rgba(139,92,246,0.6);
}

.train-card-title {
    flex: 1; min-width: 0; margin: 0;
    font-size: 16px; font-weight: 800; letter-spacing: 0.2px;
    overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.train-card-title-link { color: #f1f5f9; text-decoration: none; transition: color 0.25s, text-shadow 0.25s; }
.train-card-title-link:hover { color: #22d3ee; text-shadow: 0 0 12px rgba(34,211,238,0.6); }

/* rusty begin new code | 2026-08-29 15:05 */
/* Action: short_desc_ar line on the training card, matching .ev-card-desc from the events listing */
.train-card-desc {
    font-size: 12px; color: #94a3b8; line-height: 1.5; margin: 0 0 12px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* rusty end new code */

.train-price-chip {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 50px;
    background: rgba(6,182,212,0.08);
    border: 1px solid rgba(6,182,212,0.4);
    box-shadow: 0 0 14px rgba(6,182,212,0.25), inset 0 0 8px rgba(6,182,212,0.08);
}
.train-price-chip.is-free {
    background: rgba(139,92,246,0.1);
    border-color: rgba(139,92,246,0.45);
    box-shadow: 0 0 14px rgba(139,92,246,0.25), inset 0 0 8px rgba(139,92,246,0.08);
}
.train-price-value {
    font-family: 'Courier New', monospace;
    font-weight: 800; font-size: 15px; letter-spacing: 0.5px;
    color: #22d3ee; text-shadow: 0 0 10px rgba(6,182,212,0.6);
    font-variant-numeric: tabular-nums;
}
.train-price-chip.is-free .train-price-value { color: #a78bfa; text-shadow: 0 0 10px rgba(139,92,246,0.6); }
.train-price-coin { width: 18px; height: 18px; filter: drop-shadow(0 0 4px rgba(6,182,212,0.7)); animation: train-coin-spin 3s linear infinite; }
@keyframes train-coin-spin {
    0%, 85% { transform: rotateY(0deg); }
    92% { transform: rotateY(180deg); }
    100% { transform: rotateY(360deg); }
}

@media (max-width: 576px) {
    .train-hud-bar { margin: -28px 10px 0; padding: 12px 14px; gap: 10px; }
    .train-card-title { font-size: 14px; }
    .train-price-value { font-size: 13px; }
}
/* rusty end new code */

/* rusty begin new code | 2026-08-29 17:45 */
/* Action: manage_training.blade.php's registrants table was using unstyled Bootstrap defaults (white background, light inputs), clashing with the dark glass theme around it */
.train-manage-table {
    /* Bootstrap 5's own `.table > :not(caption) > * > *` selector sets color/background via these
       CSS variables at higher specificity than a plain `.train-manage-table td` rule can beat, which is
       why the cell text stayed black even after the background went dark — override the variables directly. */
    --bs-table-color: #e2e8f0;
    --bs-table-bg: transparent;
    --bs-table-striped-color: #e2e8f0;
    --bs-table-striped-bg: rgba(139,92,246,0.05);
    --bs-table-hover-color: #f1f5f9;
    --bs-table-hover-bg: rgba(139,92,246,0.08);
    color: #e2e8f0;
    border-color: rgba(255,255,255,0.08);
}
.train-manage-table thead th {
    background: rgba(139,92,246,0.12);
    color: #cbd5e1 !important;
    border-color: rgba(255,255,255,0.08);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.train-manage-table tbody td {
    background: rgba(18,18,26,0.85);
    color: #e2e8f0 !important;
    border-color: rgba(255,255,255,0.06);
    vertical-align: middle;
}
.train-manage-table tbody tr:hover td {
    background: rgba(139,92,246,0.08);
}

.train-decision-select,
.train-decision-note,
.train-payment-select,
.train-payment-amount {
    background: rgba(15,23,42,0.9) !important;
    border: 1px solid rgba(51,65,85,0.8) !important;
    color: #f1f5f9 !important;
}
.train-decision-select:focus,
.train-decision-note:focus,
.train-payment-select:focus,
.train-payment-amount:focus {
    border-color: #06b6d4 !important;
    box-shadow: 0 0 0 1px rgba(6,182,212,0.3);
    outline: none;
}
.train-decision-note::placeholder,
.train-payment-amount::placeholder {
    color: rgba(148,163,184,0.5);
}
.train-decision-select option,
.train-payment-select option {
    background: #0f172a;
    color: #f1f5f9;
}

/* rusty begin new code | 2026-08-29 18:35 */
/* Action: Themed "edit" toggle pill for the collapsed decision/payment summaries — was a plain sharp-cornered Bootstrap btn-outline-light, clashing with the rounded glass/gradient look used everywhere else on this page */
.train-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(139,92,246,0.12);
    border: 1px solid rgba(139,92,246,0.35);
    color: #c4b5fd;
    cursor: pointer;
    transition: all 0.2s ease;
}
.train-edit-btn:hover {
    background: rgba(139,92,246,0.22);
    border-color: rgba(139,92,246,0.6);
    color: #ede9fe;
}
/* rusty end new code */

/* ─── Responsive ─── */
@media(max-width:992px){ .ev-info-cards{grid-template-columns:repeat(2,1fr);} .ev-detail-hero-title{font-size:24px;} }
@media(max-width:576px){
    .ev-detail-hero-img{width:120px;height:120px;}
    .ev-detail-hero-title{font-size:20px;}
    .ev-detail-hero-content{flex-direction:column;align-items:flex-start;padding-bottom:60px;}
    .ev-info-cards{grid-template-columns:repeat(2,1fr); padding-top:50px;}
    .ev-glass-section{padding:20px;}
    .ev-photo-grid{grid-template-columns:repeat(2,1fr);}
    .live-rating-section{padding:18px;}
}

/* rusty begin new code | 2026-09-01 18:35 */
/* Action: Delivery-track and session-repeater controls on the training service forms. Kept in the
   training stylesheet since these belong to the service form, not to the course player. */

.dt-hint {
    display: block;
    margin: 5px 0 0;
    font-size: 0.76rem;
    line-height: 1.6;
    color: #94a3b8;
}

.dt-session-row {
    position: relative;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.35);
}

.dt-session-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dt-session-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 150px;
    min-width: 0;
    margin: 0;
}

.dt-session-field > span {
    font-size: 0.74rem;
    color: #94a3b8;
}

.dt-session-locked {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 0.72rem;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.32);
}

.dt-session-error,
.dt-schedule-error {
    margin: 8px 0 0;
    font-size: 0.76rem;
    color: #f87171;
}

/* The repeater sits inside the light-surfaced admin dashboard as well as the dark site modals, so
   the panel background is neutralised there rather than inheriting the dark treatment. */
.content-wrapper .dt-session-row {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
}

.content-wrapper .dt-session-field > span,
.content-wrapper .dt-hint {
    color: #64748b;
}
/* rusty end new code */

/* rusty begin new code | 2026-09-01 20:30 */
/* Action: The "add/edit training service" modal (#addTopicFormTrain, both create and edit flows)
   was still wearing the site's old gold/navy design (style.css) — near-invisible navy labels
   (#213555) on the dark modal background, and gold (#e4c59e) borders/focus rings/typed-text on
   every .form-control, including the dynamically-built session-schedule fields. Re-themed to match
   the purple/cyan glass design used everywhere else (auth pages, .new-post-input, .dt-hint).
   Scoped to this one form's id so pages still on the old gold/navy design are untouched. */
#addTopicFormTrain label {
    color: #cbd5e1 !important;
}

#addTopicFormTrain .form-control,
#addTopicFormTrain .form-select {
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(51, 65, 85, 0.8) !important;
    color: #f1f5f9 !important;
}

#addTopicFormTrain .form-control::placeholder {
    color: rgba(148, 163, 184, 0.55) !important;
}

#addTopicFormTrain .form-control:not(:placeholder-shown) {
    color: #f1f5f9 !important;
    border-color: rgba(51, 65, 85, 0.8) !important;
}

#addTopicFormTrain .form-control:focus,
#addTopicFormTrain .form-select:focus {
    border-color: #06b6d4 !important;
    box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.3), 0 0 12px rgba(6, 182, 212, 0.15) !important;
}

#addTopicFormTrain .form-control option,
#addTopicFormTrain .form-select option {
    background: #0f172a;
    color: #f1f5f9;
}

/* The Arabic hint placeholder in the English-summary field ("الحد الأقصى لعدد الحروف هو 150 حرف")
   was left-aligned because the field itself carries dir="ltr" for the English text a trainer
   types — the explanatory Arabic placeholder should read from the right regardless. */
#short_desc_en::placeholder {
    direction: rtl;
    text-align: right;
}

/* The session-schedule repeater's date/time fields (.dt-session-date/.dt-session-start/
   .dt-session-end, built by macblash-training-schedule.js as native <input type="date">/"time">)
   render Chromium's default dark calendar/clock glyph, which is nearly invisible against this
   dark .form-control background — invert it to white so it's visible, same as every other icon
   on this form. */
#addTopicFormTrain .form-control::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.7;
}
/* rusty end new code */

/* rusty begin new code | 2026-09-02 00:20 */
/* Action: Session list shared by the trainer's management screen and the public course page.
   RTL is the base; physical values are mirrored under [dir="ltr"]. */

.ts-list { list-style: none; margin: 0; padding: 0; }

.ts-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 16px;
    margin-bottom: 10px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.ts-item[data-status="live"] {
    border-color: rgba(34, 197, 94, 0.34);
    background: rgba(34, 197, 94, 0.06);
}

.ts-item-main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1 1 260px;
    min-width: 0;
}

.ts-index {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.76rem;
    font-weight: 700;
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.14);
    border: 1px solid rgba(139, 92, 246, 0.30);
}

.ts-item-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.ts-item-title { font-size: 0.9rem; font-weight: 600; color: #e2e8f0; }

.ts-item-meta {
    font-family: 'Space Grotesk', monospace;
    font-size: 0.74rem;
    color: #64748b;
}

.ts-item-desc { font-size: 0.78rem; color: #94a3b8; line-height: 1.7; }

.ts-item-side {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ts-status {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.ts-status[data-status="live"]      { color: #22c55e; background: rgba(34, 197, 94, 0.12); }
.ts-status[data-status="scheduled"] { color: #f59e0b; background: rgba(245, 158, 11, 0.12); }
.ts-status[data-status="ended"]     { color: #94a3b8; background: rgba(148, 163, 184, 0.12); }

.ts-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ts-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 9px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.ts-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ts-btn-danger {
    color: #f87171 !important;
    border-color: rgba(248, 113, 113, 0.40) !important;
}

.ts-hint { font-size: 0.74rem; color: #64748b; white-space: nowrap; }

.ts-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    font-size: 0.8rem;
    line-height: 1.7;
    color: #94a3b8;
}

.ts-venue-link { display: inline-flex; margin-bottom: 12px; text-decoration: none; }

.ts-status-message {
    margin: 12px 0 0;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 0.8rem;
    color: #e2e8f0;
    background: rgba(139, 92, 246, 0.10);
    border: 1px solid rgba(139, 92, 246, 0.28);
}

.ts-status-message.is-error {
    color: #f87171;
    background: rgba(248, 113, 113, 0.10);
    border-color: rgba(248, 113, 113, 0.30);
}

/* Attendance summary */
.ts-att-bar {
    display: block;
    width: 100%;
    max-width: 130px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    margin-top: 5px;
}

.ts-att-fill { display: block; height: 100%; border-radius: 999px; }
.ts-att-fill[data-status="present"] { background: #22c55e; }
.ts-att-fill[data-status="partial"] { background: #f59e0b; }
.ts-att-fill[data-status="absent"]  { background: #64748b; }

.ts-att-cards {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.ts-att-card {
    flex: 1 1 130px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.ts-att-card-value {
    display: block;
    font-family: 'Space Grotesk', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    color: #e2e8f0;
}

.ts-att-card-label { display: block; font-size: 0.76rem; color: #94a3b8; margin-top: 3px; }

@media (max-width: 768px) {
    .ts-item { flex-direction: column; align-items: stretch; }
    .ts-item-side { justify-content: space-between; }
    .ts-actions { flex: 1 1 auto; }
    .ts-btn { flex: 1 1 auto; }
    .ts-att-bar { max-width: 100%; }
}
/* rusty end new code */

/* --------------------------------------------------------------------------
   Post-session metrics

   rusty begin new code | 2026-09-02 17:25
   Action: What a finished session actually did — when it ran, for how long, and
   how many trainees attended. Sits under the planned schedule line in the same
   text column, styled quietly so the plan stays the row's primary reading and
   the record reads as a footnote to it.
   -------------------------------------------------------------------------- */

.ts-metrics {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 5px;
    font-size: 0.74rem;
    color: #94a3b8;
}

.ts-metric {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.ts-metric .macblash-cyber-icon {
    opacity: 0.75;
    flex: 0 0 auto;
}

/* The attendee count is the figure a trainer scans for, so it is the one that
   carries emphasis. */
.ts-metric-count {
    color: #cbd5e1;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.14);
    border: 1px solid rgba(139, 92, 246, 0.28);
}

@media (max-width: 768px) {
    /* Stacked rather than wrapped mid-phrase, so a time never breaks away from
       the label it belongs to on a narrow screen. */
    .ts-metrics {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}
/* rusty end new code */

/* --------------------------------------------------------------------------
   Trainer review controls

   rusty begin new code | 2026-09-03 14:30
   Action: The two rulings on the attendance register. Attendance falling between
   a session's thresholds is left unresolved on purpose — the recording cannot
   answer that question — so these are how a trainer settles it. The ruling in
   force reads as pressed, and pressing it again withdraws it.
   -------------------------------------------------------------------------- */

.ts-review {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.ts-review-btn {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(30, 41, 59, 0.7);
    color: #cbd5e1;
    font-size: 0.72rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.ts-review-btn:hover:not(:disabled) { background: rgba(51, 65, 85, 0.9); color: #f1f5f9; }
.ts-review-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ts-review-btn.is-present[aria-pressed="true"] {
    background: rgba(34, 197, 94, 0.22);
    border-color: rgba(34, 197, 94, 0.65);
    color: #86efac;
}

.ts-review-btn.is-absent[aria-pressed="true"] {
    background: rgba(248, 113, 113, 0.2);
    border-color: rgba(248, 113, 113, 0.6);
    color: #fca5a5;
}

.ts-review-note {
    flex: 1 1 100%;
    font-size: 0.68rem;
    color: #a78bfa;
}
/* rusty end new code */

/* --------------------------------------------------------------------------
   Trainer outcome and the excused state

   rusty begin new code | 2026-09-04 14:40
   Action: The trainer's own result on a finished session, and the state a
   trainee lands in when the trainer never delivered it. Excused is given its
   own colour rather than borrowing absent's — the whole point of the state is
   that it is not a mark against the trainee, and showing it in the same red
   would say the opposite.
   -------------------------------------------------------------------------- */

.ts-status[data-status="excused"] {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
}

.ts-att-fill[data-status="excused"] { background: #38bdf8; }

.ts-trainer-outcome {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 10px;
}

.ts-metric-trainer {
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(148, 163, 184, 0.1);
}

.ts-metric-trainer[data-status="present"] {
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.12);
}

.ts-metric-trainer[data-status="late"] {
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.12);
}

.ts-metric-trainer[data-status="partial"] {
    color: #fdba74;
    border-color: rgba(249, 115, 22, 0.4);
    background: rgba(249, 115, 22, 0.12);
}

.ts-metric-trainer[data-status="absent"] {
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.45);
    background: rgba(248, 113, 113, 0.12);
}

.ts-metric-cancelled {
    color: #fca5a5;
    font-weight: 600;
}
/* rusty end new code */

/* rusty begin new code | 2026-09-04 19:20
   Action: The trainer's own row on the attendance register. Present because their
   attendance is recorded like anyone else's, but set apart because it is not a
   trainee's and is not counted as one. */
.att-trainer-row { background: rgba(139, 92, 246, 0.06); }

.att-trainer-tag {
    margin-inline-start: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    color: #c4b5fd;
    background: rgba(139, 92, 246, 0.16);
    border: 1px solid rgba(139, 92, 246, 0.3);
}
/* rusty end new code */