/* HQV Mail - Gmail Style Login with Brand Colors */
:root {
    --hqv-orange: #FF791D;
    --hqv-blue: #174785;
    --hqv-green: #348D00;
    --hqv-red: #ED542C;
}

/* ========== LOGIN PAGE - GMAIL STYLE ========== */

/* Full page background */
html.task-login,
body.task-login {
    background: #f8f9fa !important;
    min-height: 100vh !important;
    height: 100% !important;
}

body.task-login #layout {
    background: #f8f9fa !important;
    min-height: 100vh !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.task-login #layout-content {
    background: #f8f9fa !important;
    min-height: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 20px !important;
    margin: auto !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 500px !important;
}

/* Logo - Override elastic's positioning */
html body.task-login #logo,
body.task-login img#logo,
body.task-login #layout-content #logo,
.task-login #logo {
    background: white !important;
    padding: 12px !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 20px rgba(23, 71, 133, 0.15) !important;
    margin-top: -100px !important;
    margin-bottom: 20px !important;
    width: 100px !important;
    height: 100px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border: 3px solid var(--hqv-orange) !important;
    position: static !important;
    top: 0 !important;
    top: unset !important;
}

body.task-login #logo img {
    max-width: 70px !important;
    max-height: 70px !important;
    border-radius: 50% !important;
    object-fit: contain !important;
}

/* Gmail-style Card - Override elastic's positioning */
html body.task-login #login-form,
body.task-login form#login-form,
body.task-login #layout-content #login-form,
#login-form {
    background: white !important;
    border-radius: 8px !important;
    padding: 48px 40px 36px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) !important;
    border: 1px solid #dadce0 !important;
    max-width: 450px !important;
    width: 100% !important;
    margin: 0 auto !important;
    position: static !important;
    top: 0 !important;
    top: unset !important;
    transform: none !important;
}

/* Title above form */
body.task-login #login-form::before {
    content: "Đăng nhập" !important;
    display: block !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    color: #202124 !important;
    text-align: center !important;
    margin-bottom: 8px !important;
    font-family: 'Google Sans', Roboto, Arial, sans-serif !important;
}


/* Hide original title */
body.task-login .voice,
body.task-login h1.voice {
    display: none !important;
}

/* Hide original labels - Gmail style shows placeholder */
body.task-login #login-form label {
    display: none !important;
}

/* Gmail-style Input Fields */
body.task-login #login-form .form-group,
body.task-login #login-form tr {
    margin-bottom: 24px !important;
}

body.task-login #login-form input[type="text"],
body.task-login #login-form input[type="password"],
body.task-login #login-form .form-control {
    width: 100% !important;
    padding: 13px 15px !important;
    border: 1px solid #dadce0 !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    transition: all 0.2s ease !important;
    background: white !important;
    color: #202124 !important;
    outline: none !important;
}

body.task-login #login-form input[type="text"]:hover,
body.task-login #login-form input[type="password"]:hover,
body.task-login #login-form .form-control:hover {
    border-color: #bdc1c6 !important;
}

body.task-login #login-form input[type="text"]:focus,
body.task-login #login-form input[type="password"]:focus,
body.task-login #login-form .form-control:focus {
    border-color: var(--hqv-blue) !important;
    border-width: 2px !important;
    padding: 12px 14px !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Input placeholder */
body.task-login #login-form input::placeholder {
    color: #5f6368 !important;
}

/* Hide input group icons for cleaner look */
body.task-login .input-group-prepend,
body.task-login .input-group-text {
    display: none !important;
}

body.task-login .input-group .form-control {
    border-radius: 4px !important;
}

/* Form buttons container - reduce padding */
body.task-login #login-form .formbuttons,
body.task-login .formbuttons {
    padding: 0 !important;
    margin: 0 !important;
}

/* Gmail-style Submit Button */
body.task-login #login-form input[type="submit"],
body.task-login #login-form button[type="submit"],
body.task-login #login-form .button.mainaction,
body.task-login #rcmloginsubmit {
    background: var(--hqv-blue) !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: white !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0.25px !important;
    min-width: 90px !important;
    float: right !important;
    width: auto !important;
    margin-top: 16px !important;
}

body.task-login #login-form input[type="submit"]:hover,
body.task-login #login-form button[type="submit"]:hover,
body.task-login #login-form .button.mainaction:hover,
body.task-login #rcmloginsubmit:hover {
    background: var(--hqv-orange) !important;
    box-shadow: 0 1px 3px rgba(255, 121, 29, 0.3) !important;
    transform: none !important;
}

body.task-login #login-form input[type="submit"]:active,
body.task-login #login-form button[type="submit"]:active {
    background: var(--hqv-red) !important;
}

/* Forgot password link style */
body.task-login a {
    color: var(--hqv-blue) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

body.task-login a:hover {
    color: var(--hqv-orange) !important;
    text-decoration: underline !important;
}

/* Footer - Move outside card */
body.task-login #login-footer {
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    color: #5f6368 !important;
    font-size: 12px !important;
    text-align: center !important;
    padding: 10px 20px !important;
    border-top: none !important;
    background: transparent !important;
    flex: none !important;
    width: auto !important;
    margin: 0 !important;
}

body.task-login #login-footer > div {
    background: transparent !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

body.task-login #login-footer a {
    color: var(--hqv-blue) !important;
    font-size: 12px !important;
}

/* Hide login-addon if exists */
body.task-login #login-addon {
    display: none !important;
}

/* Error Messages - Gmail style */
body.task-login .alert-danger,
body.task-login .ui-alert.error,
body.task-login .error-message {
    background: #fce8e6 !important;
    border: none !important;
    border-left: 4px solid var(--hqv-red) !important;
    color: #c5221f !important;
    border-radius: 4px !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
    font-size: 14px !important;
}

/* Success Messages */
body.task-login .alert-success,
body.task-login .ui-alert.success {
    background: #e6f4ea !important;
    border: none !important;
    border-left: 4px solid var(--hqv-green) !important;
    color: #137333 !important;
    border-radius: 4px !important;
    padding: 16px !important;
}

/* Checkbox styling */
body.task-login input[type="checkbox"] {
    accent-color: var(--hqv-blue) !important;
    width: 18px !important;
    height: 18px !important;
}

/* Language selector if visible */
body.task-login select {
    border: 1px solid #dadce0 !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    color: #5f6368 !important;
    background: white !important;
}

/* ========== AFTER LOGIN - MAIN INTERFACE ========== */

/* Logo in header - rounded */
#layout > .menu #logo,
.header #logo {
    border-radius: 50% !important;
    overflow: hidden !important;
    padding: 4px !important;
    background: white !important;
}

#layout > .menu #logo img,
.header #logo img {
    border-radius: 50% !important;
}

/* Header/Menu bar */
#layout > .menu,
.header,
#taskmenu {
    background: var(--hqv-blue) !important;
}

/* Toolbar buttons */
.toolbar a.button:hover,
.toolbar a.button.selected {
    background: var(--hqv-orange) !important;
    color: white !important;
}

/* Task menu */
#taskmenu a.selected,
#taskmenu a:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-left: 3px solid var(--hqv-orange) !important;
}

/* Message list selection */
.listing tr.selected td,
.listing tr.focused td {
    background: rgba(255, 121, 29, 0.08) !important;
    border-left-color: var(--hqv-orange) !important;
}

/* Main action buttons */
a.button.mainaction,
button.mainaction {
    background: var(--hqv-blue) !important;
    border-color: var(--hqv-blue) !important;
    border-radius: 4px !important;
}

a.button.mainaction:hover,
button.mainaction:hover {
    background: var(--hqv-orange) !important;
    border-color: var(--hqv-orange) !important;
}

/* Compose button */
.toolbar .create,
.toolbar .compose {
    background: var(--hqv-orange) !important;
    border-radius: 24px !important;
    padding: 0 24px !important;
}

.toolbar .create:hover,
.toolbar .compose:hover {
    background: var(--hqv-red) !important;
    box-shadow: 0 2px 8px rgba(255, 121, 29, 0.3) !important;
}

/* Delete button */
.toolbar .delete:hover {
    background: var(--hqv-red) !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px !important;
}

::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1 !important;
    border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--hqv-blue) !important;
}

/* Links in content */
.content a {
    color: var(--hqv-blue) !important;
}

.content a:hover {
    color: var(--hqv-orange) !important;
}

/* Unread message count badge */
.unreadcount {
    background: var(--hqv-orange) !important;
}

/* Folder list icons */
.folderlist .mailbox.inbox::before {
    color: var(--hqv-blue) !important;
}

.folderlist .mailbox.sent::before {
    color: var(--hqv-green) !important;
}

.folderlist .mailbox.trash::before {
    color: var(--hqv-red) !important;
}

/* Search box */
#quicksearchbox input {
    border-radius: 24px !important;
    border: 1px solid #dadce0 !important;
    padding: 8px 16px !important;
}

#quicksearchbox input:focus {
    border-color: var(--hqv-blue) !important;
    box-shadow: 0 1px 3px rgba(23, 71, 133, 0.2) !important;
}

/* Buttons general */
.button {
    border-radius: 4px !important;
}

/* Modal dialogs */
.ui-dialog .ui-dialog-titlebar {
    background: var(--hqv-blue) !important;
    color: white !important;
}

.ui-dialog .ui-dialog-buttonpane .ui-button {
    background: var(--hqv-blue) !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
}

.ui-dialog .ui-dialog-buttonpane .ui-button:hover {
    background: var(--hqv-orange) !important;
}