/* === PRINCETECH-CUSTOM-CSS BUILD v9 (2026-06-20) === if you can read this line in the served file, the latest CSS is live === */
/**
 * PrinceTech / Gmail-inspired enhancement layer for the Elastic skin.
 * Plain CSS, loaded AFTER the compiled skin stylesheet (see layout.html).
 * Two-tone sidebar (dark-blue rail + light-blue folder list), brand colour,
 * Gmail polish, and a cohesive dark mode. Palette is driven by CSS variables.
 */

:root {
    --pt-blue: #0047bc;
    --pt-blue-dark: #003a99;
    --pt-blue-tint: #e8f0fe;
    --pt-grey-bg: #f1f3f4;
    --pt-line: #e8eaed;

    /* task rail (first pane) — dark blue */
    --sb-bg: #0a2a63;
    --sb-text: #c9d6f0;
    --sb-icon: #8ea3cc;
    --sb-hover-bg: rgba(255, 255, 255, .08);
    --sb-hover-text: #ffffff;
    --sb-sel-bg: #1a5fe0;
    --sb-sel-text: #ffffff;
    --sb-sel-icon: #ffffff;
    --sb-logout: #ff6b68;

    /* folder list (second pane) — light blue */
    --fl-bg: #e8f0fe;
    --fl-text: #1f2a44;
    --fl-icon: #4a5e86;
    --fl-hover-bg: rgba(0, 71, 188, .10);
    --fl-hover-text: #003a99;
    --fl-sel-bg: #0047bc;
    --fl-sel-text: #ffffff;
    --fl-sel-icon: #ffffff;
    --fl-count: #0047bc;
    --fl-border: rgba(0, 71, 188, .14);

    --gmail-font: "Google Sans Text", "Google Sans", Roboto, -apple-system,
        BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    accent-color: var(--pt-blue);
}

/* ---------- Typography ---------- */
body, .listing, input, button, select, textarea, .menu li a {
    font-family: var(--gmail-font);
}

/* ---------- Logo ---------- */
#logo { max-height: 88px; }
html.dark-mode .task-login #logo { content: url("../images/logo-dark.png"); }

/* In-app rail header: show the square atom badge, never the wide wordmark */
#layout-menu .popover-header {
    height: auto !important;
    padding: 12px 0 8px !important;
    text-align: center;
}
#layout-menu .popover-header #logo,
#layout-menu .popover-header img {
    content: url("../images/app-icon.png") !important;
       min-width: 0 !important;
    padding: 0 !important;
    margin: 0 auto !important;
    border-radius: 11px !important;
  border: 1px solid #e3e6ea !important;
    background: #fff !important;
}

/* ---------- Brand colour: links & primary buttons ---------- */
a, a:active, .menu a.active, .listing li a.active { color: var(--pt-blue); }
a:hover { color: var(--pt-blue-dark); }

.btn-primary, #rcmloginsubmit.btn-primary, button.btn.btn-primary {
    background: var(--pt-blue); border-color: var(--pt-blue); color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--pt-blue-dark) !important;
    border-color: var(--pt-blue-dark) !important;
    box-shadow: 0 0 0 .2rem rgba(0, 71, 188, .25) !important;
}

.unreadcount, span.badge, .boxtitle .count {
    background-color: var(--pt-blue) !important; color: #fff !important;
}

.form-control:focus, input.form-control:focus,
textarea.form-control:focus, select.form-control:focus {
    border-color: var(--pt-blue);
    box-shadow: 0 0 0 .15rem rgba(0, 71, 188, .2);
}

/* ---------- Rounded inputs & buttons ---------- */
.form-control, input.form-control, select.form-control, textarea.form-control { border-radius: 8px; }
.btn, button.btn, a.btn { border-radius: 18px; font-weight: 500; letter-spacing: .01em; }

/* ---------- Content-side headers (white in light mode) ---------- */
html:not(.dark-mode) #layout-content > .header,
html:not(.dark-mode) #layout-list > .header,
html:not(.dark-mode) .header.boxtitle {
    background-color: #fff !important;
    border-bottom: 1px solid var(--pt-line);
    box-shadow: none;
}
/* folder-pane header (username) sits on the light-blue panel */
#layout-sidebar > .header {
    background-color: var(--fl-bg) !important;
    border-bottom: 1px solid var(--fl-border) !important;
    color: var(--fl-text) !important;
}
#layout-sidebar > .header .username,
#layout-sidebar > .header a { color: var(--fl-text) !important; }

/* ---------- Search: wide rounded pill ---------- */
.searchbar {
    border: 0 !important; border-radius: 24px;
    height: 42px; min-height: 42px; line-height: 42px;
    width: 100%; max-width: 720px; margin: .35rem auto; padding: 0 .4rem;
    transition: background-color .15s ease, box-shadow .15s ease; overflow: visible;
}
html:not(.dark-mode) .searchbar { background-color: var(--pt-grey-bg) !important; }
html:not(.dark-mode) .searchbar:focus-within {
    background-color: #fff !important; box-shadow: 0 1px 3px rgba(60, 64, 67, .28);
}
.searchbar form:before { color: #5f6368; }
.searchbar input { background: transparent; }

/* ---------- Compose: raised white pill ---------- */
#taskmenu .action-buttons a, .action-buttons a.compose {
    color: var(--pt-blue) !important; background: #fff !important;
    border: 1px solid #e3e6ea !important;
    padding: .5rem .3rem !important;
    box-shadow: 0 1px 2px rgba(60, 64, 67, .2), 0 1px 6px rgba(60, 64, 67, .15);
    transition: box-shadow .15s ease, background-color .15s ease;
}
#taskmenu .action-buttons a:hover, .action-buttons a.compose:hover {
    color: var(--pt-blue-dark) !important; background: var(--pt-blue-tint) !important;
    box-shadow: 0 1px 3px rgba(60, 64, 67, .3), 0 2px 10px rgba(60, 64, 67, .2);
}

/* ============================================================
   TWO-TONE SIDEBAR
   ============================================================ */
/* first pane — task rail (dark) */
#layout-menu, #layout-menu .popover-header,
#taskmenu .special-buttons, #layout-menu .special-buttons,
#layout-menu .special-buttons a:not(:focus) {
    background: var(--sb-bg) !important; background-color: var(--sb-bg) !important;
}
/* second pane — folder list (light blue) */
#layout-sidebar, #folderlist-content {
    background: var(--fl-bg) !important; background-color: var(--fl-bg) !important;
}
#layout-menu { border-right: 0 !important; }
#layout-sidebar { border-left: 0 !important; border-right: 1px solid var(--fl-border) !important; }

/* task-rail buttons */
#taskmenu a {
    color: var(--sb-text) !important; border-bottom: 0 !important;
    height: auto !important; padding: 4px 0 !important;margin: 0.5rem 0.1rem !important;
}
#taskmenu a:before { color: var(--sb-icon) !important; }
#taskmenu a:hover, #taskmenu a:focus {
    color: var(--sb-hover-text) !important; background: var(--sb-hover-bg) !important;
}
#taskmenu a:hover:before, #taskmenu a:focus:before { color: var(--sb-hover-text) !important; }
#taskmenu a.selected, #taskmenu a.selected:hover {
    color: var(--sb-sel-text) !important; background: var(--sb-sel-bg) !important;
}
#taskmenu a.selected:before { color: var(--sb-sel-icon) !important; }
#taskmenu a.logout, #taskmenu a.logout:hover, #taskmenu a.logout:before { color: var(--sb-logout) !important; }
#taskmenu { padding-top: 4px; }

/* ============================================================
   FOLDER LIST + any second-pane list (settings menu, contacts)
   ============================================================ */
#folderlist-content { padding-top: 6px; }
.folderlist { margin-top: 2px; }
.folderlist li ul, #mailboxlist li ul { padding-left: 1.1em; }

/* pill rows: flush-left, right-rounded, ~40px tall */
.folderlist li a, #mailboxlist li a,
#layout-sidebar .listing li a {
    border-radius: 0 22px 22px 0 !important;
    margin-left: 0 !important; margin-right: 12px !important;
    padding-left: 1.25rem;
    line-height: 40px; height: 40px; padding-top: 0; padding-bottom: 0;
    color: var(--fl-text) !important;
    transition: background-color .12s ease, color .12s ease;
}
.folderlist li a:before, #mailboxlist li a:before,
#layout-sidebar .listing li a:before,
#layout-sidebar .listing.iconized li a:before { color: var(--fl-icon) !important; }

.folderlist li a:hover, #mailboxlist li a:hover,
#layout-sidebar .listing li a:hover {
    background-color: var(--fl-hover-bg) !important; color: var(--fl-hover-text) !important;
}
.folderlist li a:hover:before,
#layout-sidebar .listing li a:hover:before { color: var(--fl-hover-text) !important; }

.folderlist li.selected, .listing.folderlist li.selected,
#layout-sidebar .listing li.selected { background: transparent !important; }
.folderlist li.selected > a, #mailboxlist li.selected > a,
#layout-sidebar .listing li.selected > a {
    background-color: var(--fl-sel-bg) !important; color: var(--fl-sel-text) !important;
    font-weight: 600;
}
.folderlist li.selected > a:before,
#layout-sidebar .listing li.selected > a:before { color: var(--fl-sel-icon) !important; }

.folderlist li.mailbox .unreadcount,
.folderlist li.mailbox.recent > a > .unreadcount {
    background: transparent !important; color: var(--fl-count) !important;
    font-weight: 700; margin-right: 16px !important;
}
#layout-sidebar .footer, #layout-sidebar .quota-widget,
#layout-sidebar .quota-widget * { color: var(--fl-text) !important; }

/* ============================================================
   MESSAGE LIST (light content area)
   ============================================================ */
html:not(.dark-mode) .messagelist tbody tr td { border-bottom: 1px solid #eef0f2; }
html:not(.dark-mode) .messagelist tbody tr.selected td { background-color: var(--pt-blue-tint) !important; }
html:not(.dark-mode) .messagelist tbody tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--pt-blue); }
html:not(.dark-mode) .messagelist tr.selected td.subject span.subject a,
html:not(.dark-mode) .messagelist tr.selected td.subject span.fromto { color: var(--pt-blue-dark) !important; }
html:not(.dark-mode) .messagelist tbody tr:hover td { background-color: rgba(0, 71, 188, .045); }
.messagelist td.subject span.msgicon.status.unread:before,
.messagelist tr:not(.flagged):not(.deleted) td.subject span.msgicon.status.unread::before { color: var(--pt-blue) !important; }
.messagelist tr.unread td.subject span.fromto { color: #202124 !important; font-weight: 600; }
.messagelist td.subject span.date { color: #5f6368; }

/* ---------- Reading pane & toolbar ---------- */
html:not(.dark-mode) #messagecontent, html:not(.dark-mode) #messagepreview { background: #fff; }
#messageheader .subject, .messageheader .subject, #message-header .subject { font-weight: 600; }
#messagecontframe, .messageview, .contactphoto img { border-radius: 10px; }
#messagecontframe { border: 1px solid var(--pt-line); }
.toolbar a.button.selected, .toolbar a.button.active, .toolbar a.button[aria-pressed="true"] { color: var(--pt-blue) !important; }
.toolbar a.button:hover, .toolbar a.button:focus, a.button.icon:hover, .toolbarmenu a.button:hover {
    border-radius: 50%; background-color: rgba(60, 64, 67, .08);
}
.attachmentslist li, .tagedit-list .tagedit-listelement-old { border-radius: 14px; }

/* ---------- Login card ---------- */
html:not(.dark-mode) .task-login #layout { background: #fff; }
html:not(.dark-mode) #login-form {
    background: #fff; border: 1px solid #dadce0;
    box-shadow: 0 1px 3px rgba(60, 64, 67, .12), 0 4px 12px rgba(60, 64, 67, .08);
}
.task-login #layout-content { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 8vh; }
.task-login #logo { top: 0 !important;
    margin-bottom: 1.75rem;
    max-height: 80px;
    margin-top: 5rem; }
#login-form { top: 0 !important; width: 92%; max-width: 380px; margin: 0 auto; padding: 2.5rem 2.25rem 2rem; border-radius: 14px; }
#login-form .btn-primary { width: 100%; padding: .6rem; border-radius: 22px; font-size: 1rem; }
#login-footer { text-align: center; margin-top: 1.25rem; }

/* ============================================================
   DARK MODE — cohesive, on-brand
   ============================================================ */
html.dark-mode {
    --fl-bg: #0a2a63;
    --fl-text: #c9d6f0;
    --fl-icon: #8ea3cc;
    --fl-hover-bg: rgba(255, 255, 255, .08);
    --fl-hover-text: #ffffff;
    --fl-sel-bg: #1a5fe0;
    --fl-sel-text: #ffffff;
    --fl-sel-icon: #ffffff;
    --fl-count: #8fb6ff;
    --fl-border: rgba(255, 255, 255, .10);
}
html.dark-mode .listing li.selected, html.dark-mode .listing li.selected > a,
html.dark-mode table.listing tbody tr.selected td, html.dark-mode ul.listing li.selected {
    background-color: rgba(26, 95, 224, .28) !important; color: #dbe7ff !important;
}
html.dark-mode .searchbar { background-color: rgba(255, 255, 255, .06) !important; }
html.dark-mode .searchbar:focus-within { background-color: rgba(255, 255, 255, .10) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
html.dark-mode .searchbar input { color: #e6ecf5; }
html.dark-mode .searchbar form:before { color: #9fb0c8; }
html.dark-mode .messagelist tbody tr.selected td { background-color: rgba(26, 95, 224, .26) !important; }
html.dark-mode .messagelist tbody tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--sb-sel-bg); }
html.dark-mode .messagelist tbody tr:hover td { background-color: rgba(255, 255, 255, .04); }
html.dark-mode .messagelist td.subject span.msgicon.status.unread:before { color: #8fb6ff !important; }
html.dark-mode #messagecontframe { border-color: rgba(255, 255, 255, .10); }
html.dark-mode .toolbar a.button:hover, html.dark-mode a.button.icon:hover { background-color: rgba(255, 255, 255, .08) !important; }
html.dark-mode .toolbar a.button.selected, html.dark-mode .toolbar a.button.active { color: #8fb6ff !important; }
html.dark-mode a, html.dark-mode a:active { color: #8fb6ff; }
html.dark-mode a:hover { color: #b9d2ff; }