/* Consolidated inline/styles moved from templates to avoid duplication */

/* Alerts */
.alert {
    position: relative !important;
    margin-bottom: 1rem !important;
    padding: 0.75rem 1.25rem !important;
    border: 1px solid transparent !important;
    border-radius: 0.375rem !important;
    transition: all 0.3s ease !important;
    animation: slideDown 0.3s ease-out !important;
}
.alert-success { color: #065f46 !important; background: linear-gradient(135deg,#d1fae5,#a7f3d0) !important; border-left:4px solid #10b981 !important; }
.alert-info { color: #1e40af !important; background: linear-gradient(135deg,#dbeafe,#bfdbfe) !important; border-left:4px solid #3b82f6 !important; }
.alert-warning { color: #92400e !important; background: linear-gradient(135deg,#fef3c7,#fde68a) !important; border-left:4px solid #f59e0b !important; }
.alert-danger { color: #991b1b !important; background: linear-gradient(135deg,#fef2f2,#fecaca) !important; border-left:4px solid #ef4444 !important; }
.alert-progress { position:absolute !important; bottom:0 !important; left:0 !important; height:3px !important; background: rgba(0,0,0,0.3) !important; transition: width linear !important; }
.alert-fade-out { opacity:0 !important; transform: translateY(-10px) !important; }
@keyframes slideDown { from { opacity:0; transform: translateY(-10px);} to { opacity:1; transform: translateY(0);} }
.alert .close, .alert .btn-close { display:none !important; }

/* Emoji helper */
.emoji-icon { display:inline-block; font-style:normal; filter: hue-rotate(45deg) brightness(1.4) saturate(0.9); text-shadow: 0 1px 2px rgba(0,0,0,0.1); transition: all 0.2s ease; }
.emoji-icon:hover { filter: hue-rotate(45deg) brightness(1.6) saturate(1.1); transform: scale(1.05); }

/* Info box used in multiple templates */
.info-box { margin: 10px 0; padding: 10px; background: #f0f9ff; border-left: 4px solid #0ea5e9; border-radius: 4px; }

/* Player navigation / chips */
.player-navigation { background: #f8fafc; border-radius: 8px; padding: 1rem; margin: 1rem 0; border: 1px solid #e5e7eb; }
.player-navigation h4 { margin: 0 0 1rem 0; color: #374151; font-size: 1rem; }
.player-navigation .nav-buttons { display:flex; gap:0.5rem; flex-wrap:wrap; }
.chip { padding: 0.5rem 1rem; color: white; text-decoration: none; border-radius: 6px; font-size: 0.9rem; display:inline-block; }
.chip-success { background: #10b981; }
.chip-primary { background: #3b82f6; }
.chip-purple { background: #8b5cf6; }
.chip-muted { background: #6b7280; }

/* Matrix hero and page */
.matrix-page { background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); min-height: 100vh; padding: 2rem 0; }
.matrix-container { max-width: 1400px; margin: 0 auto; padding: 0 1rem; }
.matrix-hero { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border-radius: 20px; padding: 2rem; text-align:center; color: white; margin-bottom: 2rem; }
.matrix-hero h1 { font-size: 2.5rem; font-weight:700; margin-bottom:0.5rem; }
.matrix-hero p { font-size:1.2rem; opacity:0.9; }
.btn-hero { display:inline-block; padding:0.6rem 1rem; background: rgba(255,255,255,0.12); color: #fff; border-radius:8px; text-decoration:none; }

/* Matrix layout */
.matrix-stats-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap:1.5rem; margin-bottom:2rem; }
.stat-card { background:#fff; padding:1rem; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.06); }
.stat-label { font-size:0.9rem; color:#6b7280; }
.stat-value { font-size:1.6rem; font-weight:700; }

/* Matrix table common */
.matrix-table-container { overflow:auto; }
.matrix-table { width:100%; border-collapse: collapse; }
.matrix-table th, .matrix-table td { padding:0.5rem; border:1px solid #e5e7eb; text-align:center; }
.player-name { text-align:left; font-weight:700; }
.diagonal { background:#f8f9fa; }
.high-interaction { background:#d1fae5; }
.medium-interaction { background:#fef3c7; }
.low-interaction { background:#fff7ed; }
.total-column { font-weight:600; }
.ratio-excellent { color:#065f46; font-weight:700; }
.ratio-good { color:#065f46; }

/* compact full-width button for mobile cards */
.btn-block-compact { width:100%; display:block; white-space:normal; word-wrap:break-word; min-height:44px; line-height:1.2; }

/* Utility */
.no-padding-overflow { padding:0; overflow-x:hidden; }

/* Admin action box used in multiple templates */
.admin-actions-section { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1.5rem; margin: 2rem 0; }
.admin-buttons { display:flex; gap:1rem; flex-wrap:wrap; }
@media (max-width:768px) { .admin-buttons { flex-direction:column; } }

/* small helpers */
.card-no-border { margin:0; border:none; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

/* end */

/* Additional helpers for common inline patterns */
.container-wide { max-width: 1400px; margin: 0 auto; padding: 2rem; }
.container-narrow { max-width: 1200px; margin: 0 auto; padding: 2rem; }
.card-white { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.hero-primary { background: linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%); color: #fff; padding:2rem; border-radius:16px; text-align:center; }
.hero-danger { background: linear-gradient(135deg,#ef4444 0%,#f97316 50%,#eab308 100%); color:#fff; padding:2rem; border-radius:16px; text-align:center; }
.hero-success { background: linear-gradient(135deg,#059669 0%,#047857 100%); color:#fff; padding:2rem; border-radius:16px; text-align:center; }
.panel-muted { background:#f1f5f9; border-radius:30px; padding:3rem; border:4px solid #64748b; }
.panel-warning { background:#fef3c7; border-radius:30px; padding:2rem; border:4px solid #f59e0b; }
.panel-danger { background:#fee2e2; border-radius:20px; padding:2rem; border:4px solid #dc2626; text-align:center; }
.centered { text-align:center; }
.mt-3 { margin-top:1rem; }
.mt-4 { margin-top:2rem; }
.mb-3 { margin-bottom:1rem; }
.flex-center-gap { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; align-items:center; }
.flex-gap { display:flex; gap:1rem; flex-wrap:wrap; }
.display-none { display:none; }
.inline-form { display:inline; }
.inline-flex { display:inline-flex; gap:0.5rem; align-items:center; }
.select-auto-width { width:auto; }
.spinner { display:inline-block; width:50px; height:50px; border:5px solid #f3f4f6; border-top-color:#667eea; border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.panel-card { background:white; padding:3rem; border-radius:20px; box-shadow:0 8px 16px rgba(0,0,0,0.15); }
.btn-gradient-danger { background: linear-gradient(135deg,#ef4444,#dc2626); color:white; border:none; font-weight:600; text-decoration:none; }
.btn-gradient-warning { background: linear-gradient(135deg,#f59e0b,#d97706); color:white; border:none; font-weight:600; }
.btn-gradient-success { background: linear-gradient(135deg,#10b981,#059669); color:white; border:none; font-weight:600; }
.badge-colored { padding:8px; border-radius:4px; font-weight:bold; color:white; display:inline-block; }
.badge-blue { background:#3b82f6; }
.badge-green { background:#10b981; }
.modal-overlay { display:none; }

/* Form controls */
.form-input { width:100%; padding:0.5rem; border:1px solid #d1d5db; border-radius:4px; box-sizing:border-box; }

/* Muted button */
.btn-muted { background:#6b7280; color:white; border:none; border-radius:6px; padding:0.75rem 1.5rem; font-weight:500; text-decoration:none; display:inline-block; text-align:center; }

/* Button gradient classes matching inline patterns */
.btn-danger-gradient { background: linear-gradient(135deg, #ef4444, #dc2626) !important; color: white !important; border: none !important; font-weight: 600 !important; text-decoration: none !important; font-family: inherit !important; }
.btn-success-gradient { background: linear-gradient(135deg, #10b981, #059669) !important; color: white !important; border: none !important; font-weight: 600 !important; font-family: inherit !important; }
.btn-warning-gradient { background: linear-gradient(135deg, #f59e0b, #d97706) !important; color: white !important; border: none !important; font-weight: 600 !important; font-family: inherit !important; }
.btn-primary-gradient { background: linear-gradient(135deg, #3b82f6, #2563eb) !important; color: white !important; border: none !important; font-weight: 600 !important; font-family: inherit !important; }

/* Quick actions container */
.quick-actions { display:flex; gap:0.75rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.quick-actions button { padding:0.5rem 1rem; font-size:0.9rem; white-space:nowrap; }

/* Form label and help text */
.form-label { display: block; margin-bottom: 0.5rem; font-weight: 600; }
.form-help { color: #666; display: block; margin-top: 0.5rem; font-size: 0.9rem; }
.mb-4 { margin-bottom:2rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.my-2 { margin: 0.5rem 0; }
.p-2 { padding: 0.5rem; }
.d-inline { display: inline; }
.d-block { display: block; }
.d-flex { display: flex; }
.text-center { text-align: center; }
.text-left { text-align: left; }

/* Section styling for help guides */
.section-heading { color: #667eea; margin: 1rem 0; font-size: 1.3rem; }
.section-heading.error { color: #dc2626; }
.section-subheading { color: #667eea; margin-top: 1rem; margin-bottom: 0.5rem; font-size: 1.1rem; }

/* Table helpers */
.table-responsive { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.table-header { background: #667eea; color: white; }
.table-cell { padding: 0.75rem; text-align: left; border: 1px solid #ddd; }
.table-row { border: 1px solid #ddd; }
.table-row.alternate { background: #f8f9ff; border: 1px solid #ddd; }