/* ============================================================================
   PET brand skin for Roundcube (Elastic) — HAND-WRITTEN portion.
   Design system: PET-COLABORATION (forest green #097452, Raleway).
   Loaded on EVERY page (login + webmail) by the pet_header plugin.
   The generated accent-recolor block (Elastic #37beff -> PET green) is appended
   below this in the deployed pet-theme.css. Regenerate with gen-accent.sh.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap');

:root{
  --pet-primary:#097452; --pet-primary-hover:#07573E; --pet-primary-active:#07412E;
  --pet-green-100:#DCEFE9;
}

/* Raleway across the whole webmail (design-system body font) */
body, input, select, textarea, button,
.form-control, .btn, #login-form label{
  font-family:'Raleway', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ===================== LOGIN PAGE ===================== */
body.task-login{
  background:
    linear-gradient(135deg, rgba(7,65,46,.74) 0%, rgba(7,87,62,.58) 45%, rgba(9,116,82,.50) 100%),
    url("login-bg.jpg") center/cover no-repeat !important;
  background-attachment:fixed !important;
}
body.task-login #layout,
body.task-login #layout-content{
  background:transparent !important; box-shadow:none !important;
}

/* PET leaf mark (design-system leaf motif), inline SVG — reads on the green bg */
.task-login #logo{
  content:url("pet-wordmark.png");
  width:230px; height:auto; margin:0 auto 22px; display:block;
  border-radius:16px;
  box-shadow:0 12px 30px rgba(4,20,14,.38);
}

/* Glass card = the login form */
#login-form.propform{
  max-width:380px; margin:0 auto; padding:34px 30px 30px;
  background:rgba(255,255,255,.12) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid rgba(255,255,255,.35);
  border-radius:22px;
  box-shadow:0 18px 48px rgba(4,20,14,.38);
}
#login-form label{
  color:#EAF5EF; font-weight:600; font-size:12px;
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px;
}
#login-form .form-control{
  background:rgba(255,255,255,.96); color:#1a1f1c;
  border:1px solid rgba(255,255,255,.5); border-radius:10px;
  height:44px; padding:0 14px; font-size:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
#login-form .form-control:focus{
  background:#fff; border-color:var(--pet-green-100);
  box-shadow:0 0 0 3px rgba(34,180,134,.45);
}
#login-form .form-control::placeholder{ color:#7c8a83; }

/* Primary submit */
#login-form #rcmloginsubmit, #login-form button.mainaction{
  width:100%; height:46px; margin-top:20px;
  background:var(--pet-primary) !important; border:none; border-radius:10px;
  color:#fff !important; font-weight:700; font-size:14px; letter-spacing:.02em;
  box-shadow:0 6px 16px rgba(7,65,46,.35);
  transition:background .15s ease, transform .05s ease;
}
#login-form #rcmloginsubmit:hover, #login-form button.mainaction:hover{
  background:var(--pet-primary-hover) !important;
}
#login-form #rcmloginsubmit:active{ transform:translateY(1px); }

/* SSO button ("Login with Akun PET") — the encouraged path */
#login-form #rcmloginoauth, #login-form a.oauth, #login-form .oauthlogin{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:46px; margin-top:12px;
  background:rgba(255,255,255,.94); color:var(--pet-primary-active);
  border:1px solid rgba(255,255,255,.6); border-radius:10px;
  font-weight:700; font-size:14px; text-decoration:none;
  box-shadow:0 6px 16px rgba(4,20,14,.18);
}
#login-form #rcmloginoauth:hover, #login-form a.oauth:hover{
  background:#fff; color:var(--pet-primary);
}

#login-footer, .task-login #login-footer{ color:rgba(234,245,239,.78); }
#login-footer a{ color:#fff; }
.task-login #messagestack .alert{ border-radius:10px; }

/* ===================== APP CHROME accent (generated by gen-accent.sh) ===================== */
p.image-attachment{position:relative;border:1px solid #ddd;border-radius:.3rem;background-color:rgba(9,116,82,.05);float:left;margin:.5rem;min-width:47%;min-height:250px;overflow:hidden;display:flex;justify-content:center}
.quota-widget .value{display:block;background-color:#097452;height:1rem;opacity:.75}
.image-tools{position:absolute;top:5rem;left:0;height:58px;overflow:hidden;transform:translateX(-87%);transition:transform .3s ease-in-out;background-color:rgba(9,116,82,.4);border-radius:0 .3rem .3rem 0}
.image-tools a:focus,.image-tools a:hover{background-color:rgba(9,116,82,.5)!important;outline:0}
.floating-action-buttons a.button{display:block;float:left;width:4rem;height:4rem;border-radius:50%;background:#097452;color:#fff;opacity:.95;box-shadow:0 0 5px 5px #DCEFE9;margin:0 1rem 1rem 0}
.btn:focus{box-shadow:0 0 0 .2rem rgba(9,116,82,.3)}
.btn-primary{color:#fff;background:#097452;border-color:#097452}
.btn-primary:focus{background:#129269;border-color:#129269;box-shadow:0 0 0 .2rem rgba(9,116,82,.5)}
.btn-primary:hover{background:#129269;border-color:#129269}
.btn-primary.disabled,.btn-primary:disabled{background:#097452;border-color:#097452}
.btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus{box-shadow:0 0 0 .2rem rgba(9,116,82,.53)}
.ui-menu .ui-state-active{border:0!important;background-color:#097452!important}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link:focus{background-color:rgba(9,116,82,.5)}
.ui-slider .ui-slider-range{border-radius:.3rem;background:#DCEFE9}
.ui-slider .ui-slider-handle.ui-state-active{background:#097452;border-color:#07573e}
.ui-datepicker .ui-datepicker-days-cell-over a,.ui-datepicker .ui-datepicker-days-cell-over a.ui-state-default,.ui-datepicker .ui-state-highlight,.ui-datepicker.ui-widget-content .ui-state-highlight{background:#DCEFE9;color:#097452}
.ui-datepicker a.ui-state-active{background:#097452!important;color:#fff!important;font-weight:700}
html.layout-phone .popover-header,html.layout-small .popover-header{display:block;border-radius:0;border:0;padding:0 .5em;height:58px;min-height:58px;line-height:58px;font-size:16px;color:#fff;background-color:#07573e}
.popover .menu li a:not(.disabled):hover{color:#fff;background-color:#097452}
.popover .menu .dropbutton a.dropdown:hover{background-color:#097452}
#taskmenu .action-buttons a{color:#097452;background:0 0}
#taskmenu .action-buttons a:hover{color:#097452;background:#45555c}
.ui.alert{margin:0;margin-bottom:.2rem;opacity:.95;width:100%;padding:.75em;color:#2c363a;border:1px solid transparent;background-color:rgba(9,116,82,.05);display:flex;align-items:center}
.ui.alert a:not(.btn){color:#097452;font-weight:400}
.ui.alert.boxinformation{background-color:rgba(9,116,82,.2)}
#messagestack .alert-info.information{background-color:#097452}
.popupmenu .listing li>a:not(.disabled):hover{color:#fff;background-color:#097452}
.popupmenu .listing li.selected{color:#fff;background-color:#097452}
.folderlist li.mailbox .unreadcount{position:absolute;top:0;right:0;min-width:2em;line-height:1.4rem;margin:7.7px;padding:0 .3em;border-radius:.4em;background:#097452;color:#fff;text-align:center;font-weight:700}
.folderlist li.mailbox.recent>a>.unreadcount{background:#097452;color:#fff}
.formcontent.raweditor .CodeMirror-focused{border-color:#097452;box-shadow:0 0 0 .2rem rgba(9,116,82,.25)}
.input-group a:focus{background-color:rgba(9,116,82,.25);outline:0}
.multi-input>.content.focused{border-color:#097452;box-shadow:0 0 0 .2rem rgba(9,116,82,.25)}
.recipient-input.focus{border-color:#097452;box-shadow:0 0 0 .2rem rgba(9,116,82,.25)}
.tagedit-list[tabindex="-1"]{border-color:#097452;box-shadow:0 0 0 .2rem rgba(9,116,82,.25)}
.form-control:focus{color:#2c363a;border-color:#097452;box-shadow:0 0 0 .2rem rgba(9,116,82,.25)}
.input-group-text input:focus{z-index:1;border-color:#097452!important}
.custom-switch .custom-control-input:focus~.custom-control-label:before{box-shadow:0 0 0 .2rem rgba(9,116,82,.25)}
.custom-switch .custom-control-input:focus:not(:checked)~.custom-control-label::before{border-color:#097452}
.custom-switch .custom-control-input:checked~.custom-control-label::before{border-color:#097452;background-color:#097452}
.custom-file-input:focus~.custom-file-label{border-color:#097452;box-shadow:0 0 0 .2rem rgba(9,116,82,.25)}
div.tox.focused{border-color:#097452!important;box-shadow:0 0 0 .2rem rgba(9,116,82,.25)!important}
div.tox .tox-dialog__footer .tox-button{color:#fff;background:#097452;border-color:#097452;font-weight:400;padding:.5rem .75rem}
div.tox .tox-dialog__footer .tox-button:focus{background:#129269;border-color:#129269;box-shadow:0 0 0 .2rem rgba(9,116,82,.5)}
div.tox .tox-dialog__footer .tox-button:hover{background:#129269;border-color:#129269}
div.tox .tox-dialog__footer .tox-button.disabled,div.tox .tox-dialog__footer .tox-button:disabled{background:#097452;border-color:#097452}
div.tox .tox-dialog__footer .tox-button:not(:disabled):not(.disabled).active:focus,div.tox .tox-dialog__footer .tox-button:not(:disabled):not(.disabled):active:focus{box-shadow:0 0 0 .2rem rgba(9,116,82,.53)}
div.tox .tox-dialog__footer .tox-button:focus:not(:disabled){background:#097452;border-color:#097452}
div.tox .tox-color-input>input:focus,div.tox .tox-listboxfield .tox-listbox--select:focus,div.tox .tox-textarea:focus,div.tox .tox-textfield:focus{border-color:#097452;box-shadow:0 0 0 .2rem rgba(9,116,82,.25)}
.googie_list li.googie_list_onhover{color:#fff;background-color:#097452}
.message-htmlpart blockquote,.message-part blockquote{overflow:hidden;text-overflow:ellipsis;color:#07573e;border-left:2px solid #07573e;border-right:2px solid #07573e;background-color:rgba(241,243,244,.5);margin:2px 0;padding:0 .4em}
html.dark-mode #taskmenu .action-buttons a{color:#097452}
html.dark-mode .listing li.selected,html.dark-mode .listing li.selected>a,html.dark-mode .listing li.selected>div>a,html.dark-mode .listing tr.selected td{color:#097452;background-color:#374549}
html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject a,html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject span.msgicon.status{color:#097452}
html.dark-mode .btn-primary{background-color:#07573e;color:#e2e8e9}
html.dark-mode .floating-action-buttons a.button{box-shadow:none;background:#07573e}
html.dark-mode .custom-file-label:focus:not(.is-invalid),html.dark-mode .form-control:focus:not(.is-invalid){color:#e2e7e9!important;border-color:#097452}
html.dark-mode .custom-switch .custom-control-input:checked~.custom-control-label::before{background-color:#07573e}
html.dark-mode .multi-input:not(.is-invalid)>.content.focused{border-color:#097452}
html.dark-mode .input-group a:focus{border-color:#097452;box-shadow:0 0 0 .2rem rgba(9,116,82,.25);z-index:1}
html.dark-mode .recipient-input.focus{color:#e2e7e9;background-color:#2c373b;border-color:#097452}
html.dark-mode .formcontent.raweditor .CodeMirror-focused{background-color:#2c373b;border-color:#097452}
html.dark-mode .tox .tox-dialog__footer .tox-button{background-color:#07573e;color:#e2e8e9}
html.dark-mode .tox .tox-dialog__footer .tox-button:focus:not(:disabled){background-color:#07573e}
html.dark-mode .tox .tox-dialog__body-nav-item--active{color:#097452}
html.dark-mode .tox .tox-collection__item--enabled{color:#097452;background-color:#374549}
html.dark-mode .ui-datepicker .ui-state-highlight,html.dark-mode .ui-datepicker.ui-widget-content .ui-state-highlight{color:#097452;background-color:#374549}

/* ===================== INTERIOR CHROME — PET-green app rail =====================
   Elastic's dark left column (#taskmenu) is NOT the accent color, so the accent
   recolor above leaves it grey. Paint the rail + its states PET-green here.
   Targeted selectors only — #2c363a doubles as body TEXT color, so never blanket-swap it. */
#layout #taskmenu, #taskmenu{ background:#07412E !important; }
#taskmenu a{ border-bottom-color:rgba(255,255,255,.08) !important; }
#taskmenu a.selected, #taskmenu a.selected:hover,
#taskmenu a:hover, #taskmenu a:focus{ background:#097452 !important; color:#fff !important; }
#taskmenu .special-buttons{ background-color:#07573E !important; }
#taskmenu .action-buttons a{ color:#DCEFE9 !important; background:0 0 !important; }
#taskmenu .action-buttons a:hover{ color:#fff !important; background:#097452 !important; }
#taskmenu a.logout, #taskmenu a.logout:hover{ color:#ffd3d0 !important; }
html.dark-mode #taskmenu a.selected, html.dark-mode #taskmenu a:hover{ background:#097452 !important; }