/* =========================================================================
   Right-to-left corrections for Kooba's own components.

   The bundled theme already ships ~83 RTL rules covering the sidebar, top bar,
   metismenu, dropdowns, DataTables and Bootstrap inputs, all hung off body.rtl.
   This file covers only what Kooba added afterwards, which the theme has never
   heard of: the sidebar chevron, the row-action button groups, the date-range
   header, the pagination, and the Settings tab bar.

   Everything here is scoped to .rtl so a left-to-right library is untouched.
   Loaded after kb-ui.css, which is what it overrides.
   ========================================================================= */


/* ---- Sidebar: the collapse chevron ------------------------------------- */

/* kb-ui pins the chevron 14px from the right and pads the label to match.
   In RTL the label starts on the right, so both have to swap sides or the
   chevron sits on top of the first word. */
.rtl #left-sidebar .metismenu > li > a {
    padding-right: 14px;
    padding-left: 34px;
}

.rtl #left-sidebar .metismenu > li > a > i.fa-angle-left,
.rtl #left-sidebar .metismenu > li > a > i.pull-right {
    right: auto;
    left: 14px;
}

/* The chevron points at the submenu it opens, so it must point the other way. */
.rtl #left-sidebar .metismenu > li > a > i.fa-angle-left {
    transform: rotate(180deg);
}

.rtl #left-sidebar .metismenu > li.active > a > i.fa-angle-left,
.rtl #left-sidebar .metismenu > li > a[aria-expanded="true"] > i.fa-angle-left {
    transform: rotate(90deg);
}

/* Flex fallback for the non-absolute case. */
.rtl #left-sidebar .metismenu a > i.fa-angle-left,
.rtl #left-sidebar .metismenu a > i.pull-right {
    margin-left: 0;
    margin-right: auto;
}

/* Child rows: indent from the right instead. */
.rtl #left-sidebar .metismenu ul > li > a {
    padding-left: 14px;
    padding-right: 46px;
}


/* ---- List screens: header controls ------------------------------------ */

.rtl #main-content .box-header.row.input-daterange > .pull-right {
    margin-left: 0;
    margin-right: auto;
}

.rtl #main-content .box-header .pull-right .btn {
    margin-left: 0;
    margin-right: 6px;
}


/* ---- Tables: row actions and pagination -------------------------------- */

.rtl #main-content table.dataTable td .btn + .btn,
.rtl #main-content .table td .btn + .btn {
    margin-left: 0;
    margin-right: 4px;
}

.rtl #main-content .dataTables_wrapper .dataTables_paginate .paginate_button {
    margin-left: 0;
    margin-right: 3px;
}

/* Previous/Next arrows describe direction of travel, so they flip too. */
.rtl #main-content .dataTables_wrapper .dataTables_paginate .paginate_button.previous i,
.rtl #main-content .dataTables_wrapper .dataTables_paginate .paginate_button.next i {
    transform: scaleX(-1);
}


/* ---- Settings tab bar -------------------------------------------------- */

.rtl .settings-tabs > li {
    float: right;
}

.rtl .settings-tabs > li > a {
    margin-right: 0;
    margin-left: 4px;
    border-radius: 6px 6px 0 0;   /* symmetric: unchanged, stated for clarity */
}

.rtl .settings-tabs > li > a > i {
    margin-right: 0;
    margin-left: 6px;
}


/* ---- Things that must NOT mirror --------------------------------------- */

/* Identifiers, codes and machine values read left-to-right in every language.
   Without this an ISBN or a card number renders with its punctuation flipped. */
.rtl .kb-ltr,
.rtl code,
.rtl kbd,
.rtl pre,
.rtl input[type="email"],
.rtl input[type="url"],
.rtl input[type="tel"] {
    direction: ltr;
    text-align: right;
}

/* Dates and money line up on the decimal point either way. */
.rtl .text-nowrap.kb-num,
.rtl td.kb-num {
    direction: ltr;
    text-align: left;
}


/* ---- Dates, numbers and identifiers inside RTL text ---------------------- */

/*
   "24 May 2017" was rendering as "May 2017 24".

   Nothing is wrong with the data. In an RTL paragraph the bidi algorithm treats
   a date as separate runs - the digits are neutral, "May" is a left-to-right
   run - and reorders them relative to the surrounding right-to-left flow. The
   same thing happens to phone numbers, ISBNs and accession numbers.

   unicode-bidi: plaintext tells the browser to decide each cell's direction
   from its own first strong character instead of inheriting the page's. A cell
   holding a date or a code then lays out left-to-right and stays intact, while
   a cell holding Arabic text still lays out right-to-left. Table cells keep
   their right alignment, so the column still reads correctly.
*/
.rtl table td,
.rtl table th,
.rtl .label,
.rtl .badge {
    unicode-bidi: plaintext;
}

/* Inputs holding a date or a code, for the same reason. */
.rtl input[type="date"],
.rtl input[type="number"],
.rtl input[type="datetime-local"] {
    unicode-bidi: plaintext;
    text-align: right;
}