/* ============================================
   Garage - Octane Marketing
   CSS Custom Properties (Variables)
   ============================================ */

:root {

  /* ---- Brand Colors ---- */
  --color-primary:        #2d3b44;
  --color-primary-light:  #3d4f5a;
  --color-primary-dark:   #1e2a31;
  --color-secondary:      #f06d39;
  --color-secondary-light:#f28459;
  --color-secondary-dark: #d95e2e;

  /* ---- Neutral Colors ---- */
  --color-white:          #ffffff;
  --color-black:          #1e1e1e;
  --color-gray-100:       #f8f8f8;
  --color-gray-200:       #f0f0f0;
  --color-gray-300:       #e0e0e0;
  --color-gray-400:       #cccccc;
  --color-gray-500:       #999999;
  --color-gray-600:       #666666;

  /* ---- Semantic Colors ---- */
  --color-bg:             #ffffff;
  --color-bg-subtle:      var(--color-gray-100);
  --color-border:         #e0e0e0;
  --color-text:           #1e1e1e;
  --color-text-subtle:    #666666;
  --color-text-inverse:   #ffffff;

  /* ---- Typography ---- */
  --font-family:          'Public Sans', sans-serif;
  --font-family-icons:    'Material Icons';

  --text-xs:              0.625rem;   /* 10px */
  --text-sm:              0.75rem;    /* 12px */
  --text-base:            1rem;       /* 16px */
  --text-md:              1.125rem;   /* 18px */
  --text-lg:              1.25rem;    /* 20px */
  --text-xl:              1.5rem;     /* 24px */
  --text-2xl:             2rem;       /* 32px */

  --font-light:           300;
  --font-regular:         400;
  --font-medium:          500;
  --font-semibold:        600;
  --font-bold:            700;

  --line-height-tight:    1.2;
  --line-height-base:     1.5;
  --line-height-loose:    1.8;

  /* ---- Spacing ---- */
  --space-1:              0.25rem;    /* 4px */
  --space-2:              0.5rem;     /* 8px */
  --space-3:              0.75rem;    /* 12px */
  --space-4:              1rem;       /* 16px */
  --space-5:              1.25rem;    /* 20px */
  --space-6:              1.5rem;     /* 24px */
  --space-8:              2rem;       /* 32px */
  --space-10:             2.5rem;     /* 40px */
  --space-12:             3rem;       /* 48px */

  /* ---- Border Radius ---- */
  --radius-sm:            8px;
  --radius-md:            12px;
  --radius-lg:            16px;
  --radius-xl:            24px;
  --radius-full:          9999px;

  /* ---- Logo Size ---- */
  --logo-lg: 60px;
  --logo-md: 40px;
  --logo-sm: 24px;

  /* ---- Shadows ---- */
  --shadow-sm:            0 1px 4px rgba(0,0,0,0.06);
  --shadow-md:            0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg:            0 4px 16px rgba(0,0,0,0.10);
  --shadow-xl:            0 8px 32px rgba(0,0,0,0.12);

  /* ---- Transitions ---- */
  --transition-fast:      0.15s ease;
  --transition-base:      0.2s ease;
  --transition-slow:      0.3s ease;

  /* ---- Z-Index ---- */
  --z-base:               1;
  --z-dropdown:           100;
  --z-modal:              200;
  --z-toast:              300;

  /* ---- Layout ---- */
  --header-height:        80px;
  --header-offset-y:      var(--space-4);
  --header-offset-x:      var(--space-6);
  --header-gap:           var(--space-4);

}

/* ============================================
   Login Page Styling
   ============================================ */

/* Make Octane logo bigger */
#login form img {
  max-height: var(--logo-md) !important;
  width: auto !important;
  margin-bottom: var(--space-10) !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  display: block;
}

/* Hide 'File Browser' text */
#login h1 {
  display: none !important;
}

/* Style input fields */
#login input[type="text"],
#login input[type="password"] {
  width: 100% !important;
  padding: var(--space-4) !important;
  margin-bottom: var(--space-6) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  font-family: var(--font-family) !important;
  font-size: var(--text-base) !important;
}

/* Input hover state */
#login input[type="text"]:hover,
#login input[type="password"]:hover {
  border-color: var(--color-primary) !important;
}

/* Input focus state */
#login input[type="text"]:focus,
#login input[type="password"]:focus {
  border-color: var(--color-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(45, 59, 68, 0.1) !important;
}

/* Style login button */
#login .button--block {
  width: auto !important;
  margin: var(--space-6) 0 0 0 !important;
  background-color: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  padding: var(--space-4) var(--space-8) !important;
  font-family: var(--font-family) !important;
  font-size: var(--text-base) !important;
  font-weight: var(--font-semibold) !important;
  transition: background-color var(--transition-base) !important;
}

#login .button--block:hover {
  background-color: var(--color-secondary) !important;
}

html, body {
  background-color: var(--color-bg-subtle) !important;
}

/* ============================================
   Header Styling
   ============================================ */

/* Header background and height */
header {
  background-color: var(--color-white) !important;
  border: none !important;
  border-radius: var(--radius-xl) !important;
  height: var(--header-height) !important;
  top: var(--header-offset-y) !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: none !important;
  margin: 0 var(--header-offset-x) !important;
  padding: 0 var(--header-offset-x) !important;
  box-sizing: border-box !important;
  width: calc(100% - (var(--header-offset-x) * 2)) !important;
}

/* Header logo */
header img {
  max-height: 32px !important;
  width: auto !important;
}

/* Header search bar */
#search {
  position: relative;
  height: 60%;
  width: 100%;
  max-width: 25em;
  background-color: var(--color-white) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-full) !important;
  padding: var(--space-2) var(--space-4) !important;
  font-family: var(--font-family) !important;
  font-size: var(--text-base) !important;
  color: var(--color-text) !important;
}

#search #input {
  background-color: var(--color-white) !important;
}

/* Header buttons */
header .action {
  background-color: transparent !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-2) !important;
  transition: background-color var(--transition-base) !important;
}

header .action:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Header icons */
header .material-icons {
  color: var(--color-text-inverse) !important;
  font-size: 24px !important;
}

/* ============================================
   Sidebar Styling
   ============================================ */

/* Sidebar background */
nav {
  background-color: var(--color-bg-subtle) !important;
  padding: 20px !important;
  padding-top: calc(20px + var(--header-height) + var(--header-offset-y) + var(--header-gap)) !important;
}

/* Sidebar divider lines */
nav > div {
  border-top: none;
}

/* Sidebar buttons */
nav .action {
  background-color: var(--color-bg-subtle) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-3) var(--space-4) !important;
  margin: var(--space-1) var(--space-3) !important;
  transition: background-color var(--transition-base) !important;
  color: var(--color-text-inverse) !important;
}

nav .action:hover {
  background-color: var(--color-white) !important;
  border-radius: var(--radius-md) !important;
}

/* Sidebar icons */
nav .material-icons {
  color: var(--color-primary) !important;
}

/* Sidebar text */
nav span {
  color: var(--color-primary) !important;
}

/* Storage info text */
.credits {
  display: none !important;
}

.action {
  cursor: crosshair !important;
}

/* ============================================
   Files and Content Styling
   ============================================ */

/* Files and content background */
#app {
  background-color: var(--color-bg-subtle);
  padding: 20px !important;
  padding-top: calc(var(--header-height) + var(--header-offset-y) + var(--header-gap)) !important;
}