/*
 * AksaTechs skin — inherits Elastic and rebrands it.
 *
 * Elastic ships only a minified build and compiles its dark theme into the same
 * file behind `html.dark-mode`, so everything here is written against tokens
 * that swap under that class. Nothing in skins/elastic or program/ is edited,
 * which keeps Roundcube upgradeable.
 */
@import url("../../elastic/styles/styles.min.css");

/* ------------------------------------------------------------------ *
 * Tokens
 * ------------------------------------------------------------------ */

:root {
  --ak-navy:        #101a2b;
  --ak-navy-soft:   #1b2740;
  --ak-accent:      #2f7de1;
  --ak-accent-2:    #0ea5a4;
  --ak-accent-dark: #2266c4;
  --ak-accent-soft: rgba(47, 125, 225, 0.11);

  --ak-canvas:      #eef1f6;   /* area behind cards */
  --ak-surface:     #ffffff;   /* cards, panes      */
  --ak-surface-2:   #f7f9fc;   /* inset areas       */
  --ak-text:        #16202f;
  --ak-text-soft:   #6b7a90;
  --ak-line:        #e3e8ef;
  --ak-line-soft:   #eef1f6;
  --ak-hover:       rgba(47, 125, 225, 0.065);
  --ak-shadow:      0 1px 2px rgba(16, 26, 43, .06), 0 8px 24px -12px rgba(16, 26, 43, .18);
  --ak-radius:      14px;
}

html.dark-mode {
  --ak-accent:      #5b9bf0;
  --ak-accent-2:    #2dd4bf;
  --ak-accent-dark: #3f83de;
  --ak-accent-soft: rgba(91, 155, 240, 0.16);

  --ak-canvas:      #0f151f;
  --ak-surface:     #171f2b;
  --ak-surface-2:   #1d2634;
  --ak-text:        #e6ebf3;
  --ak-text-soft:   #8f9db2;
  --ak-line:        #29323f;
  --ak-line-soft:   #212a36;
  --ak-hover:       rgba(91, 155, 240, 0.09);
  --ak-shadow:      0 1px 2px rgba(0, 0, 0, .34), 0 10px 30px -14px rgba(0, 0, 0, .6);
}

/* ================================================================== *
 * LOGIN
 * ================================================================== */

body.task-login {
  background:
    radial-gradient(1100px 620px at 12% -10%, rgba(47, 125, 225, 0.30), transparent 60%),
    radial-gradient(900px 560px at 92% 108%, rgba(14, 165, 164, 0.26), transparent 62%),
    linear-gradient(152deg, var(--ak-navy) 0%, var(--ak-navy-soft) 100%);
  background-attachment: fixed;
}

body.task-login::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 72%);
}

body.task-login #layout-content,
body.task-login #layout > .content { background: transparent !important; box-shadow: none !important; }

body.task-login #logo {
  display: block; width: 244px; max-width: 74vw; height: auto; margin: 0 auto 26px;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .34));
}

body.task-login #login-form {
  max-width: 396px; margin: 0 auto; padding: 30px 30px 26px;
  background: rgba(255, 255, 255, .985);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 16px;
  box-shadow: 0 24px 60px -18px rgba(4, 12, 28, .62), 0 2px 8px rgba(4, 12, 28, .20);
}

body.task-login #login-form::before {
  content: "Sign in to your mailbox";
  display: block; margin: 0 0 20px;
  font-size: 15px; font-weight: 650; color: #16202f; text-align: center;
}

body.task-login #login-form input.form-control,
body.task-login #login-form input[type="text"],
body.task-login #login-form input[type="password"] {
  height: 46px; padding: 0 14px; background: #f7f9fc;
  border: 1.5px solid #e3e8ef; border-radius: 10px;
  font-size: 14.5px; color: #16202f;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

body.task-login #login-form input:focus {
  background: #fff; border-color: #2f7de1;
  box-shadow: 0 0 0 4px rgba(47, 125, 225, .16); outline: none;
}

body.task-login #login-form button.mainaction,
body.task-login #login-form button[type="submit"] {
  width: 100%; height: 46px; margin-top: 6px;
  background: linear-gradient(180deg, #2f7de1 0%, #2266c4 100%);
  border: none; border-radius: 10px;
  font-size: 14.5px; font-weight: 650; color: #fff;
  box-shadow: 0 6px 16px -4px rgba(47, 125, 225, .55);
  transition: transform .12s, box-shadow .15s, filter .15s;
}
body.task-login #login-form button.mainaction:hover { filter: brightness(1.07); }
body.task-login #login-form button.mainaction:active { transform: translateY(1px); }

body.task-login #login-footer {
  margin-top: 20px; color: rgba(255, 255, 255, .62); font-size: 12.5px; text-align: center;
}

/* ================================================================== *
 * APP SHELL
 * ================================================================== */

body:not(.task-login) #layout { background: var(--ak-canvas); }

/* --- task rail ---------------------------------------------------- */

#layout-menu, #taskmenu {
  background: linear-gradient(180deg, var(--ak-navy) 0%, var(--ak-navy-soft) 100%);
  border-right: 1px solid rgba(255, 255, 255, .06);
}

#taskmenu a {
  color: rgba(255, 255, 255, .60);
  border-radius: 11px; margin: 3px 7px;
  transition: background .14s, color .14s;
}
#taskmenu a:hover { color: #fff; background: rgba(255, 255, 255, .08); }

#taskmenu a.selected {
  color: #fff;
  background: linear-gradient(135deg, rgba(47,125,225,.30), rgba(14,165,164,.22));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}
#taskmenu a.selected::before { color: #fff; }

#layout-menu .menu-header img, #taskmenu img.logo { max-width: 34px; height: auto; }

/* --- panes as cards ----------------------------------------------- */

#layout-sidebar, #layout-list, #layout-content {
  background: var(--ak-surface);
  border-color: var(--ak-line) !important;
}

#layout-sidebar > .header,
#layout-list > .header,
#layout-content > .header,
.header {
  background: var(--ak-surface);
  border-bottom: 1px solid var(--ak-line);
  color: var(--ak-text);
}

.header .header-title {
  font-weight: 660; letter-spacing: -.012em; color: var(--ak-text);
}

/* --- folder list -------------------------------------------------- */

#mailboxlist, .folderlist { padding: 8px; }

#mailboxlist li a, .folderlist li a {
  border-radius: 10px; margin-bottom: 2px;
  font-weight: 500; color: var(--ak-text);
  transition: background .14s, color .14s;
}
#mailboxlist li a:hover, .folderlist li a:hover { background: var(--ak-hover); }

#mailboxlist li.selected > a, .folderlist li.selected > a {
  background: var(--ak-accent-soft);
  color: var(--ak-accent);
  font-weight: 650;
  box-shadow: inset 2.5px 0 0 var(--ak-accent);
}

#mailboxlist li a span.unreadcount, .folderlist li a span.unreadcount {
  background: var(--ak-accent); color: #fff;
  border-radius: 999px; padding: 1px 8px;
  font-size: 11px; font-weight: 650; min-width: 20px; text-align: center;
}

.folderlist li.inbox > a:before   { color: var(--ak-accent); }
.folderlist li.junk a:before    { color: #e0a03a; }
.folderlist li.trash a:before   { color: #d1697f; }
.folderlist li.sent a:before    { color: var(--ak-accent-2); }
.folderlist li.drafts a:before  { color: #8e9ab8; }
.folderlist li.archive a:before { color: #8291a8; }

/* ================================================================== *
 * MESSAGE LIST
 * ================================================================== */

#messagelist, .messagelist { background: var(--ak-surface); }

#messagelist tbody tr, .messagelist tbody tr {
  border-bottom: 1px solid var(--ak-line-soft);
  transition: background .12s;
}
#messagelist tbody tr:hover { background: var(--ak-hover); }

#messagelist tbody tr td { padding-top: 9px; padding-bottom: 9px; }

/* Accent rail on the row itself. Putting it on a cell breaks in the grid
 * layout Elastic uses at narrow widths. */
#messagelist tbody tr.selected,
#messagelist tbody tr.selected > td { background: var(--ak-accent-soft); }
#messagelist tbody tr.selected > td:first-child { box-shadow: inset 3px 0 0 var(--ak-accent); }

/* Sender line reads first, subject second. */
#messagelist td.subject span.fromto,
#messagelist td.subject .fromto {
  font-weight: 620; color: var(--ak-text); font-size: 13.5px;
}
#messagelist td.subject span.subject {
  color: var(--ak-text-soft); font-weight: 500;
}
#messagelist tbody tr.unread td.subject span.subject {
  color: var(--ak-text); font-weight: 640;
}
#messagelist tbody tr.unread td.subject span.fromto { font-weight: 700; }

/* Unread marker.
 *
 * Elastic already renders its own indicator (span.msgicon.status.unread), so
 * do NOT add a second one with ::before — the list is a grid, and an extra
 * pseudo-element lands in the wrong cell and floats above the row. Style the
 * existing element instead. */
#messagelist td.subject span.msgicon.status.unread:before,
.messagelist td.subject span.msgicon.status.unread:before {
  color: var(--ak-accent);
}

#messagelist td.subject .date, .messagelist td.subject .date {
  color: var(--ak-text-soft); font-variant-numeric: tabular-nums; font-size: 12.5px;
}

#messagelist tbody tr.flagged td.subject span.subject { color: #d1697f; }

/* ================================================================== *
 * READING PANE — the main event
 * ================================================================== */

#layout-content .content.frame-content,
#messagecontframe {
  background: var(--ak-canvas);
}

/* Header block: subject, then sender identity, on its own surface. */
#message-header {
  background: var(--ak-surface);
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-radius);
  box-shadow: var(--ak-shadow);
  margin: 16px 16px 12px;
  padding: 20px 22px 16px;
  position: relative;
  overflow: hidden;
}

/* Signature AksaTechs accent along the top edge of the message card. */
#message-header::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--ak-accent) 0%, var(--ak-accent-2) 100%);
}

#message-header h2.subject {
  font-size: 21px;
  line-height: 1.32;
  font-weight: 680;
  letter-spacing: -.02em;
  color: var(--ak-text);
  margin: 4px 0 16px;
  padding: 0;
}

#message-header .header {
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

/* Avatar with a gradient ring — a small, distinctive detail. */
#message-header .contactphoto {
  width: 44px; height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: var(--ak-surface-2);
  padding: 2px;
  box-shadow: 0 0 0 2px var(--ak-accent-soft), 0 1px 3px rgba(0,0,0,.16);
}

#message-header .header-content { flex: 1; min-width: 0; }

#message-header .header-summary,
#message-header .header-headers { font-size: 13.5px; color: var(--ak-text-soft); }

#message-header .header-summary .adr,
#message-header .rcmContactAddress,
#message-header span.adr { color: var(--ak-text); }

#message-header .header-headers a,
#message-header .header-summary a { color: var(--ak-accent); text-decoration: none; }
#message-header .header-headers a:hover { text-decoration: underline; }

#message-header .header-links {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ak-line-soft);
  font-size: 12.5px;
}
#message-header .header-links a {
  color: var(--ak-text-soft);
  margin-right: 14px;
}
#message-header .header-links a:hover { color: var(--ak-accent); }

/* Body: its own card, generous padding, readable measure. */
#messagebody,
.message-part,
#messagecontframe {
  background: var(--ak-surface);
}

#messagebody {
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-radius);
  box-shadow: var(--ak-shadow);
  margin: 0 16px 16px;
  padding: 24px 26px 28px;
  /* Attachment previews (p.image-attachment) are float:left. Without a block
   * formatting context they do not add to this element's height and spill out
   * below the card's border. flow-root contains them with no side effects. */
  display: flow-root;
}

.message-part, .message-htmlpart {
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--ak-text);
}

/* Keep long paragraphs to a comfortable reading measure. */
.message-part > div, .message-part > p, .message-htmlpart > div {
  max-width: 78ch;
}

.message-part a { color: var(--ak-accent); }

.message-part blockquote {
  border-left: 3px solid var(--ak-accent);
  background: var(--ak-surface-2);
  border-radius: 0 8px 8px 0;
  margin: 12px 0;
  padding: 10px 14px;
  color: var(--ak-text-soft);
}

.message-part img { max-width: 100%; height: auto; border-radius: 6px; }

/* Attachments strip */
#attachment-list, .attachmentslist {
  margin: 0 16px 16px;
  padding: 12px 14px;
  background: var(--ak-surface);
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-radius);
  box-shadow: var(--ak-shadow);
}
#attachment-list li a, .attachmentslist li a {
  border-radius: 8px;
  color: var(--ak-text);
}
#attachment-list li a:hover { background: var(--ak-hover); }

/* ================================================================== *
 * CONTROLS
 * ================================================================== */

.toolbar a.button, .toolbar button {
  border-radius: 9px;
  transition: background .13s;
}
.toolbar a.button:hover, .toolbar button:hover { background: var(--ak-hover); }

.ui-dialog, .popupmenu, .ui-widget-content {
  border-radius: 12px !important;
  box-shadow: 0 20px 48px -16px rgba(4, 12, 28, .5) !important;
  border-color: var(--ak-line) !important;
  background: var(--ak-surface) !important;
}
.popupmenu li a:hover { background: var(--ak-hover); }

.searchbar input, #messagesearch {
  border-radius: 10px;
  border: 1.5px solid var(--ak-line);
  background: var(--ak-surface-2);
  color: var(--ak-text);
}
.searchbar input:focus {
  border-color: var(--ak-accent);
  box-shadow: 0 0 0 3px var(--ak-accent-soft);
}

.btn-primary, button.btn-primary, a.btn-primary {
  background-color: var(--ak-accent);
  border-color: var(--ak-accent);
  border-radius: 9px;
}
.btn-primary:hover, button.btn-primary:hover {
  background-color: var(--ak-accent-dark);
  border-color: var(--ak-accent-dark);
}

a, a:hover { color: var(--ak-accent); }

/* Floating compose button (mobile / narrow layouts) */
#layout-list .floating-action-buttons a.button,
.floating-action-buttons a.button.create,
a.button.floating {
  background-color: var(--ak-accent);
  box-shadow: 0 8px 20px -6px rgba(47, 125, 225, .6);
}

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: #6c7a8f transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background-color: #6c7a8f; border-radius: 8px;
  border: 3px solid transparent; background-clip: content-box;
}
html:not(.dark-mode) * { scrollbar-color: #c8d1de transparent; }
html:not(.dark-mode) *::-webkit-scrollbar-thumb { background-color: #c8d1de; }

/* ================================================================== *
 * RESPONSIVE
 * ================================================================== */

@media screen and (max-width: 1024px) {
  #message-header, #messagebody, #attachment-list { margin-left: 10px; margin-right: 10px; }
  #messagebody { padding: 18px 18px 22px; }
}

@media screen and (max-width: 480px) {
  body.task-login #login-form { max-width: none; margin: 0 14px; padding: 24px 20px 22px; }
  body.task-login #logo { max-width: 194px; }
  #message-header { padding: 16px 16px 14px; }
  #message-header h2.subject { font-size: 18px; }
  #messagebody { padding: 16px 16px 20px; }
  .message-part > div, .message-part > p { max-width: none; }
}