/* ── PT Talang Bhakti Kencana — Talbak Webmail Theme ─────────────────── */

:root {
    --tbk-green:       #2E7D32;
    --tbk-green-dark:  #1B5E20;
    --tbk-green-mid:   #388E3C;
    --tbk-green-light: #81C784;
    --tbk-green-bg:    #E8F5E9;
    --tbk-orange:      #F57C00;
    --tbk-orange-dark: #E65100;
    --tbk-white:       #ffffff;
    --tbk-gray-50:     #f8f9fa;
    --tbk-gray-100:    #f0f2f5;
    --tbk-gray-200:    #e4e7eb;
    --tbk-gray-400:    #9aa5b4;
    --tbk-gray-600:    #627085;
    --tbk-gray-800:    #2d3748;
    --tbk-shadow:      0 4px 24px rgba(0,0,0,0.14);
    --tbk-shadow-sm:   0 1px 4px rgba(0,0,0,0.08);
    --tbk-shadow-lg:   0 8px 40px rgba(0,0,0,0.28);
    --tbk-radius:      12px;
    --tbk-menu-w:      58px;
}


/* ═══════════════════════════════════════════════════════════════════════
   LOGIN PAGE
   — Elastic pakai top:16vh / top:20vh (relative) pada logo & form
   — Kita reset semua ke static / 0, lalu card wrapper handle layout
   ═══════════════════════════════════════════════════════════════════════ */

body.task-login,
body.task-login #layout {
    background: var(--tbk-green-dark) !important;
    min-height: 100vh !important;
}

body.task-login #layout {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2rem 1rem !important;
    box-sizing: border-box !important;
}

/* centering wrapper — transparent */
body.task-login #layout-content {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 400px !important;
    display: block !important;    /* override elastic's block, needed for card */
    text-align: left !important;
}

/* THE CARD */
#tbk-login-card {
    background: var(--tbk-white) !important;
    border-radius: var(--tbk-radius) !important;
    box-shadow: var(--tbk-shadow-lg) !important;
    border-top: 4px solid var(--tbk-orange) !important;
    padding: 2rem 2rem 1.75rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    position: relative !important;
}

/* ─── RESET elastic's offset positioning ─── */
/* elastic: #logo { position:relative; top:16vh } */
body.task-login #logo {
    position: static !important;
    top: 0 !important;
    display: block !important;
    max-width: 72px !important;
    max-height: 72px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto 0.5rem !important;
    object-fit: contain !important;
}

/* elastic: #login-form { position:relative; top:20vh; max-width:320px } */
body.task-login #login-form {
    position: static !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Company name */
#login-branding {
    text-align: center !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--tbk-green-dark) !important;
    margin-bottom: 0.2rem !important;
}

/* Sub-heading */
#tbk-login-sub {
    text-align: center !important;
    font-size: 0.82rem !important;
    color: var(--tbk-gray-400) !important;
    margin: 0 0 1.4rem !important;
    padding-bottom: 1.1rem !important;
    border-bottom: 1px solid var(--tbk-gray-200) !important;
}

/* ─── FORM ROWS ─── */
body.task-login #login-form table,
body.task-login #login-form tbody {
    display: block !important;
    width: 100% !important;
}
body.task-login #login-form .row {
    display: block !important;
    position: static !important;
    margin: 0 0 0.9rem 0 !important;
    width: 100% !important;
}

/* Hide elastic's icon button (grey square left of input) */
body.task-login .input-group-prepend,
body.task-login #login-form a.button.icon,
body.task-login #login-form a.icon {
    display: none !important;
}

/* Labels */
body.task-login #login-form label {
    display: block !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--tbk-gray-600) !important;
    margin-bottom: 5px !important;
}

/* Inputs */
body.task-login #login-form input[type="text"],
body.task-login #login-form input[type="password"],
body.task-login #login-form input[type="email"],
body.task-login #login-form .row input {
    display: block !important;
    width: 100% !important;
    border: 1.5px solid var(--tbk-gray-200) !important;
    border-radius: 8px !important;
    padding: 0.6rem 0.85rem !important;
    font-size: 0.95rem !important;
    color: var(--tbk-gray-800) !important;
    background: var(--tbk-gray-50) !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    position: static !important;
}
body.task-login #login-form input:focus {
    border-color: var(--tbk-green) !important;
    box-shadow: 0 0 0 3px rgba(46,125,50,0.15) !important;
    outline: none !important;
    background: var(--tbk-white) !important;
}

/* Checkbox row */
body.task-login #login-form .row.checkbox-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-bottom: 1rem !important;
    font-size: 0.88rem !important;
    color: var(--tbk-gray-600) !important;
}

/* Submit button */
body.task-login #login-form .formbuttons,
body.task-login #login-form .commands {
    margin-top: 0.25rem !important;
}
body.task-login #login-form a.button.mainaction,
body.task-login #login-form button[type="submit"],
body.task-login #login-form input[type="submit"],
body.task-login #login-form .formbuttons a,
body.task-login #login-form .formbuttons button {
    display: block !important;
    width: 100% !important;
    background: var(--tbk-green) !important;
    color: var(--tbk-white) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.7rem !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    box-sizing: border-box !important;
    letter-spacing: 0.04em !important;
    position: static !important;
}
body.task-login #login-form a.button.mainaction:hover,
body.task-login #login-form button[type="submit"]:hover {
    background: var(--tbk-green-dark) !important;
}

/* Error messages */
body.task-login .message.error {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    border-radius: 8px !important;
    color: #b91c1c !important;
    padding: 0.65rem 0.9rem !important;
    margin-bottom: 1rem !important;
    font-size: 0.88rem !important;
}

/* Login footer */
body.task-login #login-footer {
    margin-top: 1rem !important;
    text-align: center !important;
    font-size: 0.75rem !important;
    color: var(--tbk-gray-400) !important;
    flex: initial !important;  /* override elastic flex:1 */
}
body.task-login #login-footer > div {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   LEFT ICON SIDEBAR  — icon-only 58px
   ═══════════════════════════════════════════════════════════════════════ */

#layout-menu {
    background: var(--tbk-green-dark) !important;
    width: var(--tbk-menu-w) !important;
    min-width: var(--tbk-menu-w) !important;
    max-width: var(--tbk-menu-w) !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Logo area */
#layout-menu .popover-header {
    background: var(--tbk-green-dark) !important;
    padding: 0.75rem 0 0.65rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    flex-shrink: 0 !important;
}
#layout-menu .popover-header #logo {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    object-fit: contain !important;
    display: block !important;
    position: static !important;
    top: 0 !important;
}
#layout-menu .popover-header .cancel {
    display: none !important;
}

#taskmenu {
    background: var(--tbk-green-dark) !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0.35rem 0 0 !important;
    overflow: hidden !important;
}

/* Hide all text labels */
#taskmenu a .inner {
    display: none !important;
}

/* Compose button */
#taskmenu .action-buttons {
    padding: 0.55rem 0.6rem 0.45rem !important;
    display: flex !important;
    justify-content: center !important;
}
#taskmenu a.compose {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    background: var(--tbk-orange) !important;
    border-radius: 10px !important;
    padding: 0 !important;
    color: var(--tbk-white) !important;
    transition: background 0.2s !important;
    text-decoration: none !important;
}
#taskmenu a.compose:hover,
#taskmenu a.compose.selected {
    background: var(--tbk-orange-dark) !important;
}
#taskmenu a.compose::before {
    color: var(--tbk-white) !important;
    font-size: 1rem !important;
    margin: 0 !important;
}

/* Nav items */
#taskmenu a:not(.compose) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    margin: 2px auto !important;
    border-radius: 10px !important;
    color: rgba(255,255,255,0.6) !important;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s !important;
    padding: 0 !important;
    position: relative !important;
}
#taskmenu a:not(.compose)::before {
    font-size: 1rem !important;
    color: inherit !important;
    margin: 0 !important;
}
#taskmenu a:not(.compose):hover {
    background: rgba(255,255,255,0.12) !important;
    color: var(--tbk-white) !important;
}
#taskmenu a.selected:not(.compose) {
    background: rgba(255,255,255,0.16) !important;
    color: var(--tbk-white) !important;
}
#taskmenu a.selected:not(.compose)::after {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 18px !important;
    background: var(--tbk-orange) !important;
    border-radius: 3px 0 0 3px !important;
}

/* ─── BOTTOM BUTTONS: About & Logout ─────────────────────────────────
   Elastic: .special-buttons { position:absolute; bottom:0; left:0 }
   Fix: reset ke static, ikut flex flow biasa, full width
   ─────────────────────────────────────────────────────────────────── */
#taskmenu .special-buttons {
    position: static !important;     /* hapus absolute elastic */
    bottom: auto !important;
    left: auto !important;
    margin-top: auto !important;     /* push ke bawah dalam flex column */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0.4rem 0 0.6rem !important;
    gap: 3px !important;
    background: transparent !important;
    background-color: transparent !important;
    border-top: 1px solid rgba(255,255,255,0.12) !important;
}

/* Sama persis dengan icon di atas */
#taskmenu .special-buttons a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 10px !important;
    margin: 1px auto !important;
    padding: 0 !important;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s !important;
    background: transparent !important;
}
#taskmenu .special-buttons a::before {
    font-size: 1rem !important;
    margin: 0 !important;
    color: inherit !important;
}
#taskmenu .special-buttons a .inner {
    display: none !important;
}

/* About / Informasi — biru info */
#taskmenu .special-buttons a.about {
    background: rgba(100,180,255,0.15) !important;
    color: #a0d0ff !important;
}
#taskmenu .special-buttons a.about:hover {
    background: rgba(100,180,255,0.30) !important;
    color: #c8e8ff !important;
}

/* Logout / Keluar — merah bahaya */
#taskmenu .special-buttons a.logout {
    background: rgba(220,50,50,0.2) !important;
    color: #ff8888 !important;
}
#taskmenu .special-buttons a.logout:hover {
    background: rgba(220,50,50,0.38) !important;
    color: #ffaaaa !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   FOLDER SIDEBAR  (#layout-sidebar)
   ═══════════════════════════════════════════════════════════════════════ */

#layout-sidebar {
    background: var(--tbk-white) !important;
    border-right: 1px solid var(--tbk-gray-200) !important;
}
#layout-sidebar .header {
    background: var(--tbk-white) !important;
    border-bottom: 1px solid var(--tbk-gray-200) !important;
    padding: 0.6rem 0.85rem !important;
}
#layout-sidebar .header .header-title.username {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: var(--tbk-gray-600) !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
#mailboxlist a {
    color: var(--tbk-gray-800) !important;
    font-size: 0.875rem !important;
    padding: 0.45rem 0.85rem !important;
    transition: background 0.12s !important;
}
#mailboxlist a:hover {
    background: var(--tbk-gray-50) !important;
    color: var(--tbk-green) !important;
}
#mailboxlist .selected > a {
    background: var(--tbk-green-bg) !important;
    color: var(--tbk-green) !important;
    font-weight: 700 !important;
    border-left: 3px solid var(--tbk-green) !important;
}
#mailboxlist .unreadcount {
    background: var(--tbk-orange) !important;
    color: var(--tbk-white) !important;
    border-radius: 10px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    padding: 1px 6px !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   MESSAGE LIST  (#layout-list)
   ═══════════════════════════════════════════════════════════════════════ */

#layout-list { background: var(--tbk-gray-100) !important; }
#messagelist-header.header {
    background: var(--tbk-white) !important;
    border-bottom: 1px solid var(--tbk-gray-200) !important;
}
#messagelist tbody tr { background: var(--tbk-white) !important; }
#messagelist tbody tr:hover { background: var(--tbk-green-bg) !important; }
#messagelist tbody tr.selected { background: #dcedc8 !important; }
#messagelist tbody tr td {
    border-bottom: 1px solid var(--tbk-gray-200) !important;
    padding: 0.55rem 0.75rem !important;
}
#messagelist tbody tr.unread td { font-weight: 700 !important; }
#messagelist tbody tr:not(.unread) td { color: var(--tbk-gray-600) !important; }


/* ═══════════════════════════════════════════════════════════════════════
   READING PANE
   ═══════════════════════════════════════════════════════════════════════ */

body:not(.task-login) #layout-content { background: var(--tbk-white) !important; }
body:not(.task-login) #layout-content .header {
    background: var(--tbk-white) !important;
    border-bottom: 1px solid var(--tbk-gray-200) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL BUTTONS
   ═══════════════════════════════════════════════════════════════════════ */

a.button.mainaction, button.mainaction, input[type="submit"].mainaction {
    background: var(--tbk-green) !important;
    border-color: var(--tbk-green-dark) !important;
    color: var(--tbk-white) !important;
    border-radius: 6px !important;
}
a.button.mainaction:hover, button.mainaction:hover {
    background: var(--tbk-green-dark) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   NAV ICON: talbakadmin (Kelola Email)
   Font Awesome 5 Free — \f234 = fa-user-plus
   ═══════════════════════════════════════════════════════════════════════ */

#taskmenu a.talbakadmin::before {
    font-family: Icons !important;
    font-weight: normal !important;
    content: "\f0fe" !important;
    font-size: 1rem !important;
    color: inherit !important;
    margin: 0 !important;
    -webkit-font-smoothing: antialiased !important;
    display: inline-block !important;
}
#taskmenu a.talbakadmin {
    color: rgba(255,255,255,0.6) !important;
}
#taskmenu a.talbakadmin:hover,
#taskmenu a.talbakadmin.selected {
    background: rgba(255,255,255,0.12) !important;
    color: var(--tbk-white) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   TALBAK ADMIN PLUGIN
   ═══════════════════════════════════════════════════════════════════════ */

.talbak-admin-page { padding: 1.5rem; max-width: 960px; }
.talbak-admin-page h2 {
    color: var(--tbk-green-dark);
    border-bottom: 2px solid var(--tbk-green-light);
    padding-bottom: 0.5rem; margin-bottom: 1.25rem;
    font-size: 1.1rem; font-weight: 700;
}
.talbak-admin-page table {
    width: 100%; border-collapse: collapse; font-size: 0.875rem;
    background: var(--tbk-white); border-radius: 8px;
    overflow: hidden; box-shadow: var(--tbk-shadow-sm);
}
.talbak-admin-page th {
    background: var(--tbk-green-dark); color: var(--tbk-white);
    padding: 0.65rem 0.9rem; font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase; text-align: left;
}
.talbak-admin-page td {
    padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--tbk-gray-200);
    vertical-align: middle; color: var(--tbk-gray-800);
}
.talbak-admin-page tr:last-child td { border-bottom: none; }
.talbak-admin-page tr:hover td { background: var(--tbk-gray-50); }

.status-pending  { background:#fef3c7; color:#92400e; border-radius:4px; padding:2px 9px; font-size:0.75rem; font-weight:700; white-space:nowrap; display:inline-block; }
.status-approved { background:#dcfce7; color:#166534; border-radius:4px; padding:2px 9px; font-size:0.75rem; font-weight:700; white-space:nowrap; display:inline-block; }
.status-rejected { background:#fee2e2; color:#991b1b; border-radius:4px; padding:2px 9px; font-size:0.75rem; font-weight:700; white-space:nowrap; display:inline-block; }

.btn-ta-approve { background:var(--tbk-green); color:var(--tbk-white); border:none; border-radius:5px; padding:4px 13px; cursor:pointer; font-size:0.8rem; font-weight:700; margin-right:4px; transition:background 0.15s; }
.btn-ta-approve:hover { background:var(--tbk-green-dark); }
.btn-ta-reject { background:#dc2626; color:var(--tbk-white); border:none; border-radius:5px; padding:4px 13px; cursor:pointer; font-size:0.8rem; font-weight:700; transition:background 0.15s; }
.btn-ta-reject:hover { background:#b91c1c; }
.reject-note-input { border:1px solid var(--tbk-gray-200); border-radius:5px; padding:3px 8px; font-size:0.8rem; margin-right:4px; width:160px; }

/* Box Buat Email Langsung */
.talbak-direct-create-box {
    background: var(--tbk-green-bg);
    border: 1px solid var(--tbk-green-light);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 0.5rem;
}
.talbak-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.5rem;
}
.talbak-admin-page .form-group {
    margin-bottom: 0.85rem;
}
.talbak-admin-page .form-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--tbk-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.talbak-admin-page .form-group .form-control {
    width: 100%;
    border: 1.5px solid var(--tbk-gray-200);
    border-radius: 7px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    background: var(--tbk-white);
    box-sizing: border-box;
}
.talbak-admin-page .form-group .form-control:focus {
    border-color: var(--tbk-green);
    outline: none;
    box-shadow: 0 0 0 3px rgba(46,125,50,0.1);
}
.talbak-admin-page .input-group {
    display: flex;
}
.talbak-admin-page .input-group .form-control {
    border-radius: 7px 0 0 7px;
    flex: 1;
}
.talbak-admin-page .input-group-text {
    background: var(--tbk-gray-100);
    border: 1.5px solid var(--tbk-gray-200);
    border-left: 0;
    border-radius: 0 7px 7px 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.88rem;
    color: var(--tbk-gray-600);
    white-space: nowrap;
}