/* SDS-owned editors are outside the legacy component cascade. */
@scope (:root) to (.sds-edit-owned, .sds-edit-dialog) {
/*
 * Yoshine ERP shared component contract
 * -------------------------------------
 * Loaded after page styles and scoped to .erp-ui-v2. The selectors below
 * normalize primitives without taking ownership of page-specific layouts.
 */

body.erp-ui-v2 {
    color: var(--erp-text-primary);
    font-size: var(--erp-font-size-body);
    line-height: var(--erp-line-height-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.erp-ui-v2 ::selection {
    color: var(--erp-text-primary);
    background: #dce7ff;
}

body.erp-ui-v2 :where(h1, h2, h3, h4, h5, h6) {
    color: var(--erp-text-primary);
}

body.erp-ui-v2 :where(strong, b) {
    color: inherit;
}

body.erp-ui-v2 :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--erp-font-family);
    text-wrap: balance;
}

body.erp-ui-v2 :where(p, li, dd, figcaption) {
    text-wrap: pretty;
}

body.erp-ui-v2 .topbar h1 {
    font-size: clamp(24px, 2vw, var(--erp-font-size-title));
    font-weight: var(--erp-font-weight-bold);
    line-height: var(--erp-line-height-tight);
    letter-spacing: -.025em;
}

body.erp-ui-v2 .page-subtitle {
    margin-top: 3px;
    color: var(--erp-text-muted);
    font-size: var(--erp-font-size-label);
    font-weight: var(--erp-font-weight-regular);
    line-height: var(--erp-line-height-snug);
}

/*
 * Keyboard focus stays visible on action controls. Form fields already render
 * their active state through the control border or wrapper focus ring; adding
 * the global outline there creates a second blue frame (notably on login).
 */
body.erp-ui-v2 :where(
    a[href], button, summary,
    [role="button"], [role="tab"], [role="option"], [tabindex]:not([tabindex="-1"])
):focus-visible {
    outline: 2px solid var(--erp-focus-outline) !important;
    outline-offset: 2px !important;
}

body.erp-ui-v2 :where(input, select, textarea):focus-visible {
    outline: 0 !important;
    outline-offset: 0 !important;
}

body.erp-ui-v2 :where(button, input, select, textarea, summary) {
    font: inherit;
}

body.erp-ui-v2 :where(button, .btn, [role="button"]) {
    -webkit-tap-highlight-color: transparent;
}

/* Bootstrap controls form the shared baseline for page-specific editors. */
body.erp-ui-v2:not(.login-page) :where(.form-control, .form-select) {
    min-height: var(--erp-control-height);
    border: 1px solid var(--erp-border-default);
    border-radius: var(--erp-radius-control) !important;
    background-color: var(--erp-surface-raised);
    color: var(--erp-text-primary);
    font-size: var(--erp-font-size-label);
    font-weight: var(--erp-font-weight-medium);
    line-height: 1.35;
    box-shadow: none;
    transition:
        border-color var(--erp-motion-fast) ease-out,
        background-color var(--erp-motion-fast) ease-out,
        box-shadow var(--erp-motion-fast) ease-out;
}

body.erp-ui-v2:not(.login-page) :where(.form-control-sm, .form-select-sm) {
    min-height: var(--erp-control-height-compact);
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: var(--erp-font-size-meta);
}

body.erp-ui-v2:not(.login-page) :where(.form-control-lg, .form-select-lg) {
    min-height: var(--erp-control-height-large);
    font-size: var(--erp-font-size-body-lg);
}

body.erp-ui-v2 :where(
    .form-control, .form-select,
    input[type="text"], input[type="search"], input[type="password"],
    input[type="email"], input[type="number"], input[type="date"],
    input[type="datetime-local"], textarea, select
)::placeholder {
    color: #9aa5b4;
    opacity: 1;
}

body.erp-ui-v2:not(.login-page) :where(.form-control, .form-select):hover:not(:disabled):not([readonly]) {
    border-color: var(--erp-border-strong);
}

body.erp-ui-v2:not(.login-page) :where(.form-control, .form-select):focus {
    border-color: var(--erp-color-primary);
    outline: 0;
    background-color: var(--erp-surface-raised);
    box-shadow: var(--erp-focus-ring);
}

body.erp-ui-v2 :where(input, select, textarea, button):disabled,
body.erp-ui-v2 :where(.form-control, .form-select)[readonly] {
    cursor: not-allowed;
    color: var(--erp-text-disabled);
    background-color: var(--erp-surface-muted);
    border-color: var(--erp-border-subtle);
    opacity: .78;
}

body.erp-ui-v2 textarea.form-control {
    min-height: 88px;
    line-height: var(--erp-line-height-body);
    resize: vertical;
}

body.erp-ui-v2 input[type="date"],
body.erp-ui-v2 input[type="datetime-local"] {
    color-scheme: light;
}

body.erp-ui-v2 input[type="date"]::-webkit-calendar-picker-indicator,
body.erp-ui-v2 input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    padding: 4px;
    border-radius: var(--erp-radius-xs);
    cursor: pointer;
    opacity: .62;
}

body.erp-ui-v2 input[type="date"]::-webkit-calendar-picker-indicator:hover,
body.erp-ui-v2 input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    background: var(--erp-color-primary-soft);
    opacity: 1;
}

/* Selection controls share one hit target while preserving custom rendering. */
body.erp-ui-v2 :where(
    input[type="checkbox"]:not([hidden]):not([aria-hidden="true"]):not(.visually-hidden),
    input[type="radio"]:not([hidden]):not([aria-hidden="true"]):not(.visually-hidden),
    .form-check-input
) {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    margin-top: 0;
    border-color: var(--erp-border-strong);
    accent-color: var(--erp-color-primary);
    box-shadow: none;
    cursor: pointer;
}

body.erp-ui-v2 :where(
    input[type="checkbox"]:not([hidden]):not([aria-hidden="true"]):not(.visually-hidden),
    .form-check-input[type="checkbox"]
) {
    border-radius: 4px;
}

body.erp-ui-v2 :where(
    input[type="radio"]:not([hidden]):not([aria-hidden="true"]):not(.visually-hidden),
    .form-check-input[type="radio"]
) {
    border-radius: 50%;
}

body.erp-ui-v2 .form-check-input:checked,
body.erp-ui-v2 .form-check-input:indeterminate {
    background-color: var(--erp-color-primary);
    border-color: var(--erp-color-primary);
}

body.erp-ui-v2 .form-check-input:focus-visible {
    outline: 0;
    box-shadow: var(--erp-focus-ring);
}

body.erp-ui-v2 .form-check-label {
    color: var(--erp-text-secondary);
    font-size: var(--erp-font-size-label);
    line-height: 1.4;
}

body.erp-ui-v2 .form-switch .form-check-input {
    width: 36px;
    height: 20px;
    flex-basis: 36px;
    border-radius: var(--erp-radius-pill);
    background-color: #cbd5e1;
    border-color: transparent;
    transition:
        background-color var(--erp-motion-normal) var(--erp-ease-out),
        box-shadow var(--erp-motion-fast) ease-out;
}

body.erp-ui-v2 .form-switch .form-check-input:checked {
    background-color: var(--erp-color-primary);
}

/* Buttons use one geometry and one interaction rhythm. */
body.erp-ui-v2:not(.login-page) .btn {
    min-height: var(--erp-control-height);
    padding: 7px 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: var(--erp-radius-control) !important;
    font-size: var(--erp-font-size-label);
    font-weight: var(--erp-font-weight-semibold);
    line-height: 1;
    letter-spacing: 0;
    box-shadow: none;
    transition:
        color var(--erp-motion-fast) ease-out,
        background-color var(--erp-motion-fast) ease-out,
        border-color var(--erp-motion-fast) ease-out,
        box-shadow var(--erp-motion-fast) ease-out,
        transform var(--erp-motion-fast) var(--erp-ease-out);
}

body.erp-ui-v2:not(.login-page) .btn-sm {
    min-height: var(--erp-control-height-compact);
    padding: 5px 10px;
    font-size: var(--erp-font-size-meta);
}

body.erp-ui-v2:not(.login-page) .btn-lg {
    min-height: var(--erp-control-height-large);
    padding: 9px 16px;
    font-size: var(--erp-font-size-body);
}

body.erp-ui-v2:not(.login-page) .btn-primary {
    background: var(--erp-color-primary);
    border-color: var(--erp-color-primary);
    color: var(--erp-text-inverse);
}

body.erp-ui-v2:not(.login-page) .btn-primary:hover:not(:disabled) {
    background: var(--erp-color-primary-hover);
    border-color: var(--erp-color-primary-hover);
}

body.erp-ui-v2:not(.login-page) .btn-primary:active:not(:disabled) {
    background: var(--erp-color-primary-active);
    border-color: var(--erp-color-primary-active);
    transform: scale(.98);
}

body.erp-ui-v2:not(.login-page) :where(.btn-outline-secondary, .btn-light) {
    background: var(--erp-surface-raised);
    border-color: var(--erp-border-default);
    color: var(--erp-text-secondary);
}

body.erp-ui-v2:not(.login-page) :where(.btn-outline-secondary, .btn-light):hover:not(:disabled) {
    background: var(--erp-surface-subtle);
    border-color: var(--erp-border-strong);
    color: var(--erp-text-primary);
}

body.erp-ui-v2:not(.login-page) .btn:disabled,
body.erp-ui-v2:not(.login-page) .btn.disabled {
    color: var(--erp-text-disabled);
    background: var(--erp-surface-muted);
    border-color: var(--erp-border-subtle);
    box-shadow: none;
    opacity: 1;
}

/* Base cards, menus and overlays no longer fall back to the legacy square UI. */
body.erp-ui-v2:not(.login-page) .card {
    border-color: var(--erp-border-default);
    border-radius: var(--erp-radius-card) !important;
    background: var(--erp-surface-raised);
    box-shadow: var(--erp-shadow-card);
}

body.erp-ui-v2:not(.login-page) .card-header {
    min-height: 48px;
    padding: 12px 16px;
    border-bottom-color: var(--erp-border-subtle);
    border-radius: calc(var(--erp-radius-card) - 1px) calc(var(--erp-radius-card) - 1px) 0 0 !important;
}

body.erp-ui-v2:not(.login-page) .card-footer {
    padding: 10px 16px;
    border-top-color: var(--erp-border-subtle);
    border-radius: 0 0 calc(var(--erp-radius-card) - 1px) calc(var(--erp-radius-card) - 1px) !important;
}

body.erp-ui-v2 .badge {
    border-radius: var(--erp-radius-pill) !important;
    font-size: var(--erp-font-size-meta);
    font-weight: var(--erp-font-weight-semibold);
    letter-spacing: 0;
}

/* Trigger wrappers stay layout-only; only rendered floating surfaces receive
   the shared popover card treatment. */
body.erp-ui-v2 :where(.dropdown-menu, .ticket-sheet-action-popover) {
    z-index: var(--erp-z-popover);
    padding: 6px;
    border: 1px solid var(--erp-border-default);
    border-radius: var(--erp-radius-card) !important;
    background: var(--erp-surface-raised);
    box-shadow: var(--erp-shadow-floating);
}

body.erp-ui-v2 .dropdown-item {
    min-height: 34px;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 7px;
    color: var(--erp-text-secondary);
    font-size: var(--erp-font-size-label);
}

body.erp-ui-v2 .dropdown-item:hover,
body.erp-ui-v2 .dropdown-item:focus {
    color: var(--erp-text-primary);
    background: var(--erp-color-primary-soft);
}

body.erp-ui-v2 :where(
    .modal-content, dialog, .smart-modal, .option-modal-card,
    .profile-crop-dialog, .system-action-dialog, .org-dialog,
    .role-confirm-dialog
) {
    border: 1px solid var(--erp-border-default);
    border-radius: var(--erp-radius-panel) !important;
    background: var(--erp-surface-raised);
    box-shadow: var(--erp-shadow-overlay);
}

body.erp-ui-v2 :where(.modal, .option-modal-mask, .profile-crop-modal, .system-action-dialog-backdrop) {
    z-index: var(--erp-z-modal);
}

body.erp-ui-v2 :where(.offcanvas, .role-drawer, .smart-ticket-drawer, .performance-department-drawer) {
    z-index: var(--erp-z-drawer);
}

/* Ticket detail drawers stay on the same visual plane in split and overlay modes. */
body.erp-ui-v2 :where(.smart-ticket-drawer, .workflow-inline-detail) {
    box-shadow: none !important;
}

body.erp-ui-v2 .flash-messages {
    z-index: var(--erp-z-toast);
}

body.erp-ui-v2 :where(.modal-header, .smart-modal-head, .option-modal-head, .org-dialog-head) {
    min-height: 54px;
    padding: 14px 16px;
    border-bottom-color: var(--erp-border-subtle);
}

body.erp-ui-v2 :where(.modal-title, .smart-modal-title, .option-modal-title, .org-dialog-title) {
    color: var(--erp-text-primary);
    font-size: var(--erp-font-size-section);
    font-weight: var(--erp-font-weight-bold);
    line-height: var(--erp-line-height-tight);
}

body.erp-ui-v2 :where(.modal-footer, .smart-modal-actions, .option-modal-footer, .org-dialog-actions) {
    min-height: 58px;
    padding: 10px 16px;
    gap: 8px;
    border-top-color: var(--erp-border-subtle);
}

/* Tables: normalize type and borders, while page styles retain column sizing. */
body.erp-ui-v2 :where(.table, .smart-table-grid, .workflow-table) {
    color: var(--erp-text-primary);
    font-variant-numeric: tabular-nums;
}

body.erp-ui-v2 :where(.table, .smart-table-grid, .workflow-table) th {
    color: var(--erp-text-secondary);
    background: var(--erp-surface-subtle);
    font-size: var(--erp-font-size-label);
    font-weight: var(--erp-font-weight-semibold);
    line-height: 1.35;
    text-transform: none;
    letter-spacing: 0;
    border-color: var(--erp-border-subtle);
}

body.erp-ui-v2 :where(.table, .smart-table-grid, .workflow-table) td {
    color: var(--erp-text-primary);
    font-size: var(--erp-font-size-label);
    line-height: 1.45;
    border-color: var(--erp-border-subtle);
}

body.erp-ui-v2 :where(.table, .smart-table-grid, .workflow-table) > :not(caption) > * > * {
    padding: 8px 10px;
}

body.erp-ui-v2 :where(.table, .smart-table-grid, .workflow-table) thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--erp-surface-subtle);
    background-clip: padding-box;
}

body.erp-ui-v2 .table-hover > tbody > tr:hover > * {
    background: var(--ys-table-selection-hover-bg);
}

body.erp-ui-v2 :where(.table-responsive, .smart-table-scroll, .workflow-table-scroll, .role-matrix-scroll) {
    min-height: 0;
    scrollbar-gutter: stable;
}

/* Opt-in primitives for new and migrated surfaces. */
body.erp-ui-v2 .erp-card {
    border: 1px solid var(--erp-border-default);
    border-radius: var(--erp-radius-card);
    background: var(--erp-surface-raised);
    box-shadow: var(--erp-shadow-card);
}

body.erp-ui-v2 .erp-field {
    min-height: var(--erp-control-height);
    padding: 0 11px;
    border: 1px solid var(--erp-border-default);
    border-radius: var(--erp-radius-control);
    background: var(--erp-surface-raised);
    color: var(--erp-text-primary);
    font-size: var(--erp-font-size-label);
}

body.erp-ui-v2 .erp-empty {
    min-height: 160px;
    padding: var(--erp-space-6);
    display: grid;
    place-items: center;
    align-content: center;
    gap: var(--erp-space-2);
    color: var(--erp-text-muted);
    text-align: center;
}

body.erp-ui-v2 .erp-empty.is-compact {
    min-height: 96px;
    padding: var(--erp-space-4);
}

body.erp-ui-v2 .erp-empty-title {
    color: var(--erp-text-primary);
    font-size: var(--erp-font-size-body);
    font-weight: var(--erp-font-weight-semibold);
}

body.erp-ui-v2 .erp-empty-copy {
    max-width: 36ch;
    margin: 0;
    font-size: var(--erp-font-size-label);
    line-height: var(--erp-line-height-body);
}

/* Scrollbars stay inside work areas and remain quiet until interaction. */
body.erp-ui-v2 * {
    scrollbar-width: thin;
    scrollbar-color: #c7d0dc transparent;
}

body.erp-ui-v2 *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.erp-ui-v2 *::-webkit-scrollbar-track {
    background: transparent;
}

body.erp-ui-v2 *::-webkit-scrollbar-thumb {
    min-height: 30px;
    border: 2px solid transparent;
    border-radius: var(--erp-radius-pill);
    background: #c7d0dc;
    background-clip: padding-box;
}

body.erp-ui-v2 *::-webkit-scrollbar-thumb:hover {
    background: #aeb9c8;
    background-clip: padding-box;
}

@media (hover: hover) and (pointer: fine) {
    body.erp-ui-v2:not(.login-page) .btn:hover:not(:disabled),
    body.erp-ui-v2 :where(.workspace-wide-toggle, .org-icon-btn):hover:not(:disabled) {
        transform: translateY(-1px);
    }

    /*
     * System interaction contract: pointer hover may change color, surface,
     * border, or position, but it must not add visual elevation. Keep the
     * existing :focus-visible shadows so keyboard users retain a clear ring.
     */
    body.erp-ui-v2 :where(
        button,
        input[type="button"],
        input[type="submit"],
        input[type="reset"],
        [role="button"],
        .btn,
        [class$="-button"],
        [class*="-button "],
        [class$="-action"],
        [class*="-action "],
        [class$="-toggle"],
        [class*="-toggle "],
        [class$="-trigger"],
        [class*="-trigger "],
        a[class$="-create"],
        a[class*="-create "],
        a[class$="-enter-work"],
        a[class*="-enter-work "],
        .user-command-inspector footer a
    ):hover:not(:focus-visible) {
        box-shadow: none !important;
    }
}

@media (max-width: 992px) {
    body.erp-ui-v2 .topbar h1 {
        font-size: 23px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.erp-ui-v2 *,
    body.erp-ui-v2 *::before,
    body.erp-ui-v2 *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

}