/*
 * Old Ithaki child skin for Roundcube Elastic.
 * Visual overrides only: no component is hidden or functionally replaced.
 */

:root {
  --oi-ink: #1b1b17;
  --oi-ink-soft: #26251f;
  --oi-gold: #bd8520;
  --oi-gold-bright: #d6a43a;
  --oi-gold-wash: #f5ead2;
  --oi-cream: #f8f5ef;
  --oi-paper: #fffdf9;
  --oi-line: #e5dfd3;
  --oi-muted: #746f66;
  --oi-shadow: 0 12px 36px rgba(35, 29, 18, .09);
}

html,
body {
  color: var(--oi-ink);
}

a,
.listing li > a,
.listing tbody td a {
  text-underline-offset: .18em;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  box-shadow: 0 0 0 3px rgba(189, 133, 32, .3) !important;
  outline: 2px solid var(--oi-gold) !important;
  outline-offset: 1px;
}

/* Login */

body.task-login {
  background:
    radial-gradient(circle at 15% 10%, rgba(214, 164, 58, .2), transparent 31rem),
    radial-gradient(circle at 90% 100%, rgba(189, 133, 32, .12), transparent 28rem),
    linear-gradient(135deg, #fbf8f2 0%, #f4eee3 100%);
}

body.task-login::before {
  background-image:
    linear-gradient(rgba(189, 133, 32, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(189, 133, 32, .055) 1px, transparent 1px);
  background-size: 42px 42px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(to bottom right, #000, transparent 65%);
  opacity: .58;
  pointer-events: none;
  position: fixed;
}

.task-login #layout-content {
  align-items: center;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  overflow: auto;
  padding: clamp(1.25rem, 4vh, 3rem) 1rem;
}

.task-login .oldithaki-login-brand {
  margin: 0 auto 1.35rem;
  position: relative;
  text-align: center;
  width: min(88vw, 360px);
  z-index: 1;
}

.task-login #logo {
  display: block !important;
  height: auto !important;
  left: auto !important;
  margin: 0 auto !important;
  max-height: none !important;
  max-width: 300px;
  position: static !important;
  top: auto !important;
  width: min(74vw, 300px);
}

.oldithaki-login-kicker {
  color: var(--oi-gold);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .27em;
  margin: .65rem 0 .18rem;
}

.oldithaki-login-title {
  color: var(--oi-muted);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .09em;
  margin: 0;
  text-transform: uppercase;
}

.task-login #login-form {
  background: rgba(255, 253, 249, .94);
  border: 1px solid rgba(189, 133, 32, .25);
  border-radius: 22px;
  box-shadow: var(--oi-shadow);
  margin: 0 auto;
  max-width: 410px;
  padding: clamp(1.35rem, 4vw, 2.15rem);
  position: relative;
  top: auto;
  width: min(92vw, 410px);
  z-index: 1;
}

.task-login #login-form .form-group {
  margin-bottom: 1rem;
}

.task-login #login-form label {
  color: #4d4942;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .025em;
}

.task-login #login-form .form-control {
  background-color: #fff;
  border: 1px solid #d8d0c3;
  border-radius: 12px;
  min-height: 48px;
  padding-left: .95rem;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.task-login #login-form .form-control:hover {
  border-color: #bdb3a2;
}

.task-login #login-form .form-control:focus {
  border-color: var(--oi-gold);
  box-shadow: 0 0 0 3px rgba(189, 133, 32, .16);
}

.task-login #rcmloginsubmit,
.btn-primary {
  background: linear-gradient(135deg, var(--oi-gold-bright), var(--oi-gold));
  border-color: var(--oi-gold);
  border-radius: 11px;
  box-shadow: 0 7px 18px rgba(144, 94, 13, .18);
  color: #17130c;
  font-weight: 800;
  min-height: 44px;
}

.task-login #rcmloginsubmit:hover,
.task-login #rcmloginsubmit:focus,
.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, #e0b24f, #c59027);
  border-color: #af7718;
  color: #17130c;
}

.task-login #login-footer {
  color: var(--oi-muted);
  font-size: .75rem;
  margin-top: 1rem;
}

.task-login #login-footer > div {
  background: transparent;
  margin-top: .5rem;
  padding: .5rem 0 0;
}

/* App shell and navigation */

#layout-menu {
  background: linear-gradient(180deg, #191915, #11110f) !important;
  border-right: 1px solid rgba(214, 164, 58, .28);
}

#layout-menu .popover-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(214, 164, 58, .16);
}

#layout-menu .popover-header img {
  max-height: 72px;
  object-fit: contain;
  padding: .55rem .5rem;
}

#taskmenu.menu.toolbar a {
  border-radius: 10px;
  color: #d9d4ca;
  margin: .13rem .35rem;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

#taskmenu.menu.toolbar a:hover,
#taskmenu.menu.toolbar a:focus {
  background: rgba(214, 164, 58, .12);
  color: #f4dfad;
}

#taskmenu.menu.toolbar a.selected {
  background: linear-gradient(135deg, rgba(214, 164, 58, .27), rgba(189, 133, 32, .16));
  box-shadow: inset 3px 0 0 var(--oi-gold-bright);
  color: #f5d98e;
}

#taskmenu.menu.toolbar .compose {
  background: linear-gradient(135deg, var(--oi-gold-bright), var(--oi-gold));
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
  color: #17130c;
}

#taskmenu.menu.toolbar .compose:hover,
#taskmenu.menu.toolbar .compose:focus {
  background: linear-gradient(135deg, #e2b654, #c58d24);
  color: #17130c;
  transform: translateY(-1px);
}

#layout-sidebar,
#layout-list,
#layout-content {
  background-color: var(--oi-paper);
}

#layout-sidebar,
#layout-list {
  border-color: var(--oi-line);
}

#layout > div > .header {
  background: rgba(255, 253, 249, .96);
  border-bottom: 1px solid var(--oi-line);
  box-shadow: 0 2px 12px rgba(35, 29, 18, .035);
}

#layout > div > .header .header-title,
#layout > div > .header .username {
  color: #3d3932;
  font-weight: 700;
}

.searchbar {
  background: #fbf8f2;
  border-bottom-color: var(--oi-line);
}

.searchbar input,
.form-control,
.custom-select {
  border-radius: 9px;
}

.listing li > a,
.listing tbody td {
  border-color: #eee9df;
}

.listing li > a:hover,
.listing tbody tr:hover > td {
  background-color: #fbf4e5;
}

.listing li.selected > a,
.listing tbody tr.selected > td {
  background-color: var(--oi-gold-wash);
  color: #3a2c12;
}

.folderlist li.selected > a {
  box-shadow: inset 3px 0 0 var(--oi-gold);
}

.messagelist tr.unread > td {
  color: #231d13;
}

.messagelist tr.unread > td.subject span.subject {
  font-weight: 750;
}

.menu.toolbar a:not(.disabled):hover,
.toolbar a.button:not(.disabled):hover {
  color: var(--oi-gold);
}

.popupmenu,
.popover,
.ui-dialog {
  border-color: #ddd4c4;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(29, 24, 15, .18);
}

.popupmenu .listing li > a:hover,
.popupmenu .listing li.selected > a {
  background-color: var(--oi-gold-wash);
}

.badge,
.listing .unreadcount {
  background-color: var(--oi-gold);
  color: #17130c;
}

/* Dark mode keeps the same warm identity without reducing contrast. */

html.dark-mode {
  --oi-ink: #f2eee5;
  --oi-ink-soft: #ded8cc;
  --oi-gold: #d5a23b;
  --oi-gold-bright: #e1b456;
  --oi-gold-wash: #3a311f;
  --oi-cream: #1e1f1c;
  --oi-paper: #20211e;
  --oi-line: #393a34;
  --oi-muted: #bbb4a8;
}

html.dark-mode body.task-login {
  background:
    radial-gradient(circle at 15% 10%, rgba(214, 164, 58, .16), transparent 31rem),
    radial-gradient(circle at 90% 100%, rgba(189, 133, 32, .1), transparent 28rem),
    #141512;
}

html.dark-mode .task-login #login-form {
  background: rgba(31, 32, 28, .96);
  border-color: rgba(214, 164, 58, .28);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .35);
}

html.dark-mode .task-login #login-form label,
html.dark-mode .task-login #login-footer,
html.dark-mode .oldithaki-login-title {
  color: #c9c2b5;
}

html.dark-mode .task-login #login-form .form-control {
  background: #292a26;
  border-color: #46463f;
  color: #f2eee5;
}

html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #layout-content {
  background-color: #20211e;
}

html.dark-mode #layout > div > .header {
  background: rgba(31, 32, 29, .98);
  border-bottom-color: #393a34;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}

html.dark-mode #layout > div > .header .header-title,
html.dark-mode #layout > div > .header .username,
html.dark-mode .messagelist tr.unread > td {
  color: #f0eadf;
}

html.dark-mode .searchbar {
  background: #1c1d1a;
  border-bottom-color: #393a34;
}

html.dark-mode .listing li > a,
html.dark-mode .listing tbody td {
  border-color: #34352f;
}

html.dark-mode .listing li > a:hover,
html.dark-mode .listing tbody tr:hover > td {
  background-color: #2d2a22;
}

html.dark-mode .listing li.selected > a,
html.dark-mode .listing tbody tr.selected > td {
  background-color: #3a311f;
  color: #f5dfaa;
}

html.dark-mode .popupmenu,
html.dark-mode .popover,
html.dark-mode .ui-dialog {
  border-color: #4a493f;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .42);
}

/* Responsive refinements */

@media (max-width: 767px) {
  .task-login #layout-content {
    justify-content: flex-start;
    padding-top: max(1.2rem, env(safe-area-inset-top));
  }

  .task-login .oldithaki-login-brand {
    margin-bottom: .8rem;
  }

  .task-login #logo {
    width: min(62vw, 255px);
  }

  .task-login #login-form {
    border-radius: 17px;
    padding: 1.25rem;
  }

  #layout > div > .header {
    box-shadow: none;
  }

  #taskmenu.menu.toolbar a {
    border-radius: 9px;
  }
}

@media (max-width: 480px) {
  .oldithaki-login-kicker {
    margin-top: .4rem;
  }

  .task-login #login-form {
    width: 100%;
  }

  #layout-menu .popover-header img {
    max-height: 58px;
    max-width: 210px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}