/* ============================================
   Coretax Converter - Tool-Specific Styles
   Imports shared design-system.css from root
   ============================================ */

@import url('../../css/design-system.css');

/* --- Material Symbols Fix --- */
.material-symbols-rounded { font-family: 'Material Symbols Rounded'; }

/* --- Coretax Color Overrides --- */
:root {
    --md-primary: #0070C0;
    --md-primary-light: #4A9AF5;
    --md-primary-container: #E8F0FE;
    --md-on-primary: #ffffff;
    --md-on-primary-container: #174EA6;
    --bg: #F5FAFF;
}

body { background-color: var(--bg); }

.top-bar { background: rgba(245,250,255,0.88); border-bottom-color: rgba(0,112,192,0.12); }

.filled-button { background-color: var(--md-primary); }
.filled-button:hover { box-shadow: 0 8px 24px rgba(0,112,192,0.22); }
.filled-button:disabled { background-color: var(--md-outline-variant); }
.filled-button--white { background-color: #ffffff; color: var(--md-primary); border: 1.5px solid var(--md-primary); }
.filled-button--white:hover { background-color: #f0f7ff; box-shadow: 0 8px 24px rgba(0,112,192,0.15); }
.filled-button--white:disabled { background-color: #f5f5f5; color: #aaa; border-color: #ddd; }

.tonal-button { background-color: var(--md-primary-container); color: var(--md-on-primary-container); border-color: rgba(0,112,192,0.18); }
.tonal-button:hover { background-color: #d2e3fc; box-shadow: var(--shadow-soft); }

.tonal-button--light { background-color: #E8F0FE; color: #174EA6; border-color: rgba(0,112,192,0.2); }
.tonal-button--light:hover { background-color: #d2e3fc; box-shadow: var(--shadow-soft); }

.tabs__tab--active { color: var(--md-primary); border-bottom-color: var(--md-primary); }
.tabs__tab:hover { background: rgba(0,112,192,0.06); }

.search-bar:focus-within { border-color: var(--md-primary); box-shadow: 0 0 0 3px rgba(0,112,192,0.12); }
.search-bar__match-indicator.matched { background-color: var(--md-primary); }

.data-table__th { background: var(--md-primary-container); }
.data-table__th--sortable:hover { color: var(--md-primary); }
.data-table__th--sortable.sort-asc .sort-icon,
.data-table__th--sortable.sort-desc .sort-icon { color: var(--md-primary); }

.data-table__action-btn--edit { background: #E8F0FE; color: #174EA6; }
.data-table__action-btn--edit:hover { background: #d2e3fc; }

.scroll-top-btn { background: var(--md-primary); color: var(--md-on-primary); border: none; }
.scroll-top-btn:hover { background: var(--md-primary-light); color: #fff; }

.checkbox__box::after { background: var(--md-primary); }
.checkbox input[type="checkbox"]:checked + .checkbox__box { border-color: var(--md-primary); background: var(--md-primary); }
.checkbox:hover .checkbox__box { border-color: var(--md-primary); }

.form-field__input:focus { border-color: var(--md-primary); box-shadow: 0 0 0 4px rgba(0,112,192,0.12); }

.icon-button--active { background: var(--md-primary-container); color: var(--md-primary); border-color: rgba(0,112,192,0.2); }

.dialog__scrim { background: rgba(32,33,36,0.48); }
.dialog.open .dialog__scrim { animation: scrimIn 0.3s cubic-bezier(0.2,0,0,1) both; }

.toast--success { background: #188038; }

/* --- Coretax Dialog Sizes --- */
#dialogDatabase .dialog__container {
    width: min(90vw, 960px);
    height: min(85vh, 680px);
}

/* --- Upload Sections Layout --- */
.upload-sections {
    display: flex;
    gap: 24px;
    width: 100%;
    max-width: 1060px;
    margin: 40px auto 0;
}

.upload-sections .empty-state {
    flex: 1;
    margin: 0;
    max-width: none;
}

.empty-state__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* --- Search Match (Preview Faktur) --- */
.search-bar__match-indicator.matched { background-color: #188038; }

.data-table__body tr.row-match td { background-color: #e6f4ea; }
.data-table__body tr.row-match td:first-child { box-shadow: inset 3px 0 0 #188038; }

@media (max-width: 768px) {
    .upload-sections {
        flex-direction: column;
        max-width: 500px;
    }
}