/*Write your custom css in this file.*/

/* Fix: app-modal file preview did not vertically center its content.
   The app-modal JS injects the loaded preview into `.app-modal-content-area`,
   which fills the full cell height (height:100% + overflow-y:scroll) and is a
   `d-inline-block`, so a lone <img> flows to the top. (The core `.app-modal-content`
   rule also uses the invalid value `vertical-align: central`, which the browser
   ignores.) Center the content-area's children instead. Works for images
   (centered) and iframes/videos (stretch to fill). */
.app-modal-content .app-modal-content-area > img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
}

/* Fix: on hover/focus, `.btn-danger` buttons (e.g. „Анулирай" в invoices/view)
   turned their label white while the background stayed light, so the text
   vanished. The theme-color stylesheet (assets/css/color/*.css) is appended by
   JS AFTER this file and sets only `color:#fff !important` on `.btn-danger:hover`,
   leaving the background unset. Pin BOTH a solid danger background and white text
   here, with higher specificity (`body` prefix) so it wins regardless of the
   dynamic load order. Applies everywhere `.btn-danger` is used. */
body .btn-danger:hover,
body .btn-danger:focus,
body .btn-danger:active,
body .btn-danger.active {
    background-color: #fd1361 !important;
    border-color: #fc0758 !important;
    color: #fff !important;
}
/* CORE PATCH CP-7: constrain the collapsed-sidebar logo.
   assets/css/app.all.css sizes only the expanded slot (`.brand-logo img`
   max-width:250px / max-height:40px, ~line 6568) and leaves `.brand-logo-mini img`
   completely unbounded (measured `max-width: none`), so any wide logo spilled out
   of the 70px rail. app.all.css is vendor code and is overwritten on update, so the
   cap lives here (custom-style.css is loaded LAST in app/Views/includes/head.php).
   Scoped to the same `@media (min-width: 991px)` as the core `.sidebar-toggled`
   rules, so the mini slot stays hidden on smaller screens. */
@media (min-width: 991px) {
    .sidebar-toggled .sidebar-brand.brand-logo-mini {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        width: 70px;
    }
    .brand-logo-mini img {
        max-width: 50px;
        max-height: 45px;
        width: auto;
        height: auto;
        object-fit: contain;
    }
}

/* CORE PATCH CP-12: outline the field itself when validation fails.
   assets/css/app.all.css:4296 styles `.general-form .has-error .form-control`
   with a red TEXT colour only - the border keeps the resting colour, so an
   invalid field reads as "red letters" instead of "this box is wrong". The
   validator already puts `has-error` on the .form-group (assets/js/app.js:612),
   so only the paint is missing. app.all.css is vendor code and is overwritten
   on update, which is why this lives here (custom-style.css loads LAST in
   app/Views/includes/head.php). Also covers select2, which replaces the
   original input with its own container. */
.general-form .has-error .form-control,
.general-form .has-error .select2-container .select2-choice,
.general-form .has-error .select2-container .select2-choices {
    border-color: #ec5855 !important;
}
.general-form .has-error .form-control:focus {
    border-color: #ec5855 !important;
    box-shadow: 0 0 0 2px rgba(236, 88, 85, 0.15) !important;
}