/* V32 role identity / PWA themes */
:root{--role-color:#145C3A;--role-dark:#0E422A;--role-surface:#E8F4EC;--role-surface-2:#F4FAF6}
body[data-role="dayibasi"]{--role-color:#145C3A;--role-dark:#0E422A;--role-surface:#E8F4EC;--role-surface-2:#F4FAF6}
body[data-role="saha_sorumlusu"]{--role-color:#1769AA;--role-dark:#0E4F85;--role-surface:#E7F1FA;--role-surface-2:#F4F9FD}
body[data-role="cavus"]{--role-color:#7C3AED;--role-dark:#5B24BE;--role-surface:#EFE8FF;--role-surface-2:#FAF7FF}
body[data-role="isci"]{--role-color:#D97706;--role-dark:#A95300;--role-surface:#FFF0D9;--role-surface-2:#FFF9F0}
body[data-role="isveren"]{--role-color:#B42318;--role-dark:#861A12;--role-surface:#FDEAE8;--role-surface-2:#FFF7F6}
body[data-role="platform_admin"]{--role-color:#243B53;--role-dark:#102A43;--role-surface:#E8EEF5;--role-surface-2:#F5F8FC}

body[data-role]{--brand:var(--role-color);--brand2:var(--role-dark)}
body[data-role] .sidebar{background:var(--role-dark)}
body[data-role] .sidebar nav a.active,
body[data-role] .sidebar nav a:hover{background:color-mix(in srgb,var(--role-color) 80%,white 20%)}
body[data-role] .brandmark,
body[data-role] .btn.primary,
body[data-role] .tabs a.active{background:var(--role-color)}
body[data-role] .pwa-mini{background:var(--role-surface);color:var(--role-dark)}
body[data-role] .mobilebar{border-bottom:3px solid var(--role-color)}
body[data-role] .main{background:linear-gradient(180deg,var(--role-surface-2) 0,#f5f7f9 220px)}
body[data-role] .pagehead h1{color:var(--role-dark)}
body[data-role] .badge{background:var(--role-surface);color:var(--role-dark)}

.role-login{background:radial-gradient(circle at 18% 0%,#fff 0,var(--role-surface-2) 50%,var(--role-surface) 100%)}
.role-auth-card{border-top:6px solid var(--role-color)}
.role-login-icon{background:transparent!important;width:82px;height:82px;border-radius:24px;overflow:hidden;box-shadow:0 10px 28px color-mix(in srgb,var(--role-color) 25%,transparent)}
.role-login-icon img{width:100%;height:100%;display:block}
.role-app-name{font-size:13px;font-weight:900;color:var(--role-color)}
.role-auth-card .eyebrow{color:var(--role-color)}
.role-auth-card h1{color:var(--role-dark)}
.role-submit{background:var(--role-color)!important}
.role-auth-links a{color:var(--role-dark);font-weight:700}

.pwa-install-hint{display:flex;gap:12px;align-items:center;justify-content:space-between;background:var(--role-surface);border:1px solid color-mix(in srgb,var(--role-color) 24%,white);padding:12px 14px;border-radius:14px;margin:14px 0 18px}
.pwa-install-hint[hidden]{display:none!important}
.pwa-install-hint b,.pwa-install-hint small{display:block}
.pwa-install-hint small{color:#59645e;margin-top:3px;font-size:11px}

.role-entry-grid .role-entry-card{position:relative;overflow:hidden;border-top:5px solid var(--role-color);background:linear-gradient(150deg,#fff 45%,var(--role-surface))}
.role-entry-grid .role-entry-card:after{content:"";position:absolute;width:120px;height:120px;right:-50px;top:-40px;border-radius:50%;background:var(--role-surface);z-index:0}
.role-entry-grid .role-entry-card>*{position:relative;z-index:1}
.role-entry-icon{width:54px;height:54px;border-radius:15px;display:block;margin-bottom:12px;box-shadow:0 8px 22px color-mix(in srgb,var(--role-color) 20%,transparent)}
.role-entry-app{display:block!important;color:var(--role-color)!important;font-size:11px!important;font-weight:900;letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px}
.role-entry-card:hover{border-color:var(--role-color)!important}
.role-landing .topbar{margin-bottom:52px}

@media(max-width:620px){
 .pwa-install-hint{align-items:stretch;flex-direction:column}
 .pwa-install-hint .btn{width:100%}
 .role-auth-card{border-top-width:5px}
}

/* V32.1: PWA install CTA should always be visible on role login pages.
   If beforeinstallprompt is unavailable (iOS etc.), button shows manual guidance. */
.role-login .pwa-install-hint{display:flex!important}
.role-login .pwa-install-hint[hidden]{display:flex!important}
.role-login.is-pwa .pwa-install-hint,
html.is-pwa .role-login .pwa-install-hint{display:none!important}
.role-login .pwa-install-hint .btn{white-space:nowrap}
.role-login .pwa-install-hint small{line-height:1.4}


/* V32.2 PWA installation feedback */
.pwa-install-copy{flex:1;min-width:0}
.pwa-install-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:190px}
.pwa-install-button:disabled{opacity:.72;cursor:wait}
.pwa-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.42);border-top-color:#fff;border-radius:50%;animation:pwaSpin .72s linear infinite;flex:none}
.pwa-spinner[hidden]{display:none!important}
@keyframes pwaSpin{to{transform:rotate(360deg)}}

.pwa-progress{height:5px;background:color-mix(in srgb,var(--role-color) 15%,white);border-radius:999px;overflow:hidden;margin-top:9px;position:relative}
.pwa-progress[hidden]{display:none!important}
.pwa-progress span{display:block;width:38%;height:100%;border-radius:999px;background:var(--role-color);animation:pwaProgress 1.15s ease-in-out infinite}
@keyframes pwaProgress{
 0%{transform:translateX(-110%)}
 50%{transform:translateX(125%)}
 100%{transform:translateX(310%)}
}

.pwa-install-hint[data-pwa-state="cancelled"]{background:#fff7ed;border-color:#fed7aa}
.pwa-install-hint[data-pwa-state="installed"]{background:#ecfdf3;border-color:#bbf7d0}
.pwa-install-hint[data-pwa-state="installed"] .pwa-install-button{background:#15803d!important}

html.is-pwa [data-pwa-gate],
[data-pwa-gate][hidden]{display:none!important}

@media(max-width:620px){
 .pwa-install-button{width:100%;min-width:0}
}