/* ========================================================================
   BALOCH SM — PROFESSIONAL CSS RESET
   ========================================================================

   FILE:
   <DOMAIN_ROOT>/public_html/assets/css/reset.css

   WEBSITE:
   https://investt.online

   PROJECT:
   Baloch SM Trading Intelligence Platform

   VERSION:
   1.0.0

   PURPOSE:
   Establish predictable, accessible, responsive foundations across
   the entire Baloch SM user interface.

   SUPPORTS:
   - Mobile-first layouts
   - Desktop and tablet dashboards
   - Android and iOS browsers
   - Progressive Web App interfaces
   - Administrator control panels
   - SVG financial charts
   - Responsive forms
   - Custom navigation
   - Animated BUY/SELL notifications
   - Signal receipt components
   - Dark and light themes
   - Accessible keyboard controls

   DESIGN RESPONSIBILITIES:

   reset.css:
       Browser normalization and safe defaults.

   tokens.css:
       Design tokens, typography variables, spacing and colors.

   layout.css:
       Website grids, page shells, headers and sidebars.

   components.css:
       Buttons, inputs, cards, badges, drawers and reusable UI.

   accessibility.css:
       Enhanced focus, contrast and assistive technology support.

   motion/reduced-motion.css:
       Reduced animation for users requesting less motion.

   IMPORTANT:

   This file must load BEFORE tokens.css and all other
   Baloch SM stylesheets.

   Do not add project-specific button colors, trading signal
   directions, chart palettes or theme definitions here.

   This stylesheet contains no:
   - External imports
   - Remote resources
   - Tracking
   - Inline scripts
   - Secret configuration
   - Dynamic user information

   ======================================================================== */


/* ========================================================================
   01. UNIVERSAL BOX MODEL
   ========================================================================

   Border-box sizing ensures that padding and borders remain inside
   an element's declared width and height.

   Particularly important for:
   - Mobile dashboards
   - Floating drawers
   - Authentication cards
   - Admin tables
   - Responsive modal dialogs
   - Signal notification popups
   ======================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* ========================================================================
   02. ROOT DOCUMENT NORMALIZATION
   ======================================================================== */

html {
    margin: 0;
    padding: 0;

    width: 100%;
    min-height: 100%;

    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;

    -webkit-tap-highlight-color: transparent;

    font-synthesis: none;
}


/* ========================================================================
   03. BODY NORMALIZATION
   ========================================================================

   Font colors, background and font-family will be configured by
   tokens.css and theme stylesheets.

   The reset must not force a dark or light theme.

   Horizontal overflow must be fixed in the offending component,
   rather than hidden globally.
   ======================================================================== */

body {
    margin: 0;
    padding: 0;

    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;

    line-height: 1.5;

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ========================================================================
   04. DOCUMENT STRUCTURE
   ========================================================================

   Preserve expected display behavior in older browser engines.

   Modern browsers already treat these elements as blocks,
   but explicit normalization avoids inconsistent behavior.
   ======================================================================== */

main,
header,
footer,
section,
article,
aside,
nav,
figure,
figcaption {
    display: block;
}


/* ========================================================================
   05. DEFAULT ELEMENT SPACING RESET
   ========================================================================

   Project spacing must be controlled by tokens and components,
   instead of arbitrary browser defaults.

   We deliberately avoid applying padding:0 to every element,
   because doing so would unnecessarily interfere with
   native controls and embedded interface widgets.
   ======================================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
figure,
figcaption,
pre,
dl,
dd {
    margin: 0;
}


/* ========================================================================
   06. HEADING NORMALIZATION
   ========================================================================

   Header hierarchy must remain semantic for accessibility.

   Typography sizes and weights are assigned in tokens.css
   and individual component styles.
   ======================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;

    text-wrap: wrap;
}


/* ========================================================================
   07. PARAGRAPH AND LONG-TEXT SAFETY
   ========================================================================

   Prevent long identifiers and URLs from breaking narrow screens.

   Useful for:
   - Trading symbol labels
   - Subscription explanations
   - Payment instructions
   - Admin notes
   - Economic event descriptions
   ======================================================================== */

p,
blockquote,
dd,
figcaption {
    overflow-wrap: break-word;
}


/* ========================================================================
   08. LIST NORMALIZATION
   ========================================================================

   Do not globally remove list markers.

   Real content lists and screen-reader navigation should retain
   expected semantics.

   Navigation components may remove markers in components.css.
   ======================================================================== */

ul,
ol {
    margin-block: 0;
    padding-inline-start: 1.5em;
}

li {
    min-width: 0;
}

li::marker {
    color: currentColor;
}


/* ========================================================================
   09. DEFINITION LISTS
   ======================================================================== */

dt {
    font-weight: inherit;
}

dd {
    margin-inline-start: 0;
}


/* ========================================================================
   10. ANCHOR ELEMENT NORMALIZATION
   ========================================================================

   Inherit text-related styling from the surrounding context.

   Preserve normal underlines by default.

   The design system will style navigation links and action links
   with more specific selectors.
   ======================================================================== */

a {
    color: inherit;
    text-decoration-skip-ink: auto;
}

a[href] {
    cursor: pointer;
}


/* ========================================================================
   11. TEXT EMPHASIS
   ======================================================================== */

strong,
b {
    font-weight: bolder;
}

em,
i {
    font-style: italic;
}

small {
    font-size: 0.875em;
}

mark {
    color: inherit;
}


/* ========================================================================
   12. ABBREVIATIONS
   ======================================================================== */

abbr[title] {
    text-decoration: underline dotted;
    text-decoration-skip-ink: none;

    cursor: help;
}


/* ========================================================================
   13. HORIZONTAL RULE
   ========================================================================

   Borders and colors are defined in component styling.
   ======================================================================== */

hr {
    box-sizing: content-box;

    height: 0;

    margin: 0;

    border: 0;
    border-top: 1px solid currentColor;
}


/* ========================================================================
   14. INLINE CODE AND MONOSPACE CONTENT
   ========================================================================

   Actual monospace font stacks and sizes belong in tokens.css.
   ======================================================================== */

code,
kbd,
samp,
pre {
    font-family: ui-monospace,
                 SFMono-Regular,
                 Consolas,
                 "Liberation Mono",
                 monospace;
}

pre {
    overflow-x: auto;

    max-width: 100%;

    white-space: pre;
    overflow-wrap: normal;

    tab-size: 4;
}

code,
kbd,
samp {
    overflow-wrap: anywhere;
}


/* ========================================================================
   15. SUBSCRIPT AND SUPERSCRIPT
   ========================================================================

   Useful for scientific, financial and mathematical notation.
   ======================================================================== */

sub,
sup {
    position: relative;

    font-size: 75%;
    line-height: 0;

    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}


/* ========================================================================
   16. BLOCKQUOTES
   ======================================================================== */

blockquote {
    quotes: none;
}


/* ========================================================================
   17. RESPONSIVE IMAGES
   ========================================================================

   Prevent images from extending outside cards and columns.

   Height auto preserves image proportions.

   Width is not forced to 100% because small icons must retain
   their intended dimensions.
   ======================================================================== */

img {
    display: block;

    max-width: 100%;
    height: auto;

    vertical-align: middle;
}


/* ========================================================================
   18. RESPONSIVE VIDEO AND EMBEDDED MEDIA
   ========================================================================

   Prevent media from overflowing the dashboard.

   Do not force fixed heights or aspect ratios.
   ======================================================================== */

video,
canvas,
iframe,
embed,
object {
    max-width: 100%;
}


/* ========================================================================
   19. SVG NORMALIZATION
   ========================================================================

   CRITICAL FOR BALOCH SM CHARTS

   SVG is used by:
   - Candlestick charts
   - Technical indicator overlays
   - Pattern drawings
   - BUY/SELL arrows
   - Notification receipts
   - Market radar illustrations
   - Brand icons

   Preserve native SVG dimensions and viewBox geometry.

   Do not globally assign fills or strokes because this would
   overwrite chart candle colors and custom indicator artwork.
   ======================================================================== */

svg {
    max-width: 100%;

    vertical-align: middle;
}


/* ========================================================================
   20. CANVAS NORMALIZATION
   ========================================================================

   Optional provider-specific chart rendering may use canvas.

   Keep intrinsic pixel sizing under component control.
   ======================================================================== */

canvas {
    vertical-align: middle;
}


/* ========================================================================
   21. FIGURE NORMALIZATION
   ======================================================================== */

figure {
    margin: 0;
}

figcaption {
    max-width: 100%;
}


/* ========================================================================
   22. FORM CONTROL FONT INHERITANCE
   ========================================================================

   Important for consistent text rendering across:
   - Login
   - Signup
   - Payment submission
   - Subscription plans
   - Provider configuration
   - Admin forms

   Do not remove native focus indicators.
   ======================================================================== */

button,
input,
select,
textarea,
optgroup {
    font: inherit;
    color: inherit;
}


/* ========================================================================
   23. FORM CONTROL BOX MODEL
   ======================================================================== */

button,
input,
select,
textarea {
    max-width: 100%;
}


/* ========================================================================
   24. BUTTON NORMALIZATION
   ========================================================================

   The full button design belongs to components.css.

   Do not force native button backgrounds to transparent here.
   ======================================================================== */

button {
    cursor: pointer;
    touch-action: manipulation;
}

button:disabled {
    cursor: not-allowed;
}


/* ========================================================================
   25. INPUT ELEMENT NORMALIZATION
   ========================================================================

   Preserve browser autofill, password-manager integration,
   numeric keyboards and native validation behavior.
   ======================================================================== */

input {
    min-width: 0;
}


/* ========================================================================
   26. TEXTAREA NORMALIZATION
   ======================================================================== */

textarea {
    min-width: 0;

    resize: vertical;
}


/* ========================================================================
   27. SELECT NORMALIZATION
   ========================================================================

   Do not remove the native select arrow at reset level.

   Native selection behavior is particularly important on mobile.
   ======================================================================== */

select {
    min-width: 0;

    cursor: pointer;
}


/* ========================================================================
   28. PLACEHOLDER NORMALIZATION
   ========================================================================

   Final placeholder colors belong to the active theme.
   ======================================================================== */

input::placeholder,
textarea::placeholder {
    opacity: 1;
}


/* ========================================================================
   29. FILE INPUT NORMALIZATION
   ========================================================================

   Used for private payment proof and research upload interfaces.

   The CSS does not validate uploaded content.
   Server-side scanning remains mandatory.
   ======================================================================== */

input[type="file"] {
    max-width: 100%;
}

input[type="file"]::file-selector-button {
    font: inherit;
    cursor: pointer;
}


/* ========================================================================
   30. CHECKBOX AND RADIO CONTROL NORMALIZATION
   ========================================================================

   Do not replace native controls globally.

   Native keyboard behavior and accessibility are preserved.
   ======================================================================== */

input[type="checkbox"],
input[type="radio"] {
    margin: 0;

    cursor: pointer;
    accent-color: auto;
}


/* ========================================================================
   31. SEARCH INPUT NORMALIZATION
   ======================================================================== */

input[type="search"] {
    box-sizing: border-box;
}


/* ========================================================================
   32. PROGRESS, METER AND OUTPUT
   ========================================================================

   Used for:
   - Worker health
   - Import progress
   - Download progress
   - Validation reports
   - Performance dashboards
   ======================================================================== */

progress,
meter {
    max-width: 100%;

    vertical-align: baseline;
}

output {
    display: inline;
}


/* ========================================================================
   33. FIELDSET NORMALIZATION
   ======================================================================== */

fieldset {
    min-width: 0;

    margin: 0;
    padding: 0;

    border: 0;
}


/* ========================================================================
   34. LEGEND NORMALIZATION
   ======================================================================== */

legend {
    display: table;

    max-width: 100%;

    padding: 0;

    white-space: normal;
}


/* ========================================================================
   35. LABEL NORMALIZATION
   ========================================================================

   Do not globally assign display:block to labels.

   Some form labels are inline and others wrap complex inputs.
   Component-specific styling will handle their layout.
   ======================================================================== */

label {
    max-width: 100%;
}


/* ========================================================================
   36. SUMMARY AND DETAILS ELEMENTS
   ========================================================================

   Used for:
   - Connection troubleshooting
   - Advanced signal evidence
   - Admin help
   - Strategy descriptions
   - Expandable diagnostics
   ======================================================================== */

details {
    display: block;
}

summary {
    display: list-item;

    cursor: pointer;
}


/* ========================================================================
   37. DIALOG NORMALIZATION
   ========================================================================

   Native dialogs may be used by future components.

   Do not assign display:flex or display:grid globally because
   that could override browser open/closed behavior.
   ======================================================================== */

dialog {
    max-width: calc(100% - 2rem);
}

dialog:not([open]) {
    display: none;
}


/* ========================================================================
   38. IMPORTANT HIDDEN STATE
   ========================================================================

   CRITICAL FOR SECURITY-SENSITIVE UI PRESENTATION

   Our dashboard contains components such as:

   - #receipt-modal
   - #notice-panel
   - #notice-backdrop
   - #price-chart
   - #bell-count

   These elements rely on the HTML hidden attribute.

   A component's display:flex or display:grid declaration must
   never accidentally override the hidden state.

   JavaScript should remove the hidden attribute only when
   the corresponding component is intentionally shown.
   ======================================================================== */

[hidden] {
    display: none !important;
}


/* ========================================================================
   39. TEMPLATE ELEMENT PROTECTION
   ========================================================================

   HTML template elements must never appear as regular page content.
   ======================================================================== */

template {
    display: none !important;
}


/* ========================================================================
   40. TABLE NORMALIZATION
   ========================================================================

   Used for:
   - Administrator user records
   - Subscription plans
   - Payment reviews
   - Strategy qualification
   - Audit logs
   - Market provider status

   Do not force fixed table layouts or widths.

   Horizontal scrolling is handled by admin.css and responsive.css.
   ======================================================================== */

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* ========================================================================
   41. TABLE CELL NORMALIZATION
   ======================================================================== */

th,
td {
    padding: 0;
    text-align: inherit;
    vertical-align: inherit;
}


/* ========================================================================
   42. TABLE HEADERS
   ======================================================================== */

th {
    font-weight: inherit;
}


/* ========================================================================
   43. TABLE CAPTIONS
   ======================================================================== */

caption {
    text-align: inherit;
}


/* ========================================================================
   44. TABLE COLUMN INTEGRITY
   ========================================================================

   Browser table layout algorithms must remain intact.

   Do not apply flexbox/grid to native table rows globally.
   ======================================================================== */

thead,
tbody,
tfoot,
tr,
colgroup,
col {
    box-sizing: border-box;
}


/* ========================================================================
   45. NON-BREAKING INTERACTIVE TEXT
   ========================================================================

   Prevent buttons from becoming unexpectedly clipped.

   Do not globally prevent wrapping; mobile screens must remain
   capable of displaying longer translated labels.
   ======================================================================== */

button,
a,
summary {
    overflow-wrap: break-word;
}


/* ========================================================================
   46. QUOTED DATA AND TIME ELEMENTS
   ======================================================================== */

time,
data {
    font: inherit;
}


/* ========================================================================
   47. BIDIRECTIONAL TEXT SAFETY
   ========================================================================

   Dynamic symbols and values may contain directional characters.

   The application must additionally validate server-side data
   and use safe text rendering in JavaScript.
   ======================================================================== */

bdi {
    unicode-bidi: isolate;
}


/* ========================================================================
   48. FORM AND DOCUMENT DIRECTION
   ========================================================================

   This stylesheet does not force direction:ltr globally.

   The HTML document and individual elements control their own
   language and writing direction.
   ======================================================================== */


/* ========================================================================
   49. INTERACTIVE TOUCH BEHAVIOR
   ========================================================================

   Avoid broad touch-action:none rules.

   Users must be able to:
   - Scroll dashboards
   - Zoom where supported
   - Interact with charts
   - Select dropdowns
   - Operate mobile forms

   Chart-specific gestures belong to chart-interaction.js
   and dashboard.css.
   ======================================================================== */

a,
button,
summary {
    touch-action: manipulation;
}


/* ========================================================================
   50. NATIVE TEXT SELECTION
   ========================================================================

   Preserve selection for:
   - Transaction IDs
   - Payment instructions
   - Economic schedules
   - Signal receipt values
   - Administrator notes

   Do not globally disable user-select.
   ======================================================================== */


/* ========================================================================
   51. SVG AND CHART INTERACTION SAFETY
   ========================================================================

   Do not globally apply pointer-events:none to SVG.

   Chart overlays, markers, crosshairs and interactive SVG elements
   may legitimately require pointer events.
   ======================================================================== */


/* ========================================================================
   52. NATIVE KEYBOARD FOCUS
   ========================================================================

   IMPORTANT ACCESSIBILITY RULE

   Never globally remove focus outlines with:

       outline: none;

   Keyboard focus will be enhanced by accessibility.css.

   Native focus remains available until that stylesheet loads.
   ======================================================================== */


/* ========================================================================
   53. NATIVE SCROLL BEHAVIOR
   ========================================================================

   Avoid globally enabling scroll-behavior:smooth.

   Users who request reduced motion should not receive
   forced smooth-scrolling behavior.

   Application transitions belong to the motion stylesheets.
   ======================================================================== */


/* ========================================================================
   54. PRINT MEDIA FOUNDATIONS
   ========================================================================

   Printing must remain possible for permitted public content.

   Private signal receipts and account records require a separate
   authorized print/export flow.

   Avoid exposing hidden modal contents in printed output.
   ======================================================================== */

@media print {

    *,
    *::before,
    *::after {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    img,
    svg,
    canvas {
        max-width: 100% !important;
    }

    pre,
    blockquote {
        break-inside: avoid;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        break-after: avoid;
    }

}


/* ========================================================================
   55. REDUCED MOTION FALLBACK
   ========================================================================

   Full reduced-motion support belongs in:

   assets/css/motion/reduced-motion.css

   This limited reset-level fallback protects essential motion
   behavior if the dedicated stylesheet fails to load.

   Avoid overriding functionality-dependent state changes.
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {

    html:focus-within {
        scroll-behavior: auto;
    }

}


/* ========================================================================
   56. FORCED-COLORS COMPATIBILITY
   ========================================================================

   Do not disable forced-colors mode or globally override system colors.

   Accessibility-specific enhancements are configured separately
   in accessibility.css.
   ======================================================================== */


/* ========================================================================
   57. RESET COMPLETION
   ========================================================================

   RESULT:

   - Predictable sizing
   - Consistent base spacing
   - Responsive media defaults
   - Preserved accessible controls
   - Reliable hidden element behavior
   - Stable SVG chart foundations
   - Safer mobile interaction
   - Clean table structure
   - Compatible dark/light themes
   - Compatible future motion systems

   NEXT STYLESHEET:
   assets/css/tokens.css

   ======================================================================== */

/* END OF BALOCH SM CSS RESET */