/* keylist95: the Win95 look of keylist.gg on top of Roundcube Elastic.
   Colours, bevels and the Comfortaa font are taken 1:1 from keylist/public/assets/pandeals/css (win95-combined, keylist.css). */

@font-face{font-family:"Comfortaa";font-style:normal;font-display:swap;font-weight:300 700;
  src:url("../fonts/comfortaa-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Comfortaa";font-style:normal;font-display:swap;font-weight:300 700;
  src:url("../fonts/comfortaa-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --surface:#c0c0c0; --button-highlight:#fff; --button-face:#dfdfdf; --button-shadow:#808080; --window-frame:#0a0a0a;
  --win-blue:#000080; --win-blue-light:#1084d0; --desktop-bg:#008080; --text-main:#000; --text-muted:#444; --inset-bg:#f8f8f8;
  --font-main:"Comfortaa",Tahoma,"MS Sans Serif",Arial,sans-serif;
  --raised:var(--button-highlight) var(--window-frame) var(--window-frame) var(--button-highlight);
  --sunken:var(--button-shadow) var(--button-highlight) var(--button-highlight) var(--button-shadow);
}

/* --- base --- */
html,body,button,input,select,textarea,.form-control,.btn,.popover,.ui-dialog{font-family:var(--font-main)!important}
body{background:var(--desktop-bg);color:var(--text-main)}
*{border-radius:0!important}
a{color:var(--win-blue)}

/* --- the three columns + left menu as Win95 windows --- */
#layout{background:var(--desktop-bg);padding:3px;gap:3px}
#layout-menu,#layout-sidebar,#layout-list,#layout-content{
  background:var(--surface)!important;border:2px solid!important;border-color:var(--raised)!important;
  box-shadow:inset -1px -1px var(--button-shadow),inset 1px 1px var(--button-face)!important;color:var(--text-main)}
#layout-menu{color:var(--text-main)}
#layout-menu .popover-header,#layout-menu #logo{background:transparent}
#layout-menu a,#layout-menu .special-buttons a{color:var(--text-main)!important}
#layout-menu a:before{color:var(--text-main)!important}
#layout-menu a.selected,#layout-menu a:hover,#layout-menu a:focus{background:var(--win-blue)!important;color:#fff!important}
#layout-menu a.selected:before,#layout-menu a:hover:before,#layout-menu a:focus:before{color:#fff!important}

/* window title bars (column headers) */
.header,#layout-sidebar>.header,#layout-list>.header,#layout-content>.header,.ui-dialog-titlebar,.popover-header{
  background:linear-gradient(90deg,var(--win-blue),var(--win-blue-light))!important;color:#fff!important;
  border:0!important;font-weight:700}
.header .header-title,.header a,.header a:before,.header .button,.header .button:before,.header .toolbar a,
.ui-dialog-titlebar .ui-dialog-title,.ui-dialog-titlebar .ui-dialog-titlebar-close,.ui-dialog-titlebar-close:before{color:#fff!important}
.header .searchbar,.header .searchbar input{background:#fff!important;color:var(--text-main)!important}
.header .searchbar{border:2px solid;border-color:var(--sunken)}

/* toolbar under the header: grey, black icons */
#layout-content>.header .menu.toolbar,.toolbar.menu{background:transparent}
#layout-content>.header .toolbar a,#layout-content>.header .toolbar a:before{color:#fff!important}
.footer,.pagenav,#layout-list .footer,#layout-sidebar .footer{background:var(--surface)!important;border-top:1px solid var(--button-shadow)!important}

/* --- lists (folders, messages, contacts, settings) on white sunken panes --- */
#folderlist-content,#messagelist-content,.scroller,#settings-sections,#addressbooks,#contacts-table,
.listing,.records-table{background:#fff}
#layout-sidebar .scroller,#layout-list .scroller{border:2px solid;border-color:var(--sunken);margin:2px}
.listing li,.records-table tr td{border-color:#e4e4e4!important}
.listing li.selected,.listing li.selected>a,.records-table tr.selected td,.records-table tr.selected td a,
.records-table tr.selected td span,.listing li.selected>a:before,.listing li.selected .unreadcount{
  background:var(--win-blue)!important;color:#fff!important}
.listing li.focused,.records-table tr.focused td{outline:1px dotted var(--text-main)}
.records-table tr.unread td{font-weight:700}
.unreadcount{background:var(--surface)!important;color:var(--text-main)!important;border:1px solid var(--button-shadow)}

/* --- buttons --- */
.btn,button,input[type=button],input[type=submit],input[type=reset],.button.btn,.formbuttons .btn,a.btn{
  background:var(--surface)!important;color:var(--text-main)!important;border:2px solid!important;border-color:var(--raised)!important;
  box-shadow:inset -1px -1px var(--button-shadow)!important;font-weight:700;text-shadow:none!important}
.btn:active,button:active,input[type=submit]:active,.btn.active{border-color:var(--sunken)!important;box-shadow:inset 1px 1px var(--button-shadow)!important}
.btn:focus,button:focus,.form-control:focus{outline:1px dotted var(--text-main)!important;outline-offset:-4px;box-shadow:inset -1px -1px var(--button-shadow)!important}
.btn.disabled,.btn:disabled{color:var(--button-shadow)!important}
.btn-primary,.mainaction,.btn.mainaction{background:var(--surface)!important}

/* --- inputs --- */
.form-control,input[type=text],input[type=password],input[type=email],input[type=search],select,textarea,.custom-select,
.input-group-text,.recipient-input{
  background:#fff!important;color:var(--text-main)!important;border:2px solid!important;border-color:var(--sunken)!important;box-shadow:none!important}
.input-group-text{background:var(--surface)!important}

/* --- content area, forms, dialogs, popups --- */
#layout-content .formcontent,#layout-content .content,.propform,.formcontent,#preferences-frame,#messagecontframe,#contact-frame{background:var(--surface)}
iframe.content-frame,#messagecontframe{background:#fff}
fieldset,legend{border-color:var(--button-shadow)}
legend{color:var(--win-blue);font-weight:700}
.ui-dialog,.popover,.popupmenu,.dropdown-menu{
  background:var(--surface)!important;border:2px solid!important;border-color:var(--raised)!important;
  box-shadow:inset -1px -1px var(--button-shadow),2px 2px 0 rgba(0,0,0,.35)!important}
.popover .popover-body,.popupmenu li a,.dropdown-menu a{color:var(--text-main)!important}
.popupmenu li a:hover,.popupmenu li a:focus,.dropdown-menu a:hover{background:var(--win-blue)!important;color:#fff!important}
.ui-dialog .ui-dialog-buttonpane{background:var(--surface);border-top:1px solid var(--button-shadow)}
.ui-widget-overlay{background:rgba(0,0,0,.35)}
.alert,.ui-alert,#messagestack div{border:2px solid;border-color:var(--raised);background:#fffacd;color:var(--text-main)}

/* --- login: one Win95 window on the teal desktop --- */
body.task-login{background:var(--desktop-bg)!important}
body.task-login #layout-content{background:transparent!important;border:0!important;box-shadow:none!important;
  display:flex!important;flex-direction:column;align-items:center!important;justify-content:center!important;padding:12px!important}
body.task-login #login-form{width:100%;max-width:420px;margin:auto!important;top:auto!important;padding:3px!important;background:var(--surface);
  border:2px solid;border-color:var(--raised);box-shadow:inset -1px -1px var(--button-shadow),inset 1px 1px var(--button-face),3px 3px 0 rgba(0,0,0,.4)}
#kl-titlebar{display:flex;align-items:center;gap:6px;padding:4px 8px;min-height:26px;margin-bottom:10px;
  background:linear-gradient(90deg,var(--win-blue),var(--win-blue-light));color:#fff;font-weight:700;font-size:14px}
body.task-login #logo{display:block;position:static!important;top:auto!important;left:auto!important;transform:none!important;
  width:72px;height:72px;margin:6px auto 12px!important;max-width:none}
body.task-login #login-form table{margin:0 12px;width:calc(100% - 24px)}
body.task-login #login-form .formbuttons{padding:8px 12px 12px}
body.task-login #login-form .formbuttons .btn{width:100%}
body.task-login #login-footer{color:var(--text-muted);background:transparent;margin:0 0 6px;text-align:center;font-size:11px}
body.task-login #login-footer a{color:var(--win-blue)}

/* --- phones: Elastic stacks the columns; keep the frames thin --- */
@media (max-width:768px){
  #layout{padding:0;gap:0}
  #layout-menu,#layout-sidebar,#layout-list,#layout-content{border-width:1px!important}
}