/* ==========================================================================
   WORK THEME
   Cold, structured, professional. No decoration. No warmth. Just precision.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS CUSTOM PROPERTIES - LIGHT MODE (default)
   Unique light palette: cool paper-white with charcoal hierarchy.
   -------------------------------------------------------------------------- */
:root {
  /* Accent - neutral slate, no blue */
  --primary:           #3d4451;
  --primary-hover:     #2a2f3a;
  --primary-rgb:       61, 68, 81;
  --brand-blue:        #3d4451;
  --brand-yellow:      #92650a;

  /* State */
  --danger:            #b91c1c;
  --warning:           #92650a;
  --success:           #166534;

  /* Surfaces - cool off-white, white panels */
  --bg:                #f2f3f7;
  --bg-light:          #ffffff;
  --bg-hover:          #e6e8ee;

  /* Borders - fine, cool-toned */
  --border:            #c5c8d1;
  --border-light:      #e1e3e9;

  /* Text */
  --text-primary:      #0f1117;
  --text-secondary:    #58606e;
  --text-link:         #1c3461;
  --text-link-visited: #4a3d6e;
  --text-cite:         #3a424f;
  --text-snippet:      #454d5a;

  /* Search */
  --search-bar-bg:       #ffffff;
  --search-bar-bg-hover: #ffffff;
  --degoog-search-bar-radius: 3px;

  /* Buttons */
  --btn-bg:   #e8eaef;
  --btn-text: #0f1117;

  /* Misc */
  --overlay-bg: rgba(15, 17, 23, 0.65);
  --white:      #ffffff;
}

/* --------------------------------------------------------------------------
   DARK MODE - system preference
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary:           #8b9099;
    --primary-hover:     #9ca3af;
    --primary-rgb:       139, 144, 153;
    --brand-blue:        #8b9099;
    --brand-yellow:      #c9962a;

    --danger:            #f87171;
    --warning:           #c9962a;
    --success:           #4ade80;

    --bg:                #0d1117;
    --bg-light:          #161b22;
    --bg-hover:          #1c2128;

    --border:            #30363d;
    --border-light:      #21262d;

    --text-primary:      #e6edf3;
    --text-secondary:    #7d8590;
    --text-link:         #adbac7;
    --text-link-visited: #8b949e;
    --text-cite:         #adbac7;
    --text-snippet:      #8b949e;

    --search-bar-bg:       #161b22;
    --search-bar-bg-hover: #1c2128;

    --btn-bg:   #21262d;
    --btn-text: #e6edf3;

    --overlay-bg: rgba(0, 0, 0, 0.82);
    --white:      #ffffff;
  }
}

/* --------------------------------------------------------------------------
   DARK MODE - explicit attribute
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --primary:           #8b9099;
  --primary-hover:     #9ca3af;
  --primary-rgb:       139, 144, 153;
  --brand-blue:        #8b9099;
  --brand-yellow:      #c9962a;

  --danger:            #f87171;
  --warning:           #c9962a;
  --success:           #4ade80;

  --bg:                #0d1117;
  --bg-light:          #161b22;
  --bg-hover:          #1c2128;

  --border:            #30363d;
  --border-light:      #21262d;

  --text-primary:      #e6edf3;
  --text-secondary:    #7d8590;
  --text-link:         #adbac7;
  --text-link-visited: #8b949e;
  --text-cite:         #adbac7;
  --text-snippet:      #8b949e;

  --search-bar-bg:       #161b22;
  --search-bar-bg-hover: #1c2128;

  --btn-bg:   #21262d;
  --btn-text: #e6edf3;

  --overlay-bg: rgba(0, 0, 0, 0.82);
  --white:      #ffffff;
}

/* --------------------------------------------------------------------------
   LIGHT MODE - explicit attribute
   -------------------------------------------------------------------------- */
[data-theme="light"] {
  --primary:           #3d4451;
  --primary-hover:     #2a2f3a;
  --primary-rgb:       61, 68, 81;
  --brand-blue:        #3d4451;
  --brand-yellow:      #92650a;

  --danger:            #b91c1c;
  --warning:           #92650a;
  --success:           #166534;

  --bg:                #f2f3f7;
  --bg-light:          #ffffff;
  --bg-hover:          #e6e8ee;

  --border:            #c5c8d1;
  --border-light:      #e1e3e9;

  --text-primary:      #0f1117;
  --text-secondary:    #58606e;
  --text-link:         #1c3461;
  --text-link-visited: #4a3d6e;
  --text-cite:         #3a424f;
  --text-snippet:      #454d5a;

  --search-bar-bg:       #ffffff;
  --search-bar-bg-hover: #ffffff;

  --btn-bg:   #e8eaef;
  --btn-text: #0f1117;

  --overlay-bg: rgba(15, 17, 23, 0.65);
  --white:      #ffffff;
}

/* ==========================================================================
   SEARCH BAR
   ========================================================================== */

.degoog-search-bar {
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  transition: border-color 0.12s ease !important;
}

.degoog-search-bar:hover {
  border-color: var(--text-secondary) !important;
  box-shadow: none !important;
}

.degoog-search-bar:focus-within {
  border-color: var(--text-secondary) !important;
  box-shadow: none !important;
}

/* Suppress all outlines inside the search bar - parent border is the indicator */
.degoog-search-bar *,
.degoog-search-bar *:focus,
.degoog-search-bar *:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Autocomplete: flush border match */
.ac-dropdown {
  border: 1px solid var(--text-secondary) !important;
  border-top: none !important;
  border-radius: 0 0 2px 2px !important;
  box-shadow: none !important;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.degoog-btn {
  border-radius: 2px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}

.degoog-btn--secondary {
  border-radius: 2px !important;
  border: 1px solid var(--border) !important;
}

.degoog-btn--primary {
  border-radius: 2px !important;
}

.degoog-btn--danger {
  border-radius: 2px !important;
}

.degoog-btn:focus-visible {
  outline: 2px solid var(--text-secondary) !important;
  outline-offset: 1px !important;
}

.degoog-btn:disabled {
  opacity: 0.5 !important;
}

/* Home page search buttons */
.search-btn {
  border-radius: 2px !important;
  font-weight: 500 !important;
  border: 1px solid transparent !important;
}

.search-btn:hover {
  border-color: var(--border) !important;
  box-shadow: none !important;
}

/* ==========================================================================
   FORM INPUTS
   ========================================================================== */

.degoog-input {
  border-radius: 2px !important;
  border: 1px solid var(--border) !important;
  outline: none !important;
  transition: border-color 0.12s ease !important;
}

.degoog-input:focus,
.degoog-input:focus-visible {
  border-color: var(--text-secondary) !important;
  outline: none !important;
  box-shadow: none !important;
}

.degoog-input--tools {
  border-radius: 2px !important;
}

.degoog-input--chat {
  border-radius: 2px !important;
  border: 1px solid var(--border) !important;
}

/* ==========================================================================
   TOGGLE SWITCH - rectangular
   ========================================================================== */

.degoog-toggle {
  border-radius: 3px !important;
}

.degoog-toggle::after {
  border-radius: 2px !important;
  height: 1.1rem !important;
  aspect-ratio: 1 !important;
}

/* ==========================================================================
   BADGES
   ========================================================================== */

.degoog-badge {
  border-radius: 2px !important;
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
  text-transform: uppercase !important;
  font-size: 0.625rem !important;
}

/* ==========================================================================
   ICON BUTTONS
   ========================================================================== */

.degoog-icon-btn {
  border-radius: 2px !important;
  transition: color 0.12s ease, background 0.12s ease !important;
}

.degoog-icon-btn--padded:hover {
  background: var(--bg-hover) !important;
}

/* Action toggle (3-dot per result) */
.degoog-result--actions-toggle {
  border-radius: 2px !important;
}

/* Search bar action button */
.search-bar-action-btn {
  border-radius: 2px !important;
}

/* ==========================================================================
   PANELS & CARDS
   ========================================================================== */

.degoog-panel,
[class*="card"],
[class*="store-card"],
[class*="glance"],
[class*="sidebar"] > * {
  border-radius: 2px !important;
}

/* Rich AC items */
.degoog-ac-rich-thumb {
  border-radius: 2px !important;
}

.degoog-ac-rich-type {
  border-radius: 2px !important;
}

/* ==========================================================================
   RESULTS
   ========================================================================== */

.degoog-result {
  border-bottom: 1px solid var(--border-light) !important;
  padding-top: 1.125rem !important;
  padding-bottom: 1.125rem !important;
}

.degoog-result:last-child {
  border-bottom: none !important;
}

.degoog-result--thumb {
  border-radius: 2px !important;
}

.degoog-result--favicon {
  border-radius: 3px !important;
}

/* URL in monospace - more structured, technical */
.degoog-result--cite {
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important;
  font-size: 0.73rem !important;
  letter-spacing: -0.02em !important;
  color: var(--text-secondary) !important;
}

/* Title: tighter, slightly heavier */
.degoog-result--title {
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
}

/* Snippet: compact */
.degoog-result--snippet {
  line-height: 1.5 !important;
  margin-top: 0.2rem !important;
}

/* ==========================================================================
   MEDIA - images, videos, lightbox
   ========================================================================== */

[class*="image-card"],
[class*="video-card"],
[class*="lightbox"] {
  border-radius: 2px !important;
}

/* ==========================================================================
   SKELETON LOADING
   ========================================================================== */

[class*="skeleton"] {
  border-radius: 2px !important;
}

/* ==========================================================================
   DROPDOWNS (non-autocomplete)
   ========================================================================== */

[class*="dropdown"]:not(.ac-dropdown) {
  border-radius: 2px !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="dark"] [class*="dropdown"]:not(.ac-dropdown) {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5) !important;
}

/* ==========================================================================
   VIDEO DURATION BADGE
   ========================================================================== */

.degoog-result--video-duration {
  border-radius: 1px !important;
}

/* ==========================================================================
   LIGHT THEME ACCENT STRIP
   Makes the layout feel structured and unique without being decorative.
   ========================================================================== */

[data-theme="light"] body::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border);
  z-index: 9999;
  pointer-events: none;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--border);
    z-index: 9999;
    pointer-events: none;
  }
}

/* ==========================================================================
   LOGO - visibility controlled by data-show-logo attribute
   ========================================================================== */

/* Home page image logo */
.work-home-logo {
  display: block;
  width: 300px;
  height: auto;
  user-select: none;
}

/* Header image logo */
.work-header-logo {
  display: block;
  width: 88px;
  height: auto;
  user-select: none;
}

/* Text fallbacks hidden by default (image is shown) */
.work-fallback-logo,
.work-text-logo {
  display: none !important;
}

/* Light mode: white logo → dark via invert */
[data-theme="light"] .work-logo {
  filter: brightness(0) opacity(0.82);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .work-logo {
    filter: brightness(0) opacity(0.82);
  }
}

/* Dark mode: white logo, slight opacity */
[data-theme="dark"] .work-logo {
  filter: opacity(0.82);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .work-logo {
    filter: opacity(0.82);
  }
}

/* Logo OFF: hide image, reveal fallback text */
html[data-show-logo="false"] .work-logo {
  display: none !important;
}

html[data-show-logo="false"] .work-fallback-logo {
  display: block !important;
}

html[data-show-logo="false"] .work-text-logo {
  display: inline !important;
}

/* ==========================================================================
   SCROLLBAR - thin, no roundness
   ========================================================================== */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* ==========================================================================
   GLOBAL FOCUS - gray, not blue
   Suppress on inputs that have their own border-based focus style.
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--text-secondary) !important;
  outline-offset: 1px !important;
}

/* Inputs handle focus via border-color change; no outline needed */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.degoog-input:focus-visible {
  outline: none !important;
}

/* Settings nav search - permanent outline removal */
#settings-global-search,
.settings-nav-search-input {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

#settings-global-search:focus,
#settings-global-search:focus-visible,
.settings-nav-search-input:focus,
.settings-nav-search-input:focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   SELECTION
   ========================================================================== */

::selection {
  background: rgba(139, 144, 153, 0.2);
  color: var(--text-primary);
}

/* ==========================================================================
   LINKS
   ========================================================================== */

a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

a:visited {
  color: var(--text-link-visited);
}