/**
 * Easy Store Management by AyudaWP - Admin Styles
 * Styles for the WordPress admin customizations - FRONTEND AND BACKEND
 * @since 1.0.1
 */

/* Easy Store Mode switch - always reachable, in frontend and backend.
   The storefront icon is the same in both states; the colour is what tells them
   apart, green while the mode is on. */
#wpadminbar #wp-admin-bar-ayudawp-esm-easy-mode .ab-icon {
    top: 2px;
}

#wpadminbar #wp-admin-bar-ayudawp-esm-easy-mode.ayudawp-esm-easy-mode-on .ab-icon,
#wpadminbar #wp-admin-bar-ayudawp-esm-easy-mode.ayudawp-esm-easy-mode-on .ab-item {
    color: #68de7c;
}

#wpadminbar #wp-admin-bar-ayudawp-esm-easy-mode.ayudawp-esm-easy-mode-on:hover .ab-icon,
#wpadminbar #wp-admin-bar-ayudawp-esm-easy-mode.ayudawp-esm-easy-mode-on:hover .ab-item {
    color: #8fe6a0;
}

/* Switch back node, shown while viewing the store as another user */
#wpadminbar #wp-admin-bar-ayudawp-esm-switch-back .ab-icon {
    top: 2px;
    color: #f0b849;
}

#wpadminbar #wp-admin-bar-ayudawp-esm-switch-back .ab-item {
    font-weight: 600;
}

/* Low stock warning */
#wpadminbar #wp-admin-bar-ayudawp-esm-low-stock .ab-icon {
    top: 3px;
    color: #f0b849;
}

/* Order search box inside the orders menu.
   Both controls share the same height and vertical rhythm, and box-sizing is
   forced because the admin bar resets it differently for inputs and buttons. */
#wpadminbar #wp-admin-bar-wc-orders-search .ab-item {
    height: auto;
    padding: 8px 12px;
}

#wpadminbar .ayudawp-esm-order-search {
    display: flex;
    align-items: stretch;
    gap: 5px;
    width: 232px;
    max-width: 100%;
}

#wpadminbar .ayudawp-esm-order-search-field,
#wpadminbar .ayudawp-esm-order-search-submit {
    box-sizing: border-box;
    height: 26px;
    /* min-height has to be set as well. WordPress ships
       `input[type="search"] { min-height: 40px }` with no media query, and a
       min-height always beats a height whatever the specificity, so setting only
       the height left the field taller than the button next to it. */
    min-height: 26px;
    max-height: 26px;
    margin: 0;
    border: 1px solid #50575e;
    border-radius: 3px;
    font-size: 13px;
    line-height: 24px;
    vertical-align: middle;
}

/* Touch friendly, and still the same height for both, on small screens. */
@media screen and (max-width: 782px) {
    #wpadminbar .ayudawp-esm-order-search-field,
    #wpadminbar .ayudawp-esm-order-search-submit {
        height: 34px;
        min-height: 34px;
        max-height: 34px;
        line-height: 32px;
    }
}

#wpadminbar .ayudawp-esm-order-search-field {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 7px;
    background: #fff;
    color: #1d2327;
}

#wpadminbar .ayudawp-esm-order-search-field::placeholder {
    color: #646970;
}

#wpadminbar .ayudawp-esm-order-search-submit {
    flex: 0 0 auto;
    padding: 0 10px;
    background: #f6f7f7;
    color: #1d2327;
    cursor: pointer;
    font-weight: 500;
}

#wpadminbar .ayudawp-esm-order-search-submit:hover,
#wpadminbar .ayudawp-esm-order-search-submit:focus {
    background: #fff;
}

/* Order statuses in the dropdown, one flat line each: they are independent
   states, not a hierarchy. Red means "this is what the red number on the Orders
   menu adds up", so only those two use it.

   These selectors lean on the id of the Orders node itself. Every colour rule in
   admin-bar.css and in the colour schemes carries a single id (#wpadminbar) plus
   classes and elements, and the one that paints an open dropdown,
   `#wpadminbar .quicklinks .menupop.hover ul li a`, reaches (1,3,3). Two ids win
   over all of them whatever the state, and without a single !important. */
#wpadminbar #wp-admin-bar-wc-orders li.ayudawp-esm-order-status-waiting .ab-item {
    color: #f86368;
    font-weight: 600;
}

#wpadminbar #wp-admin-bar-wc-orders li.ayudawp-esm-order-status-processing .ab-item {
    color: #68de7c;
}

#wpadminbar #wp-admin-bar-wc-orders li.ayudawp-esm-order-status-completed .ab-item {
    color: #72aee6;
}

#wpadminbar #wp-admin-bar-wc-orders li.ayudawp-esm-order-status-failed .ab-item {
    color: #f0b849;
}

#wpadminbar #wp-admin-bar-wc-orders li.ayudawp-esm-order-status-cancelled .ab-item,
#wpadminbar #wp-admin-bar-wc-orders li.ayudawp-esm-order-status-refunded .ab-item {
    color: #a7aaad;
}

#wpadminbar #wp-admin-bar-wc-orders li.ayudawp-esm-order-status .ab-item:hover,
#wpadminbar #wp-admin-bar-wc-orders li.ayudawp-esm-order-status .ab-item:focus {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

#wpadminbar #wp-admin-bar-wc-orders-all .ab-item {
    border-top: 1px solid #3c434a;
}

/* Switch to customer link on the order screen */
.ayudawp-esm-switch-link {
    margin-top: 10px;
}

/* Admin Bar Orders Icon Styling - WORKS IN FRONTEND AND BACKEND */
#wpadminbar #wp-admin-bar-wc-orders .ab-icon {
    top: 3px;
    color: #82878c;
}

#wpadminbar #wp-admin-bar-wc-orders:hover .ab-icon {
    color: #00a0d2;
}

/* Orders Pending Count Styling - IMPROVED FOR FRONTEND */
#wpadminbar #wp-admin-bar-wc-orders .awaiting-mod {
    display: inline-block; /* Changed from inline to inline-block for better control */
    vertical-align: top;
    margin-left: 2px;
}

#wpadminbar #wp-admin-bar-wc-orders .pending-count {
    background: #d63638;
    color: #fff;
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    line-height: 17px;
    margin: 1px 0 0 2px;
    padding: 0 5px;
    border-radius: 10px;
    min-width: 7px;
    text-align: center;
    box-sizing: border-box; /* Added for better size calculation */
}

#wpadminbar #wp-admin-bar-wc-orders:hover .pending-count {
    background: #dc3232;
}

/* SPECIFIC IMPROVEMENTS FOR FRONTEND */
body:not(.wp-admin) #wpadminbar #wp-admin-bar-wc-orders .ab-icon {
    /* Specific adjustments for frontend if needed */
    display: inline-block;
}

body:not(.wp-admin) #wpadminbar #wp-admin-bar-wc-orders .pending-count {
    /* Ensure visibility in frontend */
    z-index: 99999;
    position: relative;
}

/* Dashboard Widget Adjustments - BACKEND ONLY */
body.wp-admin .dashboard-widget-holder {
    margin-bottom: 20px;
}

/* Menu Icon Adjustments for Better Visual Hierarchy - BACKEND ONLY */
body.wp-admin #adminmenu li.menu-top.toplevel_page_edit-php-post_type-shop_order .wp-menu-image:before,
body.wp-admin #adminmenu li.menu-top.toplevel_page_admin-php-page-wc-orders .wp-menu-image:before {
    content: "\f174";
}

body.wp-admin #adminmenu li.menu-top.toplevel_page_admin-php-page-wc-admin-path-2Fcustomers .wp-menu-image:before {
    content: "\f307";
}

/* Ensure proper spacing for reorganized menus - BACKEND ONLY */
body.wp-admin #adminmenu .wp-menu-separator {
    height: 5px;
}

/* Hide elements that might still appear for shop managers - BACKEND */
body.wp-admin .shop-manager-hidden {
    display: none !important;
}

/* Admin bar submenu styling for orders - FRONTEND AND BACKEND */
#wpadminbar .ab-submenu .ab-item {
    color: #eee;
    text-decoration: none;
}

#wpadminbar .ab-submenu .ab-item:hover {
    color: #00a0d2;
}

/* Responsive adjustments - FRONTEND AND BACKEND */
@media screen and (max-width: 782px) {
    #wpadminbar #wp-admin-bar-wc-orders .ab-icon {
        top: 6px;
    }
    
    #wpadminbar #wp-admin-bar-wc-orders .pending-count {
        margin: 0 0 0 2px;
        font-size: 8px; /* Slightly smaller on mobile */
        padding: 0 4px;
    }
    
    #wpadminbar #wp-admin-bar-wc-orders .awaiting-mod {
        margin-left: 1px;
    }
}

/* Ensure dashicons are available in frontend */
body:not(.wp-admin) #wpadminbar #wp-admin-bar-wc-orders .ab-icon:before {
    font-family: 'dashicons';
    content: "\f174"; /* Cart icon */
}
/* ==========================================================================
   Store panel on the dashboard
   Replaces the WordPress welcome panel for users in Easy Store Mode.
   ========================================================================== */

.ayudawp-esm-panel {
    padding: 4px 0 24px;
}

.ayudawp-esm-panel .ayudawp-esm-panel-title {
    margin: 0 90px 16px 0;
    padding: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: #1d2327;
}

.ayudawp-esm-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.ayudawp-esm-tile {
    display: block;
    position: relative;
    padding: 16px 18px 16px 20px;
    border: 1px solid #dcdcde;
    border-left: 4px solid #c3c4c7;
    border-radius: 4px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color .12s ease-in-out, box-shadow .12s ease-in-out;
}

.ayudawp-esm-tile:hover,
.ayudawp-esm-tile:focus {
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    color: inherit;
}

.ayudawp-esm-tile:focus {
    outline: 2px solid #2271b1;
    outline-offset: 1px;
    box-shadow: none;
}

.ayudawp-esm-tile-value {
    display: block;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.1;
    color: #1d2327;
}

.ayudawp-esm-tile-label {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #1d2327;
}

.ayudawp-esm-tile-note {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.5;
    color: #646970;
}

/* One accent colour per meaning, matching the order statuses in the admin bar. */
.ayudawp-esm-tile-alert {
    border-left-color: #d63638;
}

.ayudawp-esm-tile-alert .ayudawp-esm-tile-value {
    color: #d63638;
}

.ayudawp-esm-tile-warning {
    border-left-color: #dba617;
}

.ayudawp-esm-tile-warning .ayudawp-esm-tile-value {
    color: #996800;
}

.ayudawp-esm-tile-progress {
    border-left-color: #00a32a;
}

.ayudawp-esm-tile-progress .ayudawp-esm-tile-value {
    color: #007017;
}

.ayudawp-esm-tile-quiet {
    border-left-color: #2271b1;
}

.ayudawp-esm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ayudawp-esm-actions .button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ayudawp-esm-actions .button .dashicons {
    font-size: 17px;
    width: 17px;
    height: 17px;
    line-height: 1;
}

@media screen and (max-width: 782px) {
    .ayudawp-esm-panel .ayudawp-esm-panel-title {
        margin-right: 0;
        font-size: 18px;
    }

    .ayudawp-esm-tiles {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
    }

    .ayudawp-esm-tile-value {
        font-size: 26px;
    }
}