/* /var/www/alessio-site/public/assets/css/account.css */

:root{
  --gt-brand: #0C7489;
  --gt-brand-contrast: #ffffff;

  --gt-btn: #A4193D;
  --gt-btn-contrast: #ffffff;

  --gt-bg: #D7D9CE;
  --gt-card: #ffffff;
  --gt-text: #040404;
  --gt-muted: rgba(4,4,4,.65);
  --gt-border: rgba(19,80,91,.22);
  --gt-shadow: 0 10px 30px rgba(4,4,4,.08);

  --bs-body-bg: var(--gt-bg);
  --bs-body-color: var(--gt-text);
  --bs-secondary-color: rgba(4,4,4,.65);
  --bs-border-color: var(--gt-border);
}

[data-bs-theme="dark"]{
  --gt-brand: #FEE715;
  --gt-brand-contrast: #101820;
  --gt-btn: var(--gt-brand);
  --gt-btn-contrast: var(--gt-brand-contrast);

  --gt-bg: #101820;
  --gt-card: color-mix(in srgb, #121C26 92%, var(--gt-brand));
  --gt-text: #e9eef5;
  --gt-muted: rgba(233,238,245,.70);
  --gt-border: rgba(255,255,255,.12);
  --gt-shadow: 0 10px 30px rgba(0,0,0,.35);

  --bs-body-bg: var(--gt-bg);
  --bs-body-color: var(--gt-text);
  --bs-secondary-color: var(--gt-muted);
  --bs-border-color: var(--gt-border);
}

body{
  background: var(--gt-bg);
  color: var(--gt-text);
}

#gt-navbar-logo{
  filter: drop-shadow(0 0 6px rgba(255,255,255,.35)) drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

.gt-card{
  background: var(--gt-card);
  border: 1px solid var(--gt-border);
  border-radius: 16px;
  box-shadow: var(--gt-shadow);
}

.gt-subcard{
  background: color-mix(in srgb, var(--gt-card) 88%, transparent);
  border: 1px solid var(--gt-border);
  border-radius: 14px;
}

.gt-form-msg{
  font-size: 0.9rem;
  margin-top: 8px;
}

.gt-form-msg.is-error{
  color: #dc3545;
}

.gt-form-msg.is-success{
  color: #198754;
}

.gt-oauth{
  margin-bottom: 0.75rem;
}

.gt-google-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid var(--gt-border);
  color: var(--gt-text);
  background: color-mix(in srgb, var(--gt-card) 86%, #ffffff);
}

.gt-google-btn:hover{
  background: color-mix(in srgb, var(--gt-card) 75%, #ffffff);
}

.gt-google-icon{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #ffffff;
  color: #202124;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.gt-auth-divider{
  margin: 0.6rem 0 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--gt-muted);
  font-size: 0.85rem;
}

.gt-auth-divider::before,
.gt-auth-divider::after{
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gt-border);
}

.gt-country-results{
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--gt-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--gt-card) 90%, transparent);
}

.gt-country-results .list-group-item{
  background: transparent;
  border-color: var(--gt-border);
  color: var(--gt-text);
}

.gt-country-results .list-group-item.active{
  background: color-mix(in srgb, var(--gt-brand) 20%, transparent);
  border-color: color-mix(in srgb, var(--gt-brand) 40%, var(--gt-border));
}

.gt-flag{
  margin-right: 6px;
  font-size: 1.05em;
  line-height: 1;
}

.gt-friends-banner{
  border: 1px dashed color-mix(in srgb, var(--gt-brand) 55%, var(--gt-border));
  border-radius: 12px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--gt-card) 88%, transparent);
}

.gt-friend-list .list-group-item{
  background: transparent;
  border-color: var(--gt-border);
  color: var(--gt-text);
}

.gt-friend-status{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #dc3545;
  box-shadow: 0 0 0 3px color-mix(in srgb, #dc3545 15%, transparent);
}

.gt-friend-status.is-online{
  background: #16a34a;
  box-shadow: 0 0 0 3px color-mix(in srgb, #16a34a 18%, transparent);
}

.gt-friend-meta{
  font-size: 0.85rem;
  color: var(--gt-muted);
}

.gt-admin-command-list{
  display: grid;
  gap: 0.75rem;
}

.gt-admin-command-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.75rem;
  border: 1px dashed var(--gt-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--gt-card) 90%, transparent);
}

.gt-admin-command-row code{
  font-weight: 600;
}

.gt-admin-output{
  margin-top: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--gt-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--gt-card) 85%, transparent);
  color: var(--gt-text);
  white-space: pre-wrap;
  font-size: 0.85rem;
}

/* Nav game modes container */
.gt-nav-modes {
  background: color-mix(in srgb, var(--gt-bg) 85%, #ffffff);
  border-color: color-mix(in srgb, var(--gt-border) 70%, transparent) !important;
}

/* Theme customization */
.gt-theme-details{
  padding: 0;
}

.gt-theme-summary{
  list-style: none;
  cursor: pointer;
  padding: 1rem;
  background: color-mix(in srgb, var(--gt-card) 88%, transparent);
  border-radius: 16px;
  border: 0;
}

.gt-theme-details[open] .gt-theme-summary{
  border-bottom: 1px solid var(--gt-border);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.gt-theme-summary::-webkit-details-marker{
  display: none;
}

.gt-theme-summary::marker{
  content: "";
}

.gt-theme-summary:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--gt-brand) 65%, transparent);
  outline-offset: 2px;
}

.gt-theme-chevron{
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--gt-muted);
  border-bottom: 2px solid var(--gt-muted);
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}

.gt-theme-details[open] .gt-theme-chevron{
  transform: rotate(45deg);
}

.gt-theme-body{
  padding: 1rem;
}

.gt-theme-panel{
  border: 1px solid var(--gt-border);
  border-radius: 14px;
  padding: 12px;
  background: color-mix(in srgb, var(--gt-card) 92%, transparent);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gt-theme-fields{
  display: grid;
  gap: 0.75rem;
}

.gt-theme-input-row{
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gt-theme-text{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.85rem;
}

.gt-theme-preview{
  border: 1px dashed var(--gt-border);
  border-radius: 14px;
  padding: 12px;
  background: color-mix(in srgb, var(--gt-card) 88%, transparent);
}

.gt-theme-preview{
  --gt-preview-brand: var(--gt-brand);
  --gt-preview-brand-contrast: var(--gt-brand-contrast);
  --gt-preview-bg: var(--gt-bg);
  --gt-preview-card: var(--gt-card);
  --gt-preview-text: var(--gt-text);
  --gt-preview-border: var(--gt-border);
}

.gt-theme-preview-surface{
  background: var(--gt-preview-bg);
  color: var(--gt-preview-text);
  border: 1px solid var(--gt-preview-border);
  border-radius: 12px;
  padding: 12px;
}

.gt-theme-preview-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.gt-theme-preview-title{
  font-weight: 600;
}

.gt-theme-preview-chip{
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--gt-preview-brand) 20%, transparent);
  color: var(--gt-preview-text);
  border: 1px solid color-mix(in srgb, var(--gt-preview-brand) 60%, var(--gt-preview-border));
}

.gt-theme-preview-card{
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  background: var(--gt-preview-card);
  border: 1px solid var(--gt-preview-border);
}

.gt-theme-preview-card-title{
  font-weight: 600;
  margin-bottom: 4px;
}

.gt-theme-preview-card-text{
  font-size: 0.85rem;
  opacity: 0.9;
}

.gt-theme-preview-actions{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 10px;
}

.gt-theme-preview-btn{
  border: 1px solid var(--gt-preview-brand);
  background: var(--gt-preview-brand);
  color: var(--gt-preview-brand-contrast);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.gt-theme-preview-outline{
  border: 1px solid var(--gt-preview-brand);
  color: var(--gt-preview-brand);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
}