/* ═══════════════════════════════════════════════════
   Printmall Mail — Custom Login Theme
   Matches printmall.com.ua brand style
   ═══════════════════════════════════════════════════ */

/* ── Login page full background ── */
body.task-login {
    background: linear-gradient(135deg, #0F172A 0%, #0f2562 60%, #2563EB 100%) !important;
    min-height: 100vh;
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
}

body.task-login #layout {
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    padding: 20px !important;
}

/* ── Login card ── */
body.task-login #layout-content {
    background: #ffffff !important;
    border-radius: 24px !important;
    padding: 48px 44px 40px !important;
    max-width: 420px !important;
    width: 100% !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 8px 20px rgba(37, 99, 235, 0.2) !important;
    position: relative !important;
}

/* ── Top blue accent bar ── */
body.task-login #layout-content::before {
    content: "";
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, #1d4ed8, #2563EB, #60a5fa);
    border-radius: 24px 24px 0 0;
}

/* ── Logo area ── */
body.task-login #logo {
    display: block !important;
    margin: 0 auto 28px !important;
    max-width: 180px !important;
    height: auto !important;
}

/* ── Section divider after logo ── */
body.task-login #login-form {
    margin-top: 0 !important;
}

/* ── Form labels ── */
body.task-login label,
body.task-login .form-group label {
    color: #374151 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin-bottom: 7px !important;
    display: block !important;
}

/* ── Input fields ── */
body.task-login .form-control,
body.task-login input[type="text"],
body.task-login input[type="password"],
body.task-login input[type="email"] {
    border: 2px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    color: #111827 !important;
    background: #f9fafb !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    outline: none !important;
}

body.task-login .form-control:focus,
body.task-login input[type="text"]:focus,
body.task-login input[type="password"]:focus {
    border-color: #2563EB !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
}

/* ── Input group icons (user/lock) ── */
body.task-login .input-group-text,
body.task-login .input-group-prepend .input-group-text {
    background: #f3f4f6 !important;
    border: 2px solid #e5e7eb !important;
    border-right: none !important;
    border-radius: 12px 0 0 12px !important;
    color: #6b7280 !important;
    padding: 12px 14px !important;
}

body.task-login .input-group .form-control {
    border-radius: 0 12px 12px 0 !important;
}

body.task-login .input-group:focus-within .input-group-text {
    border-color: #2563EB !important;
    background: #eff6ff !important;
    color: #2563EB !important;
}

/* ── Form groups spacing ── */
body.task-login .form-group,
body.task-login .row.proprow {
    margin-bottom: 18px !important;
}

/* ── Submit button ── */
body.task-login .btn-primary,
body.task-login button[type="submit"],
body.task-login input[type="submit"],
body.task-login #rcmloginsubmit {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563EB 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    width: 100% !important;
    color: #ffffff !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 18px rgba(37, 99, 235, 0.45) !important;
    margin-top: 8px !important;
    text-transform: uppercase !important;
}

body.task-login .btn-primary:hover,
body.task-login button[type="submit"]:hover,
body.task-login input[type="submit"]:hover {
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(37, 99, 235, 0.55) !important;
}

body.task-login .btn-primary:active,
body.task-login button[type="submit"]:active {
    transform: translateY(0) !important;
    box-shadow: 0 3px 12px rgba(37, 99, 235, 0.4) !important;
}

/* ── Login footer ── */
body.task-login #login-footer {
    color: #9ca3af !important;
    font-size: 13px !important;
    text-align: center !important;
    margin-top: 22px !important;
    padding-top: 18px !important;
    border-top: 1px solid #f0f0f0 !important;
}

/* ── Error messages ── */
body.task-login .alert,
body.task-login #messagestack div {
    border-radius: 12px !important;
    font-size: 14px !important;
}

/* ── Remove default shadow/bg from layout wrapper ── */
body.task-login #layout > * {
    box-shadow: none !important;
}

/* ── Responsive adjustments ── */
@media (max-width: 480px) {
    body.task-login #layout-content {
        padding: 36px 24px 28px !important;
        border-radius: 16px !important;
        margin: 0 8px !important;
    }
}

/* ── Notification bar position fix ── */
body.task-login #messagestack {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 9999 !important;
}

/* ══ FIX: Override Elastic skin vh-based positional offsets ══
   Elastic sets: .task-login #logo { top: 16vh } and #login-form { top: 20vh }
   These push elements visually BELOW the white card boundary.
   Reset to keep everything inside the compact login card. */

body.task-login #logo {
    position: static !important;
    top: auto !important;
}

body.task-login #login-form {
    position: static !important;
    top: auto !important;
    max-width: none !important;
    width: 100% !important;
}

body.task-login #login-form table {
    width: 100% !important;
}

body.task-login #login-form table td.input {
    width: 100% !important;
}

body.task-login #login-form table td.title {
    white-space: nowrap !important;
    padding-right: 12px !important;
    vertical-align: middle !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #374151 !important;
}

body.task-login .formbuttons,
body.task-login p.formbuttons {
    margin: 8px 0 0 0 !important;
    padding: 0 !important;
}

/* ══ FIX v2: Table row layout fix ══
   Elastic sets table/tbody to display:block which breaks tr layout.
   Override to flex rows so icon cell + input cell sit side-by-side. */

body.task-login #login-form table,
body.task-login #login-form table tbody {
    display: block !important;
    width: 100% !important;
}

body.task-login #login-form table tr {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 14px !important;
}

/* Icon cell — compact, square icon button */
body.task-login #login-form table td.title {
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f3f4f6 !important;
    border: 2px solid #e5e7eb !important;
    border-right: none !important;
    border-radius: 12px 0 0 12px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hide label text, keep only icon */
body.task-login #login-form table td.title label {
    font-size: 0 !important;
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* User icon for first row */
body.task-login #login-form table tr:first-child td.title label {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
}

/* Lock icon for second row */
body.task-login #login-form table tr:last-child td.title label {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") !important;
}

/* Input cell — fills remaining space */
body.task-login #login-form table td.input {
    flex: 1 1 auto !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.task-login #login-form table td.input .form-control,
body.task-login #login-form table td.input input {
    border-radius: 0 12px 12px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Focus state — sync both cells' border */
body.task-login #login-form table tr:focus-within td.title {
    border-color: #2563EB !important;
    background: #eff6ff !important;
}

body.task-login #login-form table tr:focus-within td.title label {
    background-image: none !important;
}

body.task-login #login-form table tr:first-child td.title:has(~ td.input input:focus) label,
body.task-login #login-form table tr:focus-within td.title label {
    filter: brightness(0) saturate(100%) invert(31%) sepia(98%) saturate(1000%) hue-rotate(210deg) brightness(97%) contrast(103%) !important;
}