/*
 * Cibersoft Core OS — interface foundations
 *
 * Geometry only. Theme Style remains the source of colour, and Typography
 * Policy remains the source of font families, sizes and weights. The rules
 * are intentionally narrow so data tables, toolbars and feature-specific
 * compositions keep their semantic layouts.
 */

body.admin,
body.customers,
body.login_admin {
    --ccos-space-0: 0;
    --ccos-space-1: 4px;
    --ccos-space-2: 8px;
    --ccos-space-3: 12px;
    --ccos-space-4: 16px;
    --ccos-space-5: 20px;
    --ccos-space-6: 24px;
    --ccos-space-7: 32px;
    --ccos-space-8: 40px;
    --ccos-space-9: 48px;
    --ccos-space-10: 64px;
    --ccos-sidebar-rail-size: 68px;
    --ccos-sidebar-expanded-size: 240px;
    --ccos-sidebar-row-size: 36px;
    --ccos-sidebar-subrow-size: 32px;
    --ccos-avatar-rail-size: 24px;
    --ccos-avatar-expanded-size: 32px;
    --ccos-focus-ring-width: 2px;
    --ccos-focus-ring-offset: 2px;
    --ccos-control-radius: 6px;
    --ccos-subblock-radius: 8px;
    --ccos-panel-radius: 10px;
    --ccos-overlay-radius: 12px;
    --ccos-control-height: 36px;
    --ccos-touch-control-height: 44px;
}

/* Reusable avatar geometry. Features choose their size token; every staff
 * avatar remains a true 1:1 crop instead of inheriting a source image ratio. */
body.admin img.staff-profile-image-small,
body.customers img.staff-profile-image-small,
body.login_admin img.staff-profile-image-small,
body.admin .ccos-avatar,
body.customers .ccos-avatar,
body.login_admin .ccos-avatar {
    display: block;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50% !important;
}

/* Labels, help and fields retain a stable vertical rhythm. Inline filters
 * stay compact because their controls serve one horizontal task. */
body.admin .form-group,
body.customers .form-group,
body.login_admin .form-group {
    margin-bottom: var(--ccos-space-4);
}

body.admin .form-inline .form-group,
body.admin .dataTables_filter .form-group,
body.customers .form-inline .form-group,
body.customers .dataTables_filter .form-group,
body.login_admin .form-inline .form-group {
    margin-bottom: 0;
}

body.admin .form-group > label:not(.checkbox):not(.radio),
body.customers .form-group > label:not(.checkbox):not(.radio),
body.login_admin .form-group > label:not(.checkbox):not(.radio) {
    display: inline-block;
    margin-bottom: var(--ccos-space-2);
    line-height: 16px;
}

body.admin .form-group > .help-block,
body.customers .form-group > .help-block,
body.login_admin .form-group > .help-block {
    margin-top: var(--ccos-space-2);
    margin-bottom: 0;
}

body.admin .form-control:not(.input-transparent),
body.customers .form-control:not(.input-transparent),
body.login_admin .form-control:not(.input-transparent) {
    min-height: var(--ccos-control-height);
    border-radius: var(--ccos-control-radius);
    line-height: 20px;
}

body.admin textarea.form-control:not(.input-transparent),
body.customers textarea.form-control:not(.input-transparent),
body.login_admin textarea.form-control:not(.input-transparent) {
    min-height: 96px;
    padding-top: var(--ccos-space-2);
    padding-bottom: var(--ccos-space-2);
    resize: vertical;
}

/* Bootstrap Select is the visual representation of selectpicker, so its
 * trigger must match the native field height and curvature. */
body.admin .bootstrap-select > .dropdown-toggle,
body.customers .bootstrap-select > .dropdown-toggle,
body.login_admin .bootstrap-select > .dropdown-toggle {
    min-height: var(--ccos-control-height);
    border-radius: var(--ccos-control-radius);
}

body.admin .bootstrap-select > .dropdown-toggle .filter-option,
body.customers .bootstrap-select > .dropdown-toggle .filter-option,
body.login_admin .bootstrap-select > .dropdown-toggle .filter-option {
    line-height: 20px;
}

/* Keep composed fields visibly joined. A generic field radius must not turn
 * an amount/currency or date/calendar pair into two disconnected controls. */
body.admin .input-group > .form-control:not(:first-child):not(:last-child),
body.customers .input-group > .form-control:not(:first-child):not(:last-child),
body.login_admin .input-group > .form-control:not(:first-child):not(:last-child) {
    border-radius: 0;
}

body.admin .input-group > .form-control:first-child,
body.admin .input-group > .bootstrap-select:first-child > .dropdown-toggle,
body.customers .input-group > .form-control:first-child,
body.customers .input-group > .bootstrap-select:first-child > .dropdown-toggle,
body.login_admin .input-group > .form-control:first-child,
body.login_admin .input-group > .bootstrap-select:first-child > .dropdown-toggle {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

body.admin .input-group > .form-control:last-child,
body.admin .input-group > .bootstrap-select:last-child > .dropdown-toggle,
body.customers .input-group > .form-control:last-child,
body.customers .input-group > .bootstrap-select:last-child > .dropdown-toggle,
body.login_admin .input-group > .form-control:last-child,
body.login_admin .input-group > .bootstrap-select:last-child > .dropdown-toggle {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* A section separator signals a real change of task. It is intentionally
 * scoped to forms so it never stretches a table or a dashboard layout. */
body.admin form > hr,
body.customers form > hr,
body.login_admin form > hr {
    margin-top: var(--ccos-space-7);
    margin-bottom: var(--ccos-space-7);
}

/* Curvature expresses containment, not decoration. No background, shadow or
 * colour is set here: customer Theme Style values remain untouched. */
body.admin .btn:not(.btn-circle),
body.customers .btn:not(.btn-circle),
body.login_admin .btn:not(.btn-circle) {
    border-radius: var(--ccos-control-radius);
}

body.admin .panel,
body.customers .panel,
body.login_admin .panel {
    border-radius: var(--ccos-panel-radius);
}

body.admin .panel > .panel-heading:first-child,
body.customers .panel > .panel-heading:first-child,
body.login_admin .panel > .panel-heading:first-child {
    border-top-left-radius: var(--ccos-panel-radius);
    border-top-right-radius: var(--ccos-panel-radius);
}

body.admin .panel > .panel-footer:last-child,
body.customers .panel > .panel-footer:last-child,
body.login_admin .panel > .panel-footer:last-child {
    border-bottom-right-radius: var(--ccos-panel-radius);
    border-bottom-left-radius: var(--ccos-panel-radius);
}

body.admin .modal-content,
body.customers .modal-content,
body.login_admin .modal-content,
body.admin .popover,
body.customers .popover,
body.login_admin .popover {
    border-radius: var(--ccos-overlay-radius);
}

@media (max-width: 767px), (pointer: coarse) {
    /* The larger target applies only to controls in an editing flow. Dense
     * table action columns stay compact and are not turned into touch tiles. */
    body.admin form .form-control:not(.input-transparent),
    body.customers form .form-control:not(.input-transparent),
    body.login_admin form .form-control:not(.input-transparent),
    body.admin form .bootstrap-select > .dropdown-toggle,
    body.customers form .bootstrap-select > .dropdown-toggle,
    body.login_admin form .bootstrap-select > .dropdown-toggle,
    body.admin form .btn:not(.btn-circle),
    body.customers form .btn:not(.btn-circle),
    body.login_admin form .btn:not(.btn-circle) {
        min-height: var(--ccos-touch-control-height);
    }
}