/* ==========================================================================
   Tokio Studio — tema per il file share
   Palette presa da tokiostudio-www/public/css/style.css:
     --accent #FFEA00 · --accent-dark #D4C300 · --bg #050505
     --bg-elevated #0C0C0C · --text #F5F5F5 · Montserrat / Sora
   L'interfaccia di SFTPGo e Bootstrap 5 (tema "Keen"): si comanda tutta
   ridefinendo le variabili --bs-*, senza toccare un solo selettore del tema.
   ========================================================================== */

@import url('fonts.css');

:root,
[data-bs-theme="dark"],
[data-bs-theme="light"] {
  --tk-accent: #FFEA00;
  --tk-accent-dark: #D4C300;
  --tk-accent-glow: rgba(255, 234, 0, 0.35);
  --tk-accent-subtle: rgba(255, 234, 0, 0.10);
  --tk-accent-border: rgba(255, 234, 0, 0.20);
  --tk-bg: #050505;
  --tk-bg-elevated: #0C0C0C;
  --tk-surface: #111114;
  --tk-text: #F5F5F5;
  --tk-text-2: rgba(255, 255, 255, 0.55);
  --tk-border: rgba(255, 255, 255, 0.08);
  --tk-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Tipografia ---------------------------------------------------------- */
:root {
  --bs-font-sans-serif: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  /* Il sito usa 16/24/32px: qui si scala un filo per non gonfiare una UI densa. */
  --bs-border-radius-sm: 8px;
  --bs-border-radius: 12px;
  --bs-border-radius-lg: 16px;
  --bs-border-radius-xl: 20px;
}
h1, h2, h3, h4, h5, h6,
.fw-bold, .fw-bolder, .page-title, .card-title, .menu-heading {
  font-family: 'Montserrat', var(--bs-font-sans-serif);
  letter-spacing: -0.01em;
}

/* --- Il giallo come colore primario --------------------------------------
   ATTENZIONE: #FFEA00 ha luminanza altissima. Il testo SOPRA il giallo deve
   essere quasi nero (contrasto ~18:1); bianco su giallo sarebbe ~1.2:1, cioe
   illeggibile. Per questo --bs-primary-inverse diventa scuro.               */
:root,
[data-bs-theme="dark"],
[data-bs-theme="light"] {
  --bs-primary: var(--tk-accent);
  --bs-primary-rgb: 255, 234, 0;
  --bs-primary-active: var(--tk-accent-dark);
  --bs-primary-inverse: #050505;
  --bs-primary-light: var(--tk-accent-subtle);
  --bs-primary-clarity: var(--tk-accent-glow);
  --bs-primary-bg-subtle: var(--tk-accent-subtle);
  --bs-primary-border-subtle: var(--tk-accent-border);
  --bs-primary-text-emphasis: var(--tk-accent);

  --bs-link-color: var(--tk-accent);
  --bs-link-color-rgb: 255, 234, 0;
  --bs-link-hover-color: var(--tk-accent-dark);
  --bs-link-hover-color-rgb: 212, 195, 0;
}

/* --- Superfici: nero del brand, non il grigio-blu del tema --------------- */
[data-bs-theme="dark"] {
  --bs-body-bg: var(--tk-bg);
  --bs-body-bg-rgb: 5, 5, 5;
  --bs-app-bg-color: var(--tk-bg);
  --bs-app-header-base-bg-color: var(--tk-bg-elevated);
  --bs-app-sidebar-base-bg-color: var(--tk-bg-elevated);
  --bs-app-footer-bg-color: var(--tk-bg-elevated);
  --bs-card-bg: var(--tk-bg-elevated);
  --bs-modal-bg: var(--tk-bg-elevated);
  --bs-dropdown-bg: var(--tk-bg-elevated);
  --bs-body-color: var(--tk-text);
  --bs-body-color-rgb: 245, 245, 245;
  --bs-border-color: var(--tk-border);
  --bs-gray-100: var(--tk-surface);
  --bs-gray-200: #1A1A1F;
  --bs-light: var(--tk-surface);
}

/* Il tema chiaro resta chiaro, ma con l'accento giusto e il nero del brand
   al posto del blu-grigio: chi apre la UI di giorno vede comunque Tokio. */
[data-bs-theme="light"] {
  --bs-body-color: #050505;
  --bs-border-color: rgba(5, 5, 5, 0.10);
}

/* --- Bottone primario ---------------------------------------------------- */
.btn.btn-primary {
  background-color: var(--tk-accent);
  border-color: var(--tk-accent);
  color: #050505;
  font-weight: 600;
  transition: transform .25s var(--tk-ease), box-shadow .25s var(--tk-ease),
              background-color .2s var(--tk-ease);
}
.btn.btn-primary:hover:not(.btn-active),
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:active:not(.btn-active) {
  background-color: var(--tk-accent-dark);
  border-color: var(--tk-accent-dark);
  color: #050505;
  box-shadow: 0 6px 24px -6px var(--tk-accent-glow);
}
.btn.btn-light-primary { background-color: var(--tk-accent-subtle); color: var(--tk-accent); }
.btn.btn-light-primary:hover { background-color: var(--tk-accent); color: #050505; }
.btn-check:checked + .btn.btn-primary { background-color: var(--tk-accent-dark); color: #050505; }

/* --- Stati e comandi ----------------------------------------------------- */
.form-control:focus, .form-select:focus {
  border-color: var(--tk-accent-border);
  box-shadow: 0 0 0 3px var(--tk-accent-subtle);
}
.form-check-input:checked { background-color: var(--tk-accent); border-color: var(--tk-accent); }
.form-check-input:focus { border-color: var(--tk-accent-border); box-shadow: 0 0 0 3px var(--tk-accent-subtle); }
.text-primary { color: var(--tk-accent) !important; }
.bg-primary { background-color: var(--tk-accent) !important; color: #050505 !important; }
.badge.badge-primary, .badge.badge-light-primary {
  background-color: var(--tk-accent-subtle); color: var(--tk-accent);
}
.spinner-border, .spinner-grow { color: var(--tk-accent); }
.progress-bar { background-color: var(--tk-accent); }

/* Voce di menu attiva: barra gialla a sinistra, come l'accento del sito. */
.menu-item .menu-link.active {
  background-color: var(--tk-accent-subtle);
  box-shadow: inset 3px 0 0 0 var(--tk-accent);
}
.menu-item .menu-link.active .menu-title,
.menu-item .menu-link.active .menu-icon i { color: var(--tk-accent) !important; }

/* --- Pagina di login ----------------------------------------------------- */
/* Un alone giallo appena percettibile dietro la card: e la firma visiva del
   sito, portata qui senza appesantire. */
body:has(.d-flex.flex-center) {
  background:
    radial-gradient(1100px 520px at 50% -8%, var(--tk-accent-subtle), transparent 62%),
    var(--tk-bg);
}
.card { border: 1px solid var(--tk-border); }
.card:has(#sign_in_form) { box-shadow: 0 24px 80px -32px rgba(0, 0, 0, .9); }
#sign_in_form .btn-primary { width: 100%; }

/* Il wordmark e 480x69, molto largo. Il template gli applica h-80px/h-md-90px/
   h-lg-100px, cioe un'ALTEZZA fissa: a 100px di altezza diventa largo 695px,
   deborda dalla sua colonna (col-5) e finisce sopra il titolo. Si vincola alla
   larghezza disponibile e si lascia decidere l'altezza alle proporzioni. */
img[alt="Logo"] {
  height: auto !important;
  width: auto;
  max-width: 100%;
  max-height: 52px;
}
#sign_in_form .row { row-gap: .5rem; }
#sign_in_form h1 { font-family: 'Montserrat', var(--bs-font-sans-serif); font-weight: 800; }
/* Nella barra laterale serve piu compatto. */
.app-sidebar-logo img[alt="Logo"] { max-height: 30px; }

/* --- Tabelle e liste file ------------------------------------------------ */
.table tbody tr:hover > * { background-color: var(--tk-accent-subtle); }
.table > :not(caption) > * > * { border-bottom-color: var(--tk-border); }
::selection { background: var(--tk-accent); color: #050505; }

/* --- Barra di scorrimento ------------------------------------------------ */
[data-bs-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-bs-theme="dark"] ::-webkit-scrollbar-track { background: var(--tk-bg); }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #26272F; border-radius: 8px; border: 2px solid var(--tk-bg);
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--tk-accent-dark); }