@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --brand: 198 20% 32%;
    --primary: var(--brand);
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;

    --sidebar-background: 0 0% 98%;

    --sidebar-foreground: 240 5.3% 26.1%;

    --sidebar-primary: var(--brand);

    --sidebar-primary-foreground: 0 0% 98%;

    --sidebar-accent: 240 4.8% 95.9%;

    --sidebar-accent-foreground: 240 5.9% 10%;

    --sidebar-border: 220 13% 91%;

    --sidebar-ring: var(--brand);
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --brand: 198 20% 32%;
    --primary: var(--brand);
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: var(--brand);
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: var(--brand);
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-family: 'Inter', sans-serif;
  }
}

@layer components {
  .filesystem-filemanager .e-upload-dialog,
  .filesystem-filemanager .e-upload-popup,
  .filesystem-filemanager .e-upload-list-wrap {
    display: none !important;
  }

  .filesystem-shell > .filesystem-filemanager {
    border-radius: inherit;
    overflow: hidden;
    border: none;
    font-family: 'Inter', sans-serif !important;
    font-size: 1rem;
  }

  .filesystem-filemanager .e-fe-overlay,
  .filesystem-filemanager .e-upload-drag-hover .e-fe-overlay {
    border-color: hsl(var(--brand)) !important;
  }

  .filesystem-filemanager .e-large-icons .e-list-item.e-fe-drop-folder,
  .filesystem-filemanager .e-grid .e-row.e-fe-drop-folder .e-rowcell {
    border-color: hsl(var(--brand)) !important;
  }

  .filesystem-filemanager .e-grid .e-content tr.e-row.e-fe-drop-folder .e-rowcell {
    box-shadow:
      0 2px 0 -1px hsl(var(--brand)) inset,
      0 -2px 0 -1px hsl(var(--brand)) inset !important;
  }

  .filesystem-filemanager .e-grid .e-content tr.e-row.e-fe-drop-folder .e-rowcell:first-child {
    box-shadow:
      1px 0 0 1px hsl(var(--brand)) inset,
      0 2px 0 -1px hsl(var(--brand)) inset,
      0 -2px 0 -1px hsl(var(--brand)) inset !important;
  }

  .filesystem-filemanager .e-grid .e-content tr.e-row.e-fe-drop-folder .e-rowcell:last-child {
    box-shadow:
      -1px 0 0 1px hsl(var(--brand)) inset,
      0 2px 0 -1px hsl(var(--brand)) inset,
      0 -2px 0 -1px hsl(var(--brand)) inset !important;
  }

  .filesystem-filemanager .e-treeview .e-list-parent .e-list-item.e-fe-drop-folder.e-hover > .e-fullrow {
    border-color: hsl(var(--brand)) !important;
  }

  .filesystem-filemanager .e-large-icons .e-large-icon.e-hover.e-fe-drop-folder,
  .filesystem-filemanager .e-large-icons .e-large-icon:hover.e-fe-drop-folder {
    border-color: hsl(var(--brand)) !important;
  }

  .filesystem-filemanager .e-large-icons .e-checkbox-wrapper .e-icons.e-check {
    background-color: hsl(var(--brand)) !important;
    border-color: hsl(var(--brand)) !important;
  }

  .filesystem-filemanager .e-fe-clone .e-fe-count {
    background-color: hsl(var(--brand)) !important;
    border-color: hsl(var(--brand)) !important;
  }

  .filesystem-filemanager .e-fe-popup .e-fe-dot,
  .filesystem-filemanager .e-fe-popup .e-fe-tick {
    color: hsl(var(--brand)) !important;
  }

  .filesystem-filemanager .e-fe-popup .e-fe-error {
    color: hsl(var(--brand)) !important;
  }

  .filesystem-shell .e-spinner-pane .e-spinner-inner .e-spin-material,
  .filesystem-shell .e-spinner-pane .e-spinner-inner .e-spin-material3,
  .filesystem-shell .e-spinner-pane .e-spinner-inner .e-spin-tailwind3,
  .filesystem-shell .e-spinner-pane .e-spinner-inner .e-spin-tailwind,
  .filesystem-shell .e-spinner-pane .e-spinner-inner .e-spin-fluent,
  .filesystem-shell .e-spinner-pane .e-spinner-inner .e-spin-fluent2,
  .filesystem-shell .e-spinner-pane .e-spinner-inner .e-spin-fabric,
  .filesystem-shell .e-spinner-pane .e-spinner-inner .e-spin-high-contrast,
  .filesystem-shell .e-spinner-pane .e-spinner-inner .e-spin-bootstrap4,
  .filesystem-shell .e-spinner-pane .e-spinner-inner .e-spin-bootstrap5,
  .filesystem-shell .e-spinner-pane .e-spinner-inner .e-spin-bootstrap5v3 {
    stroke: hsl(var(--brand)) !important;
  }

  .filesystem-shell .e-spinner-pane .e-spinner-inner .e-spin-bootstrap {
    fill: hsl(var(--brand)) !important;
    stroke: hsl(var(--brand)) !important;
  }

  .filesystem-shell .e-spinner-pane .e-spinner-inner svg path,
  .filesystem-shell .e-spinner-pane .e-spinner-inner svg circle {
    stroke: hsl(var(--brand)) !important;
  }

  .filesystem-shell .e-spinner-pane .e-spinner-inner svg circle {
    fill: transparent;
  }

  .filesystem-shell .e-treeview,
  .filesystem-shell .e-toolbar,
  .filesystem-shell .e-grid,
  .filesystem-shell .e-grid * {
    font-family: 'Inter', sans-serif !important;
  }

  .filesystem-filemanager .e-icons,
  .filesystem-filemanager .e-btn-icon,
  .filesystem-filemanager .e-icon,
  .filesystem-filemanager .e-sortfilterdiv .e-icons
  {
    font-family: 'e-icons' !important;
  }

  .filesystem-filemanager,
  .filesystem-filemanager .e-splitter,
  .filesystem-filemanager .e-grid,
  .filesystem-filemanager .e-grid .e-gridheader,
  .filesystem-filemanager .e-grid .e-gridcontent,
  .filesystem-filemanager .e-grid .e-content,
  .filesystem-filemanager .e-grid .e-content .e-table,
  .filesystem-filemanager .e-grid .e-content .e-row,
  .filesystem-filemanager .e-grid .e-content .e-rowcell,
  .filesystem-filemanager .e-toolbar,
  .filesystem-filemanager .e-toolbar .e-horizontal-toolbar,
  .filesystem-filemanager .e-grid .e-headercontent,
  .filesystem-filemanager .e-grid .e-headercontent .e-table,
  .filesystem-filemanager .e-grid .e-headercontent .e-row
  {
    border-radius: inherit;
  }

  .filesystem-shell .e-dialog {
    border-radius: 0.85rem !important;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow:
      0 18px 40px -24px rgba(15, 23, 42, 0.45),
      0 12px 24px -18px rgba(15, 23, 42, 0.35) !important;
  }

  .filesystem-shell .e-dialog .e-dlg-header-content,
  .filesystem-shell .e-dialog .e-dlg-content,
  .filesystem-shell .e-dialog .e-footer-content {
    border-radius: 0.85rem !important;
  }

  .filesystem-shell .e-dialog .e-input-group,
  .filesystem-shell .e-dialog .e-input-group.e-control-wrapper,
  .filesystem-shell .e-dialog .e-float-input,
  .filesystem-shell .e-dialog .e-float-input.e-control-wrapper {
    border: none !important;
    background-image: none !important;
    border-radius: 0 !important;
    padding-bottom: 0.25rem;
  }

  .filesystem-shell .e-dialog .e-input-group.e-input-focus,
  .filesystem-shell .e-dialog .e-input-group:hover,
  .filesystem-shell .e-dialog .e-float-input.e-input-focus,
  .filesystem-shell .e-dialog .e-float-input:hover,
  .filesystem-shell .e-dialog input.e-input:focus,
  .filesystem-shell .e-dialog textarea.e-input:focus {
    border-bottom-color: hsl(var(--brand)) !important;
    box-shadow: none;
  }

  .filesystem-shell .e-dialog input.e-input,
  .filesystem-shell .e-dialog textarea.e-input {
    border: none !important;
    border-bottom: 2px solid rgba(15, 23, 42, 0.16) !important;
    border-radius: 0 !important;
    padding-left: 0;
    padding-right: 0;
    background-image: none !important;
  }

  .filesystem-shell .e-dialog input.e-input:focus,
  .filesystem-shell .e-dialog textarea.e-input:focus {
    border-bottom-color: hsl(var(--brand)) !important;
  }

  .filesystem-shell .e-dialog .e-float-line,
  .filesystem-shell .e-dialog .e-float-line::before,
  .filesystem-shell .e-dialog .e-float-line::after {
    background: none !important;
    border: none !important;
    content: "";
    height: 0 !important;
    transform: none !important;
  }

  .filesystem-shell .e-dialog .e-input-group::before,
  .filesystem-shell .e-dialog .e-input-group::after,
  .filesystem-shell .e-dialog .e-input-group .e-input-in-wrap::before,
  .filesystem-shell .e-dialog .e-input-group .e-input-in-wrap::after,
  .filesystem-shell .e-dialog .e-input-group.e-control-wrapper::before,
  .filesystem-shell .e-dialog .e-input-group.e-control-wrapper::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  .e-dlg-container .e-dialog ::selection,
  .e-dlg-container .e-dialog ::-moz-selection,
  .e-dlg-container .e-dialog input.e-input::selection,
  .e-dlg-container .e-dialog textarea.e-input::selection,
  .e-dlg-container .e-dialog input.e-input::-moz-selection,
  .e-dlg-container .e-dialog textarea.e-input::-moz-selection,
  .e-dlg-container .e-dialog .e-input-group input.e-input::selection,
  .e-dlg-container .e-dialog .e-input-group textarea.e-input::selection,
  .e-dlg-container .e-dialog .e-input-group input.e-input::-moz-selection,
  .e-dlg-container .e-dialog .e-input-group textarea.e-input::-moz-selection,
  .e-dlg-container .e-dialog .e-float-input input::selection,
  .e-dlg-container .e-dialog .e-float-input textarea::selection,
  .e-dlg-container .e-dialog .e-float-input input::-moz-selection,
  .e-dlg-container .e-dialog .e-float-input textarea::-moz-selection {
    background-color: rgba(148, 163, 184, 0.35) !important;
    color: inherit !important;
  }

  .filesystem-shell .e-dialog .e-footer-content .e-btn.e-primary,
  .filesystem-shell .e-dialog .e-footer-content .e-btn.e-flat.e-primary {
    background-color: hsl(var(--brand)) !important;
    border-color: hsl(var(--brand)) !important;
    color: white !important;
    box-shadow: 0 12px 24px -16px hsl(var(--brand) / 0.6) !important;
  }

  .filesystem-shell .e-dialog .e-footer-content .e-btn.e-primary:hover,
  .filesystem-shell .e-dialog .e-footer-content .e-btn.e-flat.e-primary:hover {
    background-color: hsl(var(--brand) / 0.92) !important;
    border-color: hsl(var(--brand)) !important;
  }

  .filesystem-shell .e-dialog .e-footer-content .e-btn.e-primary:focus-visible,
  .filesystem-shell .e-dialog .e-footer-content .e-btn.e-flat.e-primary:focus-visible {
    outline: 2px solid hsl(var(--brand)) !important;
    outline-offset: 2px;
  }

  .filesystem-filemanager .e-splitter,
  .filesystem-filemanager .e-grid,
  .filesystem-filemanager .e-toolbar,
  .filesystem-filemanager .e-grid .e-gridheader,
  .filesystem-filemanager .e-grid .e-gridcontent,
  .filesystem-filemanager .e-grid .e-content
  {
    border: none;
  }

  .filesystem-filemanager .e-toolbar {
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    background-color: #f8f9fb;
    border-bottom: 1px solid rgba(148, 163, 184, 0.35);
    padding: 0.35rem 0.75rem !important;
    display: flex;
    align-items: center;
  }

  .filesystem-filemanager .e-grid .e-gridcontent,
  .filesystem-filemanager .e-grid .e-content,
  .filesystem-filemanager .e-grid .e-gridheader
  {
    overflow: hidden;
  }

  .filesystem-shell .e-toolbar .e-toolbar-items {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 0.75rem;
    width: calc(100% - 2.5rem);
  }

  .filesystem-shell .e-toolbar .e-tbar-btn,
  .filesystem-shell .e-toolbar .e-tbar-btn-text,
  .filesystem-shell .e-toolbar .e-tbar-btn-text .e-tbar-btn-text
  {
    font-family: 'Inter', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 0.4rem 0.75rem !important;
    line-height: 1.35 !important;
    color: #374151 !important;
  }

  .filesystem-shell .e-toolbar .e-toolbar-item .e-tbar-btn-text,
  .filesystem-shell .e-toolbar .e-toolbar-item .e-tbar-btn-text span {
    font-family: 'Inter', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: #374151 !important;
  }

  .filesystem-shell .e-grid .e-rowcell,
  .filesystem-shell .e-grid .e-rowcell .e-fe-text,
  .filesystem-shell .e-grid .e-rowcell .e-fe-date,
  .filesystem-shell .e-grid .e-rowcell .e-fe-size,
  .filesystem-shell .e-treeview .e-list-text
  {
    font-size: 0.94rem;
    color: #1f2937;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  .filesystem-shell .e-grid .e-rowcell .e-fe-date,
  .filesystem-shell .e-grid .e-rowcell .e-fe-date *,
  .filesystem-shell .e-grid .e-rowcell.e-fe-date,
  .filesystem-shell .e-grid .e-rowcell.e-fe-date *,
  .filesystem-shell .e-grid .e-rowcell .e-fe-date-value,
  .filesystem-shell .e-grid .e-rowcell .e-fe-date-value *
  {
    font-size: 0.94rem !important;
    color: #1f2937 !important;
  }

  .filesystem-shell .e-grid .e-gridheader .e-headercelldiv,
  .filesystem-shell .e-grid .e-gridheader .e-headercelldiv *
  {
    font-size: 0.94rem !important;
  }

  .filesystem-shell .e-grid .e-gridheader .e-headercell .e-headercelldiv,
  .filesystem-shell .e-grid .e-gridheader .e-headercell .e-headerchkcelldiv,
  .filesystem-shell .e-grid .e-gridheader .e-headercell .e-sortfilterdiv
  {
    margin-left: -4px;
  }

  .filesystem-shell .e-grid .e-gridheader .e-sortfilter .e-headercelldiv
  {
    padding-left: 0.25rem !important;
    margin-left: -4px;
  }

  .filesystem-shell .e-grid .e-gridheader .e-fe-checkbox,
  .filesystem-shell .e-grid .e-gridheader .e-fe-grid-icon
  {
    padding-left: 8px !important;
  }

  .filesystem-shell .e-grid .e-gridheader .e-headercell.e-fe-checkbox .e-headercelldiv,
  .filesystem-shell .e-grid .e-gridheader .e-headercell.e-fe-checkbox .e-headerchkcelldiv,
  .filesystem-shell .e-grid .e-gridheader .e-headercell.e-fe-grid-icon .e-headercelldiv,
  .filesystem-shell .e-grid .e-gridheader .e-headercell.e-fe-grid-icon .e-headerchkcelldiv
  {
    margin-left: 0;
  }

  .filesystem-shell .e-checkbox-wrapper .e-frame.e-check,
  .filesystem-shell .e-checkbox-wrapper .e-frame.e-stop,
  .filesystem-shell .e-css.e-checkbox-wrapper .e-frame.e-check,
  .filesystem-shell .e-css.e-checkbox-wrapper .e-frame.e-stop
  {
    background-color: hsl(var(--brand)) !important;
    border-color: hsl(var(--brand)) !important;
    color: #fff !important;
  }

  .filesystem-shell .e-checkbox-wrapper .e-icons.e-check,
  .filesystem-shell .e-css.e-checkbox-wrapper .e-icons.e-check
  {
    font-size: 10px !important;
    line-height: 1 !important;
  }

  .filesystem-shell .e-checkbox-wrapper .e-icons.e-stop,
  .filesystem-shell .e-css.e-checkbox-wrapper .e-icons.e-stop
  {
    font-size: 9px !important;
    line-height: 1 !important;
  }

  .filesystem-shell .e-checkbox-wrapper .e-checkbox:focus + .e-frame,
  .filesystem-shell .e-checkbox-wrapper .e-checkbox:active + .e-frame,
  .filesystem-shell .e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame,
  .filesystem-shell .e-css.e-checkbox-wrapper .e-checkbox:active + .e-frame
  {
    border-color: hsl(var(--brand)) !important;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px hsl(var(--brand)) !important;
  }

  .filesystem-shell .e-checkbox-wrapper:hover .e-frame.e-check,
  .filesystem-shell .e-checkbox-wrapper:hover .e-frame.e-stop,
  .filesystem-shell .e-css.e-checkbox-wrapper:hover .e-frame.e-check,
  .filesystem-shell .e-css.e-checkbox-wrapper:hover .e-frame.e-stop
  {
    background-color: hsl(var(--brand)) !important;
    border-color: hsl(var(--brand)) !important;
  }

  .filesystem-shell .e-toolbar .e-icons,
  .filesystem-shell .e-toolbar .e-btn-icon,
  .filesystem-shell .e-toolbar .e-icons::before,
  .filesystem-shell .e-toolbar .e-btn-icon::before
  {
    font-size: 1.1rem !important;
    line-height: 1 !important;
    color: #64748b !important;
}

  .filesystem-shell .e-toolbar .e-btn-icon {
    margin-right: 0.5rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .filesystem-shell .e-toolbar .e-btn,
  .filesystem-shell .e-toolbar .e-button,
  .filesystem-shell .e-toolbar .e-btn.e-tbar-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 1rem;
    height: auto;
    min-height: 2.4rem;
    min-width: 2.4rem;
    display: inline-flex;
    align-items: center;
    transition: background-color 120ms ease, border-color 120ms ease;
    padding: 0 0.8rem !important;
  }

  .filesystem-shell .e-toolbar .e-btn.e-tbar-btn:hover,
  .filesystem-shell .e-toolbar .e-btn.e-tbar-btn:focus-visible {
    background: rgba(99, 102, 241, 0.12) !important;
  }

  .filesystem-shell .e-toolbar .e-separator {
    display: none;
  }

  .filesystem-filemanager .e-address {
    height: 48px !important;
    padding: 0 1rem !important;
  }

  .filesystem-filemanager .e-address .e-search-wrap {
    display: none !important;
  }

  .filesystem-filemanager .e-address .e-addressbar-ul {
    padding: 12px 0 !important;
  }

  .filesystem-filemanager .e-address .e-addressbar-ul .e-list-text {
    font-size: 1.08rem !important;
    color: #64748b !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
  }
}

/* Start button glow pulse animation */
@keyframes glowPulseBlue {
  0% {
    box-shadow: 0 0 0 0 rgba(29, 78, 216, 0.35), 0 0 16px rgba(29, 78, 216, 0.65);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(29, 78, 216, 0.14), 0 0 28px rgba(29, 78, 216, 0.95);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(29, 78, 216, 0.14), 0 0 16px rgba(29, 78, 216, 0.65);
  }
}

.glow-pulse-blue {
  animation: glowPulseBlue 1.6s ease-in-out infinite;
}

/* Spotlight surface: soft elevation, animated gradient hairline, subtle radial wash */
@keyframes spotlightRotate {
  to {
    transform: rotate(360deg);
  }
}

.spotlight-surface {
  position: relative;
  border-radius: 0.75rem; /* ~12px matches rounded-xl */
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.45), 0 8px 20px -16px rgba(0, 0, 0, 0.25);
  isolation: isolate; /* ensure ::after can sit behind */
}

.spotlight-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px; /* hairline thickness */
  box-sizing: border-box;
  background: conic-gradient(
    from 0deg,
    rgba(56, 189, 248, 0.22), /* sky-400 */
    rgba(99, 102, 241, 0.22), /* indigo-500 */
    rgba(56, 189, 248, 0.22)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.18; /* fainter and static */
}

.spotlight-surface::after {
  content: "";
  position: absolute;
  inset: -12% -10% -18% -10%;
  border-radius: inherit;
  background: radial-gradient(
    900px circle at 50% -10%,
    rgba(99, 102, 241, 0.12), /* indigo */
    rgba(56, 189, 248, 0.08), /* sky */
    transparent 60%
  );
  z-index: -1; /* sit behind content */
  pointer-events: none;
  filter: blur(12px);
  opacity: 0.15; /* even subtler */
}

/* Subtle table row slide-in */
@keyframes rowIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-row-in {
  animation: rowIn 300ms ease-out both;
}
