/*
  GEO-S branding for File Browser
  Main colors extracted from the official logo:
  Orange:  #FA7C1F
  Charcoal: #333333
*/

:root {
  --geo-orange: #FA7C1F;
  --geo-orange-hover: #E66A0A;
  --geo-charcoal: #333333;
  --geo-charcoal-soft: #464646;
  --geo-surface: #FFFFFF;
  --geo-background: #F4F5F7;
  --geo-border: #E3E5E8;
  --geo-text: #333333;
}

/* General appearance */
html,
body,
#app {
  background-color: var(--geo-background);
  color: var(--geo-text);
}

body {
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

/* Top bar / navigation */
header,
.topbar,
.navbar {
  background-color: var(--geo-charcoal) !important;
  border-color: var(--geo-charcoal) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}

/* Primary buttons and floating actions */
button.action,
.action.button,
.button--primary,
.button.primary,
input[type="submit"] {
  background-color: var(--geo-orange) !important;
  border-color: var(--geo-orange) !important;
  color: #FFFFFF !important;
}

button.action:hover,
.action.button:hover,
.button--primary:hover,
.button.primary:hover,
input[type="submit"]:hover {
  background-color: var(--geo-orange-hover) !important;
  border-color: var(--geo-orange-hover) !important;
}

/* Links and active states */
a,
.link,
.active > a,
nav .active,
.sidebar .active {
  color: var(--geo-orange-hover);
}

/* Inputs */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--geo-orange) !important;
  box-shadow: 0 0 0 2px rgba(250, 124, 31, 0.18) !important;
  outline: none;
}

/* Login page */
#login {
  background:
    radial-gradient(circle at top right, rgba(250, 124, 31, 0.20), transparent 36%),
    linear-gradient(145deg, #F7F7F8 0%, #ECEEF1 100%);
}

#login form,
#login .card,
.login form,
.login .card {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--geo-border);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(51, 51, 51, 0.14);
}

/* Keep the horizontal GEO-S logo clear and correctly proportioned */
#login img,
.login img,
.logo img {
  width: min(330px, 78vw) !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain;
}

/* Cards, dialogs and tables */
.card,
.modal,
.dialog,
table {
  border-color: var(--geo-border);
}

.card,
.modal,
.dialog {
  border-radius: 10px;
}

/* Selection and progress accents */
::selection {
  background: rgba(250, 124, 31, 0.28);
}

progress,
progress::-webkit-progress-value {
  accent-color: var(--geo-orange);
}

/* Gentle dark-mode adaptation */
.dark,
body.dark,
.dark #app {
  --geo-background: #242424;
  --geo-surface: #303030;
  --geo-border: #454545;
  --geo-text: #F2F2F2;
}

.dark #login,
body.dark #login {
  background:
    radial-gradient(circle at top right, rgba(250, 124, 31, 0.16), transparent 38%),
    linear-gradient(145deg, #222222 0%, #2E2E2E 100%);
}

.dark #login form,
.dark #login .card,
body.dark #login form,
body.dark #login .card {
  background: rgba(48, 48, 48, 0.98);
  border-color: #464646;
}