firka-extension/roleselect/roleselect.css

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}
body {
  color:var(--text-primary);
  background-color:var(--background) !important;
  font-family:"Montserrat",serif !important;
  min-height:100vh;
  font-size:16px;
}
.kreta-container {
  width:100%;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding:clamp(1rem,3vw,2rem);
  max-width:1200px;
  margin:0 auto;
}
.kreta-header {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:2rem;
  margin-bottom:clamp(2rem,5vw,3rem);
}
.school-info {
  display:flex;
  flex-direction:column;
  gap:0.5rem;
}
.logo-text {
  display:flex;
  align-items:center;
  font-size:1.5rem;
  font-weight:600;
  color:var(--text-primary);
  margin:0;
}
.logo {
  width:32px;
  height:32px;
  border-radius:8px;
  margin-right:0.75rem;
}
.school-details {
  color:var(--text-secondary);
  font-size:1.1rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:300px;
  padding-left:2px;
}
.user-profile {
  justify-self:flex-end;
  text-align:right;
}
.user-info {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
}
.user-name,.role-text {
  color:var(--text-primary);
  font-family:Montserrat;
  font-weight:600;
}
.user-name {
  font-size:16px;
}
.role-text {
  font-size:20px;
  text-align:center;
}
.logout-timer,.role-description {
  color:var(--text-secondary);
  font-family:Figtree;
  font-weight:500;
  line-height:130%;
}
.logout-timer {
  font-size:14px;
  text-align:right;
}
.role-description {
  font-size:16px;
  text-align:center;
}
.role-container {
  flex:1;
  display:flex;
  align-items:center;
}
.role-grid {
  display:grid;
  grid-template-columns:1fr minmax(300px,1fr);
  gap:1.5rem;
  width:100%;
}
.side-roles {
  display:grid;
  grid-template-rows:1fr auto;
  gap:1.5rem;
}
.role-card {
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  padding:2rem;
  background:var(--card-card);
  border-radius:1rem;
  cursor:pointer;
  text-align:center;
  border:none;
  box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow);
  transition:all 0.2s ease;
}
.role-card[data-role="Ellenorzo"] {
  height:480px;
  background:var(--card-card);
}
.role-card[data-role="DKT"] {
  height:280px;
  background:var(--card-card);
  box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow);
}
.logout-card {
  height:180px;
  background:var(--card-card);
  box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow);
}
.role-icon {
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  transition:transform 0.2s ease;
  background:var(--accent-15);
}
.role-icon img {
  width:32px;
  height:32px;
  transition:transform 0.2s ease;
}
.role-card[data-role="DKT"] .role-icon {
  background:var(--warning-15);
}
.logout-card .role-icon {
  background:var(--error-15);
}
.role-icon img {
  width:32px;
  height:32px;
  transition:transform 0.2s ease;
}
.role-card:hover {
  transform:translateY(-2px);
}
.role-card:hover .role-icon img {
  transform:scale(1.2);
}
.role-card:active {
  transform:translateY(1px);
  box-shadow:0px 0px var(--shadow-blur) 0px var(--accent-shadow);
}
.role-card[data-role="Ellenorzo"]:hover {
  background-color:var(--accent-15);
}
.role-card[data-role="DKT"]:hover {
  background-color:var(--accent-15);
}
.role-card[data-role="DKT"]:active {
  box-shadow:0px 0px var(--shadow-blur) 0px var(--accent-shadow);
}
.logout-card:hover {
  background-color:var(--error-15);
}
.logout-card:active {
  box-shadow:0px 0px var(--shadow-blur) 0px var(--error-shadow);
}
:root[data-theme="light-green"] .role-card:hover {
  box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow);
}
::-webkit-scrollbar {
  width:8px;
  height:8px;
}
::-webkit-scrollbar-track {
  background:var(--background);
}
::-webkit-scrollbar-thumb {
  background:var(--text-secondary);
  border-radius:4px;
}
::-webkit-scrollbar-thumb:hover {
  background:var(--text-primary);
}
@keyframes fadeIn {
  from {
  opacity:0;
  transform:translateY(-10px);
}
to {
  opacity:1;
  transform:translateY(0);
}
}@media (max-width:1200px) {
  .role-grid {
  grid-template-columns:1fr 280px;
}
}@media (max-width:900px) {
  .role-grid {
  gap:0.5rem;
  grid-template-columns:1fr;
}
.side-roles {
  grid-template-columns:1fr 1fr;
  grid-template-rows:none;
}
.role-card[data-role="Ellenorzo"],.role-card[data-role="DKT"],.logout-card {
  height:300px;
}
}@media (max-width:768px) {
  .kreta-header {
  grid-template-columns:1fr auto;
  gap:1rem;
}
.school-info {
  max-width:60%;
}
.school-details {
  max-width:200px;
  font-size:1rem;
}
.logo-text {
  font-size:1.2rem;
}
.logo {
  width:24px;
  height:24px;
}
}@media (max-width:640px) {
  .kreta-container {
  padding:1rem;
}
.side-roles {
  grid-template-columns:1fr;
  gap:0.75rem;
}
.role-card {
  padding:1rem;
  gap:1rem;
}
.role-card[data-role="Ellenorzo"],.role-card[data-role="DKT"],.logout-card {
  height:200px;
}
.role-icon {
  width:40px;
  height:40px;
}
.role-icon img {
  width:24px;
  height:24px;
}
.role-text {
  font-size:1.5rem;
}
.role-description {
  font-size:1.2rem;
}
.user-name {
  font-size:18px;
}
.logout-timer {
  font-size:16px;
}
}
@media (max-width:480px) {
  .kreta-container {
  padding:0.75rem;
}
.kreta-header {
  margin-bottom:1.5rem;
}
.side-roles {
  gap:0.5rem;
}
.role-card {
  padding:0.75rem;
  gap:0.75rem;
}
.role-card[data-role="Ellenorzo"],.role-card[data-role="DKT"],.logout-card {
  height:160px;
}
.role-text {
  font-size:1.6rem;
  line-height:1.2;
}
.role-description {
  font-size:1.3rem;
  line-height:1.3;
}
.user-name {
  font-size:20px;
}
.logout-timer {
  font-size:18px;
}
.school-details {
  font-size:0.9rem;
}
.logo-text {
  font-size:1.1rem;
}
}