-երը երբեք թող չգերազանցեն իրենց պարունակողի լայնությունը։ */
img, svg { max-width: 100%; }
/* Աղյուսակը երբեք թող չհրի իր պարունակող քարտը/էջը դուրս (լրացուցիչ՝
ստորև՝ .table-scroll փաթաթող կոնտեյները, որը ավտոմատ ավելացվում է
base.html-ի script-ով ամեն աղյուսակի շուրջ)։ */
table { max-width: 100%; }
td, th { overflow-wrap: break-word; }
/* Ընդհանուր input/select/textarea/button-ները երբեք թող դուրս չգան իրենց
flex/grid պարունակողից (գործում է inline width:XXXpx ունեցող դեպքերում
ևս, քանի որ max-width-ը սահմանափակող է, ոչ թե փոխարինող)։ */
input, select, textarea, button { max-width: 100%; }
/* checkbox/radio-ները ԵՐԲԵՔ չպետք է ժառանգեն ներքևի ընդհանուր
`input { width:100% }` կանոնը (առանց այս ուղղման՝ ցանկացած «considered»
checkbox/radio, որը գտնվում է .checkbox-list/.promote-checklist/
.perm-rows-ից ԴՈՒՐՍ, ամբողջ իր տողի լայնությամբ մի «անտեսանելի», բայց
click-ելի, տարածք էր ստանում — real bug, հայտնաբերված 52-րդ փուլի
աուդիտի ժամանակ)։ Միասնական՝ մեկ տեղում, ապրանքանիշի գույնով
(accent-color), որ բոլոր checkbox/radio-ները նույն կապույտով նշվեն
browser-լռելյայն մոխրագույնի/կապույտի փոխարեն։ */
input[type="checkbox"], input[type="radio"] {
width: auto;
max-width: none;
accent-color: var(--blue);
cursor: pointer;
}
/* Native ֆայլի ընտրության դաշտը (Excel ներմուծումների ձևերում)՝ մինչ այժմ
զուտ browser-լռելյայն էր («Choose File / No file chosen»)՝ ակնհայտորեն
դուրս էր ցցվում մնացած, ապրանքանիշային կոճակների/դաշտերի ֆոնին («էժան»
տպավորության հստակ աղբյուրներից մեկը)։ */
input[type="file"] {
width: auto;
padding: 4px 4px 4px 0;
border: none;
background: none;
font-size: 13.5px;
color: var(--muted);
}
input[type="file"]::file-selector-button {
background: var(--blue);
color: #fff;
border: none;
padding: 8px 15px;
border-radius: var(--radius-sm);
font-weight: 600;
font-size: 13.5px;
cursor: pointer;
margin-right: 12px;
transition: background-color 0.12s ease;
}
input[type="file"]::file-selector-button:hover { background: var(--blue-dark); }
button:disabled, .btn:disabled, .btn[disabled] {
opacity: 0.55;
cursor: not-allowed;
box-shadow: none;
}
/* Ուշադրություն (14-րդ փուլում հայտնաբերված, նախկինում աննկատ մնացած bug).
[hidden] ատրիբուտի կանխադրված (UA) `display:none`-ը overrides է լինում
ցանկացած author-ի կողմից նշված `display` արժեքով (օր.՝ .signed-check-ի
`display:flex`-ը), ուստի «Մերժման պատճառ» վահանակի նման, JS-ով
`el.hidden = false/true` եղանակով toggle-վող տարրերը փաստացի միշտ բաց
էին մնում՝ նույնիսկ սկզբնական `hidden` վիճակում։ Այս կանոնը վերականգնում
է [hidden]-ի իրական աշխատանքը ամբողջ հավելվածում։ */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
/* 52-րդ փուլ. -apple-system/BlinkMacSystemFont առաջինը՝ ավելի «native/
մշակված» տառադարձման համար այն սարքերի վրա, որտեղ առկա են (macOS
դիտարկիչներ), մնացած Windows-ի համար՝ Segoe UI-ն, ինչպես մինչ այժմ։ */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Calibri", Arial, sans-serif;
background: var(--bg);
color: var(--text);
margin: 0;
font-size: 14.5px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.with-sidebar { display: flex; align-items: stretch; min-height: 100vh; }
/* --------------------------------- Կողային նավիգացիա --------------------------------- */
.sidebar {
background: linear-gradient(180deg, var(--blue) 0%, var(--blue-dark) 100%);
color: #fff;
width: 260px;
flex: 0 0 260px;
min-height: 100vh;
position: sticky;
top: 0;
align-self: flex-start;
display: flex;
flex-direction: column;
padding: 0;
overflow-y: auto;
}
.sidebar .brand {
display: flex;
align-items: center;
gap: 10px;
white-space: nowrap;
padding: 16px 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.brand-logo {
width: 34px;
height: 34px;
flex: 0 0 auto;
border-radius: 50%;
background: #fff;
object-fit: cover;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}
/* 58-րդ փուլ. Օգտատիրոջ խնդրանքով՝ բոլոր էջերի հուշող/բացատրող տեքստերը
(նախկինում միշտ տեսանելի պարբերությունները) այժմ
թաքցված են ըստ լռելյայնի, և բացվում են միայն այս փոքրիկ, ընկերության
լոգոն կրող կոճակի սեղմումով (վերնագրի կողքին)՝ էջերը մաքուր պահելու
համար։ Տես base.html-ի toggleHelpText() ֆունկցիան։ */
.help-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
margin-left: 8px;
border: none;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 1px rgba(20, 30, 40, 0.18);
cursor: pointer;
vertical-align: middle;
flex: 0 0 auto;
line-height: 0;
}
.help-icon-btn:hover {
box-shadow: 0 0 0 1px rgba(20, 30, 40, 0.4);
}
.help-icon-btn img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
display: block;
}
.help-text {
margin-top: 6px;
}
.brand-text {
font-weight: 700;
font-size: 16.5px;
color: #fff;
letter-spacing: 0.1px;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar nav { flex: 1; padding: 10px 0; }
.sidebar nav a {
display: block;
color: #dce8f7;
text-decoration: none;
font-size: 14px;
padding: 11px 20px;
transition: background-color 0.12s ease, color 0.12s ease;
}
.sidebar nav a:hover, .sidebar nav a.active {
color: #fff;
font-weight: 600;
background: rgba(255, 255, 255, 0.1);
box-shadow: inset 3px 0 0 #fff;
}
.sidebar .userbox {
font-size: 12.5px;
color: #cfe0f2;
padding: 14px 20px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.sidebar .userbox .who { display: block; margin-bottom: 6px; }
.sidebar .userbox a { color: #fff; text-decoration: underline; }
/* 31-րդ փուլ (32-րդ փուլում վերաձևավորված, 44-րդ փուլում` օգտատիրոջ
հստակ խնդրանքով դարձավ սպիտակ գույնի, փոխարինելով նախկին մուգ կարմիր +
սպիտակ եզրագիծ տարբերակին, տես 43-րդ փուլի փոփոխությունը)։ Մենյուի ձախ
ներքևի հատվածում «Omboo թիմ» / «համակարգի հեղինակ և սպասարկող» երկտող
կրեդիտը. առաջին տողը («Omboo թիմ») ավելի մեծ և թավ, երկրորդը
(«համակարգի հեղինակ և սպասարկող», ամբողջությամբ փոքրատառ) ավելի փոքր,
երկուսն էլ սպիտակ, որ լավ ընթեռնելի լինեն մուգ կապույտ sidebar
ֆոնի վրա։ */
.sidebar-credit {
padding: 10px 20px 16px;
display: flex;
flex-direction: column;
gap: 2px;
opacity: 0.9;
}
.sidebar-credit-brand {
color: #fff;
font-weight: 700;
font-size: 15px;
line-height: 1.2;
}
.sidebar-credit-sub {
color: #fff;
font-size: 11px;
line-height: 1.2;
}
.main-area { flex: 1; min-width: 0; }
.container { max-width: 1100px; margin: 26px auto; padding: 0 20px; }
/* --------------------------------------- Քարտեր --------------------------------------- */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
padding: 22px;
margin-bottom: 20px;
/* 52-րդ փուլ. Շատ մեղմ անցում, եթե քարտը երբևէ դառնա clickable
(.card.clickable, տես ստորև)՝ առանց ազդելու սովորական, ոչ-սեղմվող
քարտերի վրա։ */
transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card.clickable { cursor: pointer; }
.card.clickable:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
h1 {
font-size: 23px;
font-weight: 700;
margin: 0 0 16px;
color: var(--blue-darker);
letter-spacing: -0.01em;
}
h2 { font-size: 17px; font-weight: 700; margin: 0 0 12px; color: var(--blue); letter-spacing: -0.005em; }
h3 { font-size: 14.5px; font-weight: 700; margin: 0 0 10px; color: var(--text); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.grid > *, .two-col > * { min-width: 0; }
.stat { background: var(--blue-light); border-radius: var(--radius-sm); padding: 16px 18px; min-width: 0; }
.stat .label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); margin-bottom: 7px; }
.stat .value { font-size: 25px; font-weight: 700; color: var(--blue-darker); font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.stat .delta.up { color: var(--green); font-size: 13px; }
.stat .delta.down { color: var(--red); font-size: 13px; }
/* --------------------------------------- Աղյուսակներ --------------------------------------- */
/* 52-րդ փուլ. Ուսումնասիրելով enterprise տվյալների աղյուսակների UX
պրակտիկան (տես ստորև .table-scroll-ի մեկնաբանությունը հետազոտության
աղբյուրների համար)՝ հանվեց նախկին, հազիվ նկատելի zebra-շերտավորումը
(rgba 0.015 alpha), որովհետև այն, թեև գրեթե անտեսանելի, «բախվում» էր
hover-ի/ընտրված-տողի հետ (հայտնի, կրկնվող դիտողություն մասնագետների
կողմից)։ Փոխարենը՝ մեկ հստակ, մեղմ եղանակ՝ սովորական բարակ բաժանիչ
գիծ ամեն տողի տակ (արդեն կար) + մի փոքր ավելի ընդգծված ներքևի եզրագիծ
վերնագրի (thead) համար՝ որ սյունակների անունները հստակ առանձնանան
տվյալներից («որտեղից սկսվում է իրական տեղեկատվությունը» հարցը
մասնագետների կողմից նշվող ամենահաճախակի խնդիրներից է)։ */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }
th {
color: var(--muted);
font-weight: 700;
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.4px;
border-bottom: 2px solid var(--border-strong);
white-space: nowrap;
}
tr:hover td { background: var(--blue-lighter); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: none; }
/* 52-րդ փուլ. Ամեն աղյուսակ ավտոմատ փաթաթվում է հորիզոնական-ոլորվող
կոնտեյները մեջ (տես base.html-ի DOMContentLoaded script-ը)՝ որ լայն
աղյուսակները (շատ սյունակով, օր.՝ մարքեթոլոգների համեմատական աղյուսակը
կամ «Դերեր և իրավունքներ» մատրիցան) երբեք չհրեն ամբողջ էջը կողքի՝
հորիզոնական scroll ստեղծելով (որը հենց այն «սահմաններից դուրս գալու»
տպավորությունն է, որի մասին օգտատերը գրել էր), այլ մնան իրենց քարտի
սահմաններում՝ միայն իրենք թույլ ոլորվելով, ինչպես միջազգային
dashboard-ներում (Stripe, Linear, ֆինանսական back-office համակարգեր)։ */
.table-scroll { width: 100%; overflow-x: auto; }
.table-scroll table { min-width: 100%; }
/* --------------------------------------- Կոճակներ --------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--blue);
color: #fff;
border: none;
padding: 9px 16px;
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
line-height: 1.3;
transition: background-color 0.12s ease, box-shadow 0.12s ease, transform 0.05s ease, border-color 0.12s ease;
}
.btn:hover { background: var(--blue-dark); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn.secondary { background: #fff; color: var(--blue); border: 1px solid var(--blue); font-weight: 600; }
.btn.secondary:hover { background: var(--blue-light); }
.btn.danger { background: #fff; color: var(--red); border: 1px solid var(--red); font-weight: 600; }
.btn.danger:hover { background: var(--red-bg); }
.btn.small { padding: 5px 10px; font-size: 12.5px; }
/* 52-րդ փուլ. Երրորդային/տեքստային կոճակ՝ ցածր-կարևորության գործողությունների
համար (օր.՝ «Չեղարկել» մոդալներում), որ ամեն կոճակ պարտադիր չհագենա
ամբողջական եզրագծով/ֆոնով և էջը չծանրաբեռնվի կոճակների «աղմուկով»։ */
.btn.ghost { background: none; color: var(--blue); border: 1px solid transparent; font-weight: 600; padding: 9px 12px; }
.btn.ghost:hover { background: var(--blue-lighter); }
/* 52-րդ փուլ. «Segmented» (կպած իրար) կոճակների խումբ՝ փոխարինում է
նախկին, առանձին-առանձին նկարված կոճակների շարքերին (օր.՝ «Հիմնական
բժիշկներ» / «Պոտենցիալ բժիշկներ», կամ «Ցույց ըստ բժշկի/արժեքի/
ծառայության»)։ Enterprise dashboard-ների մեջ (Stripe/Linear-ի ոճով)
ցուցադրման/տեսակի փոխարկիչները միշտ ցուցադրվում են որպես մեկ ամբողջ,
կպած տարր, ոչ թե անկապ առանձին կոճակների շարք՝ հենց այն «անվստահելի/
պատահական հավաքածուի» տպավորությունից խուսափելու համար, որի մասին
օգտատերը գրել էր։ Դասերի անունները (.btn/.btn.secondary) մնում են
անփոփոխ ներսում, միայն արտաքին կոնտեյները-ին ավելացվում է .tab-group։ */
.tab-group {
display: inline-flex;
flex-wrap: wrap;
border-radius: var(--radius-sm);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.tab-group form { margin: 0; }
.tab-group .btn, .tab-group button {
border-radius: 0 !important;
margin: 0;
}
.tab-group .btn.secondary, .tab-group button.secondary {
border-top-width: 1px;
border-bottom-width: 1px;
border-right-width: 0;
}
.tab-group .btn:not(.secondary) + .btn.secondary,
.tab-group .btn.secondary + .btn:not(.secondary) {
border-left: 1px solid var(--blue);
}
.tab-group > *:last-child.secondary { border-right-width: 1px; }
/* --------------------------------------- Ձևեր --------------------------------------- */
input, select {
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 14px;
width: 100%;
color: var(--text);
background: #fff;
transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
input:focus, select:focus {
outline: none;
border-color: var(--blue);
box-shadow: var(--focus-ring);
}
input::placeholder { color: #a7b2c2; }
label { font-size: 12.5px; font-weight: 600; color: var(--muted); display: block; margin-bottom: 4px; }
.field { margin-bottom: 14px; }
.flash { padding: 11px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 14px; }
.flash.success { background: var(--green-bg); color: var(--green); }
.flash.error { background: var(--red-bg); color: var(--red); }
.flash.pending { background: var(--amber-bg); color: var(--amber); }
.auth-wrap { max-width: 380px; margin: 80px auto; }
.auth-wrap .card { padding: 28px; }
.chart-wrap { position: relative; height: 320px; }
.chart-wrap.small { height: 260px; }
/* --------------------------------------- Կարգավիճակի «պիտակներ» --------------------------------------- */
.badge {
display: inline-block;
padding: 3px 10px;
border-radius: 10px;
background: var(--blue-light);
color: var(--blue);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2px;
/* 52-րդ փուլ. Շատ մեղմ ներքին եզրագիծ (currentColor-ի հիման վրա)՝ որ
badge-ը սպիտակ քարտի ֆոնին ունենա հստակ, «պինդ» ուրվագիծ՝ առանց
գույնի հագեցվածությունը փոխելու։ */
box-shadow: inset 0 0 0 1px rgba(15, 53, 115, 0.06);
}
.badge.pending { background: var(--amber-bg); color: var(--amber); }
.badge.sent { background: var(--blue-light); color: var(--blue); }
.badge.confirmed { background: var(--green-bg); color: var(--green); }
.badge.cancelled { background: var(--red-bg); color: var(--red); }
.nav-badge {
display: inline-block;
min-width: 18px;
padding: 1px 6px;
margin-left: 6px;
border-radius: 10px;
background: #e0503e;
color: #fff;
font-size: 11px;
font-weight: 700;
text-align: center;
line-height: 1.6;
vertical-align: middle;
}
.muted { color: var(--muted); font-size: 13px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }
.link-btn {
background: none; border: none; padding: 0; color: var(--blue);
cursor: pointer; font-size: 13px; text-decoration: underline;
}
.doctor-row { cursor: pointer; }
.doctor-row:hover td { background: var(--blue-light); }
.services-row { display: none; }
.services-row.open { display: table-row; }
.services-row td { padding: 0; background: var(--blue-lighter); }
.services-inner { padding: 12px 20px 16px; }
/* Անվտանգության առաջադրանք (Task 9, 2026-09-20)։ Per-service (զգայուն)
մանրամասնության «browser-մակարդակի» թույլ, բայց էժան զսպող միջոցներ.
right-click/ընտրություն սահմանափակում (տես base.html-ի contextmenu/
copy listener-ները) և print-ից թաքցում։ Սա ՄԻԱՅՆ պատահական/անփորձ
փորձերն է դժվարացնում, տեխնիկապես գիտակ մարդուն չի կանգնեցնի (տես
ՀՐԱՀԱՆԳ.md-ի Անվտանգություն բաժինը)։ */
.services-inner { user-select: none; -webkit-user-select: none; -moz-user-select: none; }
@media print {
.services-inner { display: none !important; }
}
.watermark-note {
font-size: 11px; color: var(--muted); margin-bottom: 6px;
font-style: italic; user-select: none;
}
/* Ընդհանուր բացվող վահանակ (ոչ աղյուսակի տող) — Հայտերի վճարում, Ներմուծում */
.expand-panel { display: none; }
.expand-panel.open { display: block; margin-top: 12px; background: var(--blue-lighter); border-radius: var(--radius-sm); }
.expand-panel .services-inner { padding: 10px 16px 14px; }
tr.svc-excluded td { color: var(--muted); text-decoration: line-through; }
tr.svc-excluded td.reason { text-decoration: none; font-style: italic; font-size: 12.5px; }
.checkbox-list { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.checkbox-list label { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text); width: auto; }
.checkbox-list input[type="checkbox"] { width: auto; }
/* 52-րդ փուլ. minmax(0, ...)՝ ընդդեմ CSS Grid-ի հայտնի «blowout» սխալի.
առանց դրա, եթե 1-ին սյունակի պարունակությունը (long text/select) ավելի
լայն է, քան 2fr-ի հաշվարկված տարածքը, grid track-ը ինքնաշխատ մեծանում է
ու հրում 2-րդ/3-րդ սյունակները իրենց քարտից դուրս (հենց «սահմաններից
դուրս գալու» տիպիկ CSS-պատճառներից մեկը)։ */
.exc-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-bottom: 10px; }
.summary-line { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 6px; }
.summary-line .item { min-width: 0; }
.summary-line .item .label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); margin-bottom: 3px; }
.summary-line .item .value { font-size: 19px; font-weight: 700; color: var(--blue-darker); font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.review-total { font-weight: 700; font-size: 16px; color: var(--blue); }
/* --------------------------------------- Ենթացանկեր (dropdown) --------------------------------------- */
.nav-dropdown { display: block; }
.nav-dropdown > .dropdown-toggle {
display: flex; align-items: center; justify-content: space-between;
color: #dce8f7; text-decoration: none; font-size: 14px; cursor: pointer;
padding: 11px 20px;
transition: background-color 0.12s ease, color 0.12s ease;
}
/* 21-րդ փուլ. Ձախ մենյուի յուրաքանչյուր վերին մակարդակի կետի կողքին
բնութագրիչ գունավոր icon (դիզայնի համար)։ .nav-label-ը միավորում է
icon+տեքստը մեկ flex-item-ի մեջ, որ dropdown-toggle-ի space-between-ը
շարունակի ճիշտ հրել caret-ը աջ կողմ։ */
.nav-dropdown > .dropdown-toggle .nav-label {
display: inline-flex; align-items: center; gap: 10px;
}
.nav-icon { width: 17px; height: 17px; flex-shrink: 0; }
.nav-dropdown > .dropdown-toggle .caret { transition: transform 0.15s; font-size: 11px; }
.nav-dropdown.open > .dropdown-toggle .caret { transform: rotate(180deg); }
.nav-dropdown:hover > .dropdown-toggle, .nav-dropdown.active > .dropdown-toggle, .nav-dropdown.open > .dropdown-toggle {
color: #fff; font-weight: 600; background: rgba(255, 255, 255, 0.1); box-shadow: inset 3px 0 0 #fff;
}
.nav-dropdown .dropdown-menu {
display: none; background: rgba(0, 0, 0, 0.16);
}
.nav-dropdown.open .dropdown-menu { display: block; }
.nav-dropdown .dropdown-menu a {
display: block; padding: 9px 20px 9px 38px; color: #dce8f7; text-decoration: none; font-size: 13.5px; margin: 0;
box-shadow: none;
}
.nav-dropdown .dropdown-menu a:hover, .nav-dropdown .dropdown-menu a.active {
background: rgba(255, 255, 255, 0.14); color: #fff; font-weight: 600; box-shadow: none;
}
.promote-card { border: 2px solid var(--blue); }
.promote-filter { width: 100%; margin-bottom: 8px; }
.promote-checklist {
display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto;
border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px;
}
.promote-checklist label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; width: auto; }
.promote-checklist input[type="checkbox"] { width: auto; }
.promote-actions { margin-top: 6px; font-size: 12.5px; }
/* 48-րդ փուլ. Որոնման դաշտի աջ կողմում «X» կոճակ՝ տեքստը արագ մաքրելու համար։ */
.search-with-clear { position: relative; }
.search-with-clear .promote-filter { padding-right: 30px; }
.search-with-clear .clear-search-btn {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
width: 20px; height: 20px; line-height: 18px; text-align: center; padding: 0;
border: none; background: none; color: var(--muted); font-size: 13px; cursor: pointer;
border-radius: 50%;
}
.search-with-clear .clear-search-btn:hover { background: var(--blue-light); color: var(--blue); }
/* 48-րդ փուլ. Հիմնավորման մոդալ պատուհան (2-րդ/3-րդ քայլերի հաստատումից առաջ)։ */
.modal-overlay {
position: fixed; inset: 0; background: rgba(15, 30, 60, 0.45);
display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px;
}
.modal-box {
background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-md);
padding: 22px 24px; max-width: 480px; width: 100%;
}
.modal-box h3 { margin: 0 0 10px; color: var(--blue); font-size: 16px; }
.modal-box textarea { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; font: inherit; resize: vertical; }
.doc-edit input, .svc-edit input { width: 100%; }
.abc-tier-badge { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 700; }
.abc-tier-badge.tier-A { background: var(--green-bg); color: var(--green); }
.abc-tier-badge.tier-B { background: var(--amber-bg); color: var(--amber); }
.abc-tier-badge.tier-C { background: var(--red-bg); color: var(--red); }
/* 41-րդ փուլ. «Դերեր և իրավունքներ» էջի վերակառուցում՝ մեկ դեր + ծալովի
մենյու-խմբեր (փոխարինեց հին դեր×մենյու հսկայական մատրիցային, տես
templates/roles.html)։ */
.perm-group-section {
border: 1px solid var(--border); border-radius: var(--radius-sm);
margin-bottom: 12px; padding: 4px 14px 10px;
}
.perm-group-section summary {
cursor: pointer; font-weight: 700; color: var(--blue); padding: 10px 0; user-select: none;
}
.perm-rows { font-size: 13.5px; }
.perm-rows th, .perm-rows td { text-align: center; white-space: nowrap; padding: 6px 10px; }
.perm-rows td.menu-name, .perm-rows th.menu-name { text-align: left; white-space: normal; }
.perm-rows input[type="checkbox"] { width: auto; }
.perm-rows tbody tr:hover { background: var(--blue-light); }
.request-row td { vertical-align: top; }
.request-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.signed-check { display: flex; align-items: center; gap: 8px; background: var(--amber-bg); border-radius: var(--radius-sm); padding: 8px 12px; margin-top: 8px; }
.factor-controls { display: flex; gap: 16px; flex-wrap: wrap; align-items: end; margin-bottom: 4px; }
.factor-controls .field { min-width: 220px; margin-bottom: 0; }
/* --------------------------------------------------------------------------
15-րդ փուլ. Որոնողական-ընտրության բաղադրիչ (Ծառայության խմբագրում/
արխիվացում)՝ երկար ցանկերում «select»-ի փոխարեն արագ գտնելու համար։
-------------------------------------------------------------------------- */
.search-select { position: relative; }
.search-select-dropdown {
display: none;
position: absolute;
z-index: 20;
top: 100%;
left: 0;
right: 0;
max-height: 220px;
overflow-y: auto;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
margin-top: 4px;
}
.search-select-dropdown.open { display: block; }
.search-select-item { padding: 8px 12px; font-size: 13.5px; cursor: pointer; }
.search-select-item:hover { background: var(--blue-light); }
/* 2026-09-21 (այսօրվա հարցում). «+ Ավելացնել ... որպես նոր կենտրոն»
տարբերակի ընդգծում որոնողական-ընտրության բացվող ցանկում։ */
.search-select-item.search-select-add { color: var(--green); font-weight: 600; border-top: 1px solid var(--border); }
.search-select-item.search-select-add:hover { background: var(--green-bg); }
/* 15-րդ փուլ. Երկմակարդակ («ակորդեոն») խմբավորում՝ Ծառայություններ ըստ
Լաբարատորիայի, Վճարման հայտի ձևում՝ բժիշկներ ըստ Բժշկական կենտրոնի։ */
.group-row { cursor: pointer; background: var(--blue-lighter); }
.group-row:hover td { background: var(--blue-light); }
.group-row td { font-size: 14px; border-bottom: 1px solid var(--border); }
/* 46-րդ փուլի հաջորդ խնդրանք. .group-row-ը հիմա օգտագործվում է նաև
ոչ-
(div-ի վրա հիմնված) ամսվա-բլոկի վերնագրերի համար, օր.՝
Ամսական բոնուսներ էջում, ուր ներսում չկա։ */
.group-row:hover { filter: brightness(0.97); }
/* 15-րդ փուլ. Ձևի ներքևում կպչուն (sticky) գործողության գոտի, որ երկար
ցանկեր պարունակող ձևերում ուղարկելու կոճակը միշտ հասանելի մնա։ */
.sticky-submit-bar {
position: sticky;
bottom: 0;
z-index: 5;
background: var(--surface);
border-top: 1px solid var(--border);
box-shadow: 0 -4px 12px rgba(15, 53, 115, 0.08);
padding: 12px 4px;
margin-top: 16px;
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
/* --------------------------------------------------------------------------
16-րդ փուլ. ABC վերլուծության «խումբ → նկարագրություն» infografika-կաղապար
(հայտում կցված տեղեկատվական պատկերի format-ով), գունավորված A/B/C
կարգավիճակի արդեն գոյություն ունեցող green/amber/red գույներով (տես
.abc-tier-badge) + ընդհանուր կապույտ սլաքով/վերնագրով, որ համապատասխանի
ծրագրի մնացած դիզայնին։
-------------------------------------------------------------------------- */
.abc-infographic {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 18px;
}
.abc-info-row {
display: flex;
align-items: stretch;
gap: 0;
}
.abc-info-box {
flex: 0 0 260px;
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
padding: 14px 18px;
display: flex;
flex-direction: column;
justify-content: center;
border-left: 5px solid transparent;
}
.abc-info-box.tier-A { background: var(--green-bg); border-left-color: var(--green); }
.abc-info-box.tier-B { background: var(--amber-bg); border-left-color: var(--amber); }
.abc-info-box.tier-C { background: var(--red-bg); border-left-color: var(--red); }
.abc-info-box .abc-info-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.abc-info-box.tier-A .abc-info-title { color: var(--green); }
.abc-info-box.tier-B .abc-info-title { color: var(--amber); }
.abc-info-box.tier-C .abc-info-title { color: var(--red); }
.abc-info-box .abc-info-sub { font-size: 13px; color: var(--text); }
.abc-info-arrow {
flex: 0 0 44px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(90deg, var(--blue) 0%, var(--blue-dark) 100%);
color: #fff;
font-size: 18px;
}
.abc-info-detail {
flex: 1 1 auto;
background: var(--blue-lighter);
border-radius: 0;
padding: 14px 18px;
display: flex;
align-items: center;
font-size: 13.5px;
}
.abc-info-detail strong { color: var(--blue); }
/* 17-րդ փուլ. Յուրաքանչյուր A/B/Գ տողի աջ ծայրում «Ցուցակ» կոճակ, որ բացում է
տվյալ խմբի բժիշկների ցանկը (անուն/գումար/անհատական տոկոս) ստորև։ */
.abc-info-toggle {
flex: 0 0 auto;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
align-self: stretch;
white-space: nowrap;
}
.abc-info-list-panel { margin: -6px 0 10px; }
.abc-info-list-panel .services-inner {
background: var(--blue-lighter);
border-radius: var(--radius-sm);
padding: 10px 16px 14px;
}
@media (max-width: 700px) {
.abc-info-row { flex-direction: column; }
.abc-info-box, .abc-info-detail, .abc-info-toggle { border-radius: var(--radius-sm); }
.abc-info-box { border-left: none; border-top: 5px solid transparent; }
.abc-info-box.tier-A { border-top-color: var(--green); }
.abc-info-box.tier-B { border-top-color: var(--amber); }
.abc-info-box.tier-C { border-top-color: var(--red); }
.abc-info-arrow { flex-basis: 32px; transform: rotate(90deg); }
}
@media (max-width: 900px) {
body.with-sidebar { flex-direction: column; }
.sidebar { width: 100%; flex-basis: auto; min-height: auto; position: static; }
.container { margin: 16px auto; }
/* 26-րդ փուլում այստեղ էր՝ table{display:block;overflow-x:auto;
white-space:nowrap}, որ հեռախոսի լայնությամբ շատ սյունակ ունեցող
աղյուսակները հորիզոնական ոլորմամբ դարձնեին։ 52-րդ փուլում այս
մեխանիզմը փոխարինվեց ավելի ընդհանուր .table-scroll փաթաթող
կոնտեյները-ով (տես վերևում, Աղյուսակներ բաժնում, և base.html-ի
script-ը), որը աշխատում է ԲՈԼՈՐ էկրանի լայնություններով, ոչ միայն
հեռախոսի, և թողնում է, որ երկար տեքստը բնականոն կերպով բազմատող
դառնա՝ առանց ամբողջ աղյուսակը մեկ տողի մեջ սեղմելու
(white-space:nowrap-ի փոխարեն)։ */
}
/* --------------------------------------- 26-րդ փուլ. Այցեր 2.0 / Մարքեթինգի կարգավորումներ --------------------------------------- */
/* Բժշկի կենսացիկլի կարգավիճակների badge-երը («Այցեր» ձևի բժիշկների ցանկում,
«Իմ բժիշկների բազան» հաշվետվության բլոկում)։ */
.badge.status-active { background: var(--green-bg); color: var(--green); }
.badge.status-growing { background: var(--blue-light); color: var(--blue); }
.badge.status-new { background: var(--blue-light); color: var(--blue); }
.badge.status-at_risk { background: var(--amber-bg); color: var(--amber); }
.badge.status-lost { background: var(--red-bg); color: var(--red); }
.badge.status-potential { background: #f1f1f4; color: var(--muted); }
/* Ուղիղ 3-գույնանի կլորակ («լուսացույց»)՝ պլանի կատարման/ծածկույթի % համար։ */
.traffic-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.traffic-dot.green { background: var(--green); }
.traffic-dot.yellow { background: var(--amber); }
.traffic-dot.red { background: var(--red); }
/* KPI քարտեր (Մ-2/Մ-3 բլոկներ)՝ .grid-ի ներսում, .stat-ից մի փոքր ավելի հարուստ։ */
.kpi-card { background: var(--blue-light); border-radius: var(--radius-sm); padding: 14px 16px; min-width: 0; }
.kpi-card .label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); margin-bottom: 6px; }
.kpi-card .value { font-size: 22px; font-weight: 700; color: var(--blue-darker); display: flex; align-items: center; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.kpi-card .hist { font-size: 12px; color: var(--muted); margin-top: 4px; }
/* «Այցեր» ձևի «Ո՞ւմ մոտ գնալ» վահանակ և «Մարքեթինգի կարգավորումներ» էջի
ենթաբաժինների վերնագրեր՝ ընդհանուր բացվող բլոկների կաղապար։ */
.settings-section { margin-bottom: 26px; }
.settings-section:last-child { margin-bottom: 0; }
.settings-section h3 { margin: 0 0 10px; font-size: 14.5px; color: var(--blue); }
.mini-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mini-table th, .mini-table td { padding: 6px 8px; border-bottom: 1px solid #eef1f6; text-align: left; }
.mini-table th.num, .mini-table td.num { text-align: right; }
.doctor-pick-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid #eef1f6; flex-wrap: wrap; }
.doctor-pick-row:last-child { border-bottom: none; }
.doctor-pick-row .dp-main { display: flex; align-items: center; gap: 8px; min-width: 220px; flex: 1 1 auto; }
.doctor-pick-row .dp-extra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.doctor-pick-row .dp-extra select, .doctor-pick-row .dp-extra input { width: auto; }
.char-count { font-size: 11.5px; color: var(--muted); text-align: right; margin-top: 2px; }
.who-to-visit-panel { margin-bottom: 18px; }
.who-to-visit-panel .wtv-toggle {
display: flex; align-items: center; justify-content: space-between;
cursor: pointer; padding: 10px 14px; background: var(--blue-light); border-radius: var(--radius-sm);
}
.who-to-visit-panel .wtv-toggle .caret { transition: transform 0.15s; }
.who-to-visit-panel .wtv-toggle.open .caret { transform: rotate(180deg); }
.who-to-visit-panel .wtv-body { display: none; padding: 10px 4px 4px; }
.who-to-visit-panel .wtv-body.open { display: block; }
.wtv-list-title { font-weight: 600; font-size: 13px; margin: 12px 0 6px; color: var(--muted); }
.wtv-list-title:first-child { margin-top: 0; }
.wtv-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid #eef1f6; font-size: 13.5px; }
.wtv-row:last-child { border-bottom: none; }