/*
 * Localization styles:
 *  - Font fallbacks so Sinhala and Tamil scripts render with proper glyphs
 *    across the app (these scripts are not covered by the default Open Sans
 *    font used by the inspinia/bootstrap theme).
 *  - Styling for the navbar language switcher (_LanguageSwitcher.cshtml).
 */

/* Sinhala — keep the theme's Open Sans first so Latin text/icons keep their
   normal metrics; the browser falls back to these fonts per-glyph for any
   Sinhala characters Open Sans doesn't cover. */
body.lang-si {
    font-family: 'Open Sans', 'Noto Sans Sinhala', 'Iskoola Pota', 'Nirmala UI', helvetica, arial, sans-serif;
}

/* Tamil — same per-glyph fallback approach as Sinhala above. */
body.lang-ta {
    font-family: 'Open Sans', 'Noto Sans Tamil', 'Latha', 'Nirmala UI', helvetica, arial, sans-serif;
}

body.lang-si input,
body.lang-si textarea,
body.lang-si select,
body.lang-si button,
body.lang-si .dropdown-menu,
body.lang-ta input,
body.lang-ta textarea,
body.lang-ta select,
body.lang-ta button,
body.lang-ta .dropdown-menu {
    font-family: inherit;
}

/* Navbar welcome message — si/ta translations run longer than the English
   text, so truncate with an ellipsis instead of overflowing/wrapping the
   top navbar. Full text is still available via the title attribute. */
body.lang-si .welcome-message,
body.lang-ta .welcome-message {
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Sidebar nav labels — allow si/ta translations to wrap onto a second line
   instead of being clipped by the theme's default nowrap + ellipsis. */
body.lang-si #side-menu .nav-label,
body.lang-ta #side-menu .nav-label {
    white-space: normal;
    line-height: 1.25;
}

/* DevExtreme report grids — allow translated column header captions to wrap
   onto a second line instead of being clipped at a fixed header height. */
body.lang-si .dx-datagrid-headers .dx-datagrid-text-content,
body.lang-ta .dx-datagrid-headers .dx-datagrid-text-content {
    white-space: normal;
    line-height: 1.3;
}

/* ================================================================
   SINHALA / TAMIL LAYOUT FIXES
   ================================================================ */

/* Sidebar second- and third-level link text — these items use bare text
   nodes directly inside <a> (no .nav-label span), so the .nav-label rule
   above doesn't cover them. Allow wrapping instead of clipping at the
   fixed 220 px sidebar width. */
body.lang-si #side-menu .nav-second-level > li > a,
body.lang-si #side-menu .nav-third-level > li > a,
body.lang-ta #side-menu .nav-second-level > li > a,
body.lang-ta #side-menu .nav-third-level > li > a {
    white-space: normal;
    word-break: break-word;
    text-overflow: clip;
    overflow: visible;
    height: auto;
    line-height: 1.3;
    padding-top: 7px;
    padding-bottom: 7px;
}

/* Fixed-width action buttons — many form buttons have inline
   style="width: 70px" / 80px / 150px that clips Sinhala/Tamil text.
   !important overrides inline styles; buttons expand horizontally to fit
   their translated label. white-space is intentionally left as Bootstrap's
   default (nowrap) so text stays on one line and the button grows wide. */
body.lang-si .btn,
body.lang-ta .btn {
    width: auto !important;
    min-width: 0 !important;
}

/* Horizontal forms (.form-horizontal .control-label + col-md-N field, one or
   two pairs per .form-group row) size the label column at a fixed 16-25%
   width. Si/ta translations are consistently longer than English and wrap
   onto 2-3 lines inside that narrow column, leaving the label drifting above
   its single-line input instead of aligned with it, and the two field-pairs
   in a row ending up lopsided against each other. Stack the label above its
   field (full width, no float) instead of beside it, so translated text has
   the whole row to wrap in and every field lines up the same way. */
body.lang-si .form-horizontal .control-label,
body.lang-ta .form-horizontal .control-label {
    float: none;
    width: 100%;
    text-align: left;
    padding-top: 0;
    padding-bottom: 4px;
}

body.lang-si .form-horizontal .control-label + [class*="col-"],
body.lang-ta .form-horizontal .control-label + [class*="col-"] {
    float: none;
    width: 100%;
}

/* Read-only label/value rows built as .form-group.row > .col-md-N pairs
   (e.g. RouteWiseSalesTargetApproval's Distributor/Sales Rep/Territory
   Target summary) — same fixed-width column, same wrap-vs-single-line
   misalignment as the .control-label forms above, just without the
   .control-label class marking the label cell. */
body.lang-si .form-group.row > [class*="col-"],
body.lang-ta .form-group.row > [class*="col-"] {
    float: none;
    width: 100%;
}

/* Report/list filter "actions" bar (top-right of the page header, built by
   @section actions in Views/Report/*.cshtml and similar) lays a
   <label class="form-control borderless"> beside its input/select and a
   submit button using fixed-width, floated Bootstrap grid columns (mostly
   col-lg-N/col-lg-offset-N, some pages use col-sm-N instead) sized for short
   English text ("Effective Date", "Load"). The label inherits form-control's
   fixed 34px height with no wrapping room, so si/ta labels (consistently
   longer) don't grow the row when they need a second line — they spill over
   the field/button next to them instead (e.g. Stock Balance's "Effective
   Date" overlapping its date value). Stack every column full width, same as
   the .form-horizontal fix above, so translated text always has the whole
   bar to wrap in and normal block flow (not floats) pushes the next field
   down instead of overlapping it. .title-action only ever holds this filter
   grid, so it's safe to stack every column class it contains. */
body.lang-si .title-action [class*="col-"],
body.lang-ta .title-action [class*="col-"] {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-bottom: 6px;
}

/* Once stacked, the label keeps .form-control's white background/inset
   shadow and inherits .title-action's text-align:right, so it renders as a
   second, empty-looking input sitting above the real field with its text
   jammed against the right edge (confusing — looks like two fields per
   value). Flatten it to plain left-aligned caption text instead. */
body.lang-si .title-action label.form-control.borderless,
body.lang-ta .title-action label.form-control.borderless {
    height: auto;
    min-height: 0;
    white-space: normal;
    line-height: 1.3;
    padding: 0 0 4px;
    text-align: left;
    background: transparent;
    box-shadow: none;
}

/* Language switcher */
.language-switcher > a {
    cursor: pointer;
}

.language-switcher .dropdown-menu {
    min-width: 130px;
}

.language-switcher .dropdown-menu li > a {
    padding: 6px 16px;
}

.language-switcher .dropdown-menu li.active > a {
    font-weight: 700;
    background-color: #f5f5f5;
    color: #1ab394;
}

.language-switcher .fa-globe {
    margin-right: 2px;
}