/* Shared presentation only. Form actions, permissions and order behavior stay in their templates. */
body[data-crm-page] {
    --crm-focus:#2563eb;
    --crm-ui-border:#d6dee7;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}
body[data-crm-page] *,body[data-crm-page] *::before,body[data-crm-page] *::after {box-sizing:border-box}
body[data-crm-page] :is(button,.btn,.ctrl-btn,.icon-btn,.logout-icon) {
    line-height:1.3;
    text-align:center;
    white-space:normal;
    overflow-wrap:break-word;
    vertical-align:middle;
    touch-action:manipulation;
}
body[data-crm-page] :is(button,.btn,.ctrl-btn) {transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}
body[data-crm-page] :is(a,button,input,select,textarea,summary):focus-visible {
    outline:3px solid var(--crm-focus);
    outline-offset:3px;
}
body[data-crm-page] :is(button,input,select,textarea):disabled {cursor:not-allowed;opacity:.6}
body[data-crm-page] :is(input,select,textarea) {max-width:100%}
body[data-crm-page] textarea {resize:vertical;line-height:1.5}
body[data-crm-page] input:is([type=checkbox],[type=radio]) {accent-color:#1565c0}
body[data-crm-page] :is(.page,.panel,.section,.settings-card,.field,.grid,.grid-2,.grid-3,.grid-4) {min-width:0}
body[data-crm-page] :is(.notice,.hint,.help-text,.desc,.subtitle,.panel-note) {overflow-wrap:anywhere;line-height:1.5}
body[data-crm-page] :is(.table-wrap,.table-scroll,.table-scroll-top) {max-width:100%;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
body[data-crm-page] :is(.table-wrap,.table-scroll) {scrollbar-width:thin;scrollbar-color:#adb9c7 #edf1f5}
body[data-crm-page] .table-wrap:focus-visible {outline-offset:-3px}
body[data-crm-page^=settings] :is(.nav,.actions,.panel-head,.test-row,.search-row) {flex-wrap:wrap;gap:8px}
body[data-crm-page^=settings] :is(.grid,.create-grid,.category-grid,.builder-grid,.help-grid)>* {min-width:0}
body[data-crm-page^=settings] :is(.btn,button) {min-height:38px}
body[data-crm-page^=settings] :is(.settings-card h2,.panel h2,.section h2) {overflow-wrap:anywhere;line-height:1.3}
body[data-crm-page^=settings] :is(.actions,.test-row) input {min-width:0}

/* Order toolbar: presets are real text buttons, never implicit icon-width grid cells. */
body[data-crm-page=orders] .topbar-row {
    display:flex !important;flex-wrap:wrap;align-items:flex-end;gap:12px;
}
body[data-crm-page=orders] .topbar-left {
    display:flex !important;flex:1 1 720px;flex-wrap:wrap !important;
    align-items:center;gap:8px;min-width:0;width:auto;
}
body[data-crm-page=orders] .topbar-left>.ctrl-btn--dark {flex:0 0 auto;width:auto}
body[data-crm-page=orders] .date-filter {
    display:flex !important;flex-wrap:wrap !important;align-items:center;
    gap:6px;margin:0 !important;min-width:0;
}
body[data-crm-page=orders] .date-filter label {display:inline;font-size:12px;white-space:nowrap}
body[data-crm-page=orders] .date-filter input[type=date] {
    width:140px;min-width:0;min-inline-size:0;max-width:100%;padding:7px 8px;
}
body[data-crm-page=orders] .date-filter :is(button,.ctrl-btn) {
    display:inline-flex;align-items:center;justify-content:center;
    flex:0 0 auto;width:auto;min-width:max-content;padding:8px 12px;
    white-space:nowrap;height:auto;min-height:38px;
}
body[data-crm-page=orders] .search-form {
    display:flex !important;flex:1 1 240px;flex-wrap:nowrap !important;
    align-items:center;gap:6px;min-width:200px;width:auto;
}
body[data-crm-page=orders] .search-form input[type=text] {flex:1 1 0;width:auto;max-width:none;min-width:0;height:38px}
body[data-crm-page=orders] .search-form .icon-btn {flex:0 0 38px;width:38px;height:38px;min-width:38px}
body[data-crm-page=orders] .bulk-bar {
    display:flex !important;flex:1 1 auto;flex-wrap:wrap;align-items:center;
    justify-content:flex-end;gap:8px;width:auto;min-width:0;
}
body[data-crm-page=orders] .bulk-bar .bulk-count {font-size:12px;white-space:nowrap}
body[data-crm-page=orders] .bulk-bar select {flex:1 1 190px;width:auto;max-width:280px;min-width:140px;height:38px}
body[data-crm-page=orders] .bulk-bar :is(.ctrl-btn,button) {
    display:inline-flex;align-items:center;justify-content:center;width:auto;
    min-width:0;min-height:38px;height:auto;padding:8px 12px;
}
body[data-crm-page=orders] .bulk-bar .bulk-bar__trash,
body[data-crm-page=orders] .bulk-bar .logout-icon {flex:0 0 38px;width:38px;min-width:38px;height:38px;padding:0}
body[data-crm-page=orders] .orders-stat {min-width:0}
body[data-crm-page=orders] .pagebar-row {gap:10px;flex-wrap:wrap}

/* Card forms and action groups must shrink within their own grid tracks. */
body[data-crm-page=order] :is(.grid-2,.grid-3,.grid-4)>* {min-width:0}
body[data-crm-page=order] .grid-3 {grid-template-columns:repeat(3,minmax(0,1fr))}
body[data-crm-page=order] :is(.left-actions,.right-actions,.service-actions) :is(button,.btn,a) {
    max-width:100%;min-width:0;white-space:normal !important;height:auto;min-height:38px;
}
body[data-crm-page=order] .actions {gap:12px}
body[data-crm-page=order] .order-title-line {overflow-wrap:anywhere}
body[data-crm-page=order] .order-nav a {min-height:38px;display:inline-flex;align-items:center;justify-content:center}
body[data-crm-page=login] {padding:16px 0;min-height:100svh}
body[data-crm-page=login] .login-box {box-shadow:0 8px 28px rgba(25,35,45,.09);border:1px solid #dde3eb}
body[data-crm-page=login] :is(button,input[type=text],input[type=password]) {min-height:44px}

@media(max-width:820px) {
    body[data-crm-page=order] .grid-3 {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px) {
    body[data-crm-page] :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=color]),select:not(.status-select),textarea) {font-size:16px}
    body[data-crm-page] :is(button,.btn,.ctrl-btn,.icon-btn,.logout-icon) {min-height:44px}
    body[data-crm-page] :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select) {min-height:44px}
    body[data-crm-page] :is(.page,.card) {max-width:100%}
    body[data-crm-page^=settings] .nav {display:flex;width:100%;gap:8px}
    body[data-crm-page^=settings] .nav .btn {flex:1 1 120px;min-width:0;padding:10px}
    body[data-crm-page^=settings] :is(.actions,.test-row) {white-space:normal}
    body[data-crm-page^=settings] .actions button {flex:1 1 110px;min-width:0}
    body[data-crm-page^=settings] :is(.search-row,.test-row) {align-items:stretch}
    body[data-crm-page^=settings] :is(.search-row,.test-row) input:not([type=checkbox]):not([type=radio]) {flex:1 1 180px;max-width:100%}
    body[data-crm-page^=settings] :is(.panel,.section) {border-radius:10px}
    body[data-crm-page=orders] .topbar-row {align-items:stretch;gap:10px}
    body[data-crm-page=orders] .topbar-left {
        display:grid !important;flex:1 1 100%;width:100%;gap:6px 8px;
        grid-template-columns:repeat(2,minmax(0,1fr));
        grid-template-areas:"create update" "fromlabel tolabel" "from to" "month maximum" "search search";
    }
    body[data-crm-page=orders] .topbar-left>.ctrl-btn--dark {grid-area:create;width:100%;min-height:44px}
    body[data-crm-page=orders] .date-filter {display:contents !important}
    body[data-crm-page=orders] .date-filter button {grid-area:update;width:100%;min-height:44px}
    body[data-crm-page=orders] .date-filter label[for=orders-date-from] {grid-area:fromlabel;display:block;font-size:12px}
    body[data-crm-page=orders] .date-filter label[for=orders-date-to] {grid-area:tolabel;display:block;font-size:12px}
    body[data-crm-page=orders] .date-filter input[name=date_from] {grid-area:from;width:100%;height:44px}
    body[data-crm-page=orders] .date-filter input[name=date_to] {grid-area:to;width:100%;height:44px}
    body[data-crm-page=orders] .date-filter .date-range-preset:first-of-type {grid-area:month}
    body[data-crm-page=orders] .date-filter .date-range-preset:last-of-type {grid-area:maximum}
    body[data-crm-page=orders] .date-filter .date-range-preset {width:100%;min-width:0;min-height:44px;justify-content:center;white-space:normal}
    body[data-crm-page=orders] .search-form {grid-area:search;width:100%;min-width:0}
    body[data-crm-page=orders] .search-form input[type=text] {height:44px}
    body[data-crm-page=orders] .search-form .icon-btn {flex-basis:44px;width:44px;min-width:44px;height:44px}
    body[data-crm-page=orders] .bulk-bar {width:100%;flex:1 1 100%;justify-content:flex-start}
    body[data-crm-page=orders] .bulk-bar .bulk-count {flex:0 0 100%;margin-top:2px}
    body[data-crm-page=orders] .bulk-bar>a.ctrl-btn:first-of-type {flex:0 0 44px;width:44px;padding:8px 4px;min-height:44px}
    body[data-crm-page=orders] .bulk-bar select {flex:1 1 calc(100% - 60px);max-width:none;width:auto;min-width:0;height:44px}
    body[data-crm-page=orders] .bulk-bar #bulkApplyBtn,
    body[data-crm-page=orders] .bulk-bar>a[href="/settings"] {flex:1 1 auto;width:auto;min-height:44px}
    body[data-crm-page=orders] .bulk-bar .logout-icon {flex:0 0 44px;width:44px;height:44px;min-width:44px}
    body[data-crm-page=orders] .bulk-bar .bulk-bar__trash {width:44px;height:44px;min-width:44px}
}
@media(max-width:600px) {
    body[data-crm-page=order] :is(.grid-2,.grid-3,.grid-4) {grid-template-columns:minmax(0,1fr)}
    body[data-crm-page=order] .topbar {display:flex;flex-wrap:wrap;align-items:center;gap:12px}
    body[data-crm-page=order] .order-title-line {flex:1 1 100%}
    body[data-crm-page=order] .status-wrap {justify-content:flex-start;max-width:100%}
    body[data-crm-page=order] .status-wrap .badge {height:auto;min-height:30px;padding:6px 12px;white-space:normal;line-height:1.3}
    body[data-crm-page=order] .order-nav {flex:1 1 100%;gap:8px;justify-content:space-between;order:3}
    body[data-crm-page=order] .actions {display:flex;flex-direction:column;align-items:stretch;padding:10px}
    body[data-crm-page=order] :is(.left-actions,.right-actions,.service-actions) {display:flex;flex-wrap:wrap;gap:8px;width:100%}
    body[data-crm-page=order] :is(.left-actions,.right-actions,.service-actions) :is(button,.btn,a) {flex:1 1 130px;min-height:44px;width:auto;padding:10px}
    body[data-crm-page=order] .bb-kv {grid-template-columns:minmax(0,1fr) !important;gap:4px}
    body[data-crm-page=order] :is(input[type=text],input[type=number],input[type=email],select,textarea) {min-width:0}
    body[data-crm-page=order] .items td input {min-width:0}
    body[data-crm-page=settings-analytics] .inventory-form {grid-template-columns:minmax(0,1fr)}
    body[data-crm-page=settings-analytics] .inventory-form>* {grid-column:1;min-width:0}
    body[data-crm-page=settings-analytics] .filters .btn {flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce) {
    body[data-crm-page] :is(button,.btn,.ctrl-btn) {transition:none}
}
@media print {
    body[data-crm-page] {background:white}
    body[data-crm-page] :is(.nav,.filters,.inventory-form) {display:none}
    body[data-crm-page] .section {break-inside:avoid;box-shadow:none}
}