/* =========================================================
   iCafePay - OPTIMIZED THEME OVERRIDE
   ---------------------------------------------------------
   Goals:
   - Keep original application layout
   - Optimize desktop / tablet / mobile
   - Reduce duplicate selectors
   - Centralize dark/light colors in variables
   - Preserve existing HTML / JS
   - Improve Light theme contrast
   ========================================================= */


/* =========================================================
   1. THEME TOKENS
   ========================================================= */

:root {
    color-scheme: dark;

    --icp-bg: #0D1117;
    --icp-surface: #161B22;
    --icp-raised: #21262D;
    --icp-input: #0D1117;

    --icp-border: #30363D;
    --icp-text: #E6EDF3;
    --icp-muted: #8B949E;

    --icp-accent: #56D4C3;
    --icp-fill: #2DB7A5;
    --icp-accent-rgb: 86, 212, 195;

    --icp-sidebar: #010409;

    --icp-chart-current: #56D4C3;
    --icp-chart-previous: #D29922;

    --icp-success: #3FB950;
    --icp-danger: #F85149;
    --icp-warning: #D29922;
    --icp-info: #58A6FF;

    --icp-hover: #21262D;
    --icp-active: #183C3A;

    --icp-table-head: #161B22;
    --icp-table-row: #0D1117;
    --icp-table-alt: #161B22;
    --icp-table-hover: #183C3A;
}


/* =========================================================
   LIGHT THEME TOKENS
   ---------------------------------------------------------
   Stronger contrast:
   - Page background is darker than cards
   - Cards remain white
   - Panel headers are lightly gray
   - Inputs are slightly off-white
   - Borders are more visible
   ========================================================= */

html[data-icp-theme="light"] {
    color-scheme: light;

    /* Main page */
    --icp-bg: #E9EDF2;

    /* Cards / panels */
    --icp-surface: #FFFFFF;
    --icp-raised: #F1F4F7;

    /* Inputs */
    --icp-input: #FBFCFD;

    /* Borders */
    --icp-border: #C4CCD5;

    /* Typography */
    --icp-text: #20252B;
    --icp-muted: #5F6872;

    /* Accent */
    --icp-accent: #0F766E;
    --icp-fill: #0F766E;
    --icp-accent-rgb: 15, 118, 110;

    /* Sidebar */
    --icp-sidebar: #F8FAFC;

    /* Charts */
    --icp-chart-current: #0F766E;
    --icp-chart-previous: #9A6700;

    /* Status */
    --icp-success: #1A7F37;
    --icp-danger: #CF222E;
    --icp-warning: #8A5B00;
    --icp-info: #0969DA;

    /* Interaction */
    --icp-hover: #E7EBEF;
    --icp-active: #D8F0EC;

    /* Tables */
    --icp-table-head: #E9EDF2;
    --icp-table-row: #FFFFFF;
    --icp-table-alt: #F3F5F7;
    --icp-table-hover: #DDF3EF;
}


/* =========================================================
   2. BASE
   ========================================================= */

body.icafepay {
    background: var(--icp-bg);
    color: var(--icp-text);
    overflow-x: hidden;
}

.icafepay #wrapper {
    background: var(--icp-bg);
}

.icafepay a {
    color: var(--icp-accent);
}

.icafepay a:hover {
    color: var(--icp-accent);
}

.icafepay h1,
.icafepay h2,
.icafepay h3,
.icafepay h4,
.icafepay h5,
.icafepay h6 {
    color: var(--icp-text);
}

.icafepay .text-dark {
    color: var(--icp-text) !important;
}

.icafepay .text-muted {
    color: var(--icp-muted) !important;
}

.icafepay .text-custom {
    color: var(--icp-accent) !important;
}

.icafepay .text-success {
    color: var(--icp-success) !important;
}

.icafepay .text-danger {
    color: var(--icp-danger) !important;
}

.icafepay .text-warning {
    color: var(--icp-warning) !important;
}

.icafepay .text-info {
    color: var(--icp-info) !important;
}


/* =========================================================
   3. TOPBAR
   ========================================================= */

.icafepay .topbar {
    background: var(--icp-sidebar);
    box-shadow: 0 3px 18px rgba(0, 0, 0, .22);
}

.icafepay .topbar .topbar-left {
    width: 240px;
    background: var(--icp-sidebar);
}

.icafepay .topbar .logo {
    margin-left: 8px;
}

.icafepay #wrapper.enlarged .topbar .logo {
    margin-left: 0;
}

.icafepay .navbar-default {
    background: var(--icp-sidebar);
    border-bottom: 1px solid var(--icp-border);
}

.icafepay .navbar-default .navbar-nav > li > a {
    color: var(--icp-muted);
}

.icafepay .navbar-default .navbar-nav > li > a:hover {
    color: var(--icp-text);
}

.icafepay .navbar-default .navbar-nav > .open > a,
.icafepay .navbar-default .navbar-nav > .open > a:hover,
.icafepay .navbar-default .navbar-nav > .open > a:focus {
    background: var(--icp-hover);
    color: var(--icp-text);
}

.icafepay .button-menu-mobile {
    color: var(--icp-muted);
}

.icafepay .button-menu-mobile:hover {
    background: var(--icp-hover);
    color: var(--icp-accent);
}

.icafepay .topbar .label-inverse {
    background: var(--icp-raised);
    color: var(--icp-text);
    border-color: var(--icp-border);
}


/* =========================================================
   4. TOPBAR ROW
   ========================================================= */

.icafepay .topbar .icp-topbar-row {
    display: flex;
    align-items: center;
    height: 64px;
    min-width: 0;
}

.icafepay .icp-topbar-row > .icp-menu-toggle {
    float: none !important;
    flex: 0 0 auto;
}

.icafepay .icp-topbar-row > .navbar-nav {
    display: flex;
    align-items: center;
    float: none !important;
    min-width: 0;
    margin: 0;
}

.icafepay .icp-topbar-row > .icp-topbar-status {
    flex: 1 1 auto;
    min-width: 0;
}

.icafepay .icp-topbar-status > li {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.icafepay .icp-topbar-status .label-inverse {
    line-height: 1.2;
}

.icafepay .icp-topbar-row > .icp-topbar-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    height: 64px;
    margin-left: auto;
}

.icafepay .icp-topbar-actions > li {
    display: flex;
    align-items: center;
    float: none;
    flex: 0 0 auto;
}

.icafepay .navbar-default .icp-topbar-actions > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    padding: 0 12px;
    line-height: 1.4;
}

.icafepay .icp-topbar-actions .profile {
    gap: 7px;
}

.icafepay .icp-topbar-actions #notification > a {
    width: 46px;
}

.icafepay .icp-topbar-actions #totalrequest {
    position: absolute;
    top: 9px;
    right: 2px;
}

.icafepay .icp-topbar-actions .dropdown-menu {
    top: 100%;
    right: 0;
    left: auto;
}


/* =========================================================
   5. SIDEBAR
   ========================================================= */

.icafepay .side-menu.left {
    top: 64px;
    background: var(--icp-sidebar);
    border-right: 1px solid var(--icp-border);
    box-shadow: none;
}

.icafepay #sidebar-menu {
    padding: 14px 10px 28px;
}

.icafepay #sidebar-menu .menu-title {
    display: block;
    margin: 8px 0 6px;
    padding: 9px 12px;

    background: var(--icp-raised) !important;
    color: var(--icp-muted);

    border: 1px solid var(--icp-border);
    border-radius: 6px;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 1px;
    text-transform: uppercase;

    pointer-events: none;
}

.icafepay #sidebar-menu > ul > li {
    position: relative;
    margin: 0;
    padding: 0;
}

.icafepay #sidebar-menu > ul > li > a {
    display: block;

    margin: 3px 0 !important;
    padding: 10px 12px !important;

    background: transparent;
    color: var(--icp-muted);

    border: 1px solid transparent;
    border-radius: 9px;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;

    text-decoration: none;

    transition:
        background-color .15s ease,
        color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.icafepay #sidebar-menu > ul > li > a > i {
    display: inline-block;
    width: 20px;

    margin-right: 10px;

    color: var(--icp-muted);

    font-size: 16px;
    line-height: 1.3;
    text-align: center;
    vertical-align: middle;

    transition: color .15s ease;
}

.icafepay #sidebar-menu > ul > li > a:hover {
    background: var(--icp-hover);
    color: var(--icp-text);
    border-color: var(--icp-border);
}

.icafepay #sidebar-menu > ul > li > a:hover > i {
    color: var(--icp-accent);
}


/* Active */

.icafepay #sidebar-menu > ul > li.active > a,
.icafepay #sidebar-menu > ul > li > a.active,
.icafepay #sidebar-menu > ul > li > a.subdrop {
    background: var(--icp-active) !important;
    color: var(--icp-text) !important;

    border-color: rgba(var(--icp-accent-rgb), .18) !important;
    border-radius: 9px !important;

    box-shadow: inset 3px 0 0 var(--icp-accent);
}

.icafepay #sidebar-menu > ul > li.active > a > i,
.icafepay #sidebar-menu > ul > li > a.active > i,
.icafepay #sidebar-menu > ul > li > a.subdrop > i {
    color: var(--icp-accent) !important;
}

.icafepay #sidebar-menu > ul > li.active > a > span,
.icafepay #sidebar-menu > ul > li > a.active > span,
.icafepay #sidebar-menu > ul > li > a.subdrop > span {
    color: var(--icp-text);
    font-weight: 600;
}

.icafepay #sidebar-menu > ul > li.active > a:hover,
.icafepay #sidebar-menu > ul > li > a.active:hover,
.icafepay #sidebar-menu > ul > li > a.subdrop:hover {
    background: var(--icp-hover) !important;
    color: var(--icp-accent) !important;
    border-color: rgba(var(--icp-accent-rgb), .30) !important;
}


/* Arrow */

.icafepay #sidebar-menu > ul > li > a .menu-arrow {
    color: var(--icp-muted);
    transition: color .15s ease;
}

.icafepay #sidebar-menu > ul > li > a:hover .menu-arrow {
    color: var(--icp-text);
}

.icafepay #sidebar-menu > ul > li > a.active .menu-arrow,
.icafepay #sidebar-menu > ul > li > a.subdrop .menu-arrow {
    color: var(--icp-accent);
}


/* =========================================================
   6. SIDEBAR SUBMENU
   ========================================================= */

.icafepay #sidebar-menu ul ul {
    margin: 2px 0 6px;
    padding: 0;
}

.icafepay #sidebar-menu ul ul li {
    margin: 0;
    padding: 0;
}

.icafepay #sidebar-menu ul ul a {
    display: block;

    margin: 2px 0;
    padding: 8px 12px 8px 46px;

    background: transparent;
    color: var(--icp-muted);

    border: 1px solid transparent;
    border-radius: 7px;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;

    text-decoration: none;

    transition:
        background-color .15s ease,
        color .15s ease,
        border-color .15s ease;
}

.icafepay #sidebar-menu ul ul a:hover {
    background: var(--icp-hover);
    color: var(--icp-text);
    border-color: var(--icp-border);
}

.icafepay #sidebar-menu ul ul li.active > a,
.icafepay #sidebar-menu ul ul li > a.active {
    background: rgba(var(--icp-accent-rgb), .08);
    color: var(--icp-accent);
    border-color: rgba(var(--icp-accent-rgb), .15);
}

.icafepay #sidebar-menu .divider {
    height: 1px;
    margin: 12px 10px;
    background: var(--icp-border);
    opacity: .7;
}


/* =========================================================
   7. COLLAPSED SIDEBAR
   ========================================================= */

.icafepay #wrapper.enlarged .topbar .topbar-left {
    width: 70px;
}

.icafepay #wrapper.enlarged #sidebar-menu {
    padding-left: 0;
    padding-right: 0;
}

.icafepay #wrapper.enlarged #sidebar-menu > ul > li > a {
    padding: 12px 0 !important;
    border-radius: 0 !important;
    text-align: center;
}

.icafepay #wrapper.enlarged #sidebar-menu > ul > li > a > i {
    width: auto;
    margin: 0;
    font-size: 17px;
}

.icafepay #wrapper.enlarged #sidebar-menu > ul > li > a > span,
.icafepay #wrapper.enlarged #sidebar-menu > ul > li > a .menu-arrow {
    display: none;
}

.icafepay #wrapper.enlarged #sidebar-menu > ul > li.active > a,
.icafepay #wrapper.enlarged #sidebar-menu > ul > li > a.active,
.icafepay #wrapper.enlarged #sidebar-menu > ul > li > a.subdrop {
    background: var(--icp-active) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: inset 3px 0 0 var(--icp-accent);
}

.icafepay #wrapper.enlarged #sidebar-menu > ul > li > a:hover {
    background: var(--icp-hover);
}

.icafepay #wrapper.enlarged #sidebar-menu .menu-title {
    height: 1px;
    margin: 12px 10px;
    padding: 0;
    overflow: hidden;

    background: var(--icp-border) !important;
    border: 0;
    border-radius: 0;
}

.icafepay #wrapper.enlarged #sidebar-menu ul ul {
    background: var(--icp-sidebar);
}


/* =========================================================
   8. CARDS / PANELS
   ========================================================= */

.icafepay .card-box,
.icafepay .widget-panel,
.icafepay .panel {
    background: var(--icp-surface);
    color: var(--icp-text);
    border-color: var(--icp-border);
}

.icafepay .panel-footer {
    background: var(--icp-raised);
    border-color: var(--icp-border);
}

.icafepay .widget-style-2 i {
    background: var(--icp-raised);
    color: var(--icp-accent);
    align-content: center;
}

.icafepay .bg-white {
    background-color: var(--icp-surface) !important;
}


/* =========================================================
   9. TABLE
   ========================================================= */

.icafepay .table {
    color: var(--icp-text);
}

.icafepay .table > thead > tr > th {
    background: var(--icp-table-head);
    color: var(--icp-text);
    border-color: var(--icp-border);
}

.icafepay .table > tbody > tr > td,
.icafepay .table > tbody > tr > th {
    border-color: var(--icp-border);
}

.icafepay .table-striped > tbody > tr:nth-of-type(odd) {
    background: var(--icp-table-row) !important;
}

.icafepay .table-striped > tbody > tr:nth-of-type(even) {
    background: var(--icp-table-alt) !important;
}

.icafepay .table-hover > tbody > tr:hover {
    background: var(--icp-table-hover) !important;
}

.icafepay .table-responsive {
    -webkit-overflow-scrolling: touch;
}


/* =========================================================
   10. FORM
   ========================================================= */

.icafepay .form-control,
.icafepay .form-control-custom,
.icafepay .input-group-addon {
    background: var(--icp-input);
    color: var(--icp-text);
    border-color: var(--icp-border);
}

.icafepay .form-control:focus,
.icafepay .form-control-custom:focus {
    border-color: var(--icp-accent);
    box-shadow: 0 0 0 3px rgba(var(--icp-accent-rgb), .14);
    outline: none;
}

.icafepay .form-control::placeholder {
    color: var(--icp-muted);
    opacity: 1;
}

.icafepay .form-control[disabled],
.icafepay .form-control[readonly] {
    background: var(--icp-raised);
    color: var(--icp-muted);
}


/* =========================================================
   11. BUTTONS
   ========================================================= */

.icafepay .btn.btn-default,
.icafepay .btn.btn-inverse {
    background: var(--icp-raised) !important;
    color: var(--icp-text) !important;
    border-color: var(--icp-border) !important;
}

.icafepay .btn.btn-default:hover,
.icafepay .btn.btn-inverse:hover {
    background: var(--icp-hover) !important;
}

.icafepay .btn.btn-custom {
    background: var(--icp-fill) !important;
    color: var(--icp-text) !important;
    border-color: var(--icp-fill) !important;
}


/* =========================================================
   12. WIDGET TOOLBAR
   ========================================================= */

.icafepay .icp-widget-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 10px 14px;

    background: var(--icp-raised);
    border: 1px solid var(--icp-border);
    border-radius: 8px 8px 0 0;

    box-sizing: border-box;
}

.icafepay .icp-widget-toolbar > span {
    min-width: 0;
    margin-right: auto;

    color: var(--icp-text);

    font-size: 13px;
    font-weight: 600;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icafepay .icp-widget-toolbar .btn {
    flex-shrink: 0;
}

.icafepay .icp-widget-collapsed {
    margin-bottom: 20px;
}

.icafepay .icp-widget-collapsed .icp-widget-toolbar {
    border-radius: 8px;
}

.icafepay .icp-widget-body > .card-box,
.icafepay .icp-widget-body > .widget-panel,
.icafepay .icp-widget-body .panel {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}


/* =========================================================
   13. DROPDOWN / POPOVER / LIST
   ========================================================= */

.icafepay .dropdown-menu,
.icafepay .popover,
.icafepay .popover-title,
.icafepay .list-group-item {
    background: var(--icp-surface);
    color: var(--icp-text);
    border-color: var(--icp-border);
}

.icafepay .dropdown-menu > li > a {
    color: var(--icp-muted);
}

.icafepay .dropdown-menu > li > a:hover,
.icafepay .dropdown-menu > .active > a {
    background: var(--icp-active);
    color: var(--icp-accent);
}


/* =========================================================
   14. MODAL
   ========================================================= */

.icafepay .modal .modal-dialog .modal-content {
    background: var(--icp-surface);
    color: var(--icp-text);
    border-color: var(--icp-border);
}

.icafepay .modal .modal-header,
.icafepay .modal .modal-footer {
    border-color: var(--icp-border);
}


/* =========================================================
   15. ALERT
   ========================================================= */

.icafepay .alert-success {
    background: rgba(63, 185, 80, .12);
    color: var(--icp-success);
    border-color: rgba(63, 185, 80, .40);
}

.icafepay .alert-danger {
    background: rgba(248, 81, 73, .12);
    color: var(--icp-danger);
    border-color: rgba(248, 81, 73, .40);
}

.icafepay .alert-warning {
    background: rgba(210, 153, 34, .12);
    color: var(--icp-warning);
    border-color: rgba(210, 153, 34, .40);
}

.icafepay .alert-info {
    background: rgba(88, 166, 255, .12);
    color: var(--icp-info);
    border-color: rgba(88, 166, 255, .40);
}


/* =========================================================
   16. LOGO
   ========================================================= */

.icafepay .icp-logo-dark {
    display: inline-block !important;
}

.icafepay .icp-logo-light {
    display: none !important;
}

html[data-icp-theme="light"] .icafepay .icp-logo-dark {
    display: none !important;
}

html[data-icp-theme="light"] .icafepay .icp-logo-light {
    display: inline-block !important;
}


/* =========================================================
   17. THEME TOGGLE
   ========================================================= */

.icafepay .icp-theme-item {
    display: flex;
    align-items: center;
}

.icafepay .icp-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-width: 78px;
    height: 36px;

    margin: 0 8px;
    padding: 5px 11px;

    background: var(--icp-raised);
    color: var(--icp-text);

    border: 1px solid var(--icp-border);
    border-radius: 8px;

    cursor: pointer;

    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;

    white-space: nowrap;

    outline: none;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease,
        box-shadow .15s ease,
        transform .1s ease;
}

.icafepay .icp-theme-toggle > span:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    font-size: 18px;
    line-height: 1;
}

.icafepay .icp-theme-toggle > .icp-theme-label {
    display: inline-block;
    line-height: 1;
}

.icafepay .icp-theme-toggle:hover {
    background: var(--icp-hover);
    color: var(--icp-accent);
    border-color: var(--icp-accent);
}

.icafepay .icp-theme-toggle:focus {
    outline: none;
}

.icafepay .icp-theme-toggle:focus-visible {
    outline: 2px solid var(--icp-accent) !important;
    outline-offset: 2px;
}

.icafepay .icp-theme-toggle:active {
    transform: translateY(1px);
}


/* =========================================================
   18. SCROLLBAR
   ========================================================= */

.icafepay ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.icafepay ::-webkit-scrollbar-track {
    background: var(--icp-bg);
}

.icafepay ::-webkit-scrollbar-thumb {
    background: var(--icp-border);
    border-radius: 8px;
}

.icafepay ::-webkit-scrollbar-thumb:hover {
    background: var(--icp-muted);
}


/* =========================================================
   19. AUTH ROOT
   ========================================================= */

.icafepay.icp-auth {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;

    margin: 0;
    padding: 0;

    background: var(--icp-bg);
    color: var(--icp-text);

    overflow-x: hidden;
}


/* =========================================================
   20. AUTH HERO
   ========================================================= */

.icp-auth .hero {
    position: relative;

    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;

    margin: 0;
    padding: 0;

    background:
        radial-gradient(
            ellipse at 8% 12%,
            rgba(var(--icp-accent-rgb), .10) 0,
            transparent 52%
        ),
        var(--icp-bg);
}


/* =========================================================
   21. AUTH CONTENT
   ========================================================= */

.icp-auth .hero-content {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;

    display: flex;
    align-items: center;

    margin: 0;
    padding: 52px 24px;

    box-sizing: border-box;
}

.icp-auth .hero-content > .container {
    width: 100%;
    max-width: 1120px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 0;
    padding-right: 0;
}


/* =========================================================
   22. AUTH GRID
   ========================================================= */

.icp-auth .icp-auth-grid {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(360px, 440px);

    align-items: center;
    column-gap: 72px;

    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box;
}

.icp-auth .icp-auth-grid::before,
.icp-auth .icp-auth-grid::after {
    display: none !important;
    content: none !important;
}


/* =========================================================
   23. AUTH INTRO
   ========================================================= */

.icp-auth .icp-auth-intro {
    min-width: 0;
    width: auto;

    margin: 0;
    padding: 0;

    text-align: left;
}

.icp-auth .icp-auth-brand {
    display: inline-block;

    margin: 0 0 44px;
    padding: 0;

    line-height: 0;
    text-decoration: none;
}

.icp-auth .icp-auth-brand img {
    display: block;

    width: clamp(184px, 21vw, 215px);
    height: auto;
    max-width: 100%;
}


/* Logo inside auth */

.icp-auth .icp-logo-dark {
    display: block !important;
}

.icp-auth .icp-logo-light {
    display: none !important;
}

html[data-icp-theme="light"] .icp-auth .icp-logo-dark {
    display: none !important;
}

html[data-icp-theme="light"] .icp-auth .icp-logo-light {
    display: block !important;
}


/* Eyebrow */

.icp-auth .icp-eyebrow {
    margin: 0 0 14px;

    color: var(--icp-accent);

    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;

    letter-spacing: 2.1px;
    text-transform: uppercase;
}


/* Heading */

.icp-auth .icp-auth-intro h1 {
    max-width: 650px;

    margin: 0 0 20px;

    color: var(--icp-text);

    font-size: clamp(36px, 4vw, 43px);
    font-weight: 650;
    line-height: 1.18;
    letter-spacing: -1.3px;
}

.icp-auth .icp-auth-intro h1 span {
    color: var(--icp-accent);
}


/* Description */

.icp-auth .icp-auth-description {
    max-width: 470px;

    margin: 0 0 26px;

    color: var(--icp-muted);

    font-size: 16px;
    line-height: 1.7;
}


/* Feature tags */

.icp-auth .icp-auth-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin: 0;
    padding: 0;
}

.icp-auth .icp-auth-features span {
    display: inline-flex;
    align-items: center;

    min-height: 32px;

    padding: 6px 11px;

    background: transparent;
    color: var(--icp-muted);

    border: 1px solid var(--icp-border);
    border-radius: 7px;

    font-size: 12px;
    line-height: 1.2;
}

.icp-auth .icp-auth-features i {
    margin-right: 6px;
    color: var(--icp-accent);
}


/* Caption */

.icp-auth .icp-auth-caption {
    display: block;

    margin-top: 42px;

    color: var(--icp-muted);

    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   24. LOGIN CARD
   ========================================================= */

.icp-auth .login-form {
    position: relative;

    float: none !important;

    width: 100% !important;
    max-width: 440px;
    min-width: 0;

    margin: 0 !important;
    padding: 32px;

    box-sizing: border-box;

    background: var(--icp-surface);
    color: var(--icp-text);

    border: 1px solid var(--icp-border);
    border-radius: 18px;

    text-align: left;

    box-shadow: 0 20px 60px rgba(0, 0, 0, .24);
}

html[data-icp-theme="light"] .icp-auth .login-form {
    background: var(--icp-surface);
    border-color: var(--icp-border);

    box-shadow:
        0 10px 30px rgba(31, 35, 40, .08),
        0 2px 6px rgba(31, 35, 40, .05);
}


/* =========================================================
   25. LOGIN HEADER
   ========================================================= */

.icp-auth .login-form > h3 {
    margin: 0 0 8px;

    color: var(--icp-text) !important;

    font-size: 23px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.4px;
}

.icp-auth .login-form > p {
    margin: 0 0 24px;

    color: var(--icp-muted) !important;

    font-size: 13px;
    line-height: 1.65;
}


/* =========================================================
   26. LOGIN PANEL
   ========================================================= */

.icp-auth .panel2,
.icp-auth .panel-primary2 {
    width: 100%;

    margin: 0;
    padding: 0;

    background: transparent;

    border: 0;
    box-shadow: none;
}

.icp-auth .panel-heading,
.icp-auth .panel-body {
    padding: 0;
    background: transparent;
    border: 0;
}

.icp-auth .panel-heading {
    margin-bottom: 20px;
}


/* =========================================================
   27. AUTH TABS
   ========================================================= */

.icp-auth .nav.nav-tabs {
    display: flex;

    width: 100%;

    margin: 0;
    padding: 4px;

    gap: 4px;

    background: var(--icp-raised);

    border: 0;
    border-radius: 9px;

    box-sizing: border-box;
}

.icp-auth .nav.nav-tabs > li {
    float: none;

    flex: 1 1 0;

    width: auto;

    margin: 0;
    text-align: center;
}

.icp-auth .nav.nav-tabs > li > a {
    display: block;

    margin: 0;
    padding: 10px 8px;

    background: transparent;
    color: var(--icp-muted);

    border: 0 !important;
    border-radius: 6px;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;

    transition:
        background-color .15s ease,
        color .15s ease;
}

.icp-auth .nav.nav-tabs > li > a:hover {
    background: var(--icp-hover);
    color: var(--icp-text);
}

.icp-auth .nav.nav-tabs > li.active > a,
.icp-auth .nav.nav-tabs > li.active > a:focus,
.icp-auth .nav.nav-tabs > li.active > a:hover {
    background: var(--icp-hover) !important;
    color: var(--icp-accent) !important;
    border: 0 !important;
}


/* =========================================================
   28. TAB CONTENT
   ========================================================= */

.icp-auth .nav.nav-tabs + .tab-content,
.icp-auth .tab-content {
    width: 100%;

    margin: 0;
    padding: 0;

    background: transparent;

    border: 0;
    box-shadow: none;
}


/* =========================================================
   29. AUTH FORM
   ========================================================= */

.icp-auth .signup-form {
    width: 100%;
    margin: 0;
    padding: 0;
}

.icp-auth .signup-form .form-input-group {
    position: relative;

    width: 100%;
    min-height: 0;

    margin: 0 0 16px;
    padding: 0;

    background: transparent;

    border: 0;
    border-radius: 0;
}

.icp-auth .signup-form .form-input-group > i {
    display: none;
}


/* Label */

.icp-auth .signup-form .form-input-group label {
    display: block;

    margin: 0 0 7px !important;
    padding: 0;

    color: var(--icp-muted);

    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}


/* Input */

.icp-auth .signup-form .form-input-group input {
    display: block;

    width: 100%;
    height: 48px;

    margin: 0;
    padding: 12px 14px;

    box-sizing: border-box;

    background: var(--icp-input);
    color: var(--icp-text);

    border: 1px solid var(--icp-border);
    border-radius: 8px;

    font-size: 14px;
    line-height: 1.4;

    box-shadow: none;

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background-color .15s ease;
}

.icp-auth .signup-form .form-input-group input:focus {
    outline: none;

    border-color: var(--icp-accent);

    box-shadow:
        0 0 0 3px rgba(var(--icp-accent-rgb), .14);
}

.icp-auth .signup-form .form-input-group input::placeholder {
    color: var(--icp-muted);
    opacity: 1;
}


/* Autofill */

.icp-auth .signup-form .form-input-group input:-webkit-autofill,
.icp-auth .signup-form .form-input-group input:-webkit-autofill:hover,
.icp-auth .signup-form .form-input-group input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--icp-text);

    -webkit-box-shadow:
        0 0 0 1000px var(--icp-input) inset;

    transition:
        background-color 9999s ease-in-out 0s;
}


/* =========================================================
   30. VALIDATION
   ========================================================= */

.icp-auth .field-validation-error {
    margin: 0;
    padding: 0;
}

.icp-auth .help-block {
    margin: 5px 0 0;
    color: var(--icp-danger);
    font-size: 12px;
    line-height: 1.4;
}

.icp-auth .signup-form .help-block:empty {
    display: none;
}


/* =========================================================
   31. LOGIN BUTTON
   ---------------------------------------------------------
   No margin-top on button.
   Spacing before button is handled by the last form field.
   ========================================================= */

.icp-auth .signup-form .sign-up-btn {
    display: block;

    width: 100%;
    height: 48px;

    margin: 0 !important;
    padding: 12px 16px;

    background: var(--icp-fill) !important;

    border: 1px solid var(--icp-fill);
    border-radius: 8px;

    color: var(--icp-on-accent) !important;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        transform .1s ease,
        box-shadow .15s ease;
}


/* Keep normal spacing before Login button */

.icp-auth .signup-form .form-input-group:last-of-type {
    margin-bottom: 8px !important;
}


.icp-auth .signup-form .sign-up-btn:hover {
    background: var(--icp-accent) !important;
    border-color: var(--icp-accent);
    color: var(--icp-on-accent) !important;
}

.icp-auth .signup-form .sign-up-btn:focus-visible {
    outline: 2px solid var(--icp-accent);
    outline-offset: 2px;
}

.icp-auth .signup-form .sign-up-btn:active {
    transform: translateY(1px);
}

/* =========================================================
   32. AUTH ALERT
   ========================================================= */

.icp-auth .alert,
.icp-auth .alertsuccess {
    margin: 0 0 18px;
    padding: 11px 13px;

    border-radius: 8px;

    font-size: 13px;
    line-height: 1.5;
}

.icp-auth .alert-danger {
    background: rgba(248, 81, 73, .12);
    color: var(--icp-danger);
    border-color: rgba(248, 81, 73, .40);
}

.icp-auth .alert-success,
.icp-auth .alertsuccess {
    background: rgba(63, 185, 80, .12);
    color: var(--icp-success);
    border-color: rgba(63, 185, 80, .40);
}


/* =========================================================
   33. AUTH THEME BUTTON
   ========================================================= */

.icafepay.icp-auth .icp-auth-theme {
    position: absolute;

    top: 18px;
    right: 20px;

    z-index: 20;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-width: 78px;
    height: 36px;

    margin: 0;
    padding: 5px 11px;

    background: var(--icp-raised);
    color: var(--icp-text);

    border: 1px solid var(--icp-border);
    border-radius: 8px;

    font-size: 13px;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .1s ease;
}

.icafepay.icp-auth .icp-auth-theme:hover {
    background: var(--icp-hover);
    color: var(--icp-accent);
    border-color: var(--icp-accent);
}

.icafepay.icp-auth .icp-auth-theme:active {
    transform: translateY(1px);
}

.icafepay.icp-auth .icp-auth-theme > span:first-child {
    font-size: 18px;
    line-height: 1;
}


/* =========================================================
   34. TABLET
   900px AND BELOW
   ========================================================= */

@media (max-width: 900px) {

    /* AUTH */

    .icp-auth .hero-content {
        padding: 44px 24px;
    }

    .icp-auth .hero-content > .container {
        max-width: 760px;
    }

    .icp-auth .icp-auth-grid {
        grid-template-columns: 1fr;
        row-gap: 28px;
    }

    .icp-auth .icp-auth-intro {
        text-align: center;
    }

    .icp-auth .icp-auth-brand {
        margin-bottom: 24px;
    }

    .icp-auth .icp-auth-intro h1,
    .icp-auth .icp-auth-description,
    .icp-auth .icp-auth-features,
    .icp-auth .icp-auth-caption,
    .icp-auth .icp-eyebrow {
        display: none;
    }

    .icp-auth .login-form {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* =========================================================
   35. MOBILE NAVBAR
   ========================================================= */

@media (max-width: 767px) {

    .icafepay .topbar .navbar-nav {
        margin-top: 0;
        margin-bottom: 0;
    }

    .icafepay .topbar .navbar-default > .container > div {
        display: flex;
        align-items: center;
    }

    .icafepay .topbar .navbar-right {
        margin-left: auto;
    }

    .icafepay .topbar .navbar-default .container {
        padding: 0 8px;
    }

    .icafepay .button-menu-mobile {
        padding: 0 10px;
    }

    .icafepay .topbar .icp-topbar-row {
        height: 64px;
    }

    .icafepay .icp-topbar-actions > li > .icp-theme-toggle {
        margin: 0 3px;
    }

    .icafepay .icp-topbar-actions #notification > a {
        width: 38px;
        padding: 0 7px;
    }


    /* Sidebar */

    .icafepay #sidebar-menu {
        padding: 12px 10px 24px;
    }

    .icafepay #sidebar-menu > ul > li > a {
        padding: 9px 12px !important;
    }

    .icafepay #sidebar-menu > ul > li.active > a,
    .icafepay #sidebar-menu > ul > li > a.active,
    .icafepay #sidebar-menu > ul > li > a.subdrop {
        padding: 9px 12px !important;
    }

    .icafepay #sidebar-menu .menu-title {
        margin: 7px 0 5px;
        padding: 9px 12px;
    }


    /* Theme toggle */

    .icafepay .icp-theme-toggle {
        min-width: 34px;
        width: 34px;
        height: 34px;

        margin-left: 3px;
        margin-right: 3px;

        padding: 5px 7px;
    }

    .icafepay .icp-theme-toggle > .icp-theme-label {
        display: none;
    }


    /* AUTH */

    .icp-auth .hero-content {
        min-height: 100vh;
        min-height: 100svh;
        min-height: 100dvh;

        display: block;

        padding: 28px 16px 24px;
    }

    .icp-auth .hero-content > .container {
        width: 100%;
        max-width: 440px;
    }

    .icp-auth .icp-auth-grid {
        display: block !important;
        width: 100%;

        margin: 0 !important;
        padding: 0 !important;
    }

    .icp-auth .icp-auth-intro {
        width: 100%;
        margin: 0;
        text-align: center;
    }

    .icp-auth .icp-auth-brand {
        margin-bottom: 22px;
    }

    .icp-auth .icp-auth-brand img {
        width: 184px;
        margin-left: auto;
        margin-right: auto;
    }

    .icp-auth .login-form {
        display: block !important;

        width: 100% !important;
        max-width: 440px;

        margin: 0 auto !important;
        padding: 24px 20px;

        border-radius: 15px;
    }

    .icp-auth .login-form > h3 {
        font-size: 22px;
    }

    .icp-auth .signup-form .form-input-group input {
        height: 48px;

        /*
           16px prevents mobile browser auto-zoom
           when focusing form fields.
        */
        font-size: 16px;
    }

    .icafepay.icp-auth .icp-auth-theme {
        top: 10px;
        right: 10px;

        min-width: 36px;
        width: 36px;

        padding: 5px 7px;
    }

    .icafepay.icp-auth .icp-auth-theme .icp-theme-label {
        display: none;
    }
}


/* =========================================================
   36. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .icp-auth .hero-content {
        padding: 24px 12px 20px;
    }

    .icp-auth .login-form {
        padding: 22px 18px;
        border-radius: 14px;
    }

    .icp-auth .login-form > h3 {
        font-size: 21px;
    }

    .icp-auth .login-form > p {
        font-size: 12px;
    }

    .icp-auth .nav.nav-tabs > li > a {
        padding: 9px 6px;
        font-size: 12px;
    }

    .icp-auth .signup-form .form-input-group {
        margin-bottom: 14px;
    }
}


/* =========================================================
   37. VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

    .icp-auth .hero-content {
        padding-left: 10px;
        padding-right: 10px;
    }

    .icp-auth .login-form {
        padding: 20px 15px;
    }

    .icp-auth .icp-auth-brand img {
        width: 165px;
    }
}


/* =========================================================
   38. PANEL HEADING
   ---------------------------------------------------------
   Override components.css
   ========================================================= */

.icafepay .panel-heading {
    background-color: var(--icp-raised) !important;
    color: var(--icp-text) !important;
    border: none !important;
    border-top: 0 !important;
    padding: 10px 20px !important;
}


/* panel-border */

.icafepay .panel-border .panel-heading {
    background-color: var(--icp-raised) !important;
    color: var(--icp-text) !important;

    border: none !important;
    border-top: 1px solid var(--icp-border) !important;

    padding: 10px 20px !important;
}


/* panel-inverse */

.icafepay .panel-inverse > .panel-heading {
    background-color: var(--icp-raised) !important;
    color: var(--icp-text) !important;

    border-color: var(--icp-border) !important;
}


/* panel-border + panel-inverse */

.icafepay .panel-border.panel-inverse .panel-heading {
    background-color: var(--icp-raised) !important;
    color: var(--icp-text) !important;

    border-color: var(--icp-border) !important;
    border-top: 1px solid var(--icp-border) !important;
}


/* =========================================================
   39. PANEL HEADING CONTENT
   ========================================================= */

.icafepay .panel-heading h1,
.icafepay .panel-heading h2,
.icafepay .panel-heading h3,
.icafepay .panel-heading h4,
.icafepay .panel-heading h5,
.icafepay .panel-heading h6,
.icafepay .panel-heading .panel-title {
    color: var(--icp-text) !important;
}

.icafepay .panel-heading a {
    color: var(--icp-text);
}

.icafepay .panel-heading a:hover {
    color: var(--icp-accent);
}


/* =========================================================
   40. PANEL BODY
   ---------------------------------------------------------
   Restore normal layout
   ========================================================= */

.icafepay .panel-body {
    padding: 16px 20px !important;
}

.icafepay .panel-border .panel-body {
    padding: 16px 20px !important;
}


/* =========================================================
   41. INLINE SEARCH FORM
   ========================================================= */

.icafepay .panel-body .form-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.icafepay .panel-body .form-inline .form-group {
    margin: 0;
}

.icafepay .panel-body .form-inline .form-control {
    margin: 0;
}

.icafepay .panel-body .form-inline .input-group {
    display: flex;
    align-items: center;
    margin: 0;
}

.icafepay .panel-body .form-inline .btn {
    margin: 0;
}


/* =========================================================
   42. PANEL BORDER
   ---------------------------------------------------------
   Restore visual separation
   ========================================================= */

.icafepay .panel.panel-border {
    background: var(--icp-surface) !important;
    border: 1px solid var(--icp-border) !important;
    border-radius: 6px;
    overflow: hidden;

    box-sizing: border-box;
}


/* Panel heading */

.icafepay .panel.panel-border .panel-heading {
    background: var(--icp-raised) !important;
    color: var(--icp-text) !important;

    border: 0 !important;
    border-top: 3px solid var(--icp-accent) !important;
    border-bottom: 1px solid var(--icp-border) !important;

    padding: 10px 20px !important;
}


/* Empty heading */

.icafepay .panel.panel-border .panel-heading:empty {
    min-height: 4px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* Panel body */

.icafepay .panel.panel-border .panel-body {
    padding: 16px 20px !important;

    background: var(--icp-surface) !important;
    color: var(--icp-text);

    border: 0 !important;
}


/* Form layout */

.icafepay .panel.panel-border .panel-body .form-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    margin: 0;
}

.icafepay .panel.panel-border .panel-body .form-group {
    margin: 0;
}

.icafepay .panel.panel-border .panel-body .input-group {
    display: flex;
    align-items: center;
    margin: 0;
}


/* =========================================================
   43. CARD-BOX
   ---------------------------------------------------------
   Restore content spacing
   ========================================================= */

.icafepay .card-box {
    padding: 20px !important;

    background: var(--icp-surface);
    color: var(--icp-text);

    border: 1px solid var(--icp-border);
    border-radius: 8px;

    box-sizing: border-box;
}


/* =========================================================
   44. CARD HEADER
   ========================================================= */

.icafepay .card-box > .header-title {
    margin-top: 0 !important;
    margin-bottom: 18px !important;

    color: var(--icp-text);
}


/* =========================================================
   45. EXPENSE FILTER
   ========================================================= */

.icafepay .card-box .icp-pay-filter {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;

    gap: 12px;

    margin: 0;
    padding: 0;
}


/* Filter field */

.icafepay .card-box .icp-pay-filter > .form-group {
    display: flex;
    flex-direction: column;

    margin: 0;
}


/* Label */

.icafepay .card-box .icp-pay-filter > .form-group > label {
    margin: 0 0 6px;

    color: var(--icp-muted);

    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}


/* Input / Select */

.icafepay .card-box .icp-pay-filter .form-control {
    min-width: 150px;
    height: 38px;

    margin: 0;

    background: var(--icp-input);
    color: var(--icp-text);

    border: 1px solid var(--icp-border);
    border-radius: 7px;

    box-sizing: border-box;
}


/* Date */

.icafepay .card-box .icp-pay-filter .icp-pay-dates .form-control {
    min-width: 150px;
}


/* Buttons */

.icafepay .card-box .icp-pay-filter > .btn {
    height: 38px;
    margin: 0;
}


/* =========================================================
   46. FILTER ERROR
   ========================================================= */

.icafepay .card-box #ExpenseFilterError {
    margin: 8px 0 0;
    min-height: 0;
}


/* =========================================================
   47. QUICK ACTIONS
   ========================================================= */

.icafepay .card-box .icp-pay-shortcuts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 8px;

    margin-top: 14px;
}

.icafepay .card-box .icp-pay-shortcuts .btn {
    margin: 0;
}


/* =========================================================
   48. PERIOD LABEL
   ========================================================= */

.icafepay .card-box .icp-pay-period {
    margin: 14px 0 0;

    color: var(--icp-muted);

    font-size: 13px;
    line-height: 1.5;
}


/* =========================================================
   49. SUMMARY
   ========================================================= */

.icafepay .card-box .icp-pay-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 16px;
}

.icafepay .card-box .icp-pay-summary .alert {
    display: inline-flex;
    align-items: center;

    margin: 0;

    padding: 9px 12px;

    border-radius: 7px;
}


/* =========================================================
   50. LIGHT THEME - CARD
   ========================================================= */

html[data-icp-theme="light"] .icafepay .card-box {
    background: var(--icp-surface);
    color: var(--icp-text);
    border-color: var(--icp-border);

    box-shadow:
        0 1px 2px rgba(31, 35, 40, .04),
        0 6px 18px rgba(31, 35, 40, .05);
}


/* =========================================================
   51. LIGHT THEME - CARD INPUT
   ========================================================= */

html[data-icp-theme="light"]
.icafepay .card-box .icp-pay-filter .form-control {
    background: var(--icp-input);
    color: var(--icp-text);
    border-color: var(--icp-border);
}

html[data-icp-theme="light"]
.icafepay .card-box .icp-pay-filter .form-control:focus {
    background: var(--icp-surface);
    border-color: var(--icp-accent);

    box-shadow:
        0 0 0 3px rgba(var(--icp-accent-rgb), .14);
}


/* =========================================================
   52. LIGHT THEME - PANEL / CARD CONTRAST
   ========================================================= */

html[data-icp-theme="light"] .icafepay .panel-heading {
    background: var(--icp-raised) !important;
    color: var(--icp-text) !important;
    border-color: var(--icp-border) !important;
}

html[data-icp-theme="light"] .icafepay .panel-heading h1,
html[data-icp-theme="light"] .icafepay .panel-heading h2,
html[data-icp-theme="light"] .icafepay .panel-heading h3,
html[data-icp-theme="light"] .icafepay .panel-heading h4,
html[data-icp-theme="light"] .icafepay .panel-heading h5,
html[data-icp-theme="light"] .icafepay .panel-heading h6,
html[data-icp-theme="light"] .icafepay .panel-heading .panel-title {
    color: var(--icp-text) !important;
}


/* =========================================================
   53. LIGHT THEME - PANEL BORDER
   ========================================================= */

html[data-icp-theme="light"] .icafepay .panel.panel-border {
    background: var(--icp-surface) !important;
    border-color: var(--icp-border) !important;

    box-shadow:
        0 1px 2px rgba(31, 35, 40, .04),
        0 5px 16px rgba(31, 35, 40, .04);
}

html[data-icp-theme="light"]
.icafepay .panel.panel-border .panel-heading {
    background: var(--icp-raised) !important;
    color: var(--icp-text) !important;

    border-top-color: var(--icp-accent) !important;
    border-bottom-color: var(--icp-border) !important;
}

html[data-icp-theme="light"]
.icafepay .panel.panel-border .panel-body {
    background: var(--icp-surface) !important;
    color: var(--icp-text) !important;
}


/* =========================================================
   54. LIGHT THEME - TABLE
   ========================================================= */

html[data-icp-theme="light"] .icafepay .table > thead > tr > th {
    background: var(--icp-table-head);
    color: var(--icp-text);
    border-color: var(--icp-border);
}

html[data-icp-theme="light"] .icafepay .table-striped > tbody > tr:nth-of-type(odd) {
    background: var(--icp-table-row) !important;
}

html[data-icp-theme="light"] .icafepay .table-striped > tbody > tr:nth-of-type(even) {
    background: var(--icp-table-alt) !important;
}

html[data-icp-theme="light"] .icafepay .table-hover > tbody > tr:hover {
    background: var(--icp-table-hover) !important;
}


/* =========================================================
   55. LIGHT THEME - SIDEBAR / TOPBAR
   ========================================================= */

html[data-icp-theme="light"] .icafepay .side-menu.left {
    background: var(--icp-sidebar);
    border-right-color: var(--icp-border);
}

html[data-icp-theme="light"] .icafepay .topbar,
html[data-icp-theme="light"] .icafepay .topbar .topbar-left,
html[data-icp-theme="light"] .icafepay .navbar-default {
    background: var(--icp-sidebar);
}


/* =========================================================
   56. LIGHT THEME - AUTH LOGIN
   ========================================================= */

html[data-icp-theme="light"]
.icp-auth .login-form {
    background: var(--icp-surface);
    border-color: var(--icp-border);
}

html[data-icp-theme="light"]
.icp-auth .signup-form .form-input-group input {
    background: var(--icp-input);
    color: var(--icp-text);
    border-color: var(--icp-border);
}

html[data-icp-theme="light"]
.icp-auth .signup-form .form-input-group input:focus {
    background: var(--icp-surface);
    border-color: var(--icp-accent);
}


/* =========================================================
   57. TABLET - CARD BOX
   ========================================================= */

@media (max-width: 900px) {

    .icafepay .card-box {
        padding: 18px !important;
    }

    .icafepay .card-box .icp-pay-filter {
        gap: 10px;
    }

    .icafepay .card-box .icp-pay-filter > .form-group {
        flex: 1 1 180px;
        min-width: 0;
    }

    .icafepay .card-box .icp-pay-filter > .btn {
        flex: 0 0 auto;
    }
}


/* =========================================================
   58. MOBILE - CARD BOX
   ========================================================= */

@media (max-width: 767px) {

    .icafepay .card-box {
        padding: 15px !important;
        border-radius: 8px;
    }

    .icafepay .card-box > .header-title {
        margin-bottom: 15px !important;
    }

    .icafepay .card-box .icp-pay-filter {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 10px;
    }

    .icafepay .card-box .icp-pay-filter > .form-group {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    
    

    .icafepay .card-box .icp-pay-filter .form-control {
        width: 100%;
        min-width: 0;
        height: 42px;

        font-size: 16px;
    }

    .icafepay .card-box .icp-pay-filter > .btn {
        width: 100%;
        height: 42px;
    }

    .icafepay .card-box .icp-pay-shortcuts {
        margin-top: 12px;
    }

    .icafepay .card-box .icp-pay-shortcuts .btn {
        flex: 1 1 auto;
        min-height: 38px;
    }

    .icafepay .card-box .icp-pay-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .icafepay .card-box .icp-pay-summary .alert,
    .icafepay .card-box .icp-pay-summary .btn {
        width: 100%;
        box-sizing: border-box;
    }
}


/* =========================================================
   59. SMALL MOBILE - CARD BOX
   ========================================================= */

@media (max-width: 420px) {

    .icafepay .card-box {
        padding: 13px !important;
    }

    .icafepay .card-box .icp-pay-shortcuts {
        gap: 6px;
    }

    .icafepay .card-box .icp-pay-shortcuts .btn {
        font-size: 12px;
        padding-left: 8px;
        padding-right: 8px;
    }
}


/* =========================================================
   60. GLOBAL BACKGROUND
   ---------------------------------------------------------
   Override core.css
   ========================================================= */

html,
body.icafepay {
    background: var(--icp-bg) !important;
    color: var(--icp-text);
}

html[data-icp-theme="light"],
html[data-icp-theme="light"] body.icafepay {
    background: var(--icp-bg) !important;
    color: var(--icp-text);
}

/* =========================================================
   USER COUPON SEARCH FORM
   ---------------------------------------------------------
   Fix:
   - Nested .form-group
   - Bootstrap pull-right conflict with flex
   - Keep all controls on one row
   - Keep action buttons on the right
   ========================================================= */

.icafepay #search_form.form-inline {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;

    width: 100%;
    margin: 0;
    padding: 0;
}


/* ---------------------------------------------------------
   Main left group
   --------------------------------------------------------- */

.icafepay #search_form.form-inline > .form-group:first-child {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;

    flex: 1 1 auto !important;

    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ---------------------------------------------------------
   Nested form groups
   --------------------------------------------------------- */

.icafepay #search_form.form-inline
> .form-group:first-child
> .form-group {
    display: block !important;

    flex: 0 0 auto !important;

    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ---------------------------------------------------------
   Select
   --------------------------------------------------------- */

.icafepay #search_form.form-inline
> .form-group:first-child
> .form-group
> .form-control {
    width: auto !important;
    min-width: 150px;
    height: 38px;

    margin: 0 !important;
}


/* Limit select */

.icafepay #search_form #search_limit {
    min-width: 75px;
}


/* ---------------------------------------------------------
   Search input group
   --------------------------------------------------------- */

.icafepay #search_form.form-inline
> .form-group:first-child
> .input-group {
    display: flex !important;
    align-items: stretch !important;

    flex: 0 1 240px !important;

    width: 240px;
    min-width: 180px;

    margin: 0 !important;
}

.icafepay #search_form.form-inline
> .form-group:first-child
> .input-group
> .form-control {
    width: 100%;

    height: 38px;
    margin: 0 !important;
}

.icafepay #search_form.form-inline
> .form-group:first-child
> .input-group
> .input-group-btn {
    display: flex;
}

.icafepay #search_form.form-inline
> .form-group:first-child
> .input-group
> .input-group-btn > .btn {
    height: 38px;
    margin: 0 !important;
}


/* ---------------------------------------------------------
   Total point badge
   --------------------------------------------------------- */

.icafepay #search_form > .badge {
    position: static !important;

    flex: 0 0 auto !important;

    float: none !important;

    height: 38px;

    display: inline-flex !important;
    align-items: center !important;

    margin: 0 0 0 4px !important;
    padding: 0 10px !important;

    box-sizing: border-box;

    white-space: nowrap;
}


/* ---------------------------------------------------------
   Right action groups
   --------------------------------------------------------- */

.icafepay #search_form > .input-group.pull-right {
    display: flex !important;
    align-items: center !important;

    position: static !important;

    float: none !important;

    flex: 0 0 auto !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Remove old Bootstrap pull-right behavior */

.icafepay #search_form .pull-right {
    float: none !important;
}


/* Buttons */

.icafepay #search_form > .input-group.pull-right .input-group-btn {
    display: flex;
    align-items: center;
}

.icafepay #search_form > .input-group.pull-right .btn {
    height: 38px;

    margin: 0 !important;

    white-space: nowrap;
}


/* ---------------------------------------------------------
   Keep action area at right
   --------------------------------------------------------- */

.icafepay #search_form > .badge {
    margin-left: auto !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .icafepay #search_form.form-inline > .form-group:first-child {
        flex-wrap: wrap !important;
    }

    .icafepay #search_form.form-inline
    > .form-group:first-child
    > .input-group {
        flex: 1 1 220px !important;
        width: auto;
    }

    .icafepay #search_form > .badge {
        margin-left: 0 !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .icafepay #search_form.form-inline {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        width: 100%;
        gap: 10px !important;
    }

    .icafepay #search_form.form-inline
    > .form-group:first-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        width: 100% !important;

        gap: 10px !important;
    }

    .icafepay #search_form.form-inline
    > .form-group:first-child
    > .form-group {
        width: 100% !important;
    }

    .icafepay #search_form.form-inline
    > .form-group:first-child
    > .form-group
    > .form-control {
        width: 100% !important;
        min-width: 0 !important;
        height: 42px;
    }

    .icafepay #search_form.form-inline
    > .form-group:first-child
    > .input-group {
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
    }

    .icafepay #search_form.form-inline
    > .form-group:first-child
    > .input-group
    .form-control {
        height: 42px;
        font-size: 16px;
    }

    .icafepay #search_form.form-inline
    > .form-group:first-child
    > .input-group
    .btn {
        height: 42px;
    }

    .icafepay #search_form > .badge {
        width: 100%;

        justify-content: center;

        margin: 0 !important;
    }

    .icafepay #search_form > .input-group.pull-right {
        width: 100% !important;
    }

    .icafepay #search_form > .input-group.pull-right .input-group-btn,
    .icafepay #search_form > .input-group.pull-right .btn {
        width: 100%;
    }

    .icafepay #search_form > .input-group.pull-right .btn {
        height: 42px;
    }
}


@media (max-width: 767px) {

    /* Form search */
    #search_form.icp-pay-filter,
    .icafepay .card-box #search_form {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Tất cả form-group */
    .icafepay .card-box #search_form > .form-group {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        flex: 0 0 auto !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 8px !important;

        box-sizing: border-box !important;
    }

    /* Select */
    .icafepay .card-box #search_form > .form-group > .form-control {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;
    }

    /* Override inline width:150px */
    .icafepay .card-box #search_form #search_category {
        width: 100% !important;
    }

    /* Input search */
    .icafepay .card-box #search_form .input-group {
        display: flex !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;
    }

    .icafepay .card-box #search_form .input-group > .form-control {
        flex: 1 1 auto !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        box-sizing: border-box !important;
    }

    /* Search button */
    .icafepay .card-box #search_form .input-group-btn {
        flex: 0 0 40px !important;

        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

        box-sizing: border-box !important;
    }

    .icafepay .card-box #search_form .input-group-btn .btn {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        box-sizing: border-box !important;
    }

    /* Hai nút bên phải */
    .icafepay .card-box #search_form > .form-group.pull-right {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;

        width: 100% !important;
        max-width: 100% !important;

        float: none !important;
        margin-left: 0 !important;
    }

    .icafepay .card-box #search_form > .form-group.pull-right .btn {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

 /* =========================================================
    ICP DASHBOARD SETTINGS / WIDGET CHOICES
    Responsive Light / Dark theme
    ========================================================= */

.icp-widget-choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    min-width: 0;
    margin-top: 12px;
}

/* Mỗi lựa chọn */
.icp-widget-choices .icp-check {
    display: flex;
    align-items: center;
    gap: 9px;

    width: 100%;
    min-width: 0;
    min-height: 42px;

    margin: 0;
    padding: 9px 11px;

    box-sizing: border-box;

    border: 1px solid var(--icp-border);
    border-radius: 7px;

    background: var(--icp-surface);
    color: var(--icp-text);

    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;

    cursor: pointer;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

/* Checkbox */
.icp-widget-choices .icp-check input[type="checkbox"] {
    flex: 0 0 auto;

    width: 17px;
    height: 17px;

    margin: 0;

    cursor: pointer;
}

/* Text không làm card bị tràn */
.icp-widget-choices .icp-check {
    overflow: hidden;
}

.icp-widget-choices .icp-check input[type="checkbox"] + * {
    min-width: 0;
}

/* Hover */
.icp-widget-choices .icp-check:hover {
    border-color: var(--icp-primary);
    background: var(--icp-hover);
}

/* Focus */
.icp-widget-choices .icp-check:focus-within {
    border-color: var(--icp-primary);
    box-shadow: 0 0 0 2px rgba(51, 122, 183, .12);
}

/* ---------------------------------------------------------
   Remember filters
   --------------------------------------------------------- */

.modal-body > hr {
    margin: 18px 0 14px;
    border-top: 1px solid var(--icp-border);
}

.modal-body > .icp-check {
    display: flex;
    align-items: center;
    gap: 9px;

    width: 100%;
    min-width: 0;

    margin: 0 0 14px;
    padding: 0;

    color: var(--icp-text);
    font-size: 13px;
    font-weight: 500;

    cursor: pointer;
}

.modal-body > .icp-check input[type="checkbox"] {
    flex: 0 0 auto;

    width: 17px;
    height: 17px;

    margin: 0;

    cursor: pointer;
}

/* ---------------------------------------------------------
   Date mode
   --------------------------------------------------------- */

.modal-body > label[for="icpDateMode"] {
    display: block;

    margin: 0 0 6px;

    color: var(--icp-text);

    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.modal-body > #icpDateMode {
    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    box-sizing: border-box;

    height: 38px;
}

/* Disabled select */
.modal-body > #icpDateMode:disabled {
    opacity: .65;
    cursor: not-allowed;
}

/* ---------------------------------------------------------
   Description / status
   --------------------------------------------------------- */

.modal-body > p:first-child {
    margin-top: 0;
    margin-bottom: 12px;

    color: var(--icp-text-secondary);

    font-size: 13px;
    line-height: 1.5;
}

.modal-body > p.text-muted {
    margin-bottom: 0;

    font-size: 12px;
    line-height: 1.5;

    color: var(--icp-text-secondary);
}

#icpSettingsStatus {
    min-height: 20px;

    margin: 8px 0 0;

    font-size: 12px;
    line-height: 1.4;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .icp-widget-choices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .modal-body {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;

        overflow-x: hidden;
    }

    .icp-widget-choices {
        display: grid;

        grid-template-columns: 1fr;

        gap: 8px;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;
    }

    .icp-widget-choices .icp-check {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        min-height: 44px;

        padding: 10px 12px;

        box-sizing: border-box;

        font-size: 14px;
    }

    .icp-widget-choices .icp-check input[type="checkbox"] {
        width: 18px;
        height: 18px;
    }

    .modal-body > #icpDateMode {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .modal-body > p:first-child {
        font-size: 13px;
    }

    .modal-body > p.text-muted {
        font-size: 12px;
    }
}


/* =========================================================
   VERY SMALL PHONE
   ========================================================= */

@media (max-width: 375px) {

    .icp-widget-choices {
        gap: 7px;
    }

    .icp-widget-choices .icp-check {
        min-height: 42px;
        padding: 9px 10px;

        font-size: 13px;
    }
}

 /* =========================================================
    DASHBOARD - SỐ LIỆU THEO NGÀY
    ========================================================= */

.icafepay .card-box {
    position: relative;
}

/* Form chứa tiêu đề + ngày */
.icafepay .card-box #filter_form {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin: 0;
}

/* Tiêu đề */
.icafepay .card-box #filter_form .header-title {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;

    min-width: 0;

    margin: 0;
    line-height: 38px;
}

/* Ô chọn ngày */
.icafepay .card-box #filter_time {
    flex: 0 0 auto;

    width: 150px;
    max-width: 150px;
    min-width: 0;

    height: 38px;

    margin-left: 12px;

    box-sizing: border-box;
}

/* Nút Tùy chỉnh dashboard */
.icafepay .card-box #icpCustomize {
    position: absolute;

    top: 15px;
    right: 15px;

    width: auto;
    max-width: none;

    height: 38px;

    padding: 0 15px;

    white-space: nowrap;

    box-sizing: border-box;

    border-radius: 6px;
}

/* Status */
.icafepay .card-box #icpDashboardStatus {
    margin: 8px 0 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .icafepay .card-box #filter_form {
        padding-right: 0;
    }

    .icafepay .card-box #filter_form .header-title {
        display: flex;
        align-items: center;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        padding-right: 0;

        font-size: 15px;
        line-height: 38px;
    }

    .icafepay .card-box #filter_time {
        flex: 1 1 auto;

        width: auto;
        max-width: 150px;
        min-width: 0;

        margin-left: 8px;
    }

    .icafepay .card-box #icpCustomize {
        position: static;

        display: block;

        width: 100%;
        max-width: 100%;

        height: 38px;

        margin-top: 12px;

        padding: 0 12px;

        box-sizing: border-box;
    }

    .icafepay .card-box #icpDashboardStatus {
        margin-top: 8px;
    }
}


/* =========================================================
   EXPENSE FILTER - BUTTON & TOTAL COLORS
   ---------------------------------------------------------
   Mỗi nút một tông màu riêng (RGB trong --icp-tone).
   Dark dùng tông sáng, Light dùng tông đậm để đủ tương phản.
   ========================================================= */

.icafepay .card-box .icp-pay-filter,
.icafepay .card-box .icp-pay-shortcuts,
.icafepay .card-box .icp-pay-summary {
    --icp-c-blue: 88, 166, 255;
    --icp-c-purple: 188, 140, 255;
    --icp-c-teal: 86, 212, 195;
    --icp-c-amber: 210, 153, 34;
    --icp-c-red: 248, 81, 73;
    --icp-c-green: 63, 185, 80;
    --icp-c-on: #0D1117;
}

html[data-icp-theme="light"] .icafepay .card-box .icp-pay-filter,
html[data-icp-theme="light"] .icafepay .card-box .icp-pay-shortcuts,
html[data-icp-theme="light"] .icafepay .card-box .icp-pay-summary {
    --icp-c-blue: 9, 105, 218;
    --icp-c-purple: 130, 80, 223;
    --icp-c-teal: 15, 118, 110;
    --icp-c-amber: 154, 103, 0;
    --icp-c-red: 207, 34, 46;
    --icp-c-green: 26, 127, 55;
    --icp-c-on: #FFFFFF;
}

/* Gán tông cho từng nút */
.icafepay .card-box .icp-pay-filter > .btn-custom                       { --icp-tone: var(--icp-c-teal); }
.icafepay .card-box .icp-pay-filter > a.btn-default                     { --icp-tone: var(--icp-c-red); }
.icafepay .card-box #ExpensePendingImports                              { --icp-tone: var(--icp-c-amber); }
.icafepay .card-box [data-expense-shortcut="today"]                     { --icp-tone: var(--icp-c-blue); }
.icafepay .card-box [data-expense-shortcut="yesterday"]                 { --icp-tone: var(--icp-c-purple); }
.icafepay .card-box [data-expense-shortcut="week"]                      { --icp-tone: var(--icp-c-teal); }
.icafepay .card-box [data-expense-shortcut="month"]                     { --icp-tone: var(--icp-c-green); }
.icafepay .card-box .icp-pay-summary .btn                               { --icp-tone: var(--icp-c-green); }
.icafepay .card-box .icp-pay-summary .alert                             { --icp-tone: var(--icp-c-red); }

/* Nút viền nhạt (Bỏ lọc, lọc nhanh, chọn nhanh thời gian) */
.icafepay .card-box .icp-pay-filter > a.btn.btn-default,
.icafepay .card-box .icp-pay-shortcuts .btn.btn-default {
    background: rgba(var(--icp-tone), .12) !important;
    color: rgb(var(--icp-tone)) !important;
    border-color: rgba(var(--icp-tone), .45) !important;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.icafepay .card-box .icp-pay-filter > a.btn.btn-default:hover,
.icafepay .card-box .icp-pay-filter > a.btn.btn-default:focus,
.icafepay .card-box .icp-pay-shortcuts .btn.btn-default:hover,
.icafepay .card-box .icp-pay-shortcuts .btn.btn-default:focus {
    background: rgba(var(--icp-tone), .22) !important;
    border-color: rgb(var(--icp-tone)) !important;
}

/* Nút nền đặc (Lọc chi tiêu, Duyệt danh sách, lọc nhanh đang bật) */
.icafepay .card-box .icp-pay-filter > .btn.btn-custom,
.icafepay .card-box .icp-pay-summary .btn.btn-default,
.icafepay .card-box #ExpensePendingImports.btn.icp-filter-active {
    background: rgb(var(--icp-tone)) !important;
    color: var(--icp-c-on) !important;
    border-color: rgb(var(--icp-tone)) !important;
    font-weight: 600;
    transition: filter .15s ease, box-shadow .15s ease;
}

.icafepay .card-box .icp-pay-filter > .btn.btn-custom:hover,
.icafepay .card-box .icp-pay-summary .btn.btn-default:hover,
.icafepay .card-box #ExpensePendingImports.btn.icp-filter-active:hover {
    filter: brightness(1.08);
}

.icafepay .card-box #ExpensePendingImports.btn.icp-filter-active {
    box-shadow: 0 0 0 3px rgba(var(--icp-tone), .25);
}

/* Viền focus bàn phím */
.icafepay .card-box .icp-pay-filter > .btn:focus-visible,
.icafepay .card-box .icp-pay-shortcuts .btn:focus-visible,
.icafepay .card-box .icp-pay-summary .btn:focus-visible {
    outline: 2px solid rgb(var(--icp-tone));
    outline-offset: 2px;
}

/* Tổng tiền chi */
/* !important: icafepay-management.css ép .alert về màu xám bằng !important */
.icafepay .card-box .icp-pay-summary .alert.alert-info {
    gap: 6px;
    background: rgba(var(--icp-tone), .10) !important;
    color: var(--icp-text) !important;
    border: 1px solid rgba(var(--icp-tone), .45) !important;
    border-left: 4px solid rgb(var(--icp-tone)) !important;
    font-weight: 600;
}

.icafepay .card-box .icp-pay-summary #TotalPay {
    color: rgb(var(--icp-tone)) !important;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .2px;
}

/* "Bỏ lọc" là thẻ <a>: căn giữa chữ theo chiều dọc như nút <button> */
.icafepay .card-box .icp-pay-filter > a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}