/**
 * Report Modal System - Custom CSS
 * Generyczne style (modal, btn, alert, form-control, loading, utils)
 * zostały przeniesione do mainapp/static/mainapp/css/base.css
 */

/* ========================================
   Modal Box — rozmiary specyficzne dla reports
   ======================================== */

.modal-box.w-11\/12 { width: 91.666667%; }
.modal-box.max-w-2xl { max-width: 672px; }
.modal-box.max-w-md  { max-width: 448px; }

/* Modal header */
.modal-box h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 24px;
    color: var(--text-primary, #1f2937);
    display: flex;
    align-items: center;
    gap: 12px;
}
@media (min-width: 640px) {
    .modal-box h3 { font-size: 30px; }
}
.modal-box h3 i.text-warning { color: #f59e0b; }
.modal-box h3 i.text-success  { color: var(--secondary, #10b981); }

/* Close button (X) in top-right */
.modal-box form[method="dialog"] .btn {
    position: absolute;
    top: 8px; right: 8px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #6b7280;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}
.modal-box form[method="dialog"] .btn:hover {
    background: rgba(0,0,0,.05);
    color: #1f2937;
}

/* ========================================
   Info Banner (niebieski pasek)
   ======================================== */

.bg-info\/10 {
    background: rgba(59,130,246,.1) !important;
    border-left: 4px solid #3b82f6;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
}
.bg-info\/10 p { margin: 0; line-height: 1.6; color: #1f2937; }
.bg-info\/10 p:first-child { font-weight: 600; font-size: 16px; margin-bottom: 8px; color: #1f2937; }
.bg-info\/10 p:last-child  { font-size: 14px; opacity: .8; }
@media (min-width: 640px) {
    .bg-info\/10 p:first-child { font-size: 18px; }
    .bg-info\/10 p:last-child  { font-size: 16px; }
}

/* ========================================
   Form — report-specific overrides
   ======================================== */

/* Force light bg regardless of theme */
.modal-box { background: #ffffff !important; color: #1f2937 !important; }

.modal-box form#reportForm {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-control label { font-size: 16px; }
@media (min-width: 640px) {
    .form-control label { font-size: 18px; }
}
.form-control label .text-red-500 { color: #ef4444; }

.form-control select {
    background: #ffffff !important;
    color: #1f2937 !important;
    padding: 12px 16px;
    font-size: 16px;
    cursor: pointer;
}
.form-control select:focus {
    border-color: var(--primary, #764ba2);
    box-shadow: 0 0 0 3px rgba(118,75,162,.1);
}
.form-control select:hover { border-color: #9ca3af; }

.form-control textarea,
.modal-box textarea {
    background: #ffffff !important;
    color: #1f2937 !important;
    padding: 12px 16px;
    font-size: 16px;
    line-height: 1.6;
    resize: none;
    font-family: inherit;
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}
.form-control textarea:focus,
.modal-box textarea:focus {
    outline: none;
    border-color: var(--primary, #764ba2);
    box-shadow: 0 0 0 3px rgba(118,75,162,.1);
}
.form-control textarea:hover,
.modal-box textarea:hover { border-color: #9ca3af; }

textarea.h-40 { height: 160px; }
@media (min-width: 640px) { textarea.h-48 { height: 192px; } }

/* Character counter */
.form-control + div,
.modal-box textarea + div {
    display: flex; flex-direction: column;
    gap: 4px; margin-top: 4px; padding: 0 4px;
}
.form-control + div span,
.modal-box textarea + div span { font-size: 12px; color: #6b7280; }
.form-control + div span.font-mono,
.modal-box textarea + div span.font-mono { font-family: 'Courier New', monospace; }

/* ========================================
   Success screen
   ======================================== */

.modal-box.text-center { text-align: center; }
.modal-box .py-8 { padding-top: 32px; padding-bottom: 32px; }
.modal-box .text-6xl { font-size: 60px; line-height: 1; }
.modal-box .text-6xl i { font-size: 60px; }
.modal-box .mb-4 { margin-bottom: 16px; }
.modal-box p.text-base-content\/80 { color: rgba(31,41,55,.8); font-size: 16px; line-height: 1.6; }

/* ========================================
   Utility overrides (DaisyUI compat)
   ======================================== */

.absolute   { position: absolute; }
.right-2    { right: 8px; }
.top-2      { top: 8px; }
.block      { display: block; }
.flex       { display: flex; }
.flex-col   { flex-direction: column; }
.items-center { align-items: center; }
.gap-2      { gap: 8px; }
.gap-3      { gap: 12px; }
.mb-2       { margin-bottom: 8px; }
.mb-6       { margin-bottom: 24px; }
.mt-6       { margin-top: 24px; }
.space-y-6 > * + * { margin-top: 24px; }
.w-full     { width: 100%; }
.font-bold  { font-weight: 700; }
.font-semibold { font-weight: 600; }
.text-error { color: #ef4444; }

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 639px) {
    .modal-box h3 { font-size: 20px; margin-bottom: 20px; gap: 8px; }
    .bg-info\/10  { padding: 12px; }
    .form-control select,
    .form-control textarea { font-size: 16px; }
}