/* IT Serwis 7.2 — ekran logowania wzorowany na przesłanym zrzucie.
   Zmienia tylko stronę login.php. Bootstrap w panelu i motyw ciemny pozostają bez zmian. */
:root { color-scheme: dark; }
* { box-sizing: border-box; border-radius: 0 !important; }
html { min-height: 100%; }
body.it-login-page {
    min-height: 100vh; margin: 0; color: #f2f7ff;
    font-family: 'IT Roboto', Roboto, 'Segoe UI', Arial, sans-serif;
    background-color: #081624;
    background-image: linear-gradient(90deg,rgba(4,12,24,.40),rgba(3,14,28,.25) 48%,rgba(2,9,19,.30)),
                      url('login-background-v72.jpg');
    background-position: center center; background-repeat: no-repeat;
    background-size: cover; background-attachment: fixed;
}
.login-frame {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 30px 20px;
}
.login-card {
    width: min(100%, 634px);
    background: linear-gradient(180deg,rgba(4,19,35,.96),rgba(5,20,36,.955));
    border: 1px solid rgba(69,116,160,.58);
    border-top: 7px solid #078dea;
    box-shadow: 0 25px 90px rgba(0,0,0,.44);
    padding: 30px 52px 55px;
}
.login-brand { display:flex; align-items:center; justify-content:center; height:192px; margin:0 auto 10px; }
.login-logo {
    width: 335px; height: 300px; max-width: 100%; object-fit: contain;
    mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(ellipse 49% 49% at center, black 64%, transparent 100%);
    mask-image: radial-gradient(ellipse 49% 49% at center, black 64%, transparent 100%);
    filter: drop-shadow(0 0 8px rgba(16,184,255,.18));
}
.login-card h1 { margin: 0; text-align: center; font-size: clamp(38px,4vw,58px); font-weight: 800; letter-spacing:-.035em; line-height:1.1; color:#fbfdff; }
.login-subtitle { margin: 8px 0 0; text-align: center; color:#b7c7da; font-size: clamp(15px,2vw,23px); line-height:1.4; font-weight:400; }
.login-rule { height:1px; background:#52718e; opacity:.83; margin:29px 0 32px; }
.login-form { display:flex; flex-direction:column; gap:18px; }
.login-input-row {
    min-height:60px; display:flex; align-items:stretch;
    border:1px solid #4c6a89; background:rgba(23,44,66,.32);
    color:#aebed1; width:100%; margin:0;
}
.login-input-row:focus-within { outline: 2px solid #16b1fa; outline-offset:1px; border-color:#16b1fa; }
.login-icon {
    width:70px; flex:0 0 70px; border-right:1px solid #47627f;
    display:flex; align-items:center; justify-content:center; color:#abc0d4;
}
.login-icon svg { height:29px; width:29px; }
.login-input-row input {
    background:transparent; border:0; min-width:0; height:58px; width:100%;
    padding: 10px 19px; outline:none; font:inherit; font-size:21px; line-height:1.35;
    color:#fff; box-shadow:none; appearance:none; -webkit-appearance:none;
}
.login-input-row input::placeholder { color:#aabbd0; opacity:1; }
.login-input-row input:-webkit-autofill { -webkit-text-fill-color:#fff; -webkit-box-shadow:0 0 0 1000px #0d243a inset; transition: background-color 9999s ease-in-out 0s; }
.login-eye { width:60px; flex:0 0 60px; border:0; background:transparent; color:#abc0d4; cursor:pointer; display:flex; justify-content:center; align-items:center; }
.login-eye svg { width:28px; height:28px; }
.login-eye:hover,.login-eye:focus-visible { color:#25caff; background:rgba(38,139,215,.08); }
.login-row { display:flex; justify-content:space-between; align-items:center; gap:13px; margin:8px 0 4px; }
.login-remember { display:flex; align-items:center; gap:13px; white-space:nowrap; cursor:pointer; color:#f2f6ff; font-size:19px; }
.login-remember input { flex:0 0 28px; width:28px; height:28px; appearance:none; border:2px solid #98aec4; background:transparent; margin:0; display:grid; place-items:center; cursor:pointer; }
.login-remember input:checked { background:#0586e8; border-color:#0586e8; }
.login-remember input:checked::after { content:'✓'; color:white; font-size:19px; line-height:1; }
.login-forgot { color:#20b9ff; text-decoration:underline; text-underline-offset:3px; font-size:18px; white-space:nowrap; }
.login-forgot:hover { color:#7cdbff; }
.login-submit { margin-top:9px; min-height:67px; width:100%; border:1px solid #0089ff; background:#087ff0; color:#fff; font:inherit; font-size:23px; font-weight:800; cursor:pointer; }
.login-submit:hover,.login-submit:focus-visible { background:#086dcb; border-color:#34b4ff; }
.login-rule-bottom { margin:30px 0 22px; }
.login-footer { text-align:center; font-size:17px; color:#a4b7cc; margin:0; }
.login-footer strong { color:#f4f7fc; font-weight:700; }
.login-error,.login-message { padding:11px 13px; margin:-11px 0 16px; font-size:14px; line-height:1.45; }
.login-error { color:#ffe2e5; background:#552633; border-left:3px solid #ff6a80; }
.login-message { color:#ccf7d9; background:#154532; border-left:3px solid #35c880; }
@media(max-height:900px) and (min-width:700px) {
    .login-card { padding-top:25px; padding-bottom:27px; }
    .login-brand { height:168px; margin-bottom:6px; }
    .login-logo { height:180px; width:245px; }
    .login-rule { margin:23px 0 25px; }
    .login-rule-bottom { margin:24px 0 18px; }
}
@media(max-width:700px) {
    body.it-login-page { background-attachment:scroll; background-position:center; }
    .login-frame { padding:20px 12px; }
    .login-card { padding:23px 22px 25px; border-top-width:5px; }
    .login-brand { height:125px; margin-bottom:8px; }
    .login-logo { width:200px; height:145px; }
    .login-subtitle { margin-top:7px; }
    .login-rule { margin:22px 0; }
    .login-input-row { min-height:54px; }
    .login-input-row input { height:53px; padding:8px 13px; font-size:16px; }
    .login-icon { width:51px; flex-basis:51px; }
    .login-icon svg { width:24px; height:24px; }
    .login-eye { width:46px; flex-basis:46px; }
    .login-row { gap:12px; flex-wrap:wrap; margin:4px 0 0; }
    .login-remember { font-size:14px; gap:8px; }
    .login-remember input { width:22px; height:22px; flex-basis:22px; }
    .login-forgot { font-size:14px; }
    .login-submit { min-height:55px; font-size:19px; }
    .login-footer { font-size:13px; }
}
@media(max-width:370px) {
    .login-row { flex-direction:column; align-items:flex-start; }
    .login-forgot { align-self:flex-end; }
}
@media(prefers-reduced-motion:reduce) { *,*:before,*:after {scroll-behavior:auto!important;transition:none!important;} }