/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

 body.main {
    margin-left: 270px;
    margin-right: 15px;
 }
 /* Semantic UI imposta html,body{height:100%}: il contenuto straborda dal box del
    body ed il suo padding-bottom viene ignorato. Lo spazio in fondo alla pagina si
    ottiene con uno spaziatore in flusso, senza toccare l'altezza del body (da cui
    dipende il calcolo di posizione dei popup di Semantic UI). */
 body.main::after {
    content: "";
    display: block;
    height: 10px;
 }

/* table caption */
caption {
    text-align:left;
}

.padding-0 {padding:0 !important; }
.margin-0 {margin:0 !important; }
.mb-0 {margin-bottom: 0 !important;}
.mb-5 {margin-bottom: 5px !important;}
.mb-10 {margin-bottom: 10px !important;}
.mb-20 {margin-bottom: 20px !important;}

.mt-0 {margin-top: 0 !important;}
.mt-5 {margin-top: 5px !important;}
.mt-10 {margin-top: 10px !important;}
.mt-20 {margin-top: 20px !important;}

.mr-0 {margin-right: 0 !important;}
.mr-5 {margin-right: 5px !important;}

.pb-0 {padding-bottom: 0 !important;}
.pb-5 {padding-bottom: 5px !important;}
.pb-10 {padding-bottom: 10px !important;}
.pb-20 {padding-bottom: 20px !important;}

.pt-0 {padding-top: 0 !important;}
.pt-5 {padding-top: 5px !important;}
.pt-10 {padding-top: 10px !important;}

.border-left { border-left: 1px solid #d4d4d5; }
.border-right { border-right: 1px solid #d4d4d5; }
.border-top { border-top: 1px solid #d4d4d5; }
.border-bottom { border-bottom: 1px solid #d4d4d5; }

.width-25 { width: 25%; }
.width-50 { width: 50%; }
.width-75 { width: 75%; }
.width-100 { width: 100%; }

.pull-right { float: right; }
.pull-left { float: left; }
.defloater { clear: both; float: none; }
.display-block { display: block; }

.label-default { background-color: #777; }
.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}
.color-red { color: red; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-muted { color: #6c757d; }
.text-primary { color: #337ab7; }
a.text-primary:hover, a.text-primary:focus { color: #286090; }
.text-success { color: #3c763d; }
a.text-success:hover, a.text-success:focus { color: #2b542c; }
.text-info { color: #31708f; }
a.text-info:hover, a.text-info:focus { color: #245269; }
.text-warning { color: #8a6d3b; }
a.text-warning:hover, a.text-warning:focus { color: #66512c; }
.text-danger { color: #a94442; }
a.text-danger:hover, a.text-danger:focus { color: #843534; }
.checkbox-text {
    display: inline-block;
    margin-bottom: 5px;
    margin-top: -6px;
    vertical-align: middle;
}
a.dark-link {
    color: rgba(0,0,0,.87);
    padding:.92857143em 0;
}
.btn-as-link {
    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
    background-color: transparent;
    border: transparent;
    color: rgba(0,0,0,.87);
    padding:.92857143em 0;
}
a.btn-as-link:hover {
    color: rgba(0,0,0,.87);
}
.ui.inverted.menu .ui.dropdown .menu .item.btn-as-link {
    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
    background-color: transparent;
    border: transparent;
    color: rgba(0,0,0,.87) !important;
    padding:.78571429em 1.14285714em;
    font-weight: 400;
}
.ui.menu .ui.dropdown .menu .item .icon:not(.dropdown) {
    display: inline-block;
    font-size: 1em !important;
    float: none;
    margin: 0 .75em 0 0 !important;
}
.ui.menu .ui.dropdown .menu .item .icon.trash {
    width: 1.18em;
}
.ui.menu .ui.dropdown .menu .item.button.btn-as-link:hover {
    background-color:#f2f2f2;
}
.btn-as-link:hover {
    cursor: pointer;
}
.btn-as-link.disabled:hover {
    cursor: not-allowed;
}

.ui.popup { z-index: 10000 !important; }

/* Table row link */
table thead tr {
    background-color: transparent !important;
}
table thead tr th {
   color:#1B1C1D !important;
}
table tbody tr {
    background-color: transparent !important;
}
table tr[data-href] {
    cursor: pointer;
}
.selectable tr {
   cursor: pointer;
}
.ui.basic.striped.table tbody tr td table.table-transparent tbody tr {
    background-color: transparent !important;
}
.ui.basic.striped.table tbody tr td table.table-transparent tbody tr td {
    border-top: 0;
}

/* Text sizing */
.small.text {
   font-size: 11px;
}
.large.text {
   font-size: 2rem;
}
.lightgray.text {
   color:lightgray;
}
.grey.text {
   color:silver
}

/* Dashboard sizing */
.segment.dashboard {
   height: 200px;   
}
.segment.dashboard h4 {
   margin-bottom:0px;  
}
.dashboard .scrollable {
   margin:0px;
   padding:0px;
   height: 80%;
   overflow-y: scroll;
 }

/* Overlay text */
.overlay.top {
   position: absolute;
   top: 15px;
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 18px;
 }
.overlay.bottom {
   position: absolute;
   bottom: 0px;
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 12px;
 }

 /* Table styles */
.ui.basic.table thead tr {
    background-color: #1B1C1D;
}
.ui.basic.table thead tr th {
    color: #FFF;
}
.ui.table.borderless tr th { border-bottom: 0px !important; }
.ui.table.borderless tr td { border-top: 0px !important; }
.ui.basic.table tbody tr:nth-child(even) {
    background-color: #E0E1E2;
}
.ui.table[class*="very basic"]:not(.sortable):not(.striped) thead tr:first-child th,
.ui.table[class*="very basic"]:not(.sortable):not(.striped) th:first-child,
.ui.table[class*="very basic"]:not(.sortable):not(.striped) td:first-child {
    padding: 0.92857143em 0.78571429em;
}
.ui.compact.table[class*="very basic"]:not(.sortable):not(.striped) thead tr:first-child th,
.ui.compact.table[class*="very basic"]:not(.sortable):not(.striped) th:first-child,
.ui.compact.table[class*="very basic"]:not(.sortable):not(.striped) td:first-child {
    padding-top: 3px;
    padding-bottom: 3px;
}

pre {
   white-space: pre-wrap; 
   word-break: break-word;
   overflow: scroll;
   display: grid;
}
.table-two-cols-fifty-fifty tbody tr td {
    width: 50%;
}

.ui.slim.table {margin-top: 0 !important;}
.ui.slim.table tr th,
.ui.slim.table tr td  {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

 /* Pagination */
.pagination {
    text-align: center;
}
.pagination a, .pagination em, .pagination span {
    margin-right: 5px;
    border: 1px solid #666;
    border-radius: 5px;
    padding: 3px 7px;
}
.pagination em {
    background-color: #666;
    color: #fff;
}
.pagination span, .pagination span.gap, .pagination a.previous_page, .pagination a.next_page {
    border: none;
}

/* Tab Nav */
.nav.nav-tabs {
    margin-bottom: -1px;
}
.nav.nav-tabs .nav-item {
    padding: 1rem;
    border: 1px solid #e8e9e9;
    display: inline-block;
    background-color: #f2f2f2;
    -moz-border-radius: 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
}
.nav.nav-tabs .nav-item.active {
    background-color: #fff;
    border-bottom: 1px solid #fff;
}
.nav.nav-tabs a.nav-item {
    color: #1B1C1D;
}
.tab-content .tab-pane {
    display: none;
}
.tab-content .tab-pane.active {
    display: block;
    border: 1px solid #e8e9e9;
    padding: 1rem;
    -moz-border-radius: 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 0px 5px 5px 5px;
}

/* Generic */
.hidden {
    display: none;
}
.defloater {
    float: none;
    clear: both;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
}
.margin-zero {
    margin: 0;
}
.ui.header:first-child.margin-zero, .ui.table.margin-zero, .ui.dividing.header {
    margin: 0;
}
.twenty-line-spacer {
    margin-top: 20px;
    height: 1px;
    width: 100%;
    margin-bottom: 20px;
    background-color: #1B1C1D;
}
.bottom-buttons {
    margin-bottom: 20px;
}
.ui.form select.date-select {
    display: inline-block;
    width: 33%;
}
.fields-view .field {
    margin-bottom: 15px;
}
.fields-view .field:last-of-type {
    margin-bottom: 25px;
}
.fields-view .field label {
    display: block;
    margin: 0 0 .28571429rem 0;
    color: rgba(0, 0, 0, .87);
    font-weight: 700;
    text-transform: none;
}
.fields-view .field div {
    margin: 0;
    outline: 0;
    line-height: 1.21428571em;
    padding: .67857143em 1em;
    font-size: 1em;
    background: #fff;
    border: 1px solid rgba(34,36,38,.15);
    color: rgba(0,0,0,.87);
    border-radius: .28571429rem;
}
.stock-item-categories-box {
    max-height: 300px;
    overflow: auto;
}

/* Bootstrap inherit */
.poste-tlg-files-card {
    width: 50% !important;
}
@media (min-width:1025px) and (max-width:1280px) {
    .poste-tlg-files-card {
        width: 75% !important;
    }
}
@media (max-width:1024px) {
    .poste-tlg-files-card {
        width: 100% !important;
    }
}
.shadow {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}
.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
    margin-top: 20px;
    margin-bottom: 20px;
}
.card-body {
    flex: 1 1 auto;
    padding: 1.25rem;
}
.pt-3 {
    padding-top: 1rem !important;
}
.table {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
}
.table-sm td, .table-sm th {
    padding: .3rem;
}
.bg-success {
    background-color: #28a745 !important;
}
.bg-warning {
    background-color: #ffc107 !important;
}
.bg-danger {
    background-color: #dc3545 !important;
}
.bg-secondary {
    background-color: #6c757d !important;
}
.bg-primary {
  background: #e6eff8 !important; /* semantic primary light */
  border-radius: 4px;
}
.border-primary {
  border-left: 5px solid #c7def5 !important; /* semantic primary light */
  border-radius: 4px;
}
.inline {
    display: inline-block;
}

/* Other */
.top-links {
    width: 100%;
    text-align: right;
    margin-top: 10px;
    margin-right: 10px;
}
.top-links a {
    color: #fff;
}
.badge {
    display: inline-block;
    padding: 0.4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.badge-secondary {
    color: #fff;
    background-color: #6c757d;
}
.ui.menu .item > i.icon.left {
    float: none;
    margin-left: 0;
}

/* Tabs size */
.thin-tab.ui.menu .item {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

/* Home page */
.ui.segment.hp-ruby-version {
    background-color: #f3f4f5;
}
.hp-ruby-version img.ui.fluid.image {
    display: inline-block;
}
.hp-ruby-version .overlay.bottom {
    bottom: 10px;
}

/* Netmap */
.netmap-codice-egon {
    color: #fff;
    background-color: #6c757d;
    margin-bottom: 10px;
    margin-right: 10px;
}
.netmap-risultati-copertura-wrapper {
    margin-bottom: 20px;
}
.netmap-risultati-intro {
    margin-top: 10px;
    border-bottom: 1px solid rgba(34, 36, 38, .15);
    padding-bottom: 10px;
    margin-bottom: 10px;
}
ul.netmap-risultati-menu {
    list-style: none;
    padding: 0;
    border-bottom: 1px solid rgba(34, 36, 38, .15);
    display: flex;
    margin-bottom: 0;
}
ul.netmap-risultati-menu li {
    display: inline-block;
    padding: 10px;
    border: 1px solid rgba(34, 36, 38, .15);
    background-color: #e5e5e5;
    margin-right: 10px;
    margin-bottom: -1px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
}
ul.netmap-risultati-menu li.selected {
    border-bottom: 1px solid #fff;
    background-color: #fff;
}
ul.netmap-risultati-menu li a {
    display: block;
}
.netmap-risultati {
    border-left: 1px solid rgba(34, 36, 38, .15);
    border-right: 1px solid rgba(34, 36, 38, .15);
    border-bottom: 1px solid rgba(34, 36, 38, .15);
    padding: 10px;
}
.netmap-risultato-element h3.ui.dividing.header {
    padding: 10px;
    background-color: #1b1c1d;
    color: #fff;
    -moz-border-radius: 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
}
.netmap-risultato .ui.basic.table.netmap-risultato-table {
    border-left: 1px solid rgba(34, 36, 38, .15);
    border-right: 1px solid rgba(34, 36, 38, .15);
    border-bottom: 1px solid rgba(34, 36, 38, .15);
    margin-top: -2px;
}
.netmap-risultato {
    display: flex;
    flex-wrap: wrap;
}
.netmap-risultato.hidden {
    display: none;
}
.netmap-risultato-element {
    width: CALC(50% - 10px);
    margin-bottom: 30px;
}
.netmap-risultato-element:nth-of-type(even) {
    margin-left: 20px
}
.netmap-risultato .ui.basic.table.netmap-risultato-table:last-of-type {
    margin-bottom: 0;
}
@media (max-width:1024px) {
    .netmap-risultato-left-col, .netmap-risultato-right-col {
        float: none;
        width: 100%;
    }
}
.open-fiber-stato-vendibile {
    background-color: #28a745;
    color: #fff;
}
.open-fiber-stato-limitata {
    background-color: #ffc107;
    color: #fff;
}
.open-fiber-stato-non-vendibile {
    background-color: #dc3545;
    color: #fff;
}
.netmap-field {
    position: relative;
}
.netmap-field .ui.selection.dropdown {
    width: 100%;
}
.netmap-field-disable img {
    width: 20px;
    margin-top: 10px;
}
.netmap-field-disable {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
    border-radius: 5px;
    text-align: center;
}
.ui.menu .item > .label.label-wilink-clients {
    background-color: #337ab7;
    margin-left: 0;
}
.ui.menu .item > .label.label-wilink-radios {
    background-color: #5bc0de;
}
.gm-style-iw-chr {
    height: 15px;
}


/* SCROLL */
.scroll-column {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;       /* o altezza fissa se preferisci */
  max-height: 100vh;  /* evita overflow fuori dallo schermo */
  padding-right: 10px; /* evita che la scrollbar copra il contenuto */
}


/* BUTTON IN MENU DROPDOWN */
.ui.dropdown .menu .dropdown-form {
  width: 100%;
  margin: 0;
}
.ui.dropdown .menu .dropdown-form button {
  width: 100%;
  text-align: left;
}


/* ICONA IMMAGINE NEI TITOLI/BREADCRUMB */
.header-icon-img {
  height: 24px;
  width: auto;
  vertical-align: middle;
  margin-right: 6px;
  display: inline-block;
}


/* SELEZIONE UNIT/PORTE GPON (form email ai clienti) */
.gpon-unit {
  border: 1px solid #e0e3e8;
  border-radius: 6px;
  background-color: #fff;
  margin-bottom: 10px;
}
.gpon-unit-header {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  background-color: #f8fafc;
  border-bottom: 1px solid #e0e3e8;
  border-radius: 6px 6px 0 0;
}
.gpon-unit-header input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0 10px 0 0;
  accent-color: #2185d0;
  cursor: pointer;
}
.gpon-unit-header label {
  cursor: pointer;
  user-select: none;
}
.gpon-unit-slot {
  font-weight: 700;
  color: #0f172a;
}
.gpon-unit-product {
  margin-left: 6px;
  color: #64748b;
  font-size: 12px;
}
.gpon-unit-count {
  margin-left: auto;
  color: #94a3b8;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.gpon-ports {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 14px;
}
.gpon-port input[type="checkbox"] {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}
.gpon-port label {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background-color: #fff;
  color: #475569;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}
.gpon-port label:hover {
  border-color: #2185d0;
  color: #2185d0;
}
.gpon-port input[type="checkbox"]:checked + label {
  background-color: #2185d0;
  border-color: #2185d0;
  color: #fff;
}
.gpon-port input[type="checkbox"]:focus + label {
  box-shadow: 0 0 0 2px rgba(33, 133, 208, 0.35);
}

/* Autocompletamento seriali ottiche (form endpoint GPON) */
.serial-autocomplete {
    position: relative;
}
.serial-autocomplete > ul {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    margin: 2px 0 0 0;
    padding: 0;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid rgba(34, 36, 38, .15);
    border-radius: .28571429rem;
    box-shadow: 0 2px 4px 0 rgba(34, 36, 38, .12);
}
.serial-autocomplete > ul > li {
    padding: .5em .8em;
    cursor: pointer;
    font-family: monospace;
}
.serial-autocomplete > ul > li:hover {
    background: #f8f8f9;
}

/* Dettaglio CDR Trivenet VoIP */
.cdr-show {
    background: #f7f8fa !important;
}
.cdr-hero {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    padding: 28px 24px;
    border-radius: 12px;
    background: linear-gradient(135deg, #1b1c1d 0%, #2c3e50 100%);
    color: #fff;
}
.cdr-party {
    text-align: center;
    min-width: 0;
}
.cdr-party-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(33, 133, 208, .25);
    color: #6cb4ee;
    font-size: 1.4em;
    margin-bottom: 8px;
}
.cdr-party-avatar i.icon {
    margin: 0;
}
.cdr-party-avatar-dest {
    background: rgba(0, 181, 173, .25);
    color: #4fd1c5;
}
.cdr-party-label {
    font-size: .75em;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .6;
}
.cdr-party-number {
    font-size: 1.6em;
    font-weight: 700;
    margin: 4px 0;
    word-break: break-all;
}
.cdr-party-sub {
    font-size: .9em;
    opacity: .75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cdr-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 200px;
}
.cdr-flow-line {
    position: relative;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #6cb4ee, #4fd1c5);
}
.cdr-flow-line i.icon {
    position: absolute;
    right: -8px;
    top: -9px;
    color: #4fd1c5;
    margin: 0;
}
.cdr-flow-duration {
    font-size: 1.1em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.cdr-status {
    display: inline-block;
    padding: .35em .9em;
    border-radius: 999px;
    font-size: .85em;
    font-weight: 600;
    white-space: nowrap;
}
.cdr-status-success { background: #d4f5e2; color: #1a7f45; }
.cdr-status-warning { background: #fff1d6; color: #9a6200; }
.cdr-status-error   { background: #fde2e1; color: #b42318; }
.cdr-status-neutral { background: #e9ecef; color: #495057; }

.cdr-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin: 20px 0;
}
.cdr-stat {
    background: #fff;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.cdr-stat-label {
    font-size: .75em;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #8a8f98;
}
.cdr-stat-value {
    font-size: 1.35em;
    font-weight: 700;
    color: #1b1c1d;
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}
.cdr-stat-sub {
    font-size: .85em;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cdr-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}
.cdr-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    overflow: hidden;
}
.cdr-card-header {
    padding: 10px 16px;
    font-weight: 700;
    border-left: 4px solid #767676;
    background: #fafbfc;
    border-bottom: 1px solid #eef0f2;
}
.cdr-accent-blue   { border-left-color: #2185d0; }
.cdr-accent-teal   { border-left-color: #00b5ad; }
.cdr-accent-violet { border-left-color: #6435c9; }
.cdr-accent-green  { border-left-color: #21ba45; }
.cdr-accent-red    { border-left-color: #db2828; }
.cdr-accent-grey   { border-left-color: #767676; border-top: 1px solid #eef0f2; }
.cdr-dl {
    display: grid;
    grid-template-columns: 40% 60%;
    margin: 0;
    padding: 4px 16px 8px;
}
.cdr-dl dt, .cdr-dl dd {
    margin: 0;
    padding: 7px 0;
    border-bottom: 1px solid #f1f3f5;
}
.cdr-dl dt {
    color: #8a8f98;
}
.cdr-dl dd {
    word-break: break-word;
}
.cdr-dl dt:nth-last-of-type(1), .cdr-dl dd:last-child {
    border-bottom: none;
}
.cdr-mono {
    font-family: monospace;
}
.cdr-muted {
    color: #8a8f98;
    font-size: .9em;
}
.cdr-code {
    display: inline-block;
    min-width: 36px;
    padding: .2em .5em;
    margin-right: 4px;
    border-radius: 6px;
    background: #e9ecef;
    color: #495057;
    font-weight: 700;
    text-align: center;
}
@media (max-width: 768px) {
    .cdr-hero { grid-template-columns: 1fr; }
    .cdr-cards { grid-template-columns: 1fr; }
}

/* Ricerca CDR Trivenet VoIP */
.cdr-search {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 4px 16px rgba(0, 0, 0, .04);
    border: 1px solid #eef0f2;
    margin-bottom: 20px;
    overflow: hidden;
}
.cdr-search-form {
    padding: 18px 20px 20px;
}
.cdr-search-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 14px;
    align-items: end;
}
.cdr-search-grid > .field {
    margin: 0 !important;
}
.ui.form .cdr-search-grid .field > label {
    font-size: .75em;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #8a8f98;
    font-weight: 600;
}
.ui.form .cdr-search-grid .ui.input > input {
    border-radius: 8px;
    background: #f7f8fa;
    border-color: #e3e6ea;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.ui.form .cdr-search-grid .ui.input > input:focus {
    background: #fff;
    border-color: #2185d0;
    box-shadow: 0 0 0 3px rgba(33, 133, 208, .15);
}
.ui.form .cdr-search-grid .ui.input > input:focus ~ i.icon {
    color: #2185d0;
    opacity: 1;
}
.ui.form .cdr-search-grid select.cdr-select {
    height: 38px;
    border-radius: 8px;
    background-color: #f7f8fa;
    border-color: #e3e6ea;
}
.ui.form .cdr-search-grid select.cdr-select:focus {
    background-color: #fff;
    border-color: #2185d0;
    box-shadow: 0 0 0 3px rgba(33, 133, 208, .15);
}
.cdr-search-actions {
    display: flex;
    gap: 6px;
}
.cdr-search-actions .ui.button {
    margin: 0;
    border-radius: 8px;
}
.ui.primary.button.cdr-search-submit {
    padding-left: 1.8em;
    padding-right: 1.8em;
    background: linear-gradient(135deg, #2185d0 0%, #00b5ad 100%);
    box-shadow: 0 2px 6px rgba(33, 133, 208, .3);
}
.ui.primary.button.cdr-search-submit:hover {
    filter: brightness(1.07);
}
.cdr-search-summary {
    padding: 10px 20px;
    border-top: 1px solid #eef0f2;
    background: #fafbfc;
    color: #6c757d;
    font-size: .9em;
}
.cdr-search-summary strong {
    color: #1b1c1d;
}
.cdr-search-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cdr-search-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}
@media (max-width: 1100px) {
    .cdr-search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cdr-search-actions { grid-column: 1 / -1; }
    .cdr-search-submit { flex: 1; }
}
@media (max-width: 600px) {
    .cdr-search-grid { grid-template-columns: 1fr; }
}