/* OverDrive: identidade do Grupo SGX / Overload (a do Painel de aceites) por cima do File Browser.
   Injetado pela OpenResty em drive.gruposgx.com.br. Sempre claro: o overdrive.js tira a classe "dark". */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Montserrat:wght@300;400;500;600;700&display=swap");

:root, :root.dark {
  --od-sage: #dde7d9;
  --od-shell: #cfdccb;
  --od-panel: #e7efe4;
  --od-forest: #173026;
  --od-forest-soft: rgba(23, 48, 38, .78);
  --od-muted: rgba(23, 48, 38, .58);
  --od-faint: rgba(23, 48, 38, .34);
  --od-rule: rgba(23, 48, 38, .14);
  --od-rule-strong: rgba(23, 48, 38, .32);
  --od-white: rgba(255, 255, 255, .62);
  --od-display: "Playfair Display", Georgia, serif;
  --od-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* variáveis do próprio File Browser */
  --blue: #173026;
  --dark-blue: #0f231b;
  --moon-grey: #dde7d9;
  --icon-blue: #2e4d3d;
  --item-selected: #173026;
  --action: #173026;
  --background: #cfdccb;
  --surfacePrimary: #e7efe4;
  --surfaceSecondary: #dde7d9;
  --divider: rgba(23, 48, 38, .14);
  --iconPrimary: #2e4d3d;
  --iconSecondary: #e7efe4;
  --iconTertiary: rgba(23, 48, 38, .34);
  --textPrimary: rgba(23, 48, 38, .58);
  --textSecondary: #173026;
  --hover: rgba(23, 48, 38, .06);
  --borderPrimary: rgba(23, 48, 38, .14);
  --borderSecondary: rgba(23, 48, 38, .32);
  --input-red: #f3d9d5;
  --input-green: #d5e8d6;
  color-scheme: light;
}

html, body { background: var(--od-shell) !important; color: var(--od-forest); }
body, input, button, select, textarea, .button { font-family: var(--od-body) !important; -webkit-font-smoothing: antialiased; }

/* ---------- topo (o do visualizador tem regras próprias lá embaixo) ---------- */
header {
  background: var(--od-shell) !important;
  border-bottom: 1px solid var(--od-rule) !important;
  box-shadow: none !important;
}
header > img { display: none !important; }
.od-marca { display: flex; align-items: center; gap: 11px; margin: 0 22px 0 6px; white-space: nowrap; text-decoration: none; color: var(--od-forest); }
.od-marca svg { width: 22px; height: 22px; flex: none; }
.od-marca b { font-family: var(--od-display); font-weight: 500; font-size: 18px; letter-spacing: .005em; }
.od-marca span { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--od-muted); border-left: 1px solid var(--od-rule); padding-left: 11px; font-weight: 600; }
header .action { border-radius: 3px !important; }
header .action i { color: var(--od-forest) !important; }
header .action:hover { background: var(--od-sage) !important; }

/* busca: caixa como a "Buscar cliente ou e-mail" do painel */
#search #input {
  background: var(--od-panel) !important;
  border: 1px solid var(--od-rule-strong) !important;
  border-radius: 3px !important;
  height: 38px;
  padding: 0 12px !important;
}
#search #input i { color: var(--od-muted) !important; font-size: 19px !important; }
#search #input input { color: var(--od-forest) !important; font-size: 13px !important; background: transparent !important; }
#search #input input::placeholder { color: var(--od-muted) !important; opacity: 1; }
#search.active #input { border-color: var(--od-forest) !important; }
#search #result { background: var(--od-panel) !important; color: var(--od-forest) !important; border: 1px solid var(--od-rule); border-top: 0; }
#search .boxes { background: transparent !important; }
#search .boxes h3 { font-size: 9px !important; letter-spacing: .2em; text-transform: uppercase; color: var(--od-muted) !important; }
#search .boxes > div > div { background: var(--od-sage) !important; border: 1px solid var(--od-rule); border-radius: 4px; }
#search .boxes i, #search .boxes p { color: var(--od-forest) !important; }

/* ---------- menu lateral ---------- */
nav { background: transparent !important; }
nav .action {
  border-radius: 3px !important;
  margin: 1px 10px 1px 8px;
  width: calc(100% - 18px) !important;
  padding: .72em 1em !important;
  color: var(--od-forest) !important;
  font-size: 12.5px !important;
  font-weight: 500;
}
nav .action i { color: var(--od-forest-soft) !important; font-size: 20px !important; }
nav .action:hover { background: var(--od-sage) !important; }
nav > div { border-top: 1px solid var(--od-rule) !important; }
nav p.credits { display: none !important; }
nav .credits { font-size: 10.5px !important; color: var(--od-muted) !important; }
nav .vue-simple-progress { background: var(--od-rule) !important; border-radius: 2px; }
nav .vue-simple-progress-bar { background: var(--od-forest) !important; }

/* ---------- caminho (título da pasta) ---------- */
.breadcrumbs { border-bottom: 0 !important; padding: 10px 0 6px !important; background: transparent !important; }
.breadcrumbs a, .breadcrumbs span { color: var(--od-forest) !important; font-family: var(--od-display); font-size: 22px; font-weight: 500; padding: 2px 6px !important; border-radius: 3px; }
.breadcrumbs a:hover { background: var(--od-sage) !important; }
.breadcrumbs i { color: var(--od-forest-soft) !important; }

/* ---------- lista ---------- */
#listing h2 {
  font-size: 9px !important; letter-spacing: .22em; text-transform: uppercase;
  color: var(--od-muted) !important; font-weight: 600; margin: 18px 0 8px 2px !important;
}
#listing.list {
  background: var(--od-panel);
  border: 1px solid var(--od-rule);
  border-radius: 4px;
  overflow: hidden;
}
#listing.list .item {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--od-rule) !important;
  margin: 0 !important;
}
#listing.list .item:hover { background: rgba(23, 48, 38, .04) !important; }
#listing.list .item.header { background: rgba(23, 48, 38, .03) !important; }
#listing.list .item.header p, #listing.list .item.header span {
  font-size: 9px !important; letter-spacing: .16em; text-transform: uppercase;
  color: var(--od-muted) !important; font-weight: 700 !important;
}
#listing.list .item.header i { color: var(--od-muted) !important; font-size: 15px !important; }
#listing.list h2 { padding: 0 14px; }
#listing .item .name { color: var(--od-forest) !important; font-weight: 500; font-size: 13.5px; }
#listing .item .size, #listing .item .modified { color: var(--od-muted) !important; font-size: 12px; }
#listing .item i { color: var(--od-forest-soft) !important; }
#listing .item[data-dir="true"] i { color: #2e4d3d !important; }

/* grade e galeria */
#listing.mosaic .item, #listing.gallery .item {
  background: var(--od-panel) !important;
  border: 1px solid var(--od-rule) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
#listing.mosaic .item:hover, #listing.gallery .item:hover { border-color: var(--od-rule-strong) !important; background: #edf3ea !important; }
#listing.gallery .item[data-type="image"] .name { color: #fff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }

/* seleção */
#listing .item[aria-selected="true"] {
  background: var(--od-sage) !important;
  box-shadow: inset 3px 0 0 var(--od-forest);
}
#listing .item[aria-selected="true"] .name { color: var(--od-forest) !important; font-weight: 600; }
#listing .item[aria-selected="true"] .size, #listing .item[aria-selected="true"] .modified { color: var(--od-forest-soft) !important; }
#listing .item[aria-selected="true"] i { color: var(--od-forest) !important; }

/* ---------- janelas, botões, campos ---------- */
.card {
  background: var(--od-panel) !important;
  border: 1px solid var(--od-rule) !important;
  border-radius: 6px !important;
  box-shadow: 0 18px 48px rgba(23, 48, 38, .18) !important;
  color: var(--od-forest);
}
.card .card-title h2 { font-family: var(--od-display); font-weight: 500; color: var(--od-forest); }
.button {
  border-radius: 3px !important; font-size: 11px !important; letter-spacing: .06em; font-weight: 600 !important;
  text-transform: none !important; padding: 9px 16px !important;
}
.button:not(.button--flat) { background: var(--od-forest) !important; color: var(--od-sage) !important; border: 1px solid var(--od-forest) !important; }
.button:not(.button--flat):hover { opacity: .9; }
.button--flat { color: var(--od-forest) !important; border: 1px solid var(--od-rule-strong) !important; background: transparent !important; }
.button--flat:hover { background: var(--od-sage) !important; }
.button--flat.button--red { color: #a3281d !important; border-color: rgba(163, 40, 29, .35) !important; }
.input, .input--block, select.input {
  background: var(--od-white) !important; color: var(--od-forest) !important;
  border: 1px solid var(--od-rule-strong) !important; border-radius: 3px !important;
}
.input:focus { border-color: var(--od-forest) !important; outline: none; }
#multiple-selection { background: var(--od-forest) !important; }
#multiple-selection p, #multiple-selection i { color: var(--od-sage) !important; }
.dashboard .card, #settings .card { box-shadow: none !important; }

/* ---------- visualizador de fotos, PDF, vídeo (fundo escuro de propósito) ---------- */
#previewer { background-color: #0d1712 !important; }
#previewer header { background: linear-gradient(rgba(13, 23, 18, .9), rgba(13, 23, 18, 0)) !important; border: 0 !important; }
#previewer header .action i, #previewer header > title { color: #eef3ec !important; }
#previewer header .action:hover { background: rgba(255, 255, 255, .14) !important; }
#previewer .od-marca { display: none; }

/* celular */
@media (max-width: 736px) {
  header > * { order: 3; }
  header .menu-button { order: 1; }
  .od-marca { order: 2; margin: 0 auto 0 4px; }
  .od-marca span { display: none; }
  nav { background: var(--od-shell) !important; box-shadow: 0 0 40px rgba(23, 48, 38, .25); }
  .breadcrumbs a, .breadcrumbs span { font-size: 18px; }
}