/* =========================================
   Aanem Files
   Safe Night Theme
   File Browser 2.63.x
========================================= */

:root {
  --aanem-bg: #071126;
  --aanem-bg-deep: #04091a;
  --aanem-sidebar: #050b1e;

  --aanem-panel: #101d3f;
  --aanem-panel-hover: #172957;

  --aanem-line: rgba(142, 197, 255, .20);

  --aanem-text: #eef4ff;
  --aanem-text-soft: #b9c8eb;
  --aanem-muted: #8798bf;

  --aanem-blue: #8ec5ff;
  --aanem-purple: #b29cff;
  --aanem-yellow: #fde68a;
}

/* =========================================
   Base
========================================= */

html,
body {
  min-height: 100%;

  background:
    radial-gradient(
      circle at 25% 10%,
      #172b63 0%,
      transparent 36%
    ),
    linear-gradient(
      180deg,
      #071126 0%,
      #04091a 100%
    ) !important;

  color: var(--aanem-text);
}

body {
  font-family:
    "Noto Sans JP",
    "Segoe UI",
    sans-serif !important;
}

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

header {
  background:
    rgba(5, 10, 29, .97) !important;

  border-bottom:
    1px solid rgba(142, 197, 255, .14) !important;

  box-shadow:
    0 8px 24px rgba(0, 0, 0, .20) !important;
}

/* =========================================
   Search
========================================= */

#search {
  background:
    rgba(18, 31, 70, .96) !important;

  border:
    1px solid rgba(142, 197, 255, .24) !important;

  border-radius:
    12px !important;

  padding:
    8px 14px !important;

  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, .18) !important;
}

#search input {
  background:
    transparent !important;

  color:
    var(--aanem-text) !important;

  border:
    0 !important;

  padding:
    0 !important;

  box-shadow:
    none !important;
}

#search input::placeholder {
  color:
    var(--aanem-muted) !important;
}

#search i,
#search svg {
  color:
    #9bb4e8 !important;
}

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

aside {
  background:
    linear-gradient(
      180deg,
      #071027,
      #04091a
    ) !important;

  border-right:
    1px solid rgba(142, 197, 255, .12) !important;

  color:
    var(--aanem-text-soft) !important;
}

aside a {
  color:
    var(--aanem-text-soft) !important;
}

aside a:hover {
  color:
    #ffffff !important;

  background:
    rgba(142, 197, 255, .08) !important;
}

/* =========================================
   Main area
========================================= */

main,
#listing {
  background:
    transparent !important;

  color:
    var(--aanem-text) !important;
}

/* =========================================
   Breadcrumb
========================================= */

.breadcrumb,
.breadcrumbs {
  background:
    rgba(255, 255, 255, .025) !important;

  color:
    var(--aanem-text-soft) !important;

  border-bottom:
    1px solid rgba(255, 255, 255, .05) !important;
}

/* =========================================
   File listing

   File Browser が持っている listing 配下だけを
   触ることでモーダルへの副作用を避ける
========================================= */

#listing .item {
  background:
    linear-gradient(
      145deg,
      #111f43,
      #0d1937
    ) !important;

  color:
    var(--aanem-text) !important;

  border:
    1px solid rgba(142, 197, 255, .20) !important;

  border-radius:
    14px !important;

  box-shadow:
    0 8px 20px rgba(0, 0, 0, .16) !important;

  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease !important;
}

#listing .item:hover {
  background:
    linear-gradient(
      145deg,
      #172957,
      #12234b
    ) !important;

  border-color:
    rgba(142, 197, 255, .55) !important;

  transform:
    translateY(-2px);
}

#listing .item .name {
  color:
    #e1e9ff !important;
}

#listing .item small {
  color:
    var(--aanem-muted) !important;
}

/* =========================================
   Table listing
========================================= */

#listing table {
  background:
    transparent !important;

  color:
    var(--aanem-text) !important;
}

#listing thead {
  background:
    rgba(20, 31, 64, .76) !important;
}

#listing th {
  color:
    #dce7ff !important;
}

#listing td {
  color:
    var(--aanem-text-soft) !important;
}

#listing tbody tr:hover {
  background:
    rgba(142, 197, 255, .055) !important;
}

/* =========================================
   Forms

   全inputを大幅変更せず、
   色だけ統一する
========================================= */

input,
textarea,
select {
  color:
    var(--aanem-text);

  border-color:
    rgba(142, 197, 255, .24);
}

input:focus,
textarea:focus,
select:focus {
  border-color:
    var(--aanem-blue) !important;
}

/* =========================================
   Dialog / Modal

   新規フォルダ・新規ファイルなどを
   File Browser標準レイアウトのまま維持
========================================= */

dialog,
.modal,
.modal-content {
  color:
    var(--aanem-text) !important;

  background:
    #0c1734 !important;

  border:
    1px solid rgba(142, 197, 255, .22) !important;

  border-radius:
    16px !important;
}

/* モーダル内フォーム */

dialog input,
dialog textarea,
dialog select,
.modal input,
.modal textarea,
.modal select,
.modal-content input,
.modal-content textarea,
.modal-content select {
  background:
    #15264e !important;

  color:
    var(--aanem-text) !important;

  border:
    1px solid rgba(142, 197, 255, .25) !important;

  border-radius:
    8px !important;
}

/* モーダル内ボタン
   サイズ・positionなどは変更しない */

dialog button,
.modal button,
.modal-content button {
  color:
    inherit;
}

/* =========================================
   Login
========================================= */

#login {
  min-height:
    100vh !important;

  background:
    radial-gradient(
      circle at 50% 18%,
      rgba(82, 111, 255, .28),
      transparent 32%
    ),
    radial-gradient(
      circle at 50% 90%,
      rgba(171, 104, 255, .18),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #07112f,
      #11194c 55%,
      #17184a
    ) !important;
}

#login form {
  background:
    rgba(7, 16, 45, .76) !important;

  border:
    1px solid rgba(142, 197, 255, .22) !important;

  border-radius:
    22px !important;

  padding:
    30px !important;

  box-shadow:
    0 24px 65px rgba(0, 0, 0, .34) !important;
}

#login h1,
#login h2 {
  color:
    #f3f6ff !important;
}

#login input {
  background:
    #162850 !important;

  color:
    #eef4ff !important;

  border:
    1px solid rgba(142, 197, 255, .28) !important;

  border-radius:
    10px !important;
}

#login button[type="submit"] {
  background:
    linear-gradient(
      135deg,
      #6faaff,
      #ae76ff
    ) !important;

  color:
    #ffffff !important;

  border:
    0 !important;

  border-radius:
    10px !important;

  font-weight:
    700 !important;
}

/* =========================================
   Progress
========================================= */

progress {
  background:
    rgba(255, 255, 255, .08) !important;
}

progress::-webkit-progress-value {
  background:
    linear-gradient(
      90deg,
      var(--aanem-blue),
      var(--aanem-purple)
    ) !important;
}

/* =========================================
   Scrollbar
========================================= */

::-webkit-scrollbar {
  width:
    10px;
}

::-webkit-scrollbar-track {
  background:
    #050a1d;
}

::-webkit-scrollbar-thumb {
  background:
    #263d72;

  border-radius:
    999px;
}

::-webkit-scrollbar-thumb:hover {
  background:
    #395798;
}

/* =========================================
   Selection
========================================= */

::selection {
  background:
    var(--aanem-blue);

  color:
    #071126;
}