/**
 * Buttons Design System
 * This file serves as the single source of truth for button styles in the Media Portal application.
 * Use these classes as reference when implementing buttons throughout the application.
 */

/* ===========================
   ICON CLASSES
   =========================== */
/* CRITICAL: Always use these classes for icons, NEVER use inline styles */

.icon-primary {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.icon-filter {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.icon-action {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    /* Icon color: #DD5B19 - use SVG with this color pre-defined */
}

.icon-filter {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    /* Default color: #A4A7AE */
    /* Hover color: #717680 */
    /* Use SVG files with these colors pre-defined */
}

/* Alias: icon-tertiary (legacy support) */
.icon-tertiary {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ===========================
   PRIMARY BUTTON
   =========================== */
.button-primary {
    background-color: #DD5B19;
    color: #FFFFFF;
    padding: 16px 16px !important;
    height: 40px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    font-family: Inter, sans-serif;
    border-radius: 12px;
    border: 1px solid #8A2E10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.button-primary:hover {
    background-color: #B74417;
    color: #FFFFFF;
    border: 1px solid #8A2E10;
}

.button-primary img,
.button-primary svg {
    width: 20px;
    height: 20px;
    /* Icon should be #F5B97C - use inline SVG or create SVG with this color */
}

.button-primary:hover img,
.button-primary:hover svg {
    /* Icon should change to #F9D7AF on hover */
}

/* Alias: button-primary-icon (legacy support) */
.button-primary-icon {
    background-color: #DD5B19;
    color: #FFFFFF;
    padding: 16px 16px !important;
    height: 40px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    font-family: Inter, sans-serif;
    border-radius: 12px;
    border: 1px solid #8A2E10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.button-primary-icon:hover {
    background-color: #B74417;
    color: #FFFFFF;
    border: 1px solid #8A2E10;
}

.button-primary-icon img,
.button-primary-icon svg {
    width: 20px;
    height: 20px;
    /* Icon should be #F5B97C - use inline SVG or create SVG with this color */
}

.button-primary-icon:hover img,
.button-primary-icon:hover svg {
    /* Icon should change to #F9D7AF on hover */
}

/* Alias: btn-main-reddish (legacy support) */
.btn-main-reddish {
    background-color: #DD5B19;
    color: #FFFFFF;
    border-color: #8A2E10 !important;
}

.btn-main-reddish:hover {
    background-color: #B34318;
    color: #FFFFFF;
}

/* ===========================
   FILTER BUTTON
   =========================== */
.button-filter {
    background-color: #FFFFFF;
    color: #414651;
    border: 1px solid #D5D7DA;
    padding: 16px 16px !important;
    height: 40px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    font-family: Inter, sans-serif;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s;
}

.button-filter:hover {
    background-color: #FAFAFA;
    color: #252B37;
    border: 1px solid #D5D7DA;
    text-decoration: none;
}

/* Filter button selected state */
.button-filter-selected-text {
    color: #DD5B19 !important;
    font-weight: 600 !important;
}

/* Filter button close/clear icon */
.button-filter-close {
    font-size: 18px;
    line-height: 1;
    color: #999;
    cursor: pointer;
    padding: 0;
    margin-left: 6px;
    position: relative;
    top: -1px;
}

.button-filter-close:hover {
    color: #333;
}

/* Alias: button-tertiary (legacy support) */
.button-tertiary {
    background-color: #FFFFFF;
    color: #414651;
    border: 1px solid #D5D7DA;
    padding: 16px 16px !important;
    height: 40px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    font-family: Inter, sans-serif;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.button-tertiary:hover {
    background-color: #FAFAFA;
    color: #252B37;
    border: 1px solid #D5D7DA;
}

/* Alias: btn-tertiary (legacy support) */
.btn-tertiary {
    background-color: #FFFFFF;
    color: #414651;
    border: 1px solid #D5D7DA;
    padding: 16px 16px !important;
    height: 40px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    font-family: Inter, sans-serif;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-tertiary:hover {
    background-color: #FAFAFA;
    color: #252B37;
    border-color: #D5D7DA;
}

/* ===========================
   SECONDARY BUTTON (BRAND)
   =========================== */
.btn-secondary-brand {
    background: #FFF2ED;
    color: #CD5229;
    border: 1px solid #FFF2ED;
    padding: 16px 16px !important;
    height: 38px;
    border-radius: 12px;
    font-size: 16px;
    font-family: Inter, sans-serif;
}

.btn-secondary-brand:hover {
    background: #FFE6DA;
    color: #CD5229;
    border-color: #FFE6DA;
}

/* ===========================
   QUATERNARY BUTTON
   =========================== */
.btn-quaternary {
    background: transparent;
    color: #687083;
    border: none;
    padding: 16px 16px !important;
    height: 38px;
    border-radius: 12px;
    font-size: 16px;
    font-family: Inter, sans-serif;
}

.btn-quaternary:hover {
    background: #F9FAFB;
    color: #687083;
}

/* ===========================
   ACTION BUTTON
   =========================== */
.button-action {
    background-color: #FEF7EE;
    color: #B74417;
    border: 1px solid #dee2e6;
    padding: 16px 16px !important;
    height: 40px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    font-family: Inter, sans-serif;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s;
}

.button-action:hover {
    background-color: #FDEDD7;
    color: #92371A;
    border: 1px solid #dee2e6;
    text-decoration: none;
}

/* ===========================
   DARK BUTTON
   =========================== */
.button-dark {
    background-color: #231F20;
    color: #FFFFFF;
    padding: 16px 16px !important;
    min-width: 110px;
    height: 40px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    font-family: Inter, sans-serif;
    border-radius: 12px;
    border: 1px solid #000000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    text-decoration: none;
}

.button-dark:hover {
    background-color: #000000;
    color: #FFFFFF;
    border: 1px solid #000000;
    text-decoration: none;
}

.button-dark img,
.button-dark svg {
    width: 20px;
    height: 20px;
}

/* Icon class for dark button (white icons) */
.icon-dark {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Static hover helper for documentation */
.button-dark.hover-static {
    background-color: #000000;
    border: 1px solid #000000;
}

/* ===========================
   OUTLINE BUTTON (icon-only)
   =========================== */
.button-outline {
    background-color: #FFFFFF;
    color: #414651;
    padding: 10px !important;
    width: 40px;
    height: 40px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    font-family: Inter, sans-serif;
    border-radius: 12px;
    border: 1px solid #D5D7DA;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
    text-decoration: none;
}

.button-outline:hover {
    background-color: #F8F9FA;
    color: #414651;
    border: 1px solid #D5D7DA;
    text-decoration: none;
}

.button-outline img,
.button-outline svg {
    width: 20px;
    height: 20px;
}

/* Icon class for outline button */
.icon-outline {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Static hover helper for documentation */
.button-outline.hover-static {
    background-color: #F8F9FA;
}

/* ===========================
   LEGACY: OLD FILTER BUTTON (DO NOT USE)
   Use .button-filter instead (updated design)
   =========================== */
/* Alias: type-filter-button (legacy support) */
.type-filter-button {
    height: 38px;
    padding: 16px 16px !important;
    background-color: #FFFFFF;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    color: #656565;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
    width: 100%;
    min-width: 150px;
}

.type-filter-button:hover {
    background-color: #F8F9FA;
    border: 1px solid #dee2e6;
}

/* ===========================
   NAVIGATION TOGGLE BUTTON
   =========================== */
.nav-toggle-group {
    display: flex;
    background: #FEF7EE;
    border: 1px solid #FEF7EE;
    border-radius: 12px;
    padding: 4px 6px;
    height: 40px;
    gap: 0;
    width: 100%;
}

.nav-toggle-button {
    background: #FEF7EE !important;
    color: #DD5B19 !important;
    border: 1px solid transparent !important;
    padding: 6px 14px !important;
    font-size: 14px !important;
    font-family: Inter, sans-serif !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
    min-width: 150px !important;
    height: 30px !important;
    flex-grow: 1 !important;
    user-select: none !important;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.nav-toggle-button:hover {
    background: #f5e5d3 !important;
    color: #DD5B19 !important;
    border: 1px solid transparent !important;
}

.nav-toggle-button.active {
    background: #DD5B19 !important;
    color: #FFFFFF !important;
    border: 1px solid #DD5B19 !important;
}

.nav-toggle-button img,
.nav-toggle-button svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    /* No filter needed - color #B74417 is embedded in SVG */
}

.nav-toggle-button.active img,
.nav-toggle-button.active svg {
    /* Convert #B74417 icon to white for active state */
    filter: brightness(0) invert(1);
}

/* Static hover helper for documentation */
.nav-toggle-button.hover-static {
    background: #f5e5d3 !important;
    border: 1px solid transparent !important;
}

/* ===========================
   VIEW TOGGLE BUTTON
   =========================== */
.view-toggle-group {
    display: inline-flex;
    background: #FAFAFA;
    border: 1px solid #E9EAEB;
    border-radius: 12px;
    padding: 4px;
    height: 40px;
    gap: 0;
    min-width: 338px;
}

.view-toggle-button {
    background: #FAFAFA !important;
    color: #717680 !important;
    border: 1px solid transparent;
    padding: 16px 16px !important;
    font-size: 14px;
    font-family: Inter, sans-serif;
    font-weight: 600;
    line-height: 20px;
    border-radius: 12px;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    min-width: 50px;
    height: 30px;
    flex-grow: 1;
    user-select: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.view-toggle-button:hover {
    background: #FAFAFA !important;
    color: #717680 !important;
}

.view-toggle-button.active {
    background: #FFFFFF !important;
    color: #414651 !important;
    border: 1px solid #EEEEEE !important;
    border-radius: 12px;
}

.view-toggle-button img,
.view-toggle-button svg {
    width: 20px;
    height: 20px;
}

/* Static hover helper for documentation */
.view-toggle-button.hover-static {
    background: #FAFAFA !important;
    color: #717680 !important;
}

/* ===========================
   MEDIA BUTTON
   =========================== */
.button-media {
    background-color: #F8F8F8 !important;
    color: #000000 !important;
    border: none !important;
    padding: 16px 16px !important;
    height: 40px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 21px !important;
    font-family: Inter, sans-serif !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background-color 0.2s, color 0.2s !important;
    margin-right: 12px !important;
}

.button-media:hover {
    background-color: #EEEEEE !important;
    color: #000000 !important;
    text-decoration: none !important;
}

.button-media.selected {
    background-color: #FEF7EE !important;
    color: #DD5B19 !important;
    border: none !important;
}

.button-media.selected:hover {
    background-color: #FEF7EE !important;
    color: #DD5B19 !important;
}

.button-media img {
    width: 20px !important;
    height: 20px !important;
}

/* ===========================
   RESPONSIVE - MEDIUM DESKTOP (1280px - 1439px)
   =========================== */
@media all and (max-width: 1439px) {
    .button-media {
        font-size: 13px !important;
        margin-right: 12px !important;
        padding: 12px 12px !important;
    }

    .button-primary,
    .button-primary-icon,
    .button-filter,
    .button-tertiary,
    .btn-tertiary,
    .button-action,
    .button-dark,
    .nav-toggle-button,
    .view-toggle-button {
        font-size: 13px !important;
        padding: 12px 12px !important;
    }

    .btn-secondary-brand,
    .btn-quaternary {
        font-size: 15px !important;
        padding: 12px 12px !important;
    }

    .type-filter-button {
        font-size: 11px !important;
        padding: 12px 12px !important;
    }

    /* Reduce outline button for medium desktop */
    .button-outline,
    button.button-outline,
    a.button-outline {
        width: 34px !important;
        height: 34px !important;
        padding: 7px !important;
    }

    .button-outline img,
    .button-outline svg {
        width: 18px !important;
        height: 18px !important;
    }

    .view-toggle-group {
        min-width: 330px !important;
    }

    .nav-toggle-group {
        min-width: 330px !important;
    }

    .button-action {
        padding: 12px 15px !important;
    }
}

/* ===========================
   RESPONSIVE - TABLET (800px - 1279px)
   =========================== */
@media all and (max-width: 1279px) {
    .button-media {
        font-size: 11px !important;
        margin-right: 8px !important;
        padding: 8px 8px !important;
    }

    .button-primary,
    .button-primary-icon,
    .button-filter,
    .button-tertiary,
    .btn-tertiary,
    .button-action,
    .button-dark,
    .button-outline,
    .view-toggle-button {
        font-size: 11px !important;
        padding: 8px 8px !important;
    }

    .nav-toggle-button {
        font-size: 11px !important;
        padding: 4px 14px !important;
        gap: 4px !important;
        min-width: 100px !important;
    }

    .btn-secondary-brand,
    .btn-quaternary {
        font-size: 13px !important;
        padding: 8px 8px !important;
    }

    .type-filter-button {
        font-size: 9px !important;
        padding: 6px 6px !important;
    }

    /* Consistent button heights and min-widths */
    .button-primary,
    .button-primary-icon,
    .button-filter,
    .button-tertiary,
    .btn-tertiary,
    .button-action,
    .button-dark,
    .button-media,
    .nav-toggle-button,
    .view-toggle-button,
    .btn-secondary-brand,
    .btn-quaternary,
    .type-filter-button,
    .search-bar input {
        height: 30px !important;
        min-width: 90px !important;
    }

    .button-filter {
        min-width: 120px !important;
    }

    .button-action {
        min-width: 148px !important;
    }

    .date-picker-trigger {
        min-width: 200px !important;
        height: 30px !important;
    }

    /* Outline button specific sizing */
    .button-outline,
    button.button-outline,
    a.button-outline {
        background-color: #FFFFFF !important;
        color: #414651 !important;
        padding: 5px !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
    }

    .button-outline img,
    .button-outline svg {
        width: 16px !important;
        height: 16px !important;
    }

    .view-toggle-group {
        min-width: 250px !important;
        height: 30px !important;
        margin-top: 5px !important;
    }

    .view-toggle-button {
        height: 22px !important;
        padding: 4px 8px !important;
    }

    .nav-toggle-group {
        min-width: 304px !important;
        height: 30px !important;
        margin-top: 5px !important;
    }

    .nav-toggle-button {
        height: 22px !important;
        padding: 4px 8px !important;
    }
}