/*
 * IKnowICT brand overrides for the Roundcube Elastic skin.
 *
 * IMPORTANT: When Roundcube sees this file at skins/iknowict/styles/styles.css
 * it uses it as the skin's primary stylesheet and STOPS loading Elastic's
 * own styles.min.css. We have to pull Elastic's compiled CSS in ourselves
 * before our overrides, or the page renders unstyled.
 *
 * Elastic compiles its color theme from LESS into hardcoded hex values,
 * so this file does NOT redefine the LESS vars (Elastic wouldn't read
 * them) — it overrides the compiled selectors directly. The brand palette
 * matches iknowict-finance-app/src/theme/tokens.ts and panel legal pages:
 *
 *   PRIMARY (navy)   #173240  — sidebar, CTAs, focus rings, links
 *   primary deep     #0E1C24  — gradients, hover
 *   primary lite     #2A4E62
 *   primary soft     #E8EDF0  — selected-row tint
 *   ACCENT (orange)  #ed7d31  — used sparingly: unread badges, hero rails,
 *                               login submit button (NOT general primary)
 *   accent lite      #f59f5f
 *
 * Elastic uses these brand-blue hex values that we override:
 *   #37beff (50x)         → #173240   primary actions / focus / selection
 *   #2f3a3f (taskmenu bg) → #173240
 */

@import url("../../elastic/styles/styles.min.css");
@import url("../../elastic/styles/print.min.css") print;

:root {
    --iki-primary:        #173240;
    --iki-primary-deep:   #0E1C24;
    --iki-primary-lite:   #2A4E62;
    --iki-primary-soft:   #E8EDF0;
    --iki-accent:         #ed7d31;
    --iki-accent-lite:    #f59f5f;
    --iki-bg:             #F4F6F9;
    --iki-surface:        #FFFFFF;
    --iki-border:         #EAEDF2;
    --iki-text:           #1A2330;
    --iki-text-muted:     #5C6573;
}

/* === Taskmenu / left sidebar (was Elastic dark #2f3a3f) === */
#layout-menu,
#rcmdraglayer,
#taskmenu .special-buttons {
    background-color: var(--iki-primary) !important;
}

#layout-menu .popover-header {
    background-color: var(--iki-primary-deep) !important;
}

#taskmenu .button.selected,
#taskmenu .button:hover {
    background-color: var(--iki-primary-lite) !important;
}

/* Highlight the compose / new-action button with the orange accent — this
 * is the one spot orange genuinely earns its keep. */
#taskmenu .action-buttons a,
.floating-action-buttons a.button {
    background-color: var(--iki-accent) !important;
    border-color: var(--iki-accent) !important;
}
#taskmenu .action-buttons a:hover,
.floating-action-buttons a.button:hover {
    background-color: var(--iki-accent-lite) !important;
}

/* === Primary buttons (was Elastic #37beff) === */
.btn-primary,
.formbuttons .button.mainaction {
    background-color: var(--iki-primary) !important;
    border-color: var(--iki-primary) !important;
    color: #fff !important;
}
.btn-primary:hover,
.formbuttons .button.mainaction:hover,
.btn-primary:focus,
.formbuttons .button.mainaction:focus {
    background-color: var(--iki-primary-lite) !important;
    border-color: var(--iki-primary-lite) !important;
}
.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--iki-primary-soft) !important;
    border-color: var(--iki-primary-soft) !important;
    color: var(--iki-text-muted) !important;
}

/* === Form focus rings === */
.form-control:focus,
.input-group-text input:focus,
.multi-input > .content.focused,
.recipient-input.focus,
.tagedit-list[tabindex="-1"] {
    border-color: var(--iki-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(23, 50, 64, 0.18) !important;
}

.custom-switch .custom-control-input:focus:not(:checked) ~ .custom-control-label::before,
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--iki-primary) !important;
    border-color: var(--iki-primary) !important;
}

/* === Selection / hover states (was tint of #37beff = #ebf7ff) === */
.popupmenu .listing li.selected,
.popupmenu .listing li > a:not(.disabled):hover,
.popover .menu li a:not(.disabled):hover,
.popover .menu .dropbutton a.dropdown:hover {
    background-color: var(--iki-primary-soft) !important;
    color: var(--iki-primary) !important;
}

.listing tr.selected > td,
.listing li.selected,
.listing tr[aria-selected="true"] > td {
    background-color: var(--iki-primary-soft) !important;
    border-color: var(--iki-primary-soft) !important;
}

/* === Unread badges (orange accent) === */
.folderlist li.mailbox .unreadcount,
.folderlist li.mailbox.recent > a > .unreadcount {
    background-color: var(--iki-accent) !important;
    color: #fff !important;
}

/* === Quota widget bar (orange accent) === */
.quota-widget .value {
    background-color: var(--iki-accent) !important;
}

/* === jQuery UI integration === */
.ui-menu .ui-state-active,
.ui-slider .ui-slider-handle.ui-state-active,
.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,
.ui-datepicker a.ui-state-active {
    background-color: var(--iki-primary) !important;
    border-color: var(--iki-primary) !important;
    color: #fff !important;
}

.ui.alert.alert-info,
#messagestack .alert-info.information {
    background-color: var(--iki-primary-soft) !important;
    border-color: var(--iki-primary) !important;
    color: var(--iki-primary) !important;
}
.ui.alert a:not(.btn) {
    color: var(--iki-primary) !important;
}

a, a:visited { color: var(--iki-primary); }
a:hover { color: var(--iki-primary-deep); }

/* === Login page hero treatment === */
body.task-login {
    background:
        radial-gradient(at top right, rgba(237, 125, 49, 0.18), transparent 55%),
        linear-gradient(135deg, var(--iki-primary-deep) 0%, var(--iki-primary) 60%, var(--iki-primary-lite) 100%) !important;
    min-height: 100vh;
}

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

body.task-login #logo {
    top: 6vh !important;
    max-height: 64px !important;
    margin-bottom: 12px;
    /* The IKnowICT logo uses dark grey strokes + orange accents; on the
     * navy background we invert it to white. The orange-accent strokes
     * become white too — acceptable trade-off for clean readability. */
    filter: brightness(0) invert(1);
}

body.task-login #login-form {
    background: var(--iki-surface);
    border-radius: 16px;
    box-shadow: 0 28px 56px rgba(14, 28, 36, 0.45);
    padding: 32px 32px 28px;
    max-width: 380px !important;
    width: 92% !important;
    top: 8vh !important;
}

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

body.task-login #login-form input[type="text"],
body.task-login #login-form input[type="password"],
body.task-login #login-form .form-control {
    border-radius: 10px !important;
    border: 1px solid var(--iki-border) !important;
    padding: 11px 12px !important;
    font-size: 15px !important;
    background: #fff !important;
}

/* Single CTA on the login page is the right place for the orange accent. */
body.task-login #login-form button[type="submit"],
body.task-login #login-form .formbuttons .button.mainaction {
    background-color: var(--iki-accent) !important;
    border-color: var(--iki-accent) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
    width: 100%;
    margin-top: 6px;
    transition: background-color 140ms ease;
}
body.task-login #login-form button[type="submit"]:hover,
body.task-login #login-form .formbuttons .button.mainaction:hover {
    background-color: var(--iki-accent-lite) !important;
    border-color: var(--iki-accent-lite) !important;
}

body.task-login #login-footer {
    color: rgba(255, 255, 255, 0.78);
    text-align: center;
    margin-top: 16px;
    font-size: 13px;
}
body.task-login #login-footer .support-link,
body.task-login #login-footer a {
    color: var(--iki-accent-lite);
    text-decoration: none;
}
body.task-login #login-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

/* Language switcher injected by ui.js — restyle for dark login bg. */
body.task-login .iknowict-locale-switch {
    color: rgba(255, 255, 255, 0.7);
    margin-top: 14px;
}
body.task-login .iknowict-locale-switch a {
    color: rgba(255, 255, 255, 0.85);
}
body.task-login .iknowict-locale-switch a:hover {
    color: var(--iki-accent-lite);
}
body.task-login .iknowict-locale-switch a.active {
    color: var(--iki-accent);
    font-weight: 600;
}