/*
 * OMBoxOS tablet visual theme.
 * Tablet uses the same visual language as mobile. Only container width,
 * spacing and orientation behavior may differ.
 */
body.device-tablet:not(.eye-protection) .ombox-touch-theme {
    --ombox-touch-card-radius: 0;
    min-height: 100%;
    background: var(--ombox-touch-page-background);
}

body.device-tablet .ombox-touch-theme {
    --ombox-touch-text-primary: #111827;
    --ombox-touch-text-secondary: #4b5563;
    --ombox-touch-divider-color: #dfe3e8;
    --ombox-touch-body-font-size: 16px;
    --ombox-touch-supporting-font-size: 15px;
    --ombox-touch-section-title-size: 20px;
    --ombox-touch-page-title-size: 28px;
    --ombox-touch-control-font-size: 17px;
    --ombox-touch-control-min-height: 48px;
    --widget-label-font-size: 16px;
    --widget-small-font-size: 15px;
    --widget-control-min-height: var(--ombox-touch-control-min-height);
    --form-control-font-size: var(--ombox-touch-control-font-size);
    font-size: var(--ombox-touch-body-font-size);
    line-height: 1.6;
}

body.device-tablet .ombox-touch-theme > :where(.ombox-panel, .ombox-card, .card) {
    border-radius: 0;
}

body.device-tablet:not(.eye-protection) .ombox-touch-theme > :where(.ombox-panel, .ombox-card, .card) {
    background: var(--ombox-touch-card-background);
}

body.device-tablet .ombox-touch-theme .btn {
    border-radius: 0;
}

body.device-tablet .ombox-touch-theme .btn:not(.btn-close) {
    min-height: var(--ombox-touch-control-min-height);
}

body.device-tablet .ombox-touch-theme :where(.form-control, .form-select, .admin-system-form-control, .admin-system-form-select, input, textarea, select, .ombox-upload-dropzone) {
    border-radius: 0;
}

body.device-tablet .ombox-touch-theme > .ombox-panel > .ombox-panel-body > .ombox-form {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--ombox-touch-control-background);
    box-shadow: none;
}

body.eye-protection.device-tablet .ombox-touch-theme > :where(.ombox-panel, .ombox-card, .card) {
    border-color: #d9cbb8;
    background: var(--color-surface, #fffdf8);
}

body.eye-protection.device-tablet .ombox-touch-theme > .ombox-panel > .ombox-panel-body > .ombox-form {
    background: var(--color-surface, #fffdf8);
}

body.eye-protection.device-tablet .ombox-touch-theme {
    --ombox-touch-text-primary: var(--color-text-primary);
    --ombox-touch-text-secondary: var(--color-text-muted);
    --ombox-touch-divider-color: #d9cbb8;
}